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

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

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

Анна Гореванова
дизайнер группы разработки карты рассрочки «Совесть» (QIWI)

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

Гайд состоит из трёх частей. Эта посвящена сбору необходимой информации, следующая рассказывает о разработке визуальной концепции сайта, а в заключительной собраны инструменты для проектирования макета.

«Это бессмысленно», — сказал разум.
«Это нелепо», — заметил опыт.
«Это бесполезно», — отрезал здравый смысл.
«О, вот так красиво!» — обрадовался заказчик.

Брифинг

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

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

Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. ? Но не стоит паниковать, разделите слона на части и действуйте пошагово.

Дизайн сайта определяет его цель

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

Ниже рассмотрим наиболее распространённые типы сайтов.

Сайт-визитка (landing page)

Одностраничник, который обычно имеет одно целевое действие — подать заявку/заказать звонок. Самый простой в техническом исполнении, содержит всякие описания, преимущества, партнёров и пр. Здесь есть где разгуляться дизайнеру — одностраничник должен быть красивым, запоминающимся и с wow-эффектом, чтобы посетитель оставил-таки заявку.

Пример лендинга программы лояльности «Совести»:

Корпоративный сайт

Создаётся компаниями, чтобы рассказать клиентам о себе — кто мы такие, чем занимаемся, наша миссия, контакты, структура, портфолио и прочее. Может быть нужен

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

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

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

Сайт-витрина

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

Пример — сайт компании Mary Kay, которая занимается сетевой продажей косметики. Там есть большой и красивый каталог товаров, но купить можно только через консультанта.

Интернет-магазин

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

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

Пример — Aliexpress, сайт интернет-магазина во всей красе.

Портал

Сайт, который объединяет разные информационные и сервисные функции — почту, новости, блог, вакансии, форумы и др. Пример — Яндекс, Хабр, даже Вконтакте тоже можно назвать порталом.

Как думаете, насколько сложно такое сделать? ? Даже если это будет не настолько крупный портал, для его создания нужно не только сделать продуманные с точки зрения UI и UX макеты, но и иметь немалые технические мощности, ведь предполагается, что посещаемость у порталов высокая.

Пример — сайт Мэра Москвы, там и новости, и статьи, и услуги.

Зачем изучать конкурентов и на что обращать внимание?

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

Есть как минимум три причины посмотреть сайты конкурентов:

• Понять общую ситуацию на рынке. Кто какие продукты/услуги предоставляет, кто большой и лидер, а кто маленький, но быстрорастущий, кто на какие ЦА ориентирован и какую функциональность предоставляет. Обычно это задача заказчика — разобраться со всем этим и передать вам, но не всегда бывает праздник на нашей улице.
• На основе этого определить, какую функциональность стоит и не стоит делать на вашем сайте. Важно выявить точки паритета и дифференциации: не проигрывать конкурентам (у всех есть фильтрация по цене, а у меня нет, хотя пользователям это нужно) и при этом отличаться от конкурентов (у меня есть фильтрация по цвету, а у других нет).
• Красть как художник. Посмотрите референсы, чтобы синхронизироваться во вкусах с заказчиком, взять на заметку способы реализации той или иной фичи, а также переиспользовать существующий пользовательский опыт. Люди уже привыкли, что на сайтах вот такое расположение корзины, им будет странно, если у вас будет что-то офигенно-хитро-креативно-необычное.

Mobile First или не First?

Откуда начать — с веба или с мобилки? Дизайн сайта нередко сегодня начинается не с web-версии, а с мобильной. Люди всё больше и больше онлайн-времени проводят в мобильных устройствах, а не за широкими экранами. Из-за этого больше внимания стоит уделять мобильной версии, поскольку с большей вероятностью пользователи будут взаимодействовать именно с ней. Рекомендую начинать дизайн с мобильной версии, а потом уже адаптировать элементы под более широкие экраны — так вы избежите ситуации, когда красивый и изысканный блок на широком экране не понятно, как адаптировать под мобилу (которая важнее).

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

Другие части серии

• Часть вторая: разрабатываем визуальную концепцию сайта
• Часть третья: инструменты для создания макета сайта

Как сделать дизайн сайта с нуля

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

освойте профессию
веб-дизайнер с нуля

Содержание

1. Что нужно продумать перед началом работы над сайтом
2. Какие бывают типы сайтов
3. Как провести анализ конкурентов
4. Где искать референсы дизайна сайтов
5. Как подготови визуальную концепцию
6. Как подобрать цвета для сайта
7. Как подобрать шрифты для сайта
8. Подготовьте прототип
9. Подготовьте иллюстрации и составьте ТЗ для верстальщика
10. Создайте веб-сайт
11. Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование
12. Красивый и функциональный дизайн сайта: советы

Что нужно продумать перед началом работы над сайтом

онлайн-курс
«Старт в дизайне»

Попробуйте себя в 5 дизайн-профессиях и найдите среди них свою

пройти курс

Вот главные вопросы:

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

Также перед разработкой дизайна нужно продумать пользовательский сценарий. Он позволяет понять, как и зачем люди придут на сайт. Для разработки сценария нужно ответить на два вопроса:

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

онлайн-курс
«Старт в дизайне»

Попробуйте себя в 5 дизайн-профессиях и найдите среди них свою

пройти курс

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

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

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

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

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

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

Все эти действия нужно учесть при создании интернет-магазина и обсудить с заказчиком. В конце подготовительного этапа у вас должно быть:

• короткое ТЗ;
• понимание основного функционала;
• план работы с четкими этапами, обязанностями и дедлайнами.

Какие бывают типы сайтов

Лендинг

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

Интернет-магазин

Цель такого ресурса — предоставить информацию о множестве товаров. Дизайнеру, программисту и копирайтеру нужно будет поработать над удобным каталогом и спроектировать простую и понятную страницу заказа. Нужно продумать витрину с корзиной, возможность оплаты, также важно поработать над UX-дизайном и юзабилити.

Сайт-витрина

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

Корпоративный сайт

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

• кто мы;
• чем занимаемся;
• какова наша миссия;
• какие задачи мы решаем;
• как с нами связаться.

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

как брендинговое агентство Funky разработало айдентику шоколадного бренда

Портал

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

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

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

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

На что обращать внимание в первую очередь при анализе чужих веб-ресурсов перед тем, как делать дизайн сайта:

• какой пользовательский сценарий реализован, как построена структура сайта;
• сам дизайн — цветовые решения, композиция, иллюстрации, анимация.

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

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

Где искать референсы дизайна сайтов

Новичкам бывает сложно работать без примеров перед глазами. Но важно не повторить идеи, а обращать внимание на удачные решения и воплощать их по-своему. Опытным дизайнерам тоже нужны референсы, чтобы заранее обсудить желания заказчика и выбрать решения, которые соответствуют цели. Чем точнее получится подобрать примеры, тем меньше будет правок. Для вдохновения можно посмотреть ленту Pinterest, Behance или Awwwards.

Как подготови визуальную концепцию

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

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

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

Анастасия Хамидулина
Автор статьи
16 апреля 2022 в 15:00

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

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

✅ Баланс

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

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

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

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

✅ Контраст

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

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

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

✅ Акцент

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

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

✅ Иерархия

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

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

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

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

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

✅ Воздух

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основы композиции и цвета — первое, с чем знакомятся студенты курса Skypro «Графический дизайнер». Когда знаете основы, проще и быстрее освоить профильные навыки. Через несколько месяцев обучения сможете создать дизайн лендинга и положить результат своей работы в портфолио.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать дизайн сайта: рекомендации для новичков

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

Зачем нужно заказывать дизайн сайта? Определяем цели и заполняем бриф

Чтобы сделать действительно качественный продукт, разработчик сначала должен спросить себя: «А зачем я его делаю?». То же самое касается и интернет-ресурсов. Без определения четких целей дело обречено на провал.

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

1. Какой теме будет посвящен сайт?
2. Какие бизнес-задачи он должен будет решать?
3. Кто, на ваш взгляд, является целевой аудиторией сайта?
4. Как вы видите структуру ресурса?
5. Как вы хотите его продвигать?
6. Какой контент вы хотите публиковать на сайте?
7. Есть ли у вас фирменный стиль? Брендбук?
8. Какие сайты вы считаете конкурентами вашему будущему ресурсу?

Список можно расширить.

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

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

Какими бывают сайты

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

• Лендинги — это так называемые «одностраничники». Еще один вариант названия — Landing page. Лендинг создается под определенный товар или услугу. В техническом исполнении достаточно прост. Оформление такого сайта должно быть эффектным, броским. Обязательное условие — наличие форм для совершения целевого действия, а именно оставления заявки.
  
• Корпоративный сайт помогает рассказать компании о себе, презентовать пользователям свои товары и услуги, поделиться основной информацией (контактными данными, временем работы и пр.), продемонстрировать свою экспертность и повысить лояльность (например, через портфолио или блог с экспертными статьями). С технической точки корпоративный сайт сделать сложнее, чем лендинг. Нужно продумать удобную систему навигации между разделами. Значительно облегчает работу над оформлением сайта наличие брендбука.
• Интернет-магазины создаются конкретно для продаж. Здесь основные усилия направляются на то, чтобы сайт был максимально удобен пользователям именно для совершения покупок. Не стоит увлекаться сложным дизайном, пытаться жонглировать последними трендами. Сосредоточьтесь на грамотной работе с информацией и товарами, а также на проектировании страницы заказа.

Чем помогает изучение сайтов-конкурентов

Если коротко, то очень многим. По сути любой сайт из аналогичной тематики — это готовый кейс, который в любое время можно открыть и изучить.

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

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

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

Какие инструменты помогут сделать классный макет

Итак, вот перечень «орудий труда» современного веб-дизайнера:

• Photoshop. Уж если мы прибегли к подобным сравнениям, то давайте назовем Photoshop той «палкой-копалкой», с которой все началось. К сегодняшнему дню появилась уже целая россыпь других сервисов, используемых для отрисовки макетов, однако по функционалу и качеству работы с изображениями им всем далеко до дедушки-Photoshop.
• Readymag. Идеален для лендингов и простых сайтов. Сделать макет с помощью этого онлайн-конструктора можно прямо в браузере.
• Tilda. Еще один простой и удобный конструктор. Сайт создается из предоставленных сервисом блоков (всего их 550!). Каждый блок можно индивидуально настроить под себя. Получившийся дизайн будет адаптирован под разные виды устройств: от компьютера до смартфона.
• Canva,Crello. Для тех, кто не хочет разбираться с Photoshop, но хочет оформлять несложный визуал и симпатичные баннеры.
• Scetch,Figma,AdobeXD. Профильные инструменты для отрисовки макетов сайта, которые нравятся и дизайнерам,и проектировщикам с разработчиками. А все потому эти программы позволяют быстро собирать макеты, готовить их к верстке, корректно экспортировать графические элементы.

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