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

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

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

Правете неща в графична програма

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

Следователно, винаги идва момент във всяка работа отпред, където в крайна сметка се налага да направите някои ощипвания, свързани с естетиката. Независимо дали става въпрос за поставяне на отметка, която се показва, когато поставите отметка, или за оформление на страница, което PSD е пропуснал, предните потребители често се справят с тези на пръв поглед незначителни задачи. Естествено, в перфектен свят това не би било така, но все още не съм намерил перфектен свят, следователно трябва да бъдем гъвкави.

Добрият преден разработчик трябва да използва професионални графични инструменти. Не приемайте заместител. Tweet

За тези ситуации винаги трябва да използвате графична програма за макети. Не ме интересува кой инструмент ще изберете: Photoshop, Illustrator, Fireworks, GIMP , както и да е. Просто не се опитвайте просто да проектирате от вашия код. Прекарайте една минута в стартиране на истинска графична програма и да разберете как трябва да изглежда, след това отидете на кода и го направете така. Може да не сте експерт дизайнер , но все пак ще получите по-добри резултати.

Съчетайте дизайна, не се опитвайте да го победите

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

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

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

Вместо да питате „Изглежда ли моята отметка невероятно?“ трябва да попитате: „Колко добре отговаря моят отметка на дизайна?“

Винаги трябва да се фокусирате върху работата с дизайна, а не върху опитите да го надминете.

Типографията прави разликата

Ще се изненадате да разберете каква част от външния вид на дизайна се влияе от типографията. Ще бъдете също толкова изненадани да научите колко време отделят дизайнерите за това. Това не е начинание „вземи и пусни“, в него се влагат сериозно време и усилия.

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

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

Ако работите с дизайн, не забравяйте да следвате избора на типография на дизайнера. Това не означава само избор на шрифт. Обърнете внимание на разстоянието между редовете, разстоянието между буквите и т.н. Не пренебрегвайте колко е важно да съответствате на типографията на дизайна.

Също така, уверете се, че използвате правилните шрифтове на правилното място. Ако дизайнерът използва Джорджия само за заглавки и Open Sans за тяло, тогава не трябва да използвате Georgia за body и Open Sans за заглавки. Типографията може лесно да направи или наруши естетиката. Прекарайте достатъчно време, като се уверите, че отговаряте на типографията на вашия дизайнер. Ще бъде добре прекарано време.

Дизайнът отпред не понася визията на тунела

Вероятно ще правите малки части от цялостния дизайн.

Визията на тунела е често срещана капана за разработчиците от предния край. Не се фокусирайте върху нито един детайл, винаги гледайте общата картина. Tweet

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

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

Връзки и йерархия

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

Добрият разработчик от предния край ще уважава дизайнерските взаимоотношения и йерархията. Страхотен разработчик ще ги разбере. Tweet

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

Бъдете придирчиви към празното пространство и подравняването

Това е чудесен съвет за подобряване на вашите проекти и / или по-добро изпълнение на проектите на други: Ако дизайнът изглежда използва интервали от 20 единици, 40 единици и т.н., тогава се уверете, че всяко разстояние е кратно на 20 единици.

Това е наистина мъртъв прост начин за някой, който няма око за естетика, да направи значително подобрение бързо. Уверете се, че вашите елементи са подравнени до пиксела и че разстоянието около всеки ръб на всеки елемент е възможно най-равномерно. Където не можете да направите това (например места, където се нуждаете от допълнително пространство за посочване на йерархия), направете им точни кратни на разстоянието, което използвате другаде, например два пъти по подразбиране да създадете отделяне, три пъти, за да създадете повече , и така нататък.

Направете всичко възможно, за да разберете как дизайнерът използва интервали и следвайте тези концепции във вашата компилация. Tweet

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

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

Ако не знаете какво правите, правете по-малко

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

По-малко е повече. Ако вашият дизайнер е свършил добре работата си, трябва да се въздържате от инжектиране на собствените си дизайнерски идеи. Tweet

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

Оставете работата на дизайнера да заеме централно място и оставете работата ви да заеме задната седалка.

Времето прави глупаци от всички нас

Ще ви кажа една тайна за дизайнерите: 90 процента (или повече) от това, което всъщност са записали на хартия или платно на Photoshop, не е толкова страхотно.

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

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

И така, как да приложите това? Един важен метод е отделянето на време между версиите. Работете, докато изглежда като нещо, което харесвате, след това го приберете. Дайте му няколко часа (още по-добре е да го оставите за една нощ), след това го отворете отново и погледнете. Ще бъдете изумени колко различно изглежда със свежи очи. Бързо ще изберете области за подобрение. Те ще бъдат толкова ясни, че ще се чудите как изобщо сте ги пропуснали.

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

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

Пиксели имат значение

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

Предни разработчици трябва да се опитат да съчетаят оригиналния дизайн до последния пиксел. Tweet

В някои области не можете да бъдете перфектни. Например, вашият контрол върху разстоянието между буквите може да не е толкова прецизен като този на дизайнера, а сянката на CSS може да не съвпада точно с такава на Photoshop, но все пак трябва да се опитате да се приближите възможно най-близо. За много аспекти на дизайна наистина можете да постигнете перфектна пикселна точност. Това може да доведе до голяма разлика в крайния резултат. Един пиксел тук-там не изглежда много, но се добавя и влияе на цялостната естетика много повече, отколкото бихте си помислили. Така че го следете.

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

Вземете обратна връзка

Трудно е да се спечели „око за дизайн“. Още по-трудно е да го направите сами. Трябва да потърсите принос на други наистина да видите как можете да направите подобрения.

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

Нека дизайнерите критикуват работата ви. Използвайте добре критиките им и не ги противопоставяйте. Tweet

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

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

Изградете дълготрайна, продуктивна връзка с вашите дизайнери. От жизненоважно значение за полезна обратна връзка, качество и изпълнение. Tweet

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

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

Заключение

За да обобщим, ето кратък списък с дизайнерски съвети за разработчици от предния край:

• Дизайн в графична програма. Не проектирайте от код, дори и малките неща.
• Съответства на дизайна. Бъдете наясно с оригиналния дизайн и не се опитвайте да го подобрите, просто го съчетайте.
• Типографията е огромна. Времето, което отделяте, за да се уверите, че е правилно, трябва да отразява неговата важност.
• Избягвайте тунелното зрение. Уверете се, че вашите добавки се открояват само толкова, колкото би трябвало. Те не са по-важни само защото сте ги проектирали.
• Връзки и йерархия: Разберете как те работят в дизайна, за да можете да ги внедрите правилно.
• Празнината и подравняването са важни. Направете ги с точност до пиксела и ги направете равномерно по време на всичко, което добавите.
• Ако не сте уверени в уменията си, направете допълненията си възможно най-минимално оформени.
• Отделете време между ревизиите. Върнете се по-късно, за да видите дизайнерската си работа със свежи очи.
• Идеалното изпълнение на Pixel е важно навсякъде, където е възможно.
• Бъди смел. Потърсете опитни дизайнери, които да критикуват работата ви.

Не всеки разработчик на фронт-енд ще бъде фантастичен дизайнер, но всеки разработчик на фронт-енд трябва да бъде поне компетентен по отношение на дизайна.

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

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

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

Свързани: Принципи на проектиране: Въведение в йерархията