Как и почему фронтенд-разработчикам нужно диверсифицироваться в дизайне
Это больше, чем просто код, код и многое другое.
Фронтенд-разработка - это странное, особенное место в программировании. Чтобы быть действительно эффективным и действенным фронтенд-инженером, необходимы сбалансированные отношения между творческой и аналитической сторонами мозга.
Творчество и воображение в изобразительном искусстве - это навыки, которые часто теряются, когда мы поступаем в старшую школу. Несмотря на то, что мы весь день занимаемся кодом, фронтенд-разработчикам все равно нужно время от времени полагаться на эти навыки - даже когда мы этого не хотим. Не каждая компания предлагает готовые каркасы или детализированные макеты того, как может выглядеть конкретная страница для множества устройств. В результате разработчику внешнего интерфейса часто приходится заполнять визуальные пробелы, иногда создавая исполнительный дизайн, потому что продукт должен быть готов.
Бывает и бывает очень часто.
Даже если у вас есть все визуально предоставлено вам с четкими спецификациями и ожиданиями, знание дизайна - удобная часть вашего инструментария разработки интерфейса.
Природа Front End разработки
Front-end разработка - это нечеткая область в технологиях, потому что это связующий мост между людьми и кодом за пределами экрана. Он представляет бизнес и предоставляет пользователям доступ к товарам и услугам, которые предлагает бизнес.
Когда мы говорим о фронтенд-разработке, мы обычно говорим только о коде. В центре внимания - JavaScript, CSS, различные фреймворки и библиотеки. Однако разговоры о дизайне часто остаются в стороне. Но интерфейс - это больше, чем просто код. Это материализация цифрового дизайна и проявление бизнес-правил в форме, которая вызывает желаемый отклик со стороны пользователя.
Мы не склонны признавать это, но интерфейс - это междисциплинарная область, которая включает в себя сочетание грамотности кода, знаний дизайна и цифровой психологии. Знание визуальных паттернов, теории цвета и типографики - вот лишь некоторые из вещей, с которыми сталкиваются многие фронтенд-разработчики, независимо от делегирования ролей и разделения.
Где дизайн подходит
Внешняя разработка и проектирование связаны с отношениями между серверной разработкой и архитектурами схемы базы данных. Эффективные разработчики не существуют для того, чтобы кодировать изолированно, и им необходимо быть подключенными к смежным областям, чтобы эффективно выполнять свои роли, иногда предлагая консультационные услуги своим коллегам.
Понимание дизайна как фронтенд-разработчик использует технические знания и способность производить по крайней мере половину продукта без необходимости в дополнительных людских ресурсах - то, чего хотел бы любой потенциальный работодатель. Понимание дизайна и того, как он влияет на пользователей и их выбор, дает фронтенд-разработчику диверсификацию навыков - помимо знания того, как эффективно кодировать.
Шаблоны проектирования также материализуются в соответствующие шаблоны кода. Когда разработчик может идентифицировать эти шаблоны, это может привести к тому, что CSS будет хорошо организован и легко расширяется с помощью HTML без чрезмерной вложенности. В дополнение к этому, понимание дизайна может означать меньшую зависимость от загружаемых библиотек и решений для создания чего-то, что соответствует ожиданиям хорошей цифровой эстетики.
Выходя за рамки обыденного
Возможности цифрового дизайна - это больше, чем просто цвета и типографика. Вот несколько областей, которые необходимо изучить, чтобы развить и улучшить свои навыки фронтенд-разработки и наборы инструментов знаний.
Дизайн цифровой композиции
Ожидается, что каждый фронтенд-разработчик должен знать и понимать адаптивную и плавную разработку. Однако на самом деле все сводится к композиции. Адаптивная и гибкая разработка - это просто математический перевод композиции в код CSS.
Что в Google:
- макетирование
- теория визуальной иерархии
- визуальная сплоченность в графическом дизайне
- Правило третей
- дизайн выравнивания сетки
Типографика для цифровых экранов
Типографика имеет значение. В сочетании с изображениями слова - это то, как интерфейс сообщает пользователям о своей причине существования. Разные браузеры и экраны отображают один и тот же шрифт по-разному, несмотря на одинаковые настройки в вашем коде. Выберите два шрифта, которые вам нравятся - с засечками и без засечек - и придерживайтесь их, пока не разберетесь с ними полностью. Это даст вам представление о том, чего ожидать, когда дело доходит до других шрифтов.
Что в Google:
- кернинг и отслеживание типографики
- эффективный размер шрифта для настольных компьютеров, планшетов и мобильных устройств
- вес цифровых шрифтов
- оптимальная длина строки и высота строки для устройств
Цвет и эстетика интуиции
Instagram стал огромным событием сегодня, потому что он использовал рынок и стремление к эстетически приятным селфи. Хотя вы не можете установить фильтр в свой интерфейс, способность распознавать и реализовывать эффективную цветовую схему и эстетически приятные композиции - это то, что развивается с течением времени.
Интуиция - это просто набор усвоенных правил и ожиданий, кульминацией которых является способность мгновенно отличить хороший дизайн от плохого - и для этого вы должны открыть себя миру цифрового дизайна и подражать их шаблонам, пока вы не сможете создавать твой собственный. Это самый простой и быстрый метод развития вашей цветовой и эстетической интуиции. Эффективное творчество - это объединение различных элементов, которые работали на других, для создания визуально приятного, но уникального решения.
Что в Google:
- awwards, дриблинг, поведение
- цифровые цветовые палитры
- Adobe Awards
- общие шаблоны дизайна в Интернете и на мобильных устройствах
Моделирование пользовательского опыта
Дизайн не статичен. Дизайн - это опыт, который передается через физическое воплощение цветов, макета, изображений и типографики. В цифровом пространстве это включает интерактивные ответы.
Способность эффективно и точно моделировать взаимодействие пользователя с его опытом проектирования может помочь разработчику внешнего интерфейса определить будущие шаблоны в коде. Это, в свою очередь, может помочь уменьшить количество потенциальных ошибок, которые могут помешать общему взаимодействию с пользователем.
Конверсия происходит, когда пользователь получает положительный опыт. Брошенные тележки случаются, когда дела идут не так, как планировалось. Даже самые лояльные клиенты сдаются, потому что процесс выбрасывается в «слишком сложную» корзину. Дело не только в количестве кликов - дело в способности легко решить срочную проблему, с которой столкнулся пользователь. Когда это не выполняется, пользовательский опыт ухудшается.
Что в Google:
- Ценностное предложение UX
- Последовательность процесса эвристической оценки
- разработка дорожной карты продукта
- удобство использования и полезность в пользовательском опыте
- интеграция тепловых карт
Заключительные слова
Навыки дизайна и эстетического распознавания - это то, что каждый может развить. Если сомневаетесь, следуйте веб-тенденции убирать все, насколько это возможно, и сосредоточьтесь на том, чего вы пытаетесь достичь.
Часто загруженный дизайн - это непреднамеренный эффект неподготовленного взгляда. Возможность улучшить это дает разработчикам интерфейса дополнительные и очень востребованные навыки, особенно в секторе малого бизнеса и стартапов. Не у каждой компании, с которой вы сталкиваетесь, будет большой бюджет, и наличие дизайнерских знаний может помочь позиционировать вас как эксперта в области интерфейсных интерфейсов.
Понимание того, как работает дизайн, может помочь в реализации и общении, облегчая общение с постоянным цифровым дизайнером на их языке и значительно упрощая понимание потребностей, проблем и требований друг друга.
Спасибо за чтение. ❤
Афинья
