Како front-end развивачи, нашата работа е да ги оживееме дизајните преку кодот. Разбирањето на дизајнот е клучна компонента. За жал, вистинското разбирање на front-end дизајнот е потешко. Програмирањето и естетскиот дизајн бараат различен сет на вештини. Токму затоа, некои front-end развивачи не се толку стручни од аспект на дизајн, па нивната работа ги трпи последиците.
Мојата цел е да ви дадам неколку едноставни правила и концепти, како веб развивач на веб развивачи, кои ќе ви помогнат да работите од почеток до крај на проекти без да го уништите она на што дизајнерите работеле напорно (па дури и да дизајнирате сопствени проекти со пристојни резултати).
Се разбира дека овие совети нема да ве претворат во неверојатно добар дизајнер веднаш, но ако ги применувате, би ребало да има голем напредок во вашата работа.
1. Правете ги работите во графичка програма
Ретко кога го завршувате проектот од почеток до крај одржувајќи ја секоја естетска мутација во датотеките за дизајн. И за жал, дизајнерите не ви се секогаш при рака за набрзина да дотрчаат и да ги средат работите.
Затоа, секогаш доаѓа момент кога вие како front-end развивач треба да направите некои мали измени поврзани со естетиката на сајтот. Независно дали правите знаци за избор, кои ќе се појавуваат кога ќе се одбере некое поле за избор, или правите распоред на страница кој недостасувал во PSD датотеката, како развивач често ќе треба да се справите со овие навидум мали задачи. Во еден совршен свет, ова не би се случувало, но за жал додека да го најдеме тој свет, мора да бидеме флексибилни.
Еден добар front-end развивач мора да употребува професионални графички алатки. Не прифаќајте замена за нив.
Во вакви ситуации секогаш треба да употребувате графичка програма за модели. Не е важно која алатка ќе ја употребувате: Photoshop, Illustrator, Fireworks, GIMP, или нешто друго. Само не се обидувајте да дизајнирате од кодот. Посветете време на вистинска графичка програма и размислете како сето тоа треба да изгледа, потоа одете во кодот и направете го тоа соодветно. Ова нема да ве направи експерт во дизајнирање, но ќе даде многу подобри крајни резултати.
2. Совпаднете се со дизајнот наместо да се натпреварувате со него
Вашата работа не е да импресионирате некого со уникатноста на вашиот знак за избор, туку да го направите тој елемент така што истиот ќе одговара на остатокот од дизајнот.
Оние кои немаат искуство со дизајн често си го оставаат знакот за избор со дополнителни детали кои се чинат како да не прават проблем. Во таков случај, препуштете му го тоа на дизајнерот!
Развивачите мора да направат нивните елементи да се совпаднат колку што е можно повеќе со оригиналниот дизајн.
Наместо да прашате “Нели мојот знак за избор изгледа супер ?” треба да прашате, “Колку добро мојот знак за избор се вклопува во целокупниот дизајн?”
Треба да се фокусирате на оригиналниот дизајн, а не да го оспорувате, ниту да се натпреварувате со него.
3. Типографијата прави огромна разлика
Ќе се изненадите од тоа колку крајниорт изглед на еден дизајн зависи од типографијата. И ќе се изненадите од фактот дека дизајнерите посветуваат многу време токму на типографијата. Не станува збор само за одбирање на еден пар букви и толку. За избор на типографијата се вложува голем напор и многу време.
Ако некогаш ви се случи да треба да ја изберете типографијата за некој сајт, мора да поработите на тоа. Одете на интернет, пребарајте и истражете ги добрите парови на фонт. Потоа, неколку часа посветете на експериментирање со паровите на сајтот за да сте сигурни дека проектот ќе биде завршен со најдобрата можна типографија за него.
Дали типографијата одговара на проектот? Кога се сомневате, посоветувајте се со дизајнер.
Ако работите на дизајнот, тогаш следете ги изборите на дизајнерот. Ова не значи само избор на фонтови. Внимавајте на проредот, растојанието помеѓу буквите, итн. Немојте да ја занемарите важноста на тоа дека вашата типографијата треба да се совпаден со типографијата на дизајнот на еден проект.
Исто така, внимавајте како ги употребувате фонтовите. Тие мора секогаш да се на точното место. Ако дизајнерот употребува Georgia само за заглавјата, а Open Sans за телото, вие не смее да употребите Georgia за телото, а Open Sans во заглавјата. Типографијата може целосно да ја уништи естетиката. Посветете доволно време за да сте сигурни дека она што го правите одговара на типографијата од дизајнерот. Тоа е добро потрошено време.
4. Front-end дизајнот не толерира ограничено видно поле
Нјаверојатно ќе треба да правите само мали делови од целиот дизајн.
Ограниченото видно поле е честа замка за front-end развивачите. Не се фокусирајте само на еден детаљ, туку секогаш гледајте ја целата слика.
И овде ќе го споменам примерот кој веќе го дискутиравме со знакот за избор, за дизајн кој вклучува прилагодени полиња за избор без да ги прикажува како избрани. Важно е да сте свесни дека деловите кои ги правите се само мал дел од целокупниот дизајн во проектот. Вашите знаци треба да бидат онолку важни колку што е неопходно, ни повеќе, ни помалку. Немојте да се фокусирате на тој мал дел и да го претворите во нешто што не трба да биде.
Впрочем, добра техника за ова е да направите снимка од екранот на програмата, или датотеките за дизајнот во чиј контекст би се употребиле знаците, за да видите како тие ќе влијаат на другите елементи од дизајнот на страницата и дали нивната презентација одговара на улогата која ја имаат.
5. Врски и хиерархија
Посветете посебно внимание на начинот на кој дизајнот работи со хиерархијата. Колку блиску се насловите до телото на текстот? Колку се раздалечени од текстот над нив? Како дизајнерот покажува кои елементи/ наслови/ текстови се поврзани едни со други, а кои не се? Најчесто тоа дизајнерите го прават со ставање на поврзаните содржини во во полиња, употребувајќи различна количина на бел простор за да покажат врска, слични или спротивни бои за да покажат поврзани/неповрзани содржини, итн.
Еден добар front-end развивач треба да ги почитува врските и хиерархијата во дизајнот. А одличен програмер треба да ги разбира.
Ваша работа е да ги препознаете начините на кои дизајнот ги постигнува врските и хиерархијата, и да се погрижите тие концепти да се имплементирани во крајниот продукт (тука вклучувајќи ја и содржината која не е посебно дизанирана и/или динамичката содржина). Ова е уште една област (како типографијата) каде се исплати да посветите повеќе внимеание за да ги добиете вистинските резултати.
6. Бидете пребирливи со белината и порамнувањето
Ова е одличен совет за подобрување на вашиот дизајн и/или подобро имплементирање на дизајните на другите. Ако дизајнот употребува растојание од 20 единици, 40 единици, итн, тогаш секоја белина/растојание кое ќе го употребите направете го да може да се подели со 20.
Ова е навистина едноставен начин за некој кој нема око за естетика да направи брзо подобрување. Исто така, вашите елеметни мора да се порамнети до пиксел, и работ околу секој елемент да е колку што е можно поеднаков. Онаму каде што не можете да го направите тоа, (како местата на кои ви е потребен дополнителен простор заради хиерархија) направете ги така да може да се поделат со бројот кој го употребувате за порамнување насекаде, на пример, два пати по предодреденото порамнување, или три пати по толку, итн.
Секогаш потрудете се да разберете што сакал вашиот дизајнер да постигне со белината и следете ги тие концепти
Многу програмери го постигнуваат ова со посебната содржина, но кога станува збор за додавање/уредување на содржина, или имплементирање на динамичка содржина, растојанијата помеќу елементите им стануваат целосно неконзистентни, затоа што не го разбираат она што го имплементираат.
Секогаш потрудете се да разберете што сакал вашиот дизајнер да постигне со белината и следете ги тие концепти. И да, посветете многу време. Откако ќе помислите дека сте завршиле, вратете се назад и измерете сé за да сте сигурни дека имате подеднакво порамнување и растојание, а потоа обидете се тоа да го испрограмирате со многу различна содржина за да сте сигурни дека е флексибилно.
7. Ако не знаете што правите, направете помалку
Не сум еден од оние кои веруваат дека секој проект треба да употребува минималистички дизајн, но ако не сте сигурни во вашиот дизајн и постојано мислите дека треба да додадете нешто, тогаш колку помалку, толку подобро.
Помалку значи повеќе. Ако дизајнерот направил добра работа, воздржете се од додавање на сопствени идеи во дизајнот.
Дизајнерот веќе се погрижил за поголемите работи, вам ви се оставени само пополнувањата. Ако не сте добри во дизајн, тогаш најдобро е да направите најмалку што е можно за да проработи тој елемент. Така ќе вметнете помалку ваша работа во работата на дизајнерот, и ќе имате помало влијание врз дизајнот.
Дозволете работата на дизајнерот да ја заземе сцената, а вашата работа да остане во позадина.
8. Времето си поигрува со сите нас
Ќе ви кажам една тајна за дизајнерите: 90 проценти (или повеќе) од она што го ставаат на хартија, или на канвас во Photoshop, не е толку одлично.
Тие исфрлаат многу повеќе од она што може да го видите. Често прават многу корекции и прилагодувања пред да дозволат дури и нивните колеги да ја погледнат нивната работа, а не пак клиентот. Обично не можете директно да отидете од празен канвас до убав дизајн во еден чекор, туку ви требаат многу измени и мали чекори за да стасате до целта.
Ако мислите дека дизајнот може да се подобрува, разговарајте со дизајнерот. Можно е и тој да се обиделе со истиот пристап и да сфатил дека нема да успее.
Па, како го имплементирате ова? Еден важен метод е да оставите да помине време помеѓу две верзии. Работите додека не почне да ви се допаѓа, и потоа оставете го дизајнот. Кога ќе поминат неколку часа (уште подобро цела ноќ), одново отворете го дизајнот и погледнете дали ви се допаѓа. Ќе се изненадите од тоа колку поинаку ќе ви изгледа сé кога ќе го погледнете со одморени очи. Веднаш ќе можете да изберете области кои може да се подобрат. Толку ќе бидат очигледни, што ќе се чудите како претходно не сте ги забележале.
Имено, еден од најдобрите дизајнери кој го познавам работи вака: почнува со 3 различни дизајни. Потоа чека најмалку 24 часа за да ги погледне одново, за сите да ги фрли и да почне од почеток. Па, потоа остава уште еден ден пред одново да ги погледне дизајните, и секој пат неговите верзии стануваат пододбри и подобри, сé додека, еден ден не се разбуди задоволен со она што ќе го види. Ете токму тогаш го испраќа дизајнот на клиентот. Овој процес го употребува за секој проект на кој работи и добро му оди.
Се разбира вие не мора да одите до таму, само сакав да ви покажам колку помага времете во однос на тоа како ни изгледа дизајнот. Тоа е интегрален дел од процесот на дизајнирање и дозволува да правите подобрувања од временска дистанца.
9. Пикселите се важни
Треба да направите сé што е во ваша моќ за да одговорите на оригиналниот дизајн со вашиот завршен проект, сé до последниот пиксел.
Front-end дизајнерите треба да се обидат да направат совпаѓање со оригиналниот дизајн до последен пиксел
Во некои области едноставно не можете да бидете совршени. На пример, вашата контрола на растојанието помеѓу буквите можеби не е онолку прецизна како на дизајнерот, и CSS сенката можеби не се поклопува целосно со онаа во Photoshop, но мора да се обидете да сте колку што е можно поблиску до оригиналот. За многу аспекти од дизајнот може да добиете совршено поклопување до пиксел, а тоа ќе направи голема разлика во крајниот резултат. Еден изместен пиксел овде и онде не изгледа како многу, но кога сé ќе се собере, то влијае на целокупната естетика, многу повеќе отколку што може да замислите. Затоа внимавајте.
Постојат многу [алатки] кои помагаат да се споредат оригиналните дизајни со крајните резултати. Може да искористите снимки од екранот за да ги споредите со датотеките за дизајн и да видите колку се согласуваат. Само ставете ја снимката од екранот врз дизајнот и направете ја полутранспарентна за да ги видите разликите. Така ќе знаете колку прилагодувања треба да направите за да го добиете токму она што се бара.
10. Побарајте мислење
Тешко се стекнува “око за дизајн.” Уште потешко е да го направите тоа самите. Мора да барате мислење од други за да видите каде навистина може да направите подобрувања.
Не велам дека треба да го грабнете соседот и од него да барате совет, туку дека треба да консултирате вистински дизајнер и да дозволите тој да ја оцени вашата работа и да ви даде предлози.
Дозволете им на дизајнерите да ја критикуваат вашата работа. Добро употребете ја нивната критика и немојте да им се лутите.
За ова треба храброст, но сепак, тоа е една од најмоќните работи кои може да ги направите за да го подобрите проектот набрзина, и за да го проширите својот сет со вештини.
Дури и кога сé што треба да направите е да дотерате еден едноставен знак за избор, има многу луѓе кои би сакале да ви помогнат. Секогаш барајте квалификувани луѓе за мислење, независно дали тоа ќе бида ваш пријател-дизајнер, или форум за дизајн на интернет.
Изградете долгорочна, продуктивна врска со вашите дизајнери. Тоа е многу важно за квалитно извршување на дизајнот.
Може ви се чини како нешто што бара многу време, и може да предизвика несогласувања и конфликт помеѓу вас и вашите дизајнери, но вреди. Добрите front-end развивачи се потпираат на вредните информации од дизајнерите, па дури и кога мислењето кое ќе го добијат не е она што сакале да го чујат.
Затоа, од витално значење е да одржувате конструктивна врска со вашите дизајнери. Вие сте на истиот брод, па за да ги добиете најдобрите резултати мора да соработувате и комуницирате во секој чекор од процесот. Инвестирањето во добар однос со дизајнерите ќе ви помогне да завршите подобра работа и да сте на време со проектот.
Заклучок
За да сумираме, еве кратка листа на совети за дизајн за front-end развивачи:
- Дизајнирајте во графичка програма. Не дизајнирајте од кодот, дури ни нешто ситно.
- Усогласете се со дизајнот. Бидете свесни за оригиналниот дизајн и немојте да се обидувате да го победите.
- Типографијата е важна. Времето кое го посветувате на неа ја рефлектира нејзината важност во дизајнот.
- Избегнете ограничени видни полиња. Вашите надополнувања треба да се истакнуваат онолку колку што навистина е предвидено со целиот дизајн. Само заради тоа што вие сте ги направиле, не значи дека тие се поважни од останатите.
- Врски и хиерархија: Научете како тие функционираат во дизајнот за да можете да ги имплементирате.
- Белината, растојанието и порамнувањето се важни. Нека бидат точни до пиксел и рамномерни насекаде.
- Ако не сте сигурни во вашите вештини, тогаш на дополнителните елементи нанесете им минимален стил.
- Оставете време помеѓу корекциите. Секогаш погледнете го дизајнот со свежи очи.
- Секогаш кога тоа е можно, вашата имплементација треба да се поклопува до пиксел.
- Бидете храбри. Побарајте од искусни дизајнери мислење за вашата работа.
Не секој front-end развивач може да биде фантастичен дизајнер, но секој front-end развивач мора да има познавања од дизајн.
Мора доволно да ги разбирате концептите на дизајнот за да идентификувате што се случува и точно да го нанесете дизајнот во завршениот проект. Понекогаш, може да се извлечете со слепо копирање, ако имате детален дизајнер (и ако сте посветени на деталите за да ископирате сé од пиксел до пиксел).
Сепак, за да направите големите проекти да бидат одлични во многу варијации на содржина, мора да сфатите што се случувало во главата на дизајнерот кога го поставувал дизајнот. Не треба само да видите како изгледа дизајнот, туку и да разберете зошто тој изгледа онака како што изгледа. Така ќе можете да ги земете во предвид техничките и естетските ограничувања кои ќе влијаат на вашата работа.
извор: toptal
Дури и да сте front-end развивач, дел од вашето надоградување како стручњак во областа треба да вклучува и учење дизајн.
