Как подходить к дизайну для разработчиков

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

Такое мышление может нанести ущерб отношениям между разработчиком и дизайнером. Отсутствие базовых знаний о дизайне может сдерживать разработчиков в их карьере или мешать им заниматься проектами только потому, что у них нет дизайнера на борту.

Почему разработчики должны изучать дизайн

Хотя дизайн и разработка часто считаются отдельными дисциплинами, есть люди, которые освоили и то, и другое. Даже если кто-то заинтересован только в том, чтобы быть дизайнером или разработчиком, а не в том и другом, важно изучить хотя бы основы другой дисциплины.

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

Во-первых, в небольших командах может не быть специального дизайнера. Кроме того, есть разработчики, которые хотят заниматься проектами полностью самостоятельно, но не могут позволить себе нанять дизайнера (или хотят потратить деньги в другом месте). Научиться проектировать свои собственные продукты, по крайней мере, достаточно хорошо, чтобы прожить до тех пор, пока дизайнер не может быть нанят, является бесценным ресурсом.

Другая важная причина, по которой разработчики изучают дизайн, заключается в том, что они могут более эффективно работать с дизайнерами. Для дизайнера невероятно неприятно передавать полностью разработанный файл для веб-сайта или приложения, которые, как они ожидают, будут идеальными до пикселя в готовом продукте, только для того, чтобы обнаружить, что их дизайн был значительно изменен разработчиком, кодирующим его.

Если разработчики не понимают основ дизайна, они могут упустить из виду мелкие детали, которые делают пользовательский интерфейс особенно удобным для пользователя и непреднамеренно саботируют пользовательский опыт проекта. Когда дизайнеры присылают тонны исправлений, это может напрячь отношения между разработчиком и дизайнером, не говоря уже о замедлении завершения проекта.

Чтобы улучшить отношения и командную работу между междисциплинарными командами, разработчики сделали бы себе одолжение, научившись смотреть на дизайн «глазами дизайнера», а не смотреть на него исключительно с точки зрения разработки — овладение этим навыком значительно улучшит их проекты.

Создание дизайнерского мышления

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

Они начинают распылять краску на стены и украшать пространство, не понимая, для чего они украшают пространство (или даже не следя за тем, чтобы такие работы, как сантехнические и электрические работы, были завершены), так сказать.

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

Тем не менее, новые дизайнеры, независимо от того, имеют ли они опыт разработки или нет, также часто увязают в теории. Они тратят так много времени на изучение и размышления о вещах, что у них никогда не получается применить то, что они изучают.

И дизайнеры, и разработчики склонны быть перфекционистами. Но продвигать проекты до того, как они станут идеальными (поскольку они, вероятно, никогда не будут) важны для процесса. Особенно новым дизайнерам нужно преодолевать свою неуверенность, выкладывать свои работы на всеобщее обозрение и учиться на отзывах, которые они получают.

Один из лучших способов по-настоящему изучить дизайн — попытаться воссоздать дизайн других. Выделение того, что работает, а что нет, и выяснение того, почему конкретный дизайн привлекателен, является одним из самых ценных навыков, которым может овладеть новый дизайнер или разработчик. Придание уникального вида существующему дизайну является обычным делом в отрасли (о чем свидетельствует функция «Отскок» Dribbble).

Дизайн в браузере

Многие дизайнеры сопротивляются дизайну непосредственно в браузере, поскольку обычно это означает, что им должно быть удобно писать хотя бы базовый код HTML и CSS. Именно по этой причине разработчикам, начинающим заниматься дизайном, часто удобно — они уже умеют писать код.

Существуют инструменты, которые могут помочь при проектировании в браузере и облегчить жизнь как дизайнерам, так и разработчикам. Простые плагины для браузера доступны для всего: от выбора цветовых палитр до изучения кода CSS и HTML другого сайта.

Существуют также более сложные инструменты, такие как Figma, которые действуют как полнофункциональный инструмент дизайна прямо в браузере. Figma позволяет дизайнерам сотрудничать, отправлять активы заинтересованным сторонам (и даже позволять им вносить изменения в контент и копировать проекты), а также позволяет разработчикам иметь доступ к фактическим проектам в режиме реального времени. Это отличный вариант для разработчиков-дизайнеров, которые хотят создавать проекты и дизайн-системы, которые можно масштабировать с течением времени.

Webflow — еще один вариант дизайна в браузере, который может понравиться разработчикам. Хотя интерфейс дизайна является визуальным, экспортируемый код представляет собой чистый, семантический CSS и HTML, который оценят разработчики (не все инструменты визуального дизайна экспортируют чистый код). Webflow включает в себя инструменты для дизайна и верстки, а также встроенные инструменты CMS и электронной коммерции, а также варианты хостинга.

Использование цвета, типографики и макета

Прежде чем углубиться в визуальные принципы цвета, типографики и макета, важно поговорить об основном удобстве использования. Самый эстетически приятный дизайн в мире бесполезен, если им нельзя пользоваться.

Одним из наиболее важных принципов юзабилити является идея последовательности или предсказуемости. Дизайн должен быть достаточно предсказуемым, чтобы пользователи могли интуитивно понять, как его использовать. Например, синий подчеркнутый текст для интерактивных ссылок, полные и хорошо маркированные навигационные меню и т. д. Расстояние между элементами, типографика и цветовая схема также должны быть постоянными.

Другие принципы юзабилити, которые следует учитывать в каждом дизайн-проекте, включают такие вещи, как предотвращение ошибок (и информативные сообщения об ошибках, когда они происходят), знакомый язык (используйте язык, к которому привыкли люди, а не «милые» или творческие альтернативы, которые могут быть неясными). ), гибкость и эффективность, а также легкодоступную помощь. У Nielsen Norman Group есть дополнительные эвристики юзабилити, о которых также следует помнить.

Оценки юзабилити должны проводиться на протяжении всего процесса проектирования и разработки, чтобы убедиться, что продукт работает так, как задумано командой дизайнеров и разработчиков, и чтобы пользователи не были сбиты с толку. Эвристические оценки включают сравнение списка предопределенных принципов проектирования, которым должен следовать продукт, с фактическим продуктом, чтобы увидеть, где возникают отклонения (и затем исправить эти отклонения).

Как только юзабилити будет полностью понято по отношению к имеющемуся продукту, дизайнеры-разработчики могут перейти к более визуальным аспектам дизайна.

Базовая теория цвета

Теория цвета — один из самых сложных аспектов визуального дизайна. Небольшое изменение оттенков может полностью изменить визуальное воздействие и эмоциональный эффект цвета. Это одна из причин, по которой многие дизайнеры, работающие в индустрии уже много лет, до сих пор борются с цветом.

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

Во-первых, разница между теплыми цветами, холодными цветами и нейтральными. К теплым цветам относятся красный, оранжевый и желтый. Теплые цвета, как правило, будут яркими и энергичными. К холодным цветам относятся зеленый, синий и фиолетовый. Эти цвета обычно более спокойные и расслабляющие.

К нейтральным относятся белый, черный, серый, коричневый и бежевый. Добавление белого, черного или серого к теплым или холодным цветам меняет их значение и воздействие. Белый осветлит цвета и в целом сделает их эффект менее интенсивным или более позитивным (например, фиолетовый считается загадочным, царственным цветом, а сиреневый часто ассоциируется с весной и счастьем). Серый приглушит цвета и может уменьшить их воздействие. Черный затемняет цвета и может сделать их более консервативными (подумайте о различном влиянии таких цветов, как ярко-синий и темно-синий).

Как только дизайнер получит базовое представление о значениях цветов, он может использовать такие инструменты, как Coolors, Design Seeds или Colormind, чтобы создать окончательную согласованную палитру для своего дизайна.

Использование цвета HSL

Когда дизайнер думает о веб-цветах, он часто думает о шестнадцатеричных значениях. Хотя это стало отраслевым стандартом с точки зрения веб-цветов, разработчики могут обнаружить, что работа со значениями цвета HSL имеет больше смысла.

Для большинства людей (включая дизайнеров) шестнадцатеричные значения не связаны друг с другом. Два очень похожих цвета могут иметь совершенно разные шестнадцатеричные значения. Например, #68B4D4 и #92C8E0 — довольно похожие оттенки синего (просто один немного ярче и светлее другого), и все же их шестнадцатеричные значения не имеют очевидной корреляции.

Однако их значения HSL показывают, насколько они тесно связаны: #68B4D4 становится HSL (198, 58%, 62%), а #92C8E0 становится HSL (198, 56%, 73%). Первое число в последовательности (в данном случае 198) указывает на конкретный оттенок. Второе число — это процент насыщенности (насколько ярким или насыщенным является цвет). Третье число — это процент светлоты (или добавленного белого) цвета.

Поскольку корреляции между значениями цвета так легко увидеть с помощью HSL и hex, разработчики часто обнаруживают, что манипулировать цветами с помощью кода с помощью HSL значительно проще.

Принципы типографики

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

Типографская иерархия — одно из первых вещей, которым должен научиться дизайнер-разработчик. Отношения между различными элементами шрифта в дизайне жизненно важны для того, чтобы сделать этот дизайн более удобным.

По крайней мере, дизайн должен иметь три уровня типографской иерархии: заголовки, подзаголовки и основной шрифт. Заголовок должен быть самым заметным, затем следуют подзаголовки, а затем основной шрифт, который должен хорошо читаться.

Многие начинающие дизайнеры слишком много внимания уделяют размеру шрифта при создании своей иерархии, а не стилю шрифта. Иногда вместо того, чтобы делать заголовок значительно больше, чем подзаголовок, например, заголовок может быть выделен жирным шрифтом или с заглавной буквы, в то время как подзаголовок остается в заголовке и имеет нормальный вес. Цвет также можно использовать для различения субтитров и заголовков, а также между этими элементами и основным текстом.

Комбинирование разных шрифтов также может запутать многих дизайнеров, и все же это распространенный способ создания визуальной иерархии. Они включают в себя выбор дополнительных шрифтов (противоположности часто притягиваются, но в определенной степени то, насколько хорошо сочетаются шрифты, должно определяться на основе интуиции, которая оттачивается с течением времени), выбор подходящих шрифтов (не используйте Comic Sans в юридическом документе, для например, или отображаемый шрифт для основного текста, который не будет разборчивым при меньших размерах), и создание контраста между гарнитурами (не используйте два очень похожих).

Еще один простой способ комбинирования шрифтов — это выбор шрифтов из больших семейств шрифтов. Есть даже семейства, включающие версии с засечками и без засечек, которые хорошо работают вместе (например, Mrs Eaves и Mr Eaves, Fedra или Museo и Museo Sans). Это может быть самый простой способ начать по-настоящему экспериментировать с комбинированием шрифтов, поскольку они созданы для того, чтобы хорошо смотреться вместе.

При работе с большими типографскими иерархиями (такими как добавление H1, H2, H3, H4 и т. д.) важно следовать какой-то причине в типографическом масштабе. Последовательность Фибоначчи — это одна из возможных шкал для начала, хотя существуют и другие установленные типографские шкалы.

Один общий масштаб, который используется как в типографике (и вообще в дизайнерских макетах), состоит из 4, 8, 16, 24, 36, 48, 72, 108 и т. д. Эти цифры можно комбинировать различными способами для создания дизайна с приятным визуальным оформлением. пропорции (например, шрифт размером 24 пикселя в сочетании с высотой строки 36 пикселей).

Основные принципы компоновки

С момента зарождения Интернета существуют определенные шаблоны компоновки, которые стали стандартами. Примеры включают основную навигацию в верхней, левой или правой боковой панели с дополнительной информацией или параметрами навигации, а также основное содержимое, занимающее оставшуюся часть пространства.

Хотя есть определенные отклонения от этого базового макета (нет верхней навигации, нет боковой панели, две боковые панели и т. д.), часто это довольно безопасная ставка при создании нового макета. Отклонение от этой базовой схемы должно быть сделано только целенаправленно, особенно начинающими и неопытными дизайнерами-разработчиками.

Создание предсказуемого дизайна — обычно это означает постоянство — во многом способствует удобству использования продукта. Отклоняться от того, что пользователь ожидает увидеть при использовании продукта, следует делать только тогда, когда выигрыш в удобстве использования больше, чем потери.

Лучше не использовать 72-пиксельные жирные синие заголовки на одной странице, а затем 36-пиксельные красные заголовки на другой для того же типа контента, так как согласованность макета является ключевым фактором. Точно так же интервал (отступ) между заголовком и основным текстом, равный 36 пикселям в одном разделе и 32 пикселям в другом, приведет к визуальному несоответствию. Хотя человек может не сразу понять, почему разница раздражает, он ее почувствует.

Подобно упомянутому выше типографскому масштабу, интервал между элементами в масштабе 4, 8, 16, 24, 36, 48, 72 или 108 пикселей создаст визуально приятный дизайн. Хорошая идея — использовать достаточное пространство между элементами, дать им возможность «дышать»; новые дизайнеры часто избегают пустого пространства и могут получить дизайн, который выглядит загроможденным и подавляющим.

У некоторых может возникнуть вопрос, почему шкала расположена именно так. Почему между первыми двумя числами разница всего в 4 пикселя, а между двумя последними скачок в 36 пикселей? Причина проста: на малых масштабах легко различимо увеличение в 4 пикселя (8 пикселей в два раза больше, чем 4, что легко различить). Но с большими числами разницу между 72 пикселями и 76 пикселями увидеть нелегко. Большие различия легче увидеть по мере увеличения размеров.

Постоянный интервал — одна из причин, по которой сеточные подходы к дизайну стали настолько популярными. Начиная с сетки (как правило, с 12, 16 или 24 столбцами), дизайнеры получают основу для работы, в которой все остается согласованным. Встроенные промежутки между столбцами также помогают гарантировать, что различные элементы дизайна и содержимое внутри них имеют некоторое пространство для передышки.

Заключение

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

Понимание основных принципов дизайна — принципов удобства использования, теории цвета, типографики, макета и UX — также поможет разработчикам лучше разрабатывать . Когда они понимают, почему дизайнеры делают тот выбор, который они делают, разработчики могут лучше работать с дизайнерами для создания действительно выдающихся продуктов.

Дальнейшее чтение в блоге Toptal Design:

• Принципы дизайна и их важность
• Сколько кодирования должны знать дизайнеры?
• Спектр возможностей: руководство по выбору цвета пользовательского интерфейса
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия
• Основы дизайна — руководство по визуальной иерархии (с инфографикой)