Автор блога Checkroi. Три года работала в интернет-маркетинге. Интересуюсь IT, инвестициями и стартапами.
Дизайн сайта — это не всегда про удачные сочетания цветов и креативные решения. Сайт должен выполнять свою главную функцию — привлекать пользователей и покупателей, а также содержать полезную информацию для них. Нюансов много и новичку в веб-разработке может быть трудно определить с чего именно начинать работу над макетом, какие элементы и для чего должны быть на сайте. В помощь всем, кто хочет самостоятельно собрать макет сайта, мы написали инструкцию, как сделать дизайн сайта и довести проект до заказчика.
Содержание статьи скрыть
Шаг 1: определите цель сайта
От цели зависит тип сайта и его наполнение. Сайты бывают коммерческие и некоммерческие.
Некоммерческие сайты. Основная цель некоммерческих сайтов — донести полезную информацию до аудитории или обратить внимание к какой-то теме. Это новостные сайты, блоги, сайты благотворительных и общественных организаций.
Как стать ВЕБ-ДИЗАЙНЕРОМ. С чего начать в 2023 году?
Коммерческие сайты. Цель коммерческих сайтов — привлечь покупателей и продать товар. К коммерческим сайтам относятся лендинги, интернет-магазины и сайты торговых компаний. Также информационный сайт может быть коммерческим, если будет зарабатывать на рекламе. На размещении рекламы можно заработать, если сайт посещает много людей.
Поэтому для этой цели подойдёт новостной сайт или блог.
Если у клиента много товаров на продажу, нужен интернет-магазин. Для одной услуги или товара достаточно лендинга. Если нужно рассказать о компании, её услугах, нужен сайт-визитка или сайт компании. Если компания большая, и хочется в одном месте дать информацию не только потенциальному заказчику, но и сотрудникам, стоит создать корпоративный сайт
Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться
Шаг 2: определите, какие элементы на сайте нужны
Когда вы определились с целью и типом сайта, который может решить задачу клиента, составьте список необходимых элементов сайта. В зависимости от типа сайта, они могут отличаться.
Лендинг. Это страница, которая продаёт товар. На ней много маркетинговых элементов, которые ведут к продаже: блоки с преимуществами, отзывами, скидки и формы заявок.
Первый экран лендинга должен давать основную информацию
Отзывы как способ доказать качество
Как сделать дизайн сайта в Figma. Дизайн сайта в Фигме. Саня Кво
Возможность выбрать оптимальный тариф
Сайт-визитка. Такой сайт должен быть и внешне похож на визитку. Он больше работает на узнаваемость компании, чем на продажи. Обычно он состоит всего из одного экрана с главной информацией о компании, продукте — название компании, её цель и задача, контактные данные. Если эта визитка специалиста, то должна быть ссылка на портфолио.
Простая, но информативная страница о человеке: его фото, специализация, ссылки на соцсети и гитхаб
Блог. Основное наполнение блога — статьи, видео и картинки, поэтому важно продумать блоки и оформление для них. Полезно установить форму, которая собирает контакты, чтобы делать рассылку по email для читателей блога.
Основное наполнение блога — это тексты и картинки. Есть поисковая строка для удобного поиска статей
Интернет-магазин. В интернет-магазине всегда есть каталог товаров, фильтры для поиска, отдельные разделы для разных товаров и корзина для добавления товаров. Так же, как и на лендинге, в интернет-магазине должны быть продающие элементы: скидки, блоки с сопутствующими товарами и баннеры с выгодными предложениями. Обязательно должна быть форма для оплаты, личный кабинет покупателя для отслеживания заказов.
Пример главной страницы интернет-магазина
Корпоративный сайт. Такие сайты создают для больших компаний, у которых уже давно есть свой корпоративный стиль. Поэтому скорее всего, вам не придётся ломать голову над расцветками оформления и шрифтами. Корпоративные сайты содержат информацию о компании, о своих сотрудниках для информирования, контактные данные, портфолио и заявку на обратный звонок для продаж.
На сайте Nestle есть вся информация о компании: история компании, стратегия, принципы, документы, фото и видео о компании, информация о продукции и др.
Портал. Портал объединяет разные информационные и сервисные функции — новости, блоги, форумы, вакансии и почту. Яркие примеры — Яндекс и ГосУслуги. Содержание такого портала зависит от запросов заказчика.
Госуслуги — типичный портал. Здесь вы можете заплатить штрафы, подать заявление на загранпаспорт, отправить запрос на биржу труда и др. И всё это через свой личный кабинет
Шаг 3: проанализируйте конкурентов
Изучите сайты конкурентов — это поможет найти интересные идеи оформления или понять, что вы забыли на своём сайте. Если это региональный бизнес, изучайте конкурентов из региона заказчика. Если компания работает по всей стране, обратите внимание на сайты лидеров рынка. Даже если вы уже определились с типом сайта и контентом, который должен быть там, у конкурентов можно почерпнуть много другой информации. Возможно, ваше мнение изменится.
Вот на что обратите внимание, изучая сайты конкурентов:
- тип сайта конкурентов — даже если конкуренты рассказывают о себе, у них может быть не корпоративный портал, а сайт с блогом или короткая страница-визитка — одну и ту же информацию можно преподнести в разных форматах;
- элементы сайта — обратите внимание на формы оплаты, обратный звонок, баннеры с акциями, подписка на рассылку, блог и личный кабинет;
- контент — изучите количество контента и темы статей, есть ли видео и картинки, как преподносят акции;
- шрифты, расцветки — от них зависит, удобно ли читать сайт;
- разделы и фильтры — важно для поиска товара, если это интернет-магазин.
Выпишите все элементы и особенности конкурентов. Вы должны создать сайт, удобнее, чем у конкурентов, чтобы пользователи его запомнили. Не забудьте, что у современного сайта должна быть не только веб-версия, но и мобильная, так как около 80% пользователей посещают сайты со смартфона.
У нас есть большая статья о полном анализе сайтов конкурентов. Из неё вы узнаете как проанализировать не только дизайн, но и маркетинговую составляющую, посещаемость и источники трафика. Это вам пригодится, если вы хотите стать UX-дизайнером
Шаг 4: найдите удачные референсы
Референсы — это примеры, на которые вы можете ориентироваться при создании сайта. Это могут быть не только сайты конкурентов и лидеров рынка. Поищите похожие интернет-ресурсы за рубежом. Узнайте у клиента, какие сайты ему нравятся, спросите, есть ли у его компании дизайн или можно создать новый. Возможно, есть какие-то цвета, шрифты, контент, которые под запретом или, наоборот, желательны.
The Gallery — большая подборка сайтов, которые могут стать референасами
Шаг 5: выберите инструменты для работы
Для разработки макета используйте Figma, Tilda или Sketch.
Скетч и фигма практически одинаковы по функциям. Но скетч подходит только для макбуков, а в фигме можно работать с любого устройства и даже в браузере. Тильда подойдёт, если нужно сделать простой сайт или лендинг, крупный интернет-магазин запустить там сложно. Кроме того, файлы из скетч можно импортировать в фигму, а из фигмы — в тильду
Рабочая панель в фигме
Шаг 6: нарисуйте прототип
Прототип — это макет, который помогает показать расположение элементов на странице сайта и его будущую функциональность. Элементы страницы в прототипе удобно разметить прямоугольниками и подписать их — что это, какую роль они играют.
При создании прототипа сфокусируйтесь на компоновке элементов, а не на красоте — её создают на следующем шаге. Ориентируйтесь на тип сайта — какие элементы он должен содержать, а также референсы и сайты конкурентов. Макет необязательно должен быть идеальным — это скорее схема, которую можно дополнять и изменять
Когда вы примерно разметите сайт, расположите на макете основные элементы, покажите макет заказчику. Узнайте, чего не хватает, возможно, стоит какие-то элементы перенести в другое место. Исправьте макет по комментариям заказчика.
Шаг 7: проработайте структуру
Теперь можно разработать точную структуру, которую можно будет оформлять цветом.
Создайте пустое полотно, на котором разместите элементы из макета. Сначала работайте в чёрно-белой цветовой гамме, чтобы сфокусироваться на формах, а не цвете. Перенесите элементы из макета на сайт, откорректируйте размеры, переместите в нужные места. Выровняйте их. Между элементами обязательно должно быть свободное пространство, чтобы его было проще воспринимать.
Проработайте так каждую страницу сайта.
На начальном этапе вы выяснили особенности других сайтов — тени, размер, форму элементов — теперь примените их у себя на сайте, если вы думаете, что они хорошо впишутся. Создайте единый стиль — все элементы должны быть оформлены одинаково. Дайте названия кнопкам и разделам.
Шаг 8: добавьте цвета и шрифты
Когда большая часть сайта уже создана, кажется, что остались мелочи: выбрать цвет и шрифты. Как бы не так: это то, на что первым делом обращает внимание пользователь. И если у вас слишком яркие цвета или неудобные для чтения шрифты, пользователь уйдёт с сайта.
Если у вас нет большого опыта в разработке дизайна, используйте для подбора цветов специальные сервисы:
- Colrd — галерея готовых палитр, градиентов и картинок с их цветовыми палитрами;
- Аdobe color cc — сервис для подбора цветов: монохромных, комплементарных, последовательных и др.;
- Сolourcode — можете выбрать в сервисе один цвет и сайт автоматически сформирует цветовую палитру.
Вот как можно подобрать цвета для сайта:
- Основывайтесь на целевом действии и аудитории. Если хотите продать — используйте красный, оранжевый и другие сочные цвета. Если это люксовый товар, используйте спокойные тона — серебристый, серый.
- Изучите цветовой круг. Он поможет сочетать цвета. Они либо должны находиться в противоположных частях круга, либо быть рядом. Есть и другие варианты сочетаний. С практикой вы научитесь подбирать цвета без круга.
- Не сочетайте слишком много цветов . Сайт не должен быть похож на радугу. Используйте один основной цвет для главных элементов сайта, цвет для фона должен быть неярким, цвет для шрифта, который сочетается с цветом фона и дополнительный цвет для проявления творчества.
Классический белый фон, чёрные буквы и ярким выделен пример работы сервиса
Шрифты, как и цвета, вызывают у людей эмоции, поэтому выбирайте их в соответствии с оформлением сайта в целом.
Советы по подбору шрифтов:
- Выберите не больше двух шрифтов для оформления сайта, лучше чтобы они были из одной гарнитуры. Тогда они практически будут сочетаться друг с другом.
- Шрифт должен дополнять сайт, а не отвлекать на себя внимание, поэтому не делайте его слишком вычурным. Особенно это важно, если главная составляющая сайта — изображения.
- Чем шире колонка текста, тем крупнее должен быть шрифт и расстояние между строками. И наоборот — если колонка тексты узкая.
- Учитывайте, что на сайте есть заголовки, подзаголовки разных уровней, тексты, подписи. Для них используйте разные размеры шрифтов. Также может быть разное начертание — жирное, курсив и др.
Когда сайт практически готов визуально, снова покажите его заказчику. Исправьте работу в соответствии с его комментариями.
Теперь можно отдавать его программисту на реализацию. Если же вы создаёте сайт на конструкторе, перенесите дизайн на нужную площадку.
Шаг 9: разместите контент
Добавьте контент: статьи, видео, товары, изображения, рекламные баннеры. В будущем его можно дополнять и обновлять.
Если вы размещаете статьи, добавьте видео, фото, чтобы информация была представлена наглядно. При этом не вставляйте картинки, которые никак не относятся к тексту, они будут только отвлекать внимание. Картинки и видео подписывайте, чтобы читателю не пришлось гадать, что там нарисовано. Также медиа должны быть в хорошем качестве, чтобы не были видны пиксели.
Топ-3 вопросов, которые задают новички в веб-дизайне
13 полезных инструментов для веб-дизайнера
Привет, это редакция Медиа Нетологии. Мы решили рассказать о полезных сервисах веб-дизайна, приложениях и плагинах, которые помогут упростить жизнь и избавиться от рутины.
Редакция Медиа Нетологии
Canva’s Logo Maker
Большая коллекция бесплатных шаблонов логотипов для самых разных отраслей — от ресторанного бизнеса до диджейства. Перед тем, как приступить, можно прочесть рекомендации по созданию идеального дизайна.
Typewolf
Коллекция удачных типографических решений от практикующих веб-дизайнеров. В каждом примере указаны используемые шрифты.
Design Research Techniques
Огромная подборка дизайнерских методов на всех этапах. К каждому термину добавлено пояснение.
The Tiny Designer
Пятинедельный бесплатный email-курс, чтобы лучше понимать суть дизайна.
Freepik
Большая коллекция бесплатных изображений: от векторных до PSD-шаблонов и иконок.
Genlogo
Автоматический генератор логотипов. Вводите название компании, выберите категорию — и сервис автоматически создаст варианты лого, в которых можно будет настроить шрифт и цвета.
Курс
Инфорграфика
Узнать больше
- Узнаете, как превращать скучные цифры в наглядные визуальные истории
- Научитесь работать с online-инструментами создания инфографики
- Освоите интерактивную и видеоинфографику
Screenshot Maker Pro
Приложение для создания скриншотов в рамках всех основных устройств на iOS.
Mockup download
Генератор мокапов. Много платных и бесплатных шаблонов из разных категорий.
Stripe Generator
Генератор фонов в полоску. Выбираете паттерн, нужное количество цветов и скачиваете результат.
CSS3 Photoshop Plugin
Плагин для Photoshop, который конвертирует слои в CSS3.
Method Draw
Простой онлайн-редактор векторной графики.
Источник: netology.ru
Онлайн-конструктор макетов сайтов
Хотите сделать дизайн сайта самостоятельно? Без проблем! Вам не нужны сложные программы и десятки часов времени согласований с дизайнером. Выберите готовый макет сайта на онлайн-конструкторе Wilda, замените изображения и тексты на собственные, и все – сайт готов для верстки!
Опубликуйте макет и отправьте ссылку разработчикам. Все, что им необходимо — картинки, тексты, шрифты, дизайн, они смогут получить из вашего макета. Узнайте о дополнительных возможностях для продвижения ваших документов при помощи услуги Публикация.
Формат: Ширина — 1280 px, высота — авто;
Источник: wilda.ru