Вы, как профессионал своего дела, должны выполнять ряд работ, которые помогут в дальнейшем разработчикам, качественно сверстать и интегрировать сайт. Об этом могут не говорить и даже не знать. Но вам все равно стоит выполнять эти задачи в рамках разработки дизайн-макетов.
Перейдем к списку таких работ:
1. Делайте UI Kit
Ховеры, нажатия, всплывающие окна, подсказки — это всё должно быть в UI Kit проекта
2. Показывайте все состояния элементов на страницах
Если это форма в несколько шагов — покажите все этапы. И ещё, окно с сообщением после отправки. Покажите, например, страницу каталога товаров, где отсутствуют товары. С сообщением «К сожалению в категории нет товаров, но скоро мы их добавим. А пока вы можете перейти к нашим самым популярным товарам». Или пойдите дальше. Сделайте так, чтобы категории товаров без товаров были не активны в меню — это тоже можно показать на макетах. И все восхитятся вашей продуманности и профессионализму.
3. Выводите элементы в компоненты
Разработка происходит также, компонентно. Если это будет заложено в макетах, будет существенно легче разрабатывать.
4. Иконки ставить во фреймы
Погуглите как это делать, если не знали
5. Показывайте варианты контента
К примеру плитка новостей (один блок с новостью). Что нужно показать на макетах? Название новости в 1, 2, 3 строки, разную длину описания, разные картинки и т.п. Таким образом вы учтете изменения контента и макет будет ровным, чем если сделать все заголовки в 1 строку и думать что в каждой новости будет картинка. А потом эта проблема вскроется на этапе разработки сайта, и к вам обратятся за исправлением
6. Делайте заглушки и ограничивайте элементы
Не всегда на действующем сайте могут быть картинки, а может, их забудут разместить. Подумайте об этом и сделайте заглушки картинок во всех элементах, где они выводятся.
Так же тексты на реальном сайте могут сильно отличаться от макета. Поэтому покажите примеры текста с максимальной длинной и как он будет прятаться.
7. Удаляйте черновики
Или переносите их на отдельную страницу, чтобы они пересекались с рабочими и утвержденными макетами
8. Не выдумывайте новый вид стандартных элементов
Люди привыкли к определённым иконкам, элементам, расположению. Не нужно ломать такие привычки и придумывать неудобный дизайн, которым непривычно пользоваться.
Если вы знаете, что делаете, хорошо понимаете пользовательские сценарии, то, конечно, можно ломать стереотипы. Но нужно делать это осторожно. Икак правило, простые и устоявшиеся решения лучше и выгоднее использовать.
9. Структурируйте макеты по страницам и логически группируйте
К примеру у вас могут быть Прототипы, Рабочие макеты, Мобильная версия, Черновики и т.п.
10. Проверить выбранные для макета шрифты
Нормально ли они работают в браузерах? Все ли символы есть?
Если вы берете какой-то нестандартный шрифт, проверьте, как он выводится в браузере. Погуглите по названию шрифтов сайты и посмотрите как он выводится, какие у него есть особенности.
11. Сокращайте количество стилей текста, элементов, цветов, размеров картинок
Однотипные элементы не должны отличаться по стилям на разных страницах. Чем меньше вариаций повторяющихся элементов вы делаете, тем будет лучше при разработке и дальнейшем сопровождении проекта
12. Желательно, но не обязательно — подумайте об анимациях
Покажите анимацию элементов или можно дать ссылки на сайты где это реализовано, для верстальщика. Ваши макеты оживут. Но главное, не переборщите с анимациями. Они не должны вызывать негатив, мешать загрузки или просмотру контента.
Уделяйте внимание мелочам, прокачивайте навыки работы с Figma. Будьте инициативны. Это поможет вырасти и попасть в крупные проекты и стартапы, где подобные навыки ценятся и жизненно необходимы.
Если понравился пост, ставь оставляй комментарий и подписывайся на меня в соц.сетях!
Оформляйте кейсы и привлекайте новых клиентов, а в раскрутке поможет Betop.me — сервис продвижения дизайнеров на Behance, Dribbble и Artstation
