Подход к процессу разработки веб-сайта из браузера

«Для сумасшедших, неудачников, бунтовщиков, смутьянов, круглых колышков в квадратных дырах… тех, кто видит вещи по-другому — им не нравятся правила… Их можно цитировать, не соглашаться с ними, прославлять или очерняйте их, но единственное, что вы не можете сделать, — это игнорировать их, потому что они меняют положение вещей…» — кампания Apple « Думай иначе », Стив Джобс, 1997 год.

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

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

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

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

Почему? При работе над проектом адаптивного дизайна веб-сайта со всеми его сложностями у дизайнеров обычно нет времени на создание статического дизайна одного компонента (скажем, верхнего или нижнего колонтитула) в 10 различных разрешениях и окнах просмотра. Даже при разработке только для самых популярных устройств им все равно придется учитывать 4-5 экранов с разными соотношениями сторон, плотностью экрана и размерами экрана. Мягко говоря, задача не из легких.

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

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

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

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

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

Каркас и прототипирование

Прототипирование — это следующий этап в процессе разработки веб-сайта. Создание быстрых каркасов, чтобы рассказать о макете страницы, функциях и о том, как страницы сайта будут выглядеть на разных устройствах, — хорошее начало. Создание десятков вайрфреймов из разных шаблонов и компонентов не займет много времени. Из них можно создать простой прототип веб-сайта, и в зависимости от сложности проекта можно использовать такие инструменты прототипирования, как InVision, Adobe XD, Balsamiq, Moqups или Axure.

Доски настроения и интерфейсный инвентарь

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

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

Инвентаризация интерфейса — это исчерпывающая коллекция деталей, из которых состоит ваш интерфейс.

Брэд Фрост

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

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

«Дизайн в браузере» — это термин, который стал популярным с появлением адаптивного веб-дизайна. Чтобы свести к минимуму часы, затрачиваемые на такие дизайнерские программы, как Sketch, дизайнерам было настоятельно рекомендовано перенести фазу проектирования в браузер и использовать CSS для макета и стиля. Этот подход к дизайну веб-сайта оказывается более эффективным, поскольку он сокращает множество шагов.

Сосредоточив внимание на макете HTML и тестируя дизайнерские идеи «в браузере» с помощью CSS, можно сэкономить время, обычно затрачиваемое на создание статических макетов страниц в других инструментах дизайна, таких как Sketch. Дизайнерам рекомендуется приобрести хороший редактор кода и придумать хороший метод обновления браузера, чтобы они могли видеть изменения в режиме реального времени. Например, Sublime Text и Codekit — отличная комбинация.

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

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

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

Хотите попробовать другую цветовую схему заголовка? Работая всего с несколькими строками кода CSS, изменения мгновенно отображаются во всех HTML-шаблонах, на всех устройствах и экранах. Такая гибкость не может быть легко воспроизведена, когда у вас есть 20 статических макетов. Конечно, вы можете использовать «символы» в Sketch или Adobe XD для многократно используемых компонентов, но они не так универсальны, как CSS.

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

• Будете ли вы использовать препроцессор CSS? (рекомендуемые)
• Какой тип адаптивной сетки вы будете использовать для макета?
• Доступны ли для покупки шрифты, которые вы хотите использовать? Есть ли у клиента бюджет на премиальные веб-шрифты, или вы вернетесь к использованию доступных бесплатных веб-шрифтов?
• Будете ли вы использовать многоцветные или одноцветные значки? Будет ли размер меняться на сайте? Далее, вы полагаетесь на пользовательские значки или на уже существующий набор значков? Какие размеры должны соответствовать вашим иконкам?

Проблемы со шрифтами и адаптивным веб-дизайном

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

Существует множество онлайн-инструментов для выбора и тестирования шрифтов и пробных комбинаций шрифтов. На Typetester и Typecast можно найти и протестировать разные шрифты от разных сервисов и заводов. При работе с определенной службой подписки на шрифты, такой как Typekit или Fonts.com, дизайнеры могут создавать шрифты и тестировать их непосредственно на своих шаблонах страниц. Создать пакет Typekit с новыми шрифтами просто и быстро, и вы можете легко увидеть, как определенные шрифты повлияют на производительность веб-страниц.

Иконки, соответствующие фирменному стилю

При рисовании пользовательских значков необходимо определить размер, сетку и стиль. Например, при работе в Illustrator каждая монтажная область будет представлять собой одну иконку. Иконки можно легко экспортировать из Illustrator в формате SVG или PNG, которые впоследствии можно превратить в шрифт значков с помощью таких сервисов, как Icomoon. Рекомендуется использовать векторные значки (SVG), поскольку векторы не зависят от разрешения, поэтому можно не беспокоиться о том, как они отображаются на экранах высокой четкости (Retina).

Руководство по стилю и CSS для контроля процесса разработки веб-сайта

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

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

В CSS лучше всего разделить стили компонентов на отдельные файлы. Например, стилизация пагинации будет в _pagination.scss , элементы формы в _form.scss , и все эти файлы будут включены в один файл SCSS с другими файлами (переменными, миксинами и т. д.).

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

Использование таблиц стилей — модульный CSS

С точки зрения разработки существует множество подходов к написанию модульного CSS. Наиболее известны SMACSS (масштабируемая и модульная архитектура для CSS), BEM (блок, элемент, модификатор) и OOCSS (объектно-ориентированный CSS). Есть чему поучиться, даже если в конечном итоге вы разработаете свой собственный подход. На этом этапе у вас должна быть хорошая коллекция компонентов пользовательского интерфейса и веб-страниц, которые позволят вам легко создавать новые веб-страницы. Вы можете копировать и вставлять элементы из руководства по стилю и переставлять их по мере необходимости.

Поскольку все модульное, вам не нужно беспокоиться о дизайне и единообразии кода; но не забывайте, что если вы настраиваете компонент пользовательского интерфейса для всей системы, вам нужно будет обновить руководство по стилю с учетом изменений (или добавить новый компонент). Чтобы все было организовано, лучше всего использовать какой-либо подход к шаблонам/автоматизации для работы с веб-страницами, такой как Gulp или Grunt.

Что дальше? Дизайн в браузере

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

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

Как при использовании пользовательских веб-шрифтов увеличение веса шрифта повлияет на скорость загрузки страницы? Мы можем тестировать производительность незавершенной веб-страницы с помощью таких сервисов, как WebPageTest, и принимать обоснованные решения на основе фактических результатов. Мы определенно не можем сделать это в Photoshop или Sketch.

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

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

• Отзывчивый дизайн — лучшие практики и рекомендации
• Как создать эффективную целевую страницу
• Полное руководство по дизайну веб-сайта электронной коммерции
• Основы редизайна веб-сайта — пример из практики
• Движущие силы дизайна — пример редизайна веб-сайта