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

Сетка

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


The Design Genome Project by InVision

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

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

Шаг 3. Установите необходимые инструменты

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

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

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

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

Как вы можете себе представить, для пользователей WordPress нет недостатка в плагинах для конструктора страниц. Тем не менее, мы неравнодушны к Beaver Builder из-за его простоты использования и ряда функций:

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

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

Цвет

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

Важно!

Важно!

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

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


Цветовой круг Иоханнеса Иттена

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

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

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

Брифинг

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

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

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

Шаблоны для сайта Elegant Themes

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

Так как бесплатный шаблон меня совсем не устраивал, а денег на дизайнера у меня не было, я начала искать достойные премиум темы, которые не разорили бы начинающего блогера. Уже не помню как, но я наткнулась на очень хорошего разработчика — Elegant Themes. Их темы мне как-то сразу приглянулись, да и цена мне показалась приемлемой. Ведь практически за ту же цену, которую просят другие разработчики шаблонов, я получила доступ не к одной, а 87-и красивым, современным темам, да еще и 5-и очень полезным плагинам в добавок. Я, конечно, не собиралась использовать все темы сразу, но сам факт был очень приятен Сегодня, оглядываясь назад, я считаю, что покупка доступа к этим темам и плагинам, была моим самым лучшим вложением в блог и уже окупилась сторицей.

Примечание: ребята, в июле 2016 я изменила дизайн сайта, так что то, что Вы сейчас видите, это не больше Divi. Я решила изменить направление развития моего блога, поэтому сайт я полностью переделала. Тем не менее, Диви есть и остается одной из лучших тем на рынке и я ее очень рекомендую. Кстати, этим летом они выпустят большое и очень шикарное обновление! Теперь изменять дизайн сайта можно будет прямо «бродя» по сайту, т. е. появится новый визуальный редактор в фронтэнде. Это будет очень удобно!

Чем мне нравится Divi?

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


— Во-вторых, Divi и, все остальные темы Elegant Themes, имеют адаптативный дизайн, то есть они хорошо выглядят с любого устройства, будь то компьютер, ноутбук, телефон или планшет. Попробуйте посмотреть, как меняется мой сайт, если вы смотрите на него в полностью открытом окне браузера или уменьшенном. Вы увидите, как сайт адаптируется под размер вашего экрана или браузера

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

Они, кстати, сейчас работают над универсальным конструктором, который будет работать на всех темах. Чем это хорошо? А хорошо это тем, что, если вы решите переключиться с одного шаблона на другой, ваш сайт не превратиться в не понятное месиво, а приобретет новый дизайн в считанные секунды. Это очень большое преимущество, так как у кого из нас есть время ковыряться в сайте по несколько дней при переходе с одной темы на другую?!

Кликните на фото выше, чтобы своими глазами увидеть все достоинства Divi. Сайт на английском языке, но многое будет и так понятно.

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

Атмосфера и стиль

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

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

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

К таким навыкам относятся типографика, композиция, атмосфера и стиль.

Курс «Веб-дизайн с 0 до PRO»

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

  •  32 часа теории и 16 практических заданий
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Определитесь с целью

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

  • Чему посвящён сайт?
  • Какие задачи должен решать?
  • Как планируется продвигать сайт?
  • Какая у сайта должна быть структура?
  • Какой контент планируется размещать?
  • Есть ли у клиента готовый брендбук?

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


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

Что умеют планировщики?

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

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

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

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

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

  1. Обмерный план помещения.
  2. План демонтажа/строительства стен.
  3. План дверей и всех помещений.
  4. План расстановки мебели.
  5. План расстановки сантехники.
  6. План расстановки осветительных приборов и розеток.
  7. План теплых полов (если необходимо).
  8. План монтажа кондиционеров или системы вентиляции.
  9. План стяжки.
  10. План штукатурки стен.

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

Чем занимается веб-дизайнер

Рабочий процесс дизайнера выглядит так:

  • Дизайнер получает данные от заказчика — зачем нужен сайт, как он будет работать, какие пользователи будут на него заходить. Хороший вариант, если заказчик точно знает, что нужно. Но так бывает не всегда, поэтому дизайнер должен сам задавать вопросы и получать ответы. Задачу, требования к сайту и ответы на вопросы дизайнер записывает в бриф.
  • Веб-дизайнер создаёт наброски или прототипы будущего сайта: на бумаге или в специальных программах. Прототипы больше похожи на схемы, где указывается расположение основных элементов на страницах сайта.
  • На основе прототипов дизайнер рисует цветной макет. Тут уже можно работать над сочетаниями цветов, добавлять анимацию.
  • Готовый макет дизайнер передаёт заказчику или разработчикам, которые перенесут его на сайт.

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

Визуальная концепция

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

И тут важно не забывать про ЦА и конкурентов: какой характер и способ общения лучше «зайдёт» клиентам? Или каким должен быть образ, чтобы отличаться на фоне конкурентов?

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


С этим читают