16 Апр 2022
8 мин
128

Как сделать красивый дизайн сайта

Типичные ошибки: перегрузить сайт, использовать устаревшие эффекты.

Как сделать красивый дизайн сайта

Содержание

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

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

Баланс

Соблюдайте композицию. Она бывает двух видов:

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

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

Симметричное оформление сайта «Сбера»

Симметричный баланс на сайте «Сбера»: блоки равного размера, оформлены одинаково

Контраст

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

Дизайн сайта магазина «Магнита»

Спокойный фон, белый контрастный шрифт и красная кнопка на сайте «Магнита»

Акцент

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

Как сделать акцент на сайте

Акцентная цветная кнопка на сайте Tilda

Иерархия

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

Как пользователь просматривает страницу

Пользователь на сайте «Авиасейлс» просматривает информацию и переводит взгляд на финишную точку траектории Z — кнопку

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

Как расположить большое количество текста

Статьи «Яндекс.Кью» расположены вертикально слева

Воздух

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

«Между двумя смысловыми блоками оставляйте отступ в 120–180 пикселей. В рамках одного блока отступы должны быть меньше. Например, расстояние между блоками — 180 пикселей, а в каждом от заголовка до текста — 100 пикселей. То есть между двумя блоками расстояние должно быть больше, чем между элементами внутри одного».

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет
Как расположить элементы на сайте

Воздуха между блоками в шаблоне Tilda больше, чем внутри блоков

Выравнивание

В этом поможет сетка. Она состоит из невидимых линий, на которых располагают иллюстрации, тексты и другие элементы. Сетка систематизирует всё и поддерживает композицию.

Применение сетки для выравнивания элементов на сайте

Выравнивание по сетке на сайте Swatch

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

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

Типичные ошибки

Устаревшие приемы

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

Еще к таким приемам относят многочисленные обводки: у букв, кнопок. Могут быть исключения, но всё должно быть аккуратно и обосновано. Или продиктовано особенностями фирменного стиля.

Перегруженность

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

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

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

Кричащие цвета

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

Сервис для подбора цветов и генерации цветовых схем

Подбирайте цвета в сервисе ColorScheme

Множество всплывающих окон

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

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

Плохая коммуникация с заказчиком

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

«Правка „Сделать кнопку красной“ может возникнуть не из-за того, что заказчик думает, что красный лучше продает. Ему может казаться, что кнопка недостаточно заметна. А этому есть и другие варианты решения — увеличить ее, добавить эффект, увеличить количество кнопок или изменить расположение. Или вообще разместить дополнительный баннер».

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

Научиться выстраивать коммуникацию с клиентом поможет курс от Qmarketing Academy «Профессия веб-дизайнер». Узнаете, как работать с заказчиками, что и зачем презентовать при сдаче проекта. За три месяца научитесь делать эффективные рекламные баннеры и лендинги в программах Figma, Photoshop, Tilda, Readymag. Изучите основы UX/UI-дизайна, композиции и типографики, принципы создания мобильного интерфейса, анимационного дизайна.

Как создать дизайн сайта

👉 Обсудите задачу с заказчиком

Уточните:

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

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

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

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

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

«Нужно помнить, что ты помогаешь бизнесу, а не делаешь очередной макет для портфолио. Иначе сайт может получиться очень модным и красивым, но совершенно нерабочим, так как им будет неудобно пользоваться. По итогу задача — помочь заказчику и его бизнесу — не выполнена».

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

👉 Проанализируйте конкурентов и соберите примеры

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

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

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

SiteSee — галерея стильных сайтов.

99designs — примеры логотипов и фирменных стилей, обложек и упаковок, сайтов и иллюстраций.

Pinterest — фотохостинг для поиска идей.

👉 Определите тип сайта

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

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

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

👉 Выберите: самописный сайт, CMS или конструктор

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

CMS — система управления контентом или движок. Такие системы изобрели, чтобы было удобнее создавать страницы и добавлять контент, управлять доступом. Можно редактировать код, выбирать шаблоны и плагины. Однако навыки веб-разработки всё же понадобятся.

Примеры СMS: WordPress, 1c-bitrix.

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

Примеры конструкторов: Tilda, Wix.

«Молодой компании по продаже товаров или услуг подойдет сайт на конструкторе: обычно им не нужен сложный функционал — сбор контактов, оплата онлайн, интеграция с другими сервисами там есть. Конструкторы типа Tilda или Webflow уже давно позволяют создавать уникальные сайты со сложной анимацией и адаптировать страницы под любые устройства. Здесь без помощи дизайнера не обойтись, но это будет дешевле и быстрее, чем написать сайт с нуля».

Мария Жаренкова
дизайнер-фрилансер с опытом более десяти лет

👉 Создайте карту сайта

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

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

Нарисуйте карту сайта от руки или воспользуйтесь сервисами Gloomaps, Flowmapp или Writemaps.

👉 Создайте макет

Сделайте черновик будущего сайта. Он помогает определить расположение элементов, утвердить цветовую гамму и структуру страниц. Макет создают в онлайн-редакторах — например Sketch или Figma.

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

👉 Сверстайте и проверьте

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

Чек-лист для дизайнера

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

Получите пошаговый план развития в карьере после записи на курс






    Оставляя заявку, вы принимаете условия соглашения

    Учёба ради учёбы — это не прикольно. На наших курсах вы ставите конкретные цели и достигаете
    их
    в заданные сроки. Начинайте карьеру с первых достижений!

    Добавить комментарий

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить