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

В общем, коротко говоря, жизнь становится понятнее.

Собственно, именно так в один момент случилось и со мной! Пройдя свой опыт длиной в 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. Лендинг

Прототип заполняем красивыми картиночками, текстиком и прочим! (да-да, я жутко устала писать статью...)

А вот готовую работу я здесь показывать не буду. Хотя бы потому что количество загруженных мной картинок превысило норму...

Так что сможете посмотреть её на бихансе вместе с сокращенной презентацией!