С чего начать делать тестовое, чтобы не обосраться: часть 2

Итак, представим, что вы сделали всё, о чём я писала в первой части. Идём дальше.

7. Изучаем существующие решения

Когда разобрались, что от нас хотят, идём изучать существующие решения. Не обязательно смотреть только продукты из этой же области, можно смотреть и на другие продукты со смежной логикой. Скриним, закидываем в файл по порядку и анализируем каждый экран: какие есть плюсы, какие минусы, что можно использовать в своём решении, а что лучше не тащить.

8. Не бежим сразу искать красивые картинки

Важно понимать, что визуальный дизайн важен, но логичность сценария всё-таки важнее. Если мы просто наштампуем красивых картинок, это не поможет пройти тестовое. Но, опять же, все уже немного устали от чистеньких красивых экранов, поэтому когда сформируете флоу и закончите проектировать макеты, можно добавить интересные механики или накинуть прикольный визуал. Главное — не переборщить.

9. Делаем вайрфреймы

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

10. Собираем компоненты

После этого приступаем не к дизайну) А к формированию компонентов, чтобы не плодить 10 кнопок с разными скруглениями, цветами и размерами, а сделать условно 3 и использовать их на всех экранах. Так экраны будут консистентными и не начнут рассыпаться. Если вы сможете собрать компоненты на стилях — это хорошо, а если на токенах, то ещё лучше.

11. И только теперь идём в дизайн

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

12. Показываем связи и состояния

Проставляем стрелочки от экранчика к экранчику, чтобы было понятно, как и что кликается. И не забываем про ошибки, разные состояния и корнер-кейсы. Важно не переборщить и не делать 300 ошибок. 

13. Описываем, как думали

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

14. Выносим компоненты отдельно

Ещё можно вынести все компоненты на отдельную страничку, чтобы показать, как вы их собираете и как они работают. Это сразу делает файл более собранным и показывает, что вы думаете не только про финальную картинку, но и про систему.

В следующих постах расскажу про исследования, которые лучше сделать перед выполнением тестового, и как работать с этим страшным словом “фреймворк”)

Не просто красиво  ← канал про дизайн, путешествия и рост в компании