Водич за програмере за веб дизајн за не-дизајнере

Своју прву веб страницу створио сам као школски пројекат када сам имао 14 година. Задатак је био једноставан: створити врло основну веб страницу која укључује неки текст, слике и табелу. Мој уобичајени став према школским пројектима био је да их потпуно заборавим и да касније донесем неко решење у последњем тренутку. Али, овог пута сам полудио.

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

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

Врхунски дизајн није нужно онај са највише Дрибббле гласова. То је онај који уопште нећете приметити. Савршен је баланс између „ваша бака би то могла“ и „вау, то је врашки лепо“. Дизајн може бити ваша конкурентска предност или ексер у ковчег.

Није ствар у таленту

Када сам био млађи, играо сам пуно Минецрафта. Видео сам све ове сјајне зграде које су људи направили. Али када сам нешто направио, изгледало је као кутија. Ружно и без стила. Како уопште направити нешто лепо у Минецрафт-у, зар не?

Дакле, пронашао сам типа на ИоуТубе-у и направио тачну копију онога што је направио. Неколико недеља касније развио сам свој стил и могао сам да градим самостално. Одједном, моје креације нису личиле на срање. Дођавола, чак сам и победио на конкурсу за зграде.

Дизајн је вештина, и као и свака друга вештина, и на њој се може научити.

Одабир правог алата за посао

У програмирању можете да користите Нотепад и напишете апликацију која је добра као да је написана у потпуно развијеном ИДЕ-у ... мада би ваш живот можда био прилично јадан и вероватно ће потрајати знатно дуже. У свету веб дизајна, МС Паинт би преузео улогу Нотепад-а, а попут Нотепад-а, мало људи заправо одлучује да дизајнира помоћу њега ... Надам се.

Најпопуларнији алати за дизајн за веб су:

  • Скетцх, алат за МацОС, који је сличан Реацт-у, чини се да је тешко кодиран у сваком попису послова. 99 долара годишње.
  • Адобе КСД, бесплатни алат за више платформи који преузима улогу Вуе-а. Има мању заједницу, али врло је лако започети.
  • Адобе Пхотосхоп, швајцарски нож за било који дизајнерски задатак који сви знају. Заузео је место ... погађате, јКуери. 9,99 УСД месечно.

Готово да нема разлике да ли за писање апликација користите Сублиме или ВС код. Или да ли користите Реацт или Вуе за фронтенд. Само је ствар преференција. Исто важи и за алате за дизајн, јер сваки од њих има своје предности и недостатке.

Користим Адобе КСД. Главни разлог за мене је тај што је вишеплатформски, тако да ја нисам талац Аппле екосистема. Такође га подржава Адобе, па ће бити овде неко време. Најбоља ствар за новопридошле је што је од маја 2018. Адобе КСД бесплатан за употребу са само неколико ограничења (на која вероватно нећете наићи).

Прилагођавање начина размишљања

Највећи изазов који ми је дошао у свет веб дизајна било је прилагођавање начина размишљања. Навикао сам да осмишљавам дизајн док сам кодирао веб локацију. Све је имало наредбу. Ток је текао слева удесно и од врха до дна. Чињеница је да вас овај приступ чини лошијим дизајнером.

Алати за дизајн су хаотични јер вас приморавају да дизајнирате као да је сваки елемент апсолутно постављен. Прихватите ову промену. Даће вам слободу да брзо мењате ствари и олакшава експериментисање. И то је неопходно, јер је дизајн непрекидан процес. Очекује се да ћете много мењати ствари пре него што постигнете одличан резултат.

Учење алата

Када кодирате, користите ХТМЛ елементе попут див-а, распона и уноса и допустите прегледачу да их прикаже у нешто визуелно. Помоћу алата за дизајн можете да прескочите посредника и директно користите визуелне елементе попут облика и текста.

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

Алат за правоугаоник

Правоугаоници су најуниверзалнији облик. Увек ћете их користити. Схватите то као див. Корисна је за све врсте ствари, од стварања уноса текста до контејнера.

Алат за текст (налепница)

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

Прво стање је једноструки контејнер текста који прилагођава своју величину на основу величине текста. Слично је а са изузетком да се неће умотати ако не направите прекид линије. Предност овог стања је што ће аутоматски прилагодити величину оквира за текст на основу висине линије и величине фонта.

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

Алат за текст (одломак)

Друго стање је контејнер за текст одређене величине који се понаша као

са одређеном ширином или

унутар решеткасте колоне. Предност ове државе је у томе што можете да контролишете величину оквира за текст. Да бисте креирали одломак, кликните одабраним алатом за текст и држите да бисте креирали избор. Као правило, користите ово стање за пасусе и наслове у више редака.

Алатка за селекцију

Преместите, промените величину, дуплирајте. Ово је алат за то. Те ружичасте линије показују вам удаљеност од околних елемената. Плаве линије помажу вам да елементе правилно поравнате.

Алат за линију

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

Савети и технике за дизајн

Изглед

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

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

Боје

Да бисте лакше пронашли савршену боју за следећи пројекат, имајте на уму психологију боја (цолорпсицхологи.орг). Користан алат за проналажење савршене комбинације боја на основу ваше примарне боје је Палеттон.

Користите нијансе примарних боја и боје текста да бисте креирали визуелну хијерархију. Покушајте са тамнијим или светлијим нијансама текста када користите позадину у боји.

Типографија

Писмо у великој мери утиче на брендирање вашег пројекта, зато бирајте паметно. Врхунски фонтови изгледају боље од оних на Гоогле фонтовима, али кад тек почињете, не купујте их. Чак и на Гоогле фонтовима постоје неки скривени драгуљи.

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

Дизајн почетне странице (или одредишне странице)

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

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

Најтежи део је све то спојити. Нажалост, не постоји пречица. Једноставно морате пуно поновити док не добијете резултат којим сте задовољни.

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

За понети:

  • Јединствени фонт чини велику разлику
  • Графика је веома важна, покушајте да користите бар неку илустрацију или слику
  • Искористите визуелни значај користећи више нијанси боја. Текст и основне боје нису довољне.
  • Не користите прешироке контејнере - око 1100 пк је довољно широко
  • Прихватите негативни простор
  • Разговарајте о предностима, а не о карактеристикама
  • Потражите инспирацију око себе ако запнете

Дизајн веб апликације (или контролне табле)

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

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

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

Фиксни контејнер

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

Примери: Твиттер, Буффер, ДигиталОцеан, Нетлифи, ГитХуб

Посуда за течност

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

Примери: Слацк, Интерцом, Хотјар, Гоогле табеле, Трелло, Спотифи

Важно је одабрати прави контејнер, јер ће цео изглед странице зависити од њега, а његова промена касније је велики посао. Сваки пројекат је јединствен и захтева јединствена решења, зато се не бојте експериментисати!

За понети:

  • Поједностави
  • Користите читљив фонт
  • Користите визуелну хијерархију када приказујете пуно података
  • Искористите лош избор дизајнера конкурента

Окончање

Запамтите, дизајн може бити ваша конкурентска предност - зато га користите и направите нешто сјајно.

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

Такође ћете бити први који ћете бити обавештени о мом следећем посту у којем ћу поделити 69 дана напретка постигнутог на Сидемаилу - СааС пројекту на којем радим. Обухватаће ствари попут броја претплатника, посета локацији, потрошње и нацрта дизајна. То би требало да се подразумева, али гарантујем апсолутно никакву нежељену пошту. Немам времена ни за то срање.

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