{"id":14293,"url":"\/distributions\/14293\/click?bit=1&hash=05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","hash":"05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","title":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0438 \u043a\u043e\u043f\u0435\u0439\u043a\u0438","buttonText":"","imageUuid":""}

Лендинг или шаги по созданию Landing Page

Учебный проект в рамках курса "Логомашина - прорыв веб дизайн." Лендинг / Посадочная страница для клининговой компании "Сияние"

Шаг первый.

Пониятие проекта. На данном этапе важно рассмотреть работы конкурентов, клиентов компании.

КЛИЕНТЫ - ПЕРСОНАЖИ.

На данном этапе я посмотрел сайты похожих компаний, рассмотрел кто и как может пользоваться данным лендингом. После составил 4 портрета персонажей.

Анализ клиентов - персонажей.

После этого я понимаю, в каких цветах нужно делать лендинг.

Шаг два. Вайрфрейм.

Создаем черновой вариант, как будет выглядить окончательный лендинг.

Сразу прописываем весь текст и кнопки, это сократит время в будущем.

Важно понять, что вайрфрейм - это черновой вариант. Он может отличаться от результата. На данном этапе важно понять расположение контента на сайте.


Шаг третий. Создаем цветовой вариант и мобильный адаптив.

Сейчас мы уже "раскрашиваем" наш лендинг и создаем его мобильную версию.

Первый вариант может быть не самым удачным. Оставьте все и через время посмотрите на него свежим взглядом. Это поможет исправить недочеты.

Шаг 4. UI KIT.

UI KIT - набор готовых решений пользовательского интерфейса. После создания цветового варианта берем все кнопки, цвета шрифты и составляем UI kit.

Вот и готов наш лендинг + ui kit. А полный кейс можно посмотреть тут:

Для заказа лендинга можно писать в телеграм: @filinale1 или на почту [email protected]

0
Комментарии
-3 комментариев
Раскрывать всегда