Как да подобрите вашите UI / UX умения като програмист

Снимка от Alice Achterhof на Unsplash

Ако бяхте ме попитали преди четири години, когато станах възпитаник на CS, какъв кариерен път видях, че следвам, вероятно бих ви казал бек-енд разработка на Java или нещо подобно. Никога не съм бил креативен, боята отговаря на платно по някакъв начин, така че всъщност не съм обмислял кариерна пътека, включваща разработване и дизайн на предния край.

Както всички знаем, нещата се променят. С течение на кариерата ми все повече се интересувам от разработка и дизайн на потребителския интерфейс. Аз имах достатъчно късмет в работата си, че получих излагане на предно развитие и ми беше позволено да инвестирам време в подобряването на уменията, необходими, за да бъда разработчик от предния край.

През последните 12 месеца се стремях да подобря разбирането си за UI / UX дизайн, както поради личен интерес, така и да ми позволят да бъда по-ефективна при работа с дизайнери.

В тази публикация бих искал да споделя уроците, които съм научил, ресурсите, които събрах, и грешките, които съм направил в надеждата, че другите разработчици ще могат да се научат от моето пътуване.

Съдържание

  • Това не е само талант
  • Вижте, помислете, крадете
  • Научете теорията
  • Изградете нещо
  • Не се отказвайте
  • ресурси
  • заключение

Това не е само талант

Този сега ми изглежда очевиден, но имаше момент, в който смятах, че дизайнерите са магьосници, които са родени с възможността да създават невероятно изглеждащи приложения и уебсайтове.

Оказва се, че не са. Те просто са работили усилено, за да усъвършенстват занаята си. По същия начин, когато научаването на кодиране става по-лесно за някои хора, има хора, които ще имат естествен талант за дизайн, но талантът не означава много без усилена работа.

Дизайнът е нещо, което може да се научи. Не правете грешката, която направих, и си отпишете, защото не сте креативни в традиционния смисъл. Решаването на проблеми с програмирането отнема креативност; мисли за решаване на дизайнерските предизвикателства по същия начин.

Вижте, помислете, крадете

По същия начин, че четенето на добър код ще ви помогне да станете по-добър разработчик, ученето от това, което другите са създали, ще ви помогне да станете по-добър дизайнер.

Следващия път, когато посетите уебсайт или използвате приложение, погледнете го и наистина помислете защо изглежда и се държи по начина, по който го прави. Защо елементите са поставени там, където са? Защо този бутон е определен цвят? Защо трябва да извършвате действия в определен ред?

Вземете например бутон за аплодисменти на Medium. Защо просто не използваха бутон „като“ като всеки друг уебсайт за социални медии? Според мен беше умно дизайнерско решение да не го правя. Вместо това те са в състояние да затвърдят идеята за общност, която управлява сайта, като внимателно проектират взаимодействие. Предоставянето на статия или отговор петдесет хлопки отнема време на потребителя да направи, но това им помага да се свържат наистина със съдържанието, което преглеждат и с човека, който го е създал.

Сайтове като Awwwards и Dribbble се оказаха безценни за мен през последната година. Много от създадените от мен дизайни взеха либерално вдъхновение от творенията на други велики дизайнери.

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

Когато за пръв път започнах да съставям свои собствени дизайни, не можах да разбера защо изглеждат и се държат толкова зле. Потоците бяха неудобни, цветовете несъвместими, а оформлението беше непоследователно.

Мислех, че мога просто да скоча направо и да използвам знанията си за развитие, заедно с основните си познания за това как трябва да работят сайтовете като потребител и ще се получи добре.

Бях много, много грешен. В крайна сметка създадох дизайни от гледна точка на разработчиците, вместо да използвам теорията на дизайна като основа.

Разработчиците знаят как работи даден сайт, но дизайнерите знаят как даден сайт се държи и чувства. Има голяма празнина, която можете да попълните само като спечелите основа в познанията за дизайн.

За да придобия основно разбиране на теорията на дизайна, използвах най-вече Medium и Udemy. Можете да намерите връзки към ресурсите, които използвах в секцията по-долу.

Изградете нещо

Всеки разработчик или професор по CS ще ви каже, че най-добрият начин да станете по-добър програмист е да напишете код. Същият принцип важи за дизайна.

Няма значение какво проектирате, стига да се научите от него. Отнасяйте се като към истински проект: Помислете за потребителите. Създайте телени рамки, макети и прототипи. Поразгледайте оригиналния дизайн, за да го подобрите. Можете да използвате сайтове като Reddit, за да получите отзиви за това, което създавате.

Можете дори да го сдвоите с подобряване на вашите умения за развитие. Повечето от последните ми странични проекти бяха мотивирани от съвместно желание да подобря както уменията си за уеб разработка, така и дизайнерските си умения. След като проектирате проекта си, можете да го развиете и да видите и двете страни на монетата.

Ето няколко идеи, за да започнете:

  • Проектирайте взаимодействие. Използвайте бутон за аплодисменти на Medium за вдъхновение.
  • Създайте приложение за любимата си благотворителна организация. Помислете за различните видове потребители: потенциални, редки и редовни меценати.
  • Направете своето CV. Помислете за цветовете, които използвате и какво означава. Помислете как ще се използва вашето CV Ще бъде ли просто гледан на екран или ще бъде разпечатан? Как това влияе на дизайна?
  • Редизайн на съществуващ уебсайт. Може да е вашият местен доставчик на транспорт или глобална марка. Сравнете дизайна си с оригинала и помислете за разликите от гледна точка на потребителя.
  • Проектирайте нещо физическо, като нов метод за транспорт или може би алтернатива на нещо просто като вилица или стол. Открих, че мисленето за дизайна на всекидневните неща е наистина полезен начин за навлизане в мисленето, за да проектирам нещо интуитивно.

Не се отказвайте

Когато погледна назад към това, което създадох преди година, е трудно да не се размине. Но всеки започва някъде. Да видите прогресията в това, което създавате, ще си заслужава. Стига да се учиш от това, което правиш, тогава времето ти се изразходва добре.

Може да помогне да следите наученото редовно. Всеки месец поглеждам назад към някои неща, над които съм работил и се опитвам да взема колкото мога от опита. Дори само да разпознаете някаква малка част от информацията, която сте събрали при четене на статия, тя все още напредва.

Някои дизайни, които съм създал от най-старите (вляво) до най-новите (вдясно)

ресурси

По-долу е малка колекция от любимите ми инструменти, статии и курсове. Можете да намерите още много неща, които не съм изброил тук и тук.

Инструменти

Фигма - Дизайн и прототипиране с колаборация.

FramerX - Подобно на Figma, но с добавени React и откриваеми компоненти.

Coolors - Открийте и генерирайте цветни палети.

Проверка за контраст на WebAIM - Уверете се, че цветовете ви са достъпни.

Архетип - редактор и генератор на типографска система.

статии

7 практически съвета за измама при дизайна

10 чит кодове за проектиране на потребителски интерфейси

10 малки дизайнерски грешки, които все още правим

Дизайн по-добри форми

Пълен списък на UX резултати

Принципите на психологията, които всеки UI / UX дизайнер трябва да знае

Как да използвате цветове в UI Design

16 кавички, които трябва да прочетете като UX дизайнер

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

курсове

Основи на дизайна на потребителския опит - Udemy

Пълният курс за проектиране на приложения - UX, UI и дизайнерско мислене - Udemy

UXTraining.com

заключение

Надявам се, че сте успели да вземете нещо от моето пътуване. Ако имате дизайнерски съвети или ресурси, които са ви помогнали да научите, ще се радвам да ги чуя в отговорите.

Благодаря за четенето!