Концепции за уеб развитие Всички уеб дизайнери трябва да разберат

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

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

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

Поведение на Frontend Code

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

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

Вярвам, че всеки дизайнер трябва поне да разбере три основни езика на разработката на интерфейса (HTML, CSS и JS) заедно с начина, по който се използват. Например, повечето падащи менюта разчитат на JavaScript, но има и алтернативи само за CSS.

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

Това е възможно без да се научите да напишете един ред код.

CSS е направена стил на уебсайта. Това е предимно статично, освен CSS анимация и CSS създава по-голямата част от графика на страница. Най-динамични функции са създадени с JavaScript.

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

Отзивчиви техники

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

Точките на прекъсване са определени от a определена ширина на пиксела (и / или понякога височина), или минимум или максимум, при които оформлението се адаптира, за да отговаря на този размер на екрана. Така че отзивчивото оформление ще изглежда различно на 1080px монитор, отколкото на смартфон с 320px.

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

Вашата работа като дизайнер е да обмислите как може да бъде всяка точка на прекъсване повлияе на макета. Може да ви бъде възложено да проектирате по няколко компютъра поставяне в различни размери на екрана.

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

Помислете за модулни с дизайни

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

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

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

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

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

Разберете изображенията на Retina и SVG

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

Силно бих препоръчал тази публикация на Smashing Magazine, ако искате да научите повече за работните процеси при проектирането на ретината. Retinize Това е безплатна колекция от действия на Photoshop, които могат автоматично създава версии на ретината от вашите активи.

Повечето дизайнери вече знаят за подкрепа @ 2x изображения, но по-новите iPhone 6+ устройства имат @ 3x резолюции. Въпреки това някои проекти не се притесняват от @ 3x размера на изображението, затова говорете с вашия ръководител на проекта, преди да финализирате всички активи.

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

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

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

Разберете достъпността

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

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

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

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

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

В заключителната

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

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

Ако търсите повече свързано съдържание, разгледайте тези публикации:

• Как ефективно да общуваме с разработчиците (Smashingmagazine.com)
• Помогнете на дизайнерите и разработчиците да се научат да разбират помежду си (Uie.com)
• Обучението за код ви дава предимства като дизайнер на UX (Jessicaivins.net)