Дизайн құралдары ескірген. Міне, біз оларды қалай түзетуге болатынын білеміз.

Күн сирек өтеді, онда мен дизайнерлік құралдар туралы ойлауға аз уақыт жұмсамаймын. Бірнеше жыл бұрын мен Marvel сатып алған дизайн құралын жасадым. Бұл екі жыл бұрын болды, бірақ содан бері ландшафт өзгерген жоқ, оны жақсартуға деген құштарлығым да болған жоқ.

Жақында мен дизайн құралдары туралы жаздым - бұл уақыт өткен сайын белгілі болатын нәрсе.

Сол күні мен өз ойымды айтқан жалғыз адам емес едім, басқалары да шаттана қарады.

28 шілде 2017 жыл дизайнерлік құралдар үшін жақсы күн болған жоқ.

Твиттердегі көптеген түсініктер көп, бірақ ұзақ уақыт бойы мен қазіргі дизайнерлік құралдар моделі туралы түбегейлі бұзылған деп санайтын нәрсеге терең үңілуге ​​уақыт бөлгім келеді. біз бағытта болуымыз керек деп ойлаймын.

Біз барлығымыз сурет саламыз. Ақылсыз.

Барлық дерлік танымал дизайн құралдары кескіндерге экспортталады. Бұл бірнеше себептерге байланысты проблемалы:

  1. Суретпен байланыса алмайсыз. Прототиптеу құралдары экранға ауысуды және кескіндерге қарапайым әрекеттесулерді қосуға мүмкіндік береді. Алайда, біздің өнімдеріміз экрандардың жетілдірілуін және микро өзара әрекеттесулерді талап етуді жалғастыра беретіндіктен, кескіндер жай тұра алмайды.
  2. Суреттер сұйық емес. Сәндік дизайнерлік шешімдерді суреттер арқылы байланыстыру әдетте қиын міндет болып табылады.
  3. Суреттер мемлекеттік емес. UI үшін әртүрлі мемлекеттерді тиімді байланыстыру үшін көбінесе көптеген кескіндер қажет.
  4. Нүктелік кескіндер ажыратымдылыққа байланысты. Сетчатка аппараттарының пайда болуымен кейде суреттер нашар көрсетілуі мүмкін.
  5. Кескіндер файлдары ауыр болуы мүмкін және оларды сақтау, басқару немесе бөлісу қиынға соғады.

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

Бұл өте маңызды сәт, өйткені барлық дерлік дизайн құралдары векторлық пішінді кескінге айналдырады. Photoshop, Illustrator, Marvel, Adobe XD, Sketch және Figma - бұл тұрғыда бәрі бірдей. Бірақ суреттер дизайнның ниетін жартылай ғана білдіре алады. Біздің өнімдер кешенді әрекеттесулерді, дауыстық енгізу, видео енгізу, кеңейтілген шындық, виртуалды шындық, температура сезімталдығы және т.б. қабылдауды және қолдауды жалғастырған сайын, бұл құралдардың мәні тез төмендейді. Кескінге негізделген дизайн - бұл аяқталмаған.

Біздің дизайн құралдарымыз суретті емес, нақты өнімді басқаруы керек.

Біздің өнімдер интерактивті. Біздің құралдар тұрақты.

Мен бұған дейін айтқан едім, бірақ бұл өте маңызды, сондықтан мен аздап пысықтауды ойладым.

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

  • Түймені апару
  • Кірісті фокустау
  • Құсбелгіні тексеру
  • Қойынды мазмұны
  • Айналдыру аймақтары
  • Фокусталған күйлер үшін қойындылар индексі
  • Пернелер тіркесімдері

Әрине, осы ерекшеліктердің кейбірін инженерлік техникамен елестетуге болады, бірақ жер бетінде не туралы екендігіне таңдану керек. Неліктен дизайнерлер нақты өнімді жобалай алмайды? Сайып келгенде, барлық маскировкалар бір рет қолданылады, бірақ дизайнерлер оларды жетілдіруге бірнеше ай жұмсайды. Бұл уақыт нақты өнімді екі есе көбейтсе жақсы болар еді.

Мен «дизайнерлер коды керек» қоян шұңқырынан өте алысқа бармаймын, бірақ мен бәрімізге код жазуды ұсынбаймын. Біздің жобалау құралдарымыз тірі өнімдерді тікелей манипуляциялауға қолдау көрсете алмайтын себеп жоқ деп айтып отырмын.

Фрамер кеңейтілген және егжей-тегжейлі өзара әрекеттесуді қолдай отырып, осы бөлімдегіге қарағанда жақсы жұмыс істейді. Қаптаманың қалған бөлігі өте артта қалды.

Біздің құралдар интернеттің орналасу парадигмасын қолдауы керек

Шамамен бір жыл бұрын интернетте макеттерді құрудың жалғыз тәсілі дисплейді пайдалану болды: кесте және тік-туралау CSS қасиеттері. Енді бізде Flexbox бар, жақында бізде CSS торы болады. Бұл үш қозғалтқыш қозғалтқыш DOM ағынын қолданып бірдей жұмыс істейді. Барлық дерлік веб-сайттар осы үш жүйенің біреуін пайдаланып жасалған.

Сонымен, біздің жобалау құралдарымыз бірдей орналасу үлгісін қолдайтыны түсінікті. Дұрыс па?

Дизайн құралдарының барлығында дерлік бұл орналасу жүйелерін елемейді, керісінше әр қабатты арт-панельде орналастыруды жөн көреді. Бұл веб-тораптың қалай жұмыс істейтіні және біздің дизайн құралдарының қалай жұмыс істейтіні, көптеген мәселелерді енгізе отырып:

  • Жауапты дизайн өте қиынға түседі, өйткені әр нүкте үшін әр қабат қолмен өзгертілуі керек. Сонымен қатар, шектеулерге негізделген орналасу жүйесін енгізуге болады, бірақ бұл қиындықты арттырады, оқу қисықтарын арттырады, сайып келгенде, әзірлеушілердің макетті тікелей вебке жіберуіне жол бермейді.
  • Әр қабат құжат ағымынан тыс болғандықтан, мазмұнды басқару қиынға соғады. Мысалы, тізімге элемент қосқыңыз келсе, сол тізімдегі басқа элементтерді қолмен өзгертуіңіз керек. Әрине, ауруды жеңілдету үшін қайталанатын функцияларды және басқа да қымбат ерекшеліктерді енгізуге болады, бірақ бұл тағы бір рет күрделене түседі және DOM бізге тегін беретін нәрсені қиындатады.
  • Абсолютті орналастыру табиғи пиксель координаттары мен өлшемдеріне әкеледі. Бұл икемділікті тудырады, және бұл веб-тораптың жұмыс істеуінен үлкен ауытқу. Веб em, rem, vh, vw және% сияқты сұйық қондырғыларда құрылған. Біздің құралдар бұл блоктарды әдепкі бойынша қолдауы керек.

Дизайн құралдары интернетке немесе оның нюанстарына ұқсамауы немесе көрсетпеуі керек - олар тек веб болуы керек.

Монолитті құрал - бұл әдіс емес

Жақсы дизайн кезең-кезеңмен жүреді. Жақсы құрылымдалған дизайн жүйесінің бірнеше ерекшелігі бар:

  1. Стиль палитрасы - брендтің жеке басын құрайтын түстер, көлеңкелер, интервалдар, жиектік радиустар, баспалдақтар, шрифт өлшемдері, анимациялар және басқа стильдер жиынтығы. Қазіргі уақытта дизайнерлік құралдардың көпшілігі тек түстер палитрасын қолдайды. Олар стильдің басқа қасиеттерін қолдамайынша, жүйелі түрде жобалау өте ауыр болады.
  2. Активтер құрамында белгішелер, суреттер және кескіндер сияқты элементтер бар. Онда суреттердің феноменальды редакторлары бар және Фигманың векторлық құралы өте жақсы, бірақ SVG қолдауы туралы айтатын болсақ, біздің дизайн құралдарымыз көп нәрсені қалдырады.
  3. Компоненттік кітапхана Компонент дегеніміз - әр түрлі вариацияларда бір элементке деректерді беретін стильдер мен активтер жиынтығы. Мысалға түймелер, кірістер, төсбелгілер жатады. Жоғарыда айтқанымдай, Фигма мен Скетч жақында бұл процесті негізгі сызбадан алшақтатып тастады - бұл жай компоненттер емес, тек компоненттердің суреттері.
  4. Модульдер Модуль / композиция - бұл әр түрлі күйдегі UI-дің капсулаланған бөлігіне мәлімет беретін компоненттер жиынтығы. Мысалға тақырып жолақтары, кесте мәзірлері, кіру пішіндері, кестелер және т.б. кіруі мүмкін. Модульдер күрделі компоненттер болғандықтан, Фигма мен Скетч бұны да шеше алады деп ойлаймын. Екеуін бөлуге біршама сіңірген шығар.
  5. Экрандар - бұл пайдаланушымен өзара әрекеттесе алатын толық интерфейсті құруға арналған модульдер, компоненттер және мәліметтер жиынтығы.

Дизайн құралдарының көпшілігі осы кезеңдердің әрқайсысын белгілі бір дәрежеде қолдауға мүмкіндік беретін мүмкіндіктер ұсынады. Мәселе мынада, барлық кезеңдер өзара байланысты. Барлық дерлік дизайн құралдары тек бір режимді - сурет салу режимін ұсынады. Сіз арт-тақталар жиынтығын жасайсыз және суреттер салуға кірісесіз. Жақында ғана эскиз және фигма тәрізді компоненттер / белгілер сияқты құралдар негізгі сурет режимінен алшақ болды - бұл таңқаларлық, себебі фронттың дамуында компоненттер көптеген жылдар бойы жасалынған.

Мәнер палитрасын жасау кезінде арт-тақталарды немесе векторлық құралдарды көрудің қажеті жоқ. Мен үйлесімді түстерді таңдауға арналған құралдарды көргім келеді. Мен 8дp интервал шкаласы немесе типтік шкалалар сияқты заттар үшін алдын-ала алдын-ала алғым келеді.

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

Компонентті жобалау кезінде мен енді жеке стильдер туралы ойламауым керек - стильді алдын ала анықталған палитрадан таңдау керек. Мен тек бір компонент үшін свитерлік стильдерді бастай алмаймын, өйткені бұл менің дизайн жүйесінің тиімділігін төмендете отырып, сәйкессіздік тудыруы мүмкін. Мәнер палитрасы орнында болған кезде оны тек дерек көзінен өңдеуге болады.

Сол сияқты, модуль құру кезінде мен тек алдын-ала анықталған компоненттік кітапханаға кіруім керек. Бүйірлік тақтада стиль қасиеттері болмауы керек. Векторлық құралдар жоқ. Қайта пайдалануға болатын компоненттердің кітапханасы, мен оларды модульдерді құрастыру үшін апарып тастай аламын.

Дәл солай экрандарды құруға қатысты. Қазіргі уақытта біз интерфейс құру үшін компоненттер мен модульдерді қайта қолданудамыз. Біз стильдер немесе кескіндер немесе басқа шығармашылық әрекеттер туралы ойламаймыз. Біз, ең алдымен, мазмұнды және қолданушы ағындарын жобалауға бағытталғанбыз.

Жобалаудың осы кезеңдерінің әрқайсысы жеке құралдарда толығымен немесе бір құралдың әртүрлі режимдерінде болуы мүмкін. Менің ойымша, бұл маңызды емес. Бір нәрсе сенімді, дегенмен қазіргі дизайн құралдарының көпшілігі процесті тіпті мойындамайды.

Біздің құралдар жақсы дизайнды ынталандыруы керек

Дизайнерлер сирек кездесетін сән-салтанатқа ие, олар жобаға шексіз көп қайталанбайтын қайталануларсыз қосыла алады. Шрифт өлшемі сәл үлкен бе? Тек оны ұрып тастаңыз. Үлкені жоқ. Аздап ашық түсті керек пе? Тек оны бұраңыз. Бұл күшті. Сіз тіпті бір жобада бірнеше арт-панельдер жасай аласыз, олардың әрқайсысы ұқсас стильдер үшін шамалы әр түрлі мәндерді қолданады және ол байқалмай қалуы мүмкін.

Сіздің дизайн құралы ешқашан бірдеңе жасай алмайтыныңызды айтпайды. Брендтен тыс түстерді қолданғаныңыз үшін сізді ешқашан тартпайды. Бұл сізге бос кеңістік мәнін қолдануға ешқашан кедергі болмайды. Сізге ешқашан халықтың 20% -ы сіз әзірлеген ашық-сұр түсті мәтінді көре алмайтындығы туралы ешқашан ескертпейді.

Неліктен ...? Себебі дизайн құралдары маңызды емес.

Дизайн құралдары шексіз шығармашылыққа деген құмарлықпен таңқалдырылған, сондықтан олар саналы түрде дизайн жасауды, инклюзивті жобалауды, жүйелі жобалауды білдіретін нәрсені ұмытып кетті.

Қарапайым сөзбен айтқанда, дизайн құралдары бізге қалағанның бәрін жасауға мүмкіндік береді. Белгілі бір дәрежеде шексіз шығармашылықтың деңгейі пайдалы, әсіресе идеология фазаларында. UI дизайнерлері сияқты, біздің жұмыс процесінің көпшілігі көп шығармашылықты қажет етпейді. Керісінше, біздің жұмыс ағымымыз қайта пайдалануға, қайталауға, танысуға және стандарттауға шақырады; біздің құралдар аз қанағаттандыратын қажеттіліктер.

Бұл шектеусіз еркіндік веб-даму шындығына қайшы келеді. Әзірлеушілер нақты өніммен жұмыс істейтіндіктен, барлығы бірдей кодпен жұмыс істеуі керек. Әзірлеушілер жай ғана оқшауланған қаріп өлшемдерін немесе кездейсоқ түс мәндерін код базасына қоса алмайды. Біріншіден, линтер (нашар жазылған код туралы ескерту хабарламасы) бірден айқайлай бастауы мүмкін. Егер жоқ болса, онда олардың өрескел шеберлігі кодты қарау кезінде ұсталуы мүмкін. Егер ол қандай да бір жолмен жарықшақтардың арасынан өтіп кетсе, нәтижеге әсер етуші әсер дабылды шығарады.

Менің ойымша, өнімдер тобында кездесетін ең үлкен проблемалардың бірі - дизайн және әзірлеу командаларының арасындағы ажырату. Әзірлеушілер бірнеше жылдар бойы қатаң нұсқаулар мен шектеулермен жұмыс істеді. Егер біздің жобалау құралдарымыз осы шектеулерді қабылдамаса, алшақтық ешқашан тарып кетпейді.

Біз тірі деректермен жобалауымыз керек

Тікелей деректер белгілі бір дәрежеде көптеген құралдармен біріктірілген, бұл өте жақсы. Adobe XD-де әдеттегі тірі деректерге ұқсайтын жалған деректерді шығаруға арналған өте ұқыпты мүмкіндіктер бар. Сондай-ақ, Invision Craft эскизге арналған нақты деректердің керемет мүмкіндіктерін ұсынады.

Тікелей деректер мәтінмен аяқталмауы керек. Суреттер мен бейне сияқты басқа элементтер жүктеме уақытын едәуір ұлғайту арқылы пайдаланушы тәжірибесіне үлкен әсер етуі мүмкін. Егер сіз интернетте жұмыс жасайтын болсаңыз, шолғышты әзірлеу құралдары сізге әр түрлі интернет жылдамдығына ұқсайтын қосылысты шешуге мүмкіндік береді. Содан кейін сіз жаңа мазмұнның пайдаланушы тәжірибесіне қалай әсер ететінін көре аласыз.

Біздің дизайн құралдары бізге осы сәнділікті бере ала ма?

Бір сөзбен айтқанда: жоқ.

Нақты өнімді жобалауға жақындаған сайын, біздің жобалау жұмысымыз одан да пайдалы әрі әсерлі бола алады.

Интернет ашық. Біздің құралдар да болуы керек.

Интернеттегі ең әдемі нәрселердің бірі - оның қол жетімділігі. Веб-сайтты кез-келген құрылғыдағы кез-келген веб-шолғышта қарауға болады.

Бұл дизайн құралдарымен қалай салыстырылады? Ал, бірнеше күн бұрын, менің ағам Дэвид мені өзі салып жатқан қосымшаның дизайнын қарастыруды сұрады. Ол маған эскиз файлын жіберді. Мен оны ашқанда, бұл болды ...

Дизайн құралдарының көпшілігі қабырғадағы бақтар. Егер бір әріптес Photoshop-та жұмыс істесе, екінші әріптесі бұл жобаны эскизде аша алмайды. Бүкіл командаңызға бірдей құралды қолдану жеткілікті емес - олар сол құралдың нұсқасын да қолдануы керек.

Марвел мен Фигма мұнда өте жақсы жұмыс істейді, ынтымақтастықтың жоспарлары мен инновациялық мүмкіндіктерін ұсынады.

Сонымен, дизайн құралдарының болашағы қандай?

Дизайн құралдарын жасаудағы инновация өте құнды және жақында ол көп болды. Airbnb жобалау құралдарында Jon Gold және Benjamin Wilkins React-Sketchapp-та жұмыс істеді, ол React компоненттерін қабылдап, оларды эскизде орналастырады. Джон мен Бен сонымен бірге майланған эскиздерді алып, оларды реакция компоненттеріне айналдыратын жаңа құралмен жұмыс істеуде.

Адам Морз, Брент Джексон және Джон Отандер осы мақалада және мүмкін әлемдегі барлық мәселелерді шешетін Compositor-да құралдар жиынтығында жұмыс істейді.

Мен модульде жұмыс істеймін, дизайнның жаңа құралы және ашық көздермен жобалау жүйесі, ол осы мақалада айтылған мәселелерді шешуге бағытталған. Егер сізді қызықтыратын болса, жаңартуларды Twitter-де іздеңіз.

Аспап жасаудағы жаңашылдық маңызды болғанымен, білім беру маңызды міндет болып табылады. Дизайн қауымдастығы жүйелі дизайн құралын жасауға дайын емес. Көптеген дизайнерлер құрылыс жүйелеріне қызығушылық танытпайды. Кейбіреулер үшін JPG-дің басты мақсаты - Дрибл ұнатады.

Біз қандай-да бір түрде есеп беру мәдениетін шабыттандыруымыз керек. Әзірлеушілер көптеген жылдар бойына есеп беру мәдениетін иемденді. Олардың кодтарын тексеруге арналған құралдар бар. Егер әзірлеуші ​​бірнеше рет қатаң кодтау нұсқауларынан бас тартса, мәселе шешілетініне сенімді бола аласыз.

Сонымен қатар, дизайнерлер қабаттардың тауларын жиіліктің әр түрлі жағдайында жинайды, олар қабаттың атауына, топтастырылуына және орналасуына аз мән береді. Бұл әрқайсысының өз ерекшелігі. Шығу (растрлық сурет) кіріске әсер етпейтіндіктен (векторлық қабаттар), ұйымдастырылатын дизайнерлерге нақты жүктеме жоқ. Дизайнерлер көбінесе бұл ұйымдастырушылықтың жетіспеушілігін дизайн өнерін романтикалау, өзін-өзі орындау үшін өз қондырғыларында қалдыру керек сиқыршылар ретінде бейнелеу арқылы ақтайды.

Біз сонымен қатар инклюзия мәдениетін де шабыттандыруымыз керек. Көптеген адамдар үшін мәтінді оқуды қиындататын ультра ашық мәтін түстері немесе веб-беттерді жүктеуді баяулататын өте жоғары сапалы типтер немесе түссіз зағип адамдарға түсінуге қиын ететін UI элементтері сияқты қателіктерді белсенді түрде болдырмау керек. Қазіргі уақытта заң бұзушылықтың бұл түрі дизайнерлік қауымдастықтың қолын созуда. Егер біз ақылды дизайн құралын қоштасатын болсақ, біз бұл мәдениетті өзгертуіміз керек.

Егер жүйелі дизайн құралы біздің жүрегімізді жаулап алса, ол алдымен тәрбие беруі керек.