UX/UI вакансияларының 51%-ында дизайн-жүйе сұралады: өз жүйең болмаса, кейске нені саласың

«Design system» деген талап нені тексереді

15 қазанда лентада 34 компаниядан UX/UI дизайнер бойынша 39 бос орын тұр. Солардың 51%-ында дизайн-жүйе аталады — бұл прототиптен (36%) де, зерттеуден (23%) де жиі; алда тек Figma, 67%. Бөлек рөл ретінде де көбейді: Design System дизайнер вакансиялары қазір 16, ал 15 қыркүйекте 5 еді. Бастаушыға арналғаны мүлде жоқ: бесеуі middle, бесеуі senior, біреуі lead. Жалақысы да сәл жоғары: жалақысы көрсетілген 9 вакансия бойынша шамамен 425 000 ₸, ал UX/UI-да осындай 20 вакансия бойынша 400 000 ₸.

Талаптағы бұл сөз «бізге нөлден кітапхана құрып бер» дегенді сирек білдіреді. Сөздікте дизайн-жүйе дегеніміз — компоненттер, аты бар мәндер және құжаттамасы бар ережелер жиыны; оны әдемі экрандар жинағынан ажырататыны — артында командалардың келісімі тұрады. Жұмыс беруші макетті бір-бірлеп емес, ережемен жұмыс істей аласың ба, соны тексереді.

Бір компонентті аяғына дейін жеткізу

Ең жұмысқа жарамды дайындама — ескі жобаңнан бәрінде кездесетін бір элементті алу: енгізу өрісі, батырма, тауар карточкасы. Және оны командаға жинағандай жинау:

• барлық күйі: әдеттегі, курсор астындағы, басылған, өшірілген, қателі, жүктелу кезіндегі, бос;
• нұсқалары: өлшемдері, сол және оң жақтағы белгіше, сыймай қалатын ұзын мәтін;
• тар экрандағы мінезі: не тасымалданады, не қиылады.

Қасына «бұрын қалай еді» скриншотын қой: әр экраннан алынған, биіктігі де, көгі де әртүрлі алты батырма. Осы екі сурет сенің жұмысыңды бір абзац мәтіннен тез түсіндіреді. Элемент біреу болса, кейс бір минутта оқылады — кейсті қалай құрастыру керегін бөлек талдағанбыз.

Мәндерге ат бер және тексеруді көрсет

Жұмыстың екінші жартысы — мәндер. Аты бар түс, шегініс, радиус пен қаріп өлшемі бүкіл экранды қолмен түзетпей, бір жерден өзгереді; Figma-да бұл үшін айнымалылар бар, ал режимдер сол макетте ашық және қараңғы тақырыпты ауыстыруға мүмкіндік береді (Figma құжаттамасы). Кейсте аттар тізімін және режимді ауыстырғанда қайта боялған бір экранды көрсету жеткілікті.

Одан кейінгісі — көрсетілімді әңгімеден ажырататын нәрсе: тексеру. Қолжетімділік Design System дизайнер вакансияларының 25%-ында сұралады, ал оның ең қарапайым дәлелі өлшенеді. W3C ұсынымы бойынша кәдімгі мәтіннің фонмен контрасты 4,5:1-ден, ірі мәтінде 3:1-ден төмен болмауы керек. Түстеріңді кез келген контраст тексергішінен өткіз де, қай сұр реңк өтпей қалғанын және оны неге ауыстырғаныңды көрсет. Бұл кейстегі бір жол, бірақ ол сенің көзмөлшермен емес, өлшеп жұмыс істейтіңді бірден айтады.

Үшіншісі — компонентке үш жол құжаттама: қашан қолдану керек, қашан қолданбау керек, нені өзгертуге болмайды. Компоненттер жиыны жүйеге айналу үшін көбіне дәл осы жетпейді. Командада бағаланатын соңғы нәрсе: қабаттар мен нұсқалардың аты элементтің кодтағы атымен сәйкес келуі — әзірлеушіге макеттен тыс тағы не керегін хендофф туралы материалда жазғанбыз.

Немен аяқталды және онда нақты сенің үлесің қандай

Оқу жұмысының да нәтижесі болады, оны адал атаған жөн: «14 экранды ортақ компоненттерге көшірдім, екеуінде ескі нұсқа қалды — онда бөлек логика бар». Сан орнына байқалған өзгеріс жазу — қалыпты жайт: макет тезірек жиналады, түс түзетулері экрандарға тарамайтын болды. Ойдан шығарылған пайыз пайыздың жоқтығынан да жаман: сұхбатта кейсті талдағанда оны қалай санағаныңды сұрайды.

Жүйе командалық болса, не істегеніңді және не істемегеніңді бір сөйлеммен айт — бұл жағдайдың талдауы анықтамалықта бар: жұмыс NDA астында немесе командамен жасалса. «Біз кітапханаға тәртіп орнаттық» деген сөз сұхбатта әрқашан қолайсыз сұраққа айналады.

Не істеу керек

Өзің жасаған жұмыстан бір компонент таңда да, бір кеште оны күйлері, нұсқалары және үш жол ережесімен толықтыр. Екінші кеш — мәндердің аттары мен контраст тексеруі. Үшінші кеш — кейс беті: не дұрыс емес еді, қандай таңдау болды, не шықты, қайсысы сенікі. Түйіндемедегі «дизайн-жүйемен жұмыс істедім» деген сөздің орнына UX/UI вакансияларының жартысына ашып көрсететін нәрсең болуы үшін осы жеткілікті.