Разработка дизайна сайта: как учесть основные требования

Веб-дизайн важнейший компонент проекта. Разработка дизайна сайта - процесс творческий, но в равной степени должно быть функционально. Это означает, что есть определённые выработанные правила и рекомендации.

Выбираем базовый тип сайта

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

Отличным вариантом для начала будет блог. Плюс: вам не нужно начинать с нуля. Существует множество шаблонов блогов, хороших для ориентирования.

Шаблоны в веб-дизане

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

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

Находим вдохновение у других

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

Pinterest.com;
Awwwards.com;
Behace.net;
Dribble.com и другие.

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

Обратите внимание на типографику

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

Готовим контент

Ставить контент во главу угла означает готовить его до того, как вы начнёте создавать дизайн сайта. Тексты и изображения не обязательно должы быть в окончательном варианте. Отредактировать или SEO-оптимизировать можно и позже. Наличие хотя бы чернового наброска поможет убедиться, что дизайн спланирован так, что всё поместится.

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

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

Изучаем взаимодействие с пользователем (UX)

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

О чём важно помнить:

При создании веб-сайта помните о UX;
Разрабатывайте вещи, которыми интуитивно понятно пользоваться;
Соблюдайте логическую последовательность;
Думайте о потребности аудитории, боритесь с искушением продемонстрировать «крутизну» и свои умения, пожертвовав удобством использования.

Ознакомьтесь с материалами по UX для избежания ошибок.

Продумываем макет

На старте проектирования, думайте о каркасе сайта (модульной сетке). От ответственнен за иерархию элементов. При этом нужно учитывать, как просматривают люди любую страницу сайта. Выделяют два способа просмотра контента пользователями: F-образный и Z-образный рисунок.

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

Неважно, какие инструменты для разработки дизайна сайта вы используете:

Figma;
Sketch;
AdobeXD.

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

Figma: 5 практических советов

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

Сетки

Для десктопов рекомендуется начинать с экрана шириной 1366 пикселей. Обычно оперируют 12-ю столбцами в макете, но это зависит от проекта. Как в Figma добавить сетку: Layout Grid -> Columns. Вносите число 12 или меньше. Потом нужно настроить ширину этих колонок и остальные параметры.

Типографика

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

Фреймы

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

Кнопки

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

Обучение UX

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

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