October 2, 2021

Разбор создания сайта

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

Пойдем поэтапно👇🏻

1. Я изучила ТЗ

Вот часть нашей задачи: «Аудитория девушек от 25 лет. Тематика: ценность девушек, раскрытие женственности. Каждая девушка может быть супер. Идеи и подача: Главный экран - выразить чувственность, женственность легкость через фото спикера» Заказчик прислал пример, который им нравится. Но была просьба не использовать бабочки»

2. Прототип

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

3. Этап набросков.

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

С помощью чего мы можем передать настроение сайта:

  • Цветовая гамма (здесь выбрана нежная розово-голубая гамма и вариации этой гаммы)
  • Фотография. Фотография человека играет важную роль в дизайне. Здесь нужно было передать легкость и нежность. И девушка на фотографии расслабленная, улыбается и в светлом платье (я изменяла цвет платья из бирюзового в белое)
  • Кнопки и плашки. Использование мягких углов будут считываться как безопасность, доверие, мягкость. Как раз то, что нам нужно)))
  • Элементы. Вспомогательные детали, которые помогают подчеркнуть необходимую тему или текста (как например "бонус после регистрации" - разместив изображение подарочной коробочки, мы даем понять зрителю, что здесь что-то приятное, бесплатное, какой-то подарок. Такие элементы не обязательно должны использоваться, но в данном дизайне, они были нужны.
  • Шрифты. Здесь можно было использовать какой-нибудь рукописный шрифт, но я решила остановится на Montserrat и его начертаниях. Он хорошо читается и не громоздкий.

4. Параллельно с предыдущим этапом я выстраиваю композицию и постепенно размещаю текст, кнопки плашки на экране

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

5. Дизайн остальных блоков

У нас уже подобрана стилистика и мы можем спокойно работать над остальными блоками сайта. Главное использовать сетку (также как и во всем сайте) и придерживаться подобранного стиля.

6. Адаптация под другие устройства

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

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

Если у вас есть какие-то вопросы, смело пишите мне в директ и я с радостю с вами пообщаюсь❤️

Inst: https://instagram.com/skryabina_a_?utm_medium=copy_link