Цифровой дизайн в программировании

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

Веб-разработка остаётся основой интернет-архитектуры. Многие студенты концентрируются на конкретных инструментах работы в вебе (HTML, CSS, JavaScript, Ruby On Rails), а также изучают дизайн интерфейсов и получают знания и опыт по разработке серверной части — и в итоге конечным результатом всего является создание веб-продуктов на любой стадии процесса.

Обычно люди думают, что дизайн — это нечто туманное и недостижимое. На самом же деле дизайн — это навык, который можно освоить.

В основе дизайна чего угодно лежат три компонента:

• •    Эстетика

• •    Эмпатия

• •    Инструменты

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

Эмпатия — это понимание людей, для которых мы проектируем. В продуктовой дизайне мы используем для этого термины пользовательское исследование (user research) и проектированием пользовательского опыта (user experience design). Не важно, насколько круто вы передаете свои идеи через дизайн, если вы не знаете, с кем вы говорите, и о чем они хотят разговаривать. Дизайн никогда не существует в вакууме. В его основе всегда есть проблема и цель.

И наконец, нужно знать инструменты дизайна. Их существует огромное множество: от салфетки, на которой вы накидали первоначальную идею, до программ типа Processing и D3.js. Думаю, что первое, что пришло вам в голову — это Photoshop или, может быть, Illustrator. Код также может служить инструментов дизайна. На самом деле многие продуктовые дизайнеры полностью переключаются на код, или работают одновременно с интерфейсом и кодом в инструментах типа Framer.js.

Правило 1. Сетка

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

Типографская сетка.

Традиционная типографская сетка состоит из колонок, межколоночных интервалов, модулей, негативного пространства, полей и базовых линий. Среди основных печатных лейаутов можно назвать манускрипт (manuscript), колонки (columns) и блоки (blocks). Типографская сетка может быть очень простой или очень сложной — все зависит от ваших желаний, ведь в данном случае нет практически никаких технических ограничений.

Элементы типографской сетки.

Веб-сетка.

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

Выбор сетки во многом зависит от типа проекта, над которым вы работаете. Для большинства проектов нужна сеточная система, в которой есть некий связывающий контейнер для колонок. Это означает, что общая ширина фиксирована, например, 960px или 68em. Благодаря связывающему контейнеру ваш текст остается читаемым на больших экранах. Интервал идеальной читаемости — от 45 до 75 символов в строке.

Вы запросто можете использовать в своем проекте CSS сетку. Даже не могу придумать пример, когда может понадобиться создавать сетку с нуля. Существует масса сеточных фреймфорков (960, Bootstrap, Foundation). В любом сеточном фреймворке есть колоночная система. Наиболее распространены 12, 16 и 24-колоночные системы. Мой любимый фреймворк — Neat.io, потому он по умолчанию предлагает хорошую основу, но если нужно что-то изменить — это легко сделать.

По умолчанию в Neat. io 12 колонок; ширина внешнего контейнера составляет 68em.

При работе с веб-приложениями стоит позаботиться, чтобы сетка использовала всю ширину окна и была модульной. При разработке мобильных приложений модульность сетки просто необходима: разные модули должны аккуратно выстраиваться так, чтобы занимать все экранное пространство. Для этого есть специальный фреймворк Zurb Foundation for Apps.

Правило 2. Типографика

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

Подбираем качественный шрифт

Стили. Ищите гарнитуру, у которой есть несколько стилей и весов жирного шрифта и курсива. К примеру, у шрифта Sura нет курсива — впоследствии из-за этого могут возникнуть проблемы.

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

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

Не слишком манерный. Это скорее не правило, а вопрос ощущений, но постарайтесь избегать слишком выразительных шрифтов — по крайней мере пока не определитесь с общей картиной дизайна. Пример такого шрифта.

Крадите. Совершенно не нужно быть супер оригинальными в выборе шрифтов. Вдохновляйтесь работами известных блогеров и дизайнеров. Typewolf публикует отличные примеры и рекомендации.

Правило 3. Цвет

Первое, что хочется сказать: цвет — это очень субъективная вещь. Определенно существуют правила составления цветовых схем, но само восприятие цвета во многом зависит от нашего личного опыта и культурных особенностей. Можно научиться применять правила создания цветовых схем, но не стоит рассчитывать на 100% успех. Для начала давайте рассмотрим некоторые цветовые тренды, а потом я покажу вам как работает цветовой круг.

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

Материальный дизайн

Пастельные тона и фотографии с эффектом crisp

Оттенки серого с одним акцентным цветом

Если сомневаетесь — всегда отдавайте предпочтение оттенкам серого с

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

Зайдите на Awwwards — и вы найдете там много вдохновляющих цветовых схем для интерфейса (вдохновляясь, не забывайте о своем проекте)

Пантон-цвет года, книги по цвету, Pantone nerd blogs

Фотографируйте всякие крутые штуки — особенно индустриальный дизайн — и анализируйте фотографии в Adobe Color.