Како побољшати своје УИ / УКС дизајнерске вештине као програмер

Да сте ме питали пре четири године, када сам дипломирао ЦС, какав пут каријере видим да следим, вероватно бих вам рекао бацк-енд Јава развој или нешто слично. Никад нисам био креативан, у начину на који се боја сусреће с платном, па заправо нисам размишљао о каријери која укључује фронт-енд развој и дизајн.

Као што сви знамо, ствари се мењају. Током своје каријере све ме више занима развој и дизајн корисничког интерфејса. Имао сам довољно среће у свом послу да сам се изложио фронт-енд развоју и да ми је дозвољено да уложим време у побољшање вештина неопходних за развој фронт-енд програмера.

Током последњих 12 месеци тежим ка побољшању разумевања УИ / УКС дизајна, како због личног интереса, тако и због омогућавања ефикаснијег рада са дизајнерима.

У овом посту бих желео да поделим лекције које сам научио, ресурсе које сам прикупио и грешке које сам направио у нади да ће други програмери моћи да науче на мом путу.

Преглед садржаја

  • Није само таленат
  • Гледај, мисли, кради
  • Научи теорију
  • Изгради нешто
  • Не одустај
  • Ресурси
  • Закључак

Није само таленат

Ово ми се сада чини очигледним, али било је време када сам мислио да су дизајнери чаробњаци рођени са способношћу да креирају апликације и веб локације невероватног изгледа.

Испоставило се да нису. Управо су се потрудили да усаврше свој занат. На исти начин на који је људима учење учења кодирања лакше, постоје људи који ће имати природни талент за дизајн, али таленат не значи много без напорног рада.

Дизајн је нешто што се може научити. Не правите грешку коју сам починио и отписујте себе јер нисте креативни у традиционалном смислу. Решавање програмских проблема захтева креативност; размишљати о решавању изазова у дизајну на исти начин.

Гледај, мисли, кради

На исти начин на који ће вам читање доброг кода помоћи да постанете бољи програмер, учење из онога што су други створили помоћи ће вам да постанете бољи дизајнер.

Следећи пут када посетите веб локацију или користите апликацију, погледајте је и заиста размислите зашто изгледа и понаша се онако како изгледа. Зашто су елементи постављени тамо где јесу? Зашто је то дугме одређене боје? Зашто морате да изводите радње у одређеном редоследу?

Узмимо за пример дугме за аплауз Медијума. Зашто једноставно нису користили дугме „свиђа ми се“ као и свака друга веб локација на друштвеним мрежама? По мом мишљењу, била је паметна дизајнерска одлука да се то не учини. Уместо тога, они су у стању да ојачају идеју заједнице која покреће страницу пажљивим осмишљавањем интеракције. Давање чланка или одговор педесет пљескова захтева време од корисника, али то му помаже да се заиста повеже са садржајем који гледа и са особом која га је креирала.

Сајтови попут Авввардс и Дрибббле показали су ми се непроцењивим у последњих годину дана. Многи дизајни које сам креирао узели су либералну инспирацију у креацијама других сјајних дизајнера.

Научи теорију

Када сам први пут почео да састављам сопствене дизајне, нисам могао да схватим зашто изгледају и понашају се тако лоше. Токови су били неугодни, боје се нису подударале, а распореди нису били конзистентни.

Мислио сам да бих могао једноставно да ускочим и искористим своје развојно знање заједно са својим основним знањем о томе како би сајтови требало да раде као корисник, и то би добро прошло.

Била сам јако, јако погрешна. На крају сам креирао дизајн са становишта програмера, уместо да користим теорију дизајна као основу.

Програмери знају како веб локација функционише , али дизајнери знају како се веб локација понаша и осећа. Постоји велика празнина коју можете попунити само стицањем темеља у знању о дизајну.

Да бих стекао основно разумевање теорије дизајна, највише сам користио Медиум и Удеми. Везе до ресурса које сам користио можете пронаћи у одељку испод.

Изгради нешто

Било који програмер или професор ЦС-а рећи ће вам да је најбољи начин да постанете бољи програмер писање кода. Исти принцип важи и за дизајн.

Није важно шта дизајнирате, све док из тога учите. Третирајте га као стварни пројекат: Размислите о корисницима. Направите жичане оквире, макете и прототипове. Понављајте оригинални дизајн да бисте га побољшали. Можете да користите веб локације попут Реддита да бисте добили повратне информације о ономе што креирате.

Можете га чак упарити са побољшањем својих развојних вештина. Већина мојих недавних споредних пројеката мотивисана је заједничком жељом да побољшам и свој веб развој и вештине дизајнирања. Након што дизајнирате свој пројекат, можете га развити и видети обе стране медаље.

Ево неколико идеја за почетак:

  • Дизајнирајте интеракцију. За инспирацију користите дугме за аплауз Медиум.
  • Дизајнирајте апликацију за своју омиљену добротворну организацију. Размислите о различитим врстама корисника: потенцијалним, ретким и редовним покровитељима.
  • Дизајнирајте свој ЦВ. Размислите о бојама које користите и шта значе. Размислите о томе како ће се користити ваш ЦВ . Да ли ће се само гледати на екрану или ће се одштампати? Како то утиче на дизајн?
  • Редизајнирајте постојећу веб локацију. То може бити ваш локални добављач превоза или глобални бренд. Упоредите свој дизајн са оригиналом и размислите о разликама из перспективе корисника.
  • Дизајнирајте нешто физичко, као што је нови начин транспорта или можда алтернатива нечему једноставном попут виљушке или столице. Открио сам да је размишљање о дизајну свакодневних ствари заиста користан начин уласка у размишљање и дизајнирања нечег интуитивног.

Не одустај

Кад се осврнем на оно што сам створио пре годину дана, тешко је не лецнути се. Али сви негде почињу. Видети напредак у ономе што створите вредеће. Све док учите из онога што радите, ваше време се добро троши.

Можда ће вам помоћи да редовно пратите оно што сте научили. Сваког месеца се осврћем на неке ствари на којима сам радио и покушавам да извучем што више могу из искуства. Чак и ако је то само препознавање неке мале информације коју сте узели читајући чланак, то је и даље напредак.

Ресурси

Испод је мала колекција мојих омиљених алата, чланака и курсева. Можете наћи још много тога што овде нисам набројао и овде.

Алати

Фигма - Дизајн и израда прототипа уз сарадњу.

ФрамерКс - Слично Фигми, али са доданим Реацт-ом и компонентама које се могу открити.

Цоолорс - Откријте и генеришите палете боја.

ВебАИМ Цонтраст Цхецкер - Уверите се да су ваше боје доступне.

Архетип - Уређивач и генератор система типографије.

Чланци

7 практичних савета за варање у дизајну

10 варалица за дизајн корисничког интерфејса

10 малих грешака у дизајну које још увек правимо

Дизајнирајте боље форме

Комплетна листа УКС испорука

Принципи психологије које сваки дизајнер УИ / УКС мора знати

Како се користе боје у дизајну корисничког интерфејса

16 цитата које требате прочитати као УКС дизајнер

Принципи дизајна производа на једној картици

Курсеви

Основе дизајна корисничког искуства - Удеми

Комплетни курс за дизајн апликација - УКС, УИ и дизајн размишљања - Удеми

УКСТраининг.цом

Закључак

Надам се да сте успели да преузмете нешто са мог путовања. Ако имате савете за дизајн или ресурсе који су вам помогли да научите, волео бих да их чујем у одговорима.

Хвала за читање!