Создаём вместе свой первый лэндинг. История о моём опыте
Осторожно, лонгрид!
P.S: за всратое качество картинок и их огромность благодарите Пикабу
Когда-нибудь в вашей жизни случается тотальный переворот: внезапно что-то осознается, уже изученное открывается совершенно с другой стороны, чувства и мысли структурируются, создаются новые извилинки.
В общем, коротко говоря, жизнь становится понятнее.
Собственно, именно так в один момент случилось и со мной! Пройдя свой опыт длиной в 24 годика, я поняла, что моя душа лежит к дизайну. Долго мучалась, долго страдала… Ведь выбрать конкретное направление в дизайне отнюдь не лёгкая задача. Но вот занесло меня по итогу в страшный мир сайтов, где царил великий и могучий веб-дизайн! И моя крохонькая прямая тропинка плавненько свернула на обучение. Да не просто на обучение, а на курсы от Логомашины! И именно благодаря им я и пишу сейчас эту свою первую статью о личном опыте. Надеюсь, что вам это как-то поможет!
Каков порядок действий?
В начале любой работы с клиентом (в данном случае у нас домашняя работа) важно составить и согласовать некий бриф.
Что такое бриф? В общем-то, это некоторый документ, в котором поднимаются важные вопросы для выполнения работы, какие-то детали и ожидания заказчика. Что-то вроде технического задания, только более обширного.
Собственно, для наглядности можно приложить одну из частей полученного мной брифа, в котором заказчик описывает в стиле вопрос-ответ все свои хотелки:
Именно через него мы заглядываем в голову клиента: узнаем потребности, боли и желания.
Так что же главное я подчерпнула отсюда для себя? Фокусируем внимание на главном
Конечно, информации там куда больше 4 пунктов, которые я выписала для себя. Однако, на данном этапе считаю это достаточным.
Лайфхак: если вам тяжело заставить себя делать какую-то работу, то можете попробовать организовать для себя некий список дел. Разбивка большой задачи на более мелкие повышает эффективность выполнения.
И вот, такими темпами, мы уже достигли с вами какого-то внутреннего представление о будущей работе. А теперь…
Рассказываю про исследования.
Прежде, чем приступать к самому дизайну, необходимо провести некий пласт исследований, который поможет ответить нам как, куда и почему нам надо двигаться в ту или иную сторону дизайнерского порыва. Обойтись без них было бы возможно, но всё-таки качественная работа предполагает использования полного спектра наших навыков. Без этой информации сделать работающий дизайн не получится, а вот просто красивенький – вполне.
1. Кто наши конкуренты?
Создаём функциональную сравнительную таблицу с фишками конкурентов, техническими решениями;
2. Что новое мы можем предложить?
Прорабатываем уровни отрасли и культуры
3. Кому мы продаём товар?
Работаем с портретом пользователя, гипотезами и анкетированием.
1. Кто наши конкуренты?
Работа с первым пунктом, на мой взгляд, является одним из самых времязатратных. Особенно для промо-лендингов. Особенно, если совершаешь ошибки, так как ты новичок…
Поскольку я не сразу поняла одну простую вещь, а именно что это одностраничник, я начала разбирать чертовы магазины… И потратила на это уйму времени, ведь хотелось всё максимально глубоко проработать.
Учиться надо на чужих ошибках
Насмотренность в дизайне – это очень важно, ведь именно так формируется общее представление о том, какой дизайн хороший, а какой, мягко говоря, странный.
Получается, что когда мы рассматриваем сайты конкурентов, то можем понимать в чём они хороши и плохи, перенимать оттуда фишки и стараться делать лучше, чем у других. А без этого генерировать идеи, основываясь на пустоте, — это изобретать велосипед.
Итак, посмотрим же на эту самую сравнительную таблицу
Я пользуюсь гугловским экселем, потому что для меня делать там таблицы — это максимально удобно. А сам визуальный вид нагло, но законно, сперт из уроков с курса и немного переработан, дополнен.
Благодаря глубокому анализу 5 магазинов-конкурентов (на самом деле там 36 строк, а не 16), я выписала для себя разделы, которые хотела бы использовать в своём дизайне магазина духов. Это можно увидеть в столбике “Итого”.
А вот идеи и заметки я выписывала в комментарии и графы. Например, что стоит обратить внимание на то какие языки использовать на сайте, какое разделение духов актуальное и т.п.
Однако, если вы не забыли, то я сильно ошиблась, составляя эту таблицу…
К сожалению, моей задачей было прорабатывать лендинг, а не магазин. Конечно, насмотренность благодаря такой упорной работе, значительно повысилась. Однако, столь глубокий анализ был без надобности. И мне пришлось спешно всё переделывать…
Тут, на удивление, появилась новая проблема, которой ожидать я ну никак не могла. Оказывается, найти промо-лендинги – это до жути сложная задача. Ведь они обычно рекламируют какую-то новую продукцию определенное время, а потом, как по взмаху волшебной палочки, мистически пропадают. Как же хорошо, что в наше время есть удивительным мир Behance и его работ, куда я пошла искать интересующие меня лэндинги для проработки.
И вот она – новая актуальная таблица:
Собственно, получилось у меня по итогу 7 экранов + подвальчик и верхушка. Ну и, конечно же, для удобства я расписала что и где находится в этом скелете.
В дальнейшем это поможет мне сделать прототип лендинга.
2. Что новое мы можем предложить?
Чтобы сделать что-то удивительное, новое или запоминающееся, недостаточно просто пробежаться по верхам. Необходимо копать глубже и глубже. Поэтому, мы погружаемся в уровень отраслей, смежных с нашей тематикой.
В идеале, в моем случае, надо было искать отрасли вроде дезодорантов, средств для ухода и чего-то, что могло бы напоминать парфюмерию. Но, как я и говорила, найти промо-лендинги нереально… Так что я просто понатаскала того, чего смогла найти в сжатые сроки.
К сожалению, ничего принципиально нового я не смогла найти. Но вдруг у вас получится перенять какие-то идеи из своих смежных отраслей?
Теперь перекидываемся на так называемый уровень культуры.
Он нужен для того, чтобы из странного и непонятного делать гениальные новые идеи. По-хорошему, здесь вы должны прописать какое-то событие из любой знакомой вам стези и попробовать переформатировать это на лад вашего сайта.
Например, зеленым у меня здесь отмечены идеи, которые отлично подошли бы для магазина-сайта. Однако, для лендинга ничего из этого совершенно не подходит…
3. Кому мы продаём товар?
Ну а теперь поговорим про аналитику пользователя! Это не менее важный раздел, который должен сблизить ваш дизайн с будущей положительной оценкой пользователей сайта.
Аналитика включает в себя:
1. Составление Портрета Пользователя;
2. Определение Гипотезы;
3. Анкетирование;
4. Путь персонажа;
На самом деле, обычно этим всем занимаются маркетологи, а затем передают необходимую информацию дизайнерам.
Однако, уметь делать это не возбраняется.
Мне повезло достаточно хорошо, поэтому удалось пройти дополнительно курс по изучению маркетинга параллельно с курсом по дизайну. Поэтому для меня данный раздел более понятен с точки зрения маркетинга.
Но на момент составления домашнего задания по Феромону, этих знаний у меня не было… Так что копать глубже я буду в следующих своих работах. А пока можно покопаться в старье
Портрет Пользователя
Портрет пользователя представляет из себя ориентировочную прикидку человека, который будет пользоваться вашим продуктом и/или услугой.
Обычно он строится на предположениях о желаемой Целевой Аудитории со стороны заказчика и/или уже имеющейся аналитики пользователей (например, если продукт держится на рынке какое-то время).
В нашем же случае мы справляемся своими силами и разрабатываем Портрет Пользователя благодаря предположениям заказчика, описанных в Брифе.
приобретают в основном замужние женщины, 35-50 лет для своих мужей/отцов, проживающие в Москве и Петербурге, которые интересуются воспитанием, офлайн-шопингом и обустройством быта
Таким образом у меня получилась моя первая девушка, замечательная Мария.
В свою таблицу я записала общую информацию, её цель, контекст использования, запросы в интернете, задачу на сайте, удобную ей технику для использования сайта, ограничения, страхи и вопросы.
Всё это на данном этапе просто предположения, которые мы просто прикидываем. Они ничем не подтверждены и не опровержены. Однако, благодаря всему этому мы можем составить гипотезу и вопросы для анкетирования.
По-хорошему, для того чтобы портрет пользователя работал хорошо, необходимо создавать как минимум 3 возможных разветвления. При этом как минимум один будет главным, нашим желанным клиентом, а один проблемным
К сожалению, я составила только один женский портрет. Но в дальнейшем создала второй мужской во время составления презентации проекта. Это никак не повлияло, но в идеале мужской портрет должен был вносить свои корректировки во все этапы работы.
Гипотеза
Гипотеза составляется для того, чтобы дополнительно проработать некоторые вопросы. Например, действительно ли стоит вносить графу с лучшими продажами? Влияют ли они на что-то? Или же действительно скидки увеличат продажу?
В процессе анкетирования гипотеза может подтвердиться или же, наоборот, провалиться с треском.
Анкетирование
Для того, чтобы подтвердить представление о нашей Целевой Аудитории, необходимо составить список вопросов, который смог бы дать нам этот результат.
Например, если вы пишете, что ваш персонаж из Москвы, то необходимо добавить вопрос о проживании в анкету.
Также необходимо поступать и в случае гипотезы - добавлять соответствующие вопросы и возможности ответа.
Когда я делала свой дизайн, я остановилась на таком списке
Путь Пользователя
Или же CJM, как удобно. В нашем дизайне он необходим для того, чтобы понять какие блоки каким образом стоит располагать. А прорабатывается он, опять-таки, на предположениях.
Кто как с чем будет взаимодействовать, как будет мыслить, куда кликать и т.п.
Здесь у меня старая версия того, как раньше я делала Путь Пользователя. Теперь же я действую немного иначе и куда более проработаннее...
Итак, блок исследований подошёл к концу! Но теперь начинается новый, наш основной и любимый, блок дизайна…
Разработка дизайна
1. Облако Ассоциаций
Оно выглядит, как разветвленная цепочка различных слов-ассоциаций. Используют её для генерации новых идей и чтобы дизайн не был чересчур поверхностным.
Я решила свою работу облегчить и воспользовалась https://sociation.org/, которая подбирает ассоциации за тебя.
Далее выписала понравившиеся идеи в своё облако на обычном листике, т.к. мне так банально проще и быстрее. И в таком виде она была чертовски непонятная даже для меня и не работала…Но вот когда я структурировала мысли!
Всё стало логично, просто и понятно!
И на всё это у меня ушел почти час времени
2. Мудборд
Далее создала мудборд.
Мудборд — это «доска настроения» (от англ. mood board). Так называют набор фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем. Его делают для будущего дизайн-проекта, чтобы понять, каким будет визуальное решение: серьёзным или весёлым, элитарным или демократичным, какие образы возьмут за основу, как будут сочетаться цвета и какой будет типографика.
Сначала я выбрала один сайт прямого конкурента для разбора и один приглянувшийся мне визуально.
Затем еще три…
Отразить дополнительно свежесть и капли воды я хотела бы и в духах. Поэтому решила, что будет неплохо как-бы кинуть их в воду
Затем пошла цветовая палитра.
И, наконец-то, шрифты
Итого весь мудборд получился достаточно громоздким…
А изначально он и вовсе был еще больше!
Я над ним долго работала и перерабатывала, т.к. приходилось расписывать какие идеи мне бы хотелось реализовать и непосредственно использовать. Такого условия выполнения домашнего задания…
Если вам интересно какой он был раньше, то вот:
На создание всего мудборда у меня ушло немного больше двух часов.
3. Прототип
Далее по своим заметкам и исследованиям составляем прототип
4. Лендинг
Прототип заполняем красивыми картиночками, текстиком и прочим! (да-да, я жутко устала писать статью...)
А вот готовую работу я здесь показывать не буду. Хотя бы потому что количество загруженных мной картинок превысило норму...
Так что сможете посмотреть её на бихансе вместе с сокращенной презентацией!