Эй, как дела? Интересен удобный дизайн? Добро пожаловать в эту статью, тут расскажу о тестовом задании, полученном от веб-студии. Суть заключалась в том чтобы сделать форму сбора данных. Не просто нарисовать картинку, а продумать детали, пользовательский сценарий и составить UI-Kit.
Контент и задача.
Мне предоставили ссылку на файл, в котором подробно объяснялись аспекты для начала моей работы. В него входило пользовательское поведение, местоположение, контент и тп.
Вопрос:
Как думаете, это всё просто так, чтобы я по итогу просто нарисовал "красивую картинку?"
Ответ: Конечно нет, как жаль, что большинство дизайнеров так и не поняли важность аналитики и взгляда на данные с разных сторон.
Как я с этим работал.
Если говорить кратко, то дизайн — это ограниченность воплоти. Человек ограничен своими навыками и знаниями различных способов и вариантов исполнения того или иного элемента сайта. Но думать умеют все, просто кто-то это делает, а кто-то нет. Итак, я получил пользовательское поведение, я сразу могу вытянуть из головы догадки относительно того, что было бы уместно отразить в форме и что привело бы к максимальному удобству использования, далее я ограничен лишь своими навыками.
Референсы.
Как только систематизировал информацию, можно идти вдохновляться, поскольку сильного креатива не требовалось, я просто посмотрел на знакомые мне топовые бренды и интернет-магазины и сверху вы видите подписи к каждому, говорящие о том, что я возьму от примера. Заметьте, текст написан "по настроению", я пишу явную чушь, которая передаст моё настроение и сохранит суть мысли. Это не даёт мне сильно напрягаться и придумывать подходящие слова для описания идеи.
Прототип.
Хочу заметить — по итогу я отказался от шапки и подвала. Основной причиной послужило то, что я не знаю структуры сайта. Я люблю разделять контент, там, где люди пихают информацию в один блок, я распределю на два. Может это и не самое лучшее решение, но я точно знаю, что это никогда не приведёт к перегрузу, а значит это послужит плюсиком в копилочку удобства использования.
Справа я разместил бар в подсказками, по задумке они будут прикреплены и висеть пока эти требования не будут выполнены, решение пришло на основе референсов, такого я ранее не видел, но посчитал, что это вполне удобно, так как обращает на себя внимание и не оставит пользователя в неведении.
Пользовательский сценарий.
Обычно его составляют для нескольких персонажей, но поскольку задание не боевое, я описал общий пользовательский сценарий, он подойдёт для большинства пользователей и описывает их движение по сайту.
UI и корректировки.
Всё продумано, всё решено, осталось внести правки, потому что цвет может выглядеть неуместно или некрасиво рядом с элементами, которые хорошо смотрятся возле бело-серого прототипа. Тут я добавил индикатор заполнения формы, судя по исследованиям, это довольно удобное решение. Я решил, что намного лучше будет предложить пользователю зарегестрироваться и ускорить заполнение анкеты (не принудительно, это важно!). далее идут инфо бары и инпуты (облака справа и поля для ввода), в них всё по ТЗ, ничего и не намудришь, нужно делать понятно и удобно.
Также в форму было необходимо встроить провожающий popup (всплывающее окно), которое обращается к заполняющему и предлагает ему услуги и различные бонусы.
Адаптив.
Тут ничего необычного, подогнал размеры текстов и создал необходимые UI элементы для хорошего восприятия пользователем с меньших экранов.
UI-Kit и передача макета на вёрстку.
Когда всё готово, то нужно подумать о людях, которые будут дальше работать с макетом. Итак, я собрал UI-Kit. В него входят все графические элементы, которые есть на сайте, также нужно включить в него состояния объектов. Это кнопки, hover-состояния (состояние наведения курсора), нажатия, изменения цветов, размеров и тп. Также хорошим тоном будет подписать все слои и разместить комментарии к макету, говорящие о функции или объясняющие какую-либо задуманную дизайнером идею.
Итог.
Сбор данных должен быть в первую очередь удобен. Даже самый современный и красивый сайт скорее всего будет иметь приземлённые формы для ввода данных, так как пользователю и без того сложно что-то давать, а если ему придётся разбираться в том, как это делать, то он попросту уйдёт.
Подписывайся на канал YWD и ставь лайк если тебе понравилась статья!
Связаться со мной можно тут:
VK | Instagram | Telegram