Привет, решила рассказать об очевидных и не очень этапах в работе над созданием дизайна сайта. Ссылаться буду на свою недавнюю работу, которую можно посмотреть тут.
Статья будет полезна новичкам в дизайне и в вебе, в частности.
Начну с того, что это мой не первый сайт, но до этого работа велась скорее интуитивно и по обстоятельствам, что не очень приемлемо, если вы хотите связать свою профессиональную сферу с веб-дизайном и выполнять коммерческие заказы.
Как и в любой сфере в веб-дизайне есть определенный пайплайн, которого следует придерживаться.
Итак, в рамках учебного проекта от «Логомашины» я делала лонгрид на тему архитектуры Сантьяго Калатравы. Тематику выбрала интересную для себя, и решила не только задизайнить сайт, но и написать саму статью.
Этап первый. Исследование темы.
Так как статью и контент я подбирала самостоятельно, сперва стоило погрузиться в тематику и понять о чем и как я хочу написать, какие моменты осветить, о чем рассказывать, а что пропустить.
На данном этапе было просмотрено и прочитано много контента в сети: статьи, лекции, официальный сайт архитектора и другие архитектурные сайты.
Этап второй. Портрет пользователя.
Прежде чем приступать к проектной работе следует выяснить, кто будет пользователем сайта, в данном случае читателем статьи. В рамках проекта были составлены гипотетические портреты пользователей, которым могла бы быть интересна статья.
Портрет пользователя включает описание: Возраста, статуса, целей, которые преследует человек, характер личности, уровень пользователя и многое другое.
В данном случае, я составляла не очень подробный портрет, так как — это лонгрид, а не интернет-магазин или приложение. Но и этих данных хватило, чтобы понять как может выглядеть дизайн и будет ли он привлекательным для читателя.
Этап третий. Мудборд и Референсы.
Опираясь на уже полученную информацию на предыдущих этапах я стала определяться как же может выглядеть мой лонгрид, какое у него будет настроение, подача материала, какие приемы можно использовать при оформлении.
Самыми распространенными сайтами для поиска идей являются:
И любимый мной.
На этом этапе я собирала лонгриды на различные темы, отсматривала архитектурные сайты, сайты об интерьерах, строительстве, дизайне: все что могло бы пересекаться с моей тематикой.
Основываясь на референсах, которые я нашла я подбирала шрифты, которые могли бы подойти для сайта и отбирала фотоконтент.
Так как тематика лонгрида — архитектура Саньяго Калатравы, выбор визуального наполнения был очевиден.
Где же можно взять фотоконтент для проекта, если у вас нет отснятого материала? В моем случае, выбор пал на Википедию, которая использует для своих нужд фотографии, которые распространяются по свободной лицензии СС и с оговорками могут быть использованы для личных и коммерческих целей.
Этап четвертый. Подбор шрифтовой пары и сетки для лонгрида.
Лонгрид — это по сути статья, которая опубликована в сети. Соответственно, главный упор делается на удобочитаемость и аккуратную верстку текста.
Исходя из тематики — Ультрасовременная архитектура, и того что текст должен быть максимально удобочитаемым. Я выбрала для проекта гуманистические гротески:
- Ubuntu для заголовков и акцентов.
- Source Sans Pro для основного текста.
Оба шрифта можно найти в Google Fonts, который максимально удобен для подбора шрифта, особенно, если нужен кириллический шрифт, как в моем случае.
Так же есть полезный сервис по подбору шрифтовой пары. https://fontjoy.com/
Порядок же в размещении контента мне помогла сохранить сетка, которая поделила лонгрид на две колонки.
Это не самая простая сетка для сайта, но мне она приглянулась удобством и большим количеством воздуха между текстовыми блоками.
Этап пятый. Wireframe или прототип.
После того, как мы определились с текстом, подбором шрифтов, размерами шрифтовых пар и интерлиньяжем можно приступать к прототипу.
Составляя структуру сайта мы полностью размещаем текстовый контент и размечаем место для элементов сайта, навигации и фотографий, получая в итоге готовый каркас.
В последствии его можно прототипировать и добавить интерактив, но в данном проекте это не требовалось.
Этап шестой. Дизайн-концепция.
Когда структура сайта готова можно приступать к самому интересному, непосредственно к созданию самого дизайна сайта.
На этапе разработки дизайна могут быть показаны несколько концепций, либо же несколько вариантов в рамках одной дизайн-концепции.
Этап седьмой. Дизайн сайта.
Самая понятная часть, просто доводим все до ума, применяем утвержденную дизайн-концепцию ко всему сайту, вносим корректировки. Любуемся результатом.
Этап восьмой. Адаптивы.
В этом проекте увы нет адаптивов, но в следующем моем проекте они обязательно будут, так как мобильный трафик — это 80% посетителей сайтов в 2023 году.
Этап девятый. Ui-kit.
После того, как весь ваш дизайн готов следует позаботиться о том, что все элементы дизайна будут доступны и понятны людям, которые будут работать с ним в последствии.
Для этого составляется мини аналог дизайн-системы.
Что в итоге.
В данном проекте получилось девять этапов:
- Исследование темы.
- Портрет пользователя.
- Мудборд и референсы.
- Подбор шрифтовой пары и сетки.
- Wireframe или прототип.
- Дизайн-концепция.
- Дизайн сайта.
- Адаптивы.
- Составление UI-kit.
Данные этапы могут отличаться, в зависимости от типа сайта и поставленной задачи. Но для понимания этапов работы над сайтом для начинающих веб-дизайнеров их вполне достаточно.
Удачи в дизайне и интересных проектов!