Диджитал сфера развивается с бешеной скоростью, что напрямую влияет на работу дизайнеров. Если ещё 10-15 лет назад на создание дизайна сайта с нуля могло тратиться несколько месяцев, то сейчас эти сроки сократились до нескольких недель, а то и дней. Как же не потеряться в этих бесконечных дедлайнах и ТЗ?
Основные параметры дизайн-макета сайта
Все названия файлов должны быть только на латинице: тогда они корректно откроются на любом компьютере. Все старые версии макетов следует перенести в отдельную папку OLD: так вы покажете заказчику весь объем работ и при этом облегчите жизнь верстальщику.
Формат файлов — PSD или TIFF. Предпочтительнее использовать PSD: так потом будет проще делать правки, да и верстальщик увидит по какой логике вы располагали те или иные элементы.
Все элементы должны быть на своем месте. Если что-то можно убрать без ущерба для смысловой нагрузки — удаляйте.
Разрешение 72 dpi, цветовая палитра RGB и 8 бит на канал. Все электронные гаджеты работают в RGB, поэтому создавать документ в CMYK не имеет смысла. Это же относится и к глубине цвета — вы не знаете с каких устройств будут просматривать будущий сайт, поэтому лучше сделать так, чтобы цвета отображались одинаково как на кнопочной Nokia, так и на топовом iMac.
Мы знаем, что в душе вы художник, но сегодня вам надо добить таск. И мы в этом поможем!
В большинстве случаев макет сайта имеет фиксированную ширину рабочей области: уточните у заказчика её желаемый размер. Чтобы не вылезать за пределы, обязательно ограничьте её направляющими линиями. Самыми распространенными размерами на 2020 год являются 1170px, 960px, 1100px.
При прорисовке мобильной версии сайта не забывайте о том, что вашим сайтом будут пользоваться как люди с последним айфоном, так и владельцы стареньких андроидов. Поэтому обязательно прорабатывайте несколько вариантов ширины: 320, 480, 798 и 1020. Так вы будете уверены в том, что ваш контент будет корректно показан, как на стареньком iPhone 5C, так и на флагманском Samsung с Full HD дисплеем.
При этом, ширину фона стоит предусмотреть до разрешения мониторов в 1920px. Причиной тому является, что фоновые изображения могут выходить за пределы контентной части сайта. Согласитесь, что будет некрасиво, если, заходя на ваш сайт, клиент будет видеть черные полоски по бокам.
В макете должны быть предоставлены все элементы, что указаны в ТЗ. Обязательно обратите внимание на дополнительную навигацию, “путь по сайту” и хлебные крошки. Почему-то многие дизайнеры “забивают” на эти элементы, хоть они играют важнейшую роль в общем впечатлении о сайте.
Назначение пиктограмм должно быть интуитивно понятным, как 15-летнему подростку, так и его 65-летней бабушке.
Иначе серфинг по сайту будет выглядеть приблизительно, как на этой гифке
Также стоит обязательно отрисовать к макету файл favicon.ico размером 16х16 px. Если нет возможности сохранить в формате ico, то можно воспользоваться одним из сервисов, которые переформатируют файл за считанные секунды. Самыми популярные подобные сайты: ICOConvert, Online-Convert, ConvertICO и ICOConverter.
Проверьте, вложили ли вы в итоговую папку векторные исходники всех векторных графических элементов. Также обязательно должен быть сопроводительный элемент, где следует описать растягиваемость сайта, и список всех использующихся шрифтов.
Для тех, кто хочет забыть о большинстве Photoshop-проблем, таких как сложность командной работы, неработающие шрифты и монотонные правки, год назад придумали сервис Figma. Этот инновационный сервис уже меняет мир веб-дизайнеров, как это когда-то сделали Google Docs.
Только представьте: теперь вы можете работать с макетом прямо из окна браузера вместе со своими коллегами. Как только кто-то сделает свои правки — они тут же отобразятся и у вас. Все файлы и шрифты уже хранятся на облаке, поэтому они точно откроются у всех участников команды. Также Figma совместима со Sketch-файлами, чего нет даже у Photoshop.
Также этот сервис упрощает работу с правками: только представьте, что вы отправили заказчику более 40 макетов, после чего он попросил изменить пункт меню в шапке. Если с фотошопом вам приходилось делать все 40 правок вручную, то здесь будет достаточно нажать одну кнопку и она поменяется на всех остальных страницах. А история изменений позволит “откатиться” к нужному моменту за несколько секунд.
Слои и группы слоев
- Ни в коем случае не склеивайте слои! Все фоны, тексты, формы и изображения поверх фонов должны быть на отдельных слоях.
- Элементы одного смыслового блока должны быть объединены в одну группу с понятными названиями. Поверьте, проще будет найти «Header» и «Подвал» чем «група1201» «група1111».
- Не ленитесь переименовывать слои в соответствии с их назначением. Всё это заметно упростит поиск и изменение элементов в период правок.
- Старайтесь избегать полупрозрачных градиентов и режимов наложения: на разных устройствах они выглядят по разному.
- Если вы делаете скрытую группу слоев — обязательно выделите её цветом. Так верстальщик поймет, что туда можно не заходить.
- Если в макете используются текстурные заливки — прикрепите отдельным файлом файлы используемых текстур.
- Результаты работы всех нестандартных стилей, режимов наложения, скриптов и т.д. следует свести в отдельные обычные слои. Не усложняйте себе в будущем работу!
В противном случае, ваш рабочий день в период правок будет выглядеть примерно так
Важно: верстальщики, если ваш дизайнер прорисовал только ключевые контрольные точки, то не бойтесь создавать и проверять их потом сами. Так вы будете уверены в том, что вы точно все правильно перенесли.
Перед сдачей итогового макета стоит удалить неиспользуемые слои и ненужные направляющие. Не обманывайте себя — они больше не пригодятся. Если внутренний паникер перекрикивает здравый смысл — сохраните на облако исходный PSD-документ, а заказчику отправьте “чистый” файл без ненужных слоев.
Работа с текстом
- В макете должно использоваться 2-3 шрифта. Если взять больше, то сайт будет похож на безвкусные объявления середины 90-х.
- Все тексты должны хорошо читаться даже на плохо настроенных старых мониторах. Именно поэтому, всегда желательно использовать стандартные шрифты с кеглем 13+. Если же их кажется мало, то возьмите любой из находящихся на https://fonts.google.com — они корректно отображаются практически во всех браузерах.
- Динамический контент нужно прописывать только стандартным шрифтом. В противном случае, данные не смогут подгружаться автоматически, и верстальщику все равно придется заменять его на стандартный.
- Трансформирование текста НЕДОПУСТИМО! Если нужно изменить кегль или интерлиньяж, то делайте это только через соответствующие настройки.
- Размеры шрифтов должны быть целыми числами: не используйте десятичные значения по типу 12.73 или 16.52 пикселя. Иначе верстальщику придется вручную подбирать шрифт, и угадывать какой кегль подойдет больше. Иногда это может разрушить всю идею — поэтому делайте так, чтобы потом не пришлось ничего переделывать.
- Все значения отступов должны быть кратны 5 или 10 — опять же, это упростит работу как вам, так и верстальщикам.
- Помните, что все статичные тексты должны быть актуальны, а статичные картинки должны быть подготовлены для Ретины (дислеев для Apple-устройств). Это нужно, чтобы у пользователей с повышенной плотностью пикселей не было размытых изображений.
- Текст, который должен быть представлен на сайте в виде графики, в макете дизайна должен быть переведён в растр. Текст, который должен быть представлен на сайте в виде текста, остается текстом.
- Текст и фон должны быть контрастными — это сделает сайт более удобно читаемым даже для людей с плохим зрением.
- Пропишите, как будут выглядеть тексты в обычной и адаптивной версии. Покажите шрифт, размер, высоту строки, цвет и т.д. Верстальщик — не экстрасенс, он не знает, что у вас в голове!
Более того, за использование некоторых нестандартных шрифтов придется хорошо заплатить
Ваша креативность не должна делать посетителям больно
Облегчите жизнь верстальщику, не заставляйте его бороться с вашим макетом
Активное содержимое, формы, кнопки
Нередко дизайнер закладывает в макет элементы, которые должны менять свое поведение при наведении курсора мыши. Чтобы верстальщик корректно понял задумку, отрисуйте элемент в активном состоянии и скройте эту группу слоев.
Обязательно прорисуйте все варианты активного содержимого и пропишите в отдельном документе какое изображение когда использовать. Тогда верстальщик перенесет все идеи такими, как они были задуманы.
Еще лучше, если вы вынесете подобный контент в отдельный PSD-файл с названием UI Kit. Тогда любой верстальщик поймет, что здесь хранится контент для активного содержимого.
Перед передачей UI-содержимого, проверьте следующее:
- все иконки и лого в .svg должны быть только в родном размере;
- у каждой кнопки должно быть несколько состояний: view — hover — (push) — active — disable;
- состояния импутов и дроп-листов view — hover — focused (printing) — valid — error — disable;
- индикаторы загрузки файла.
И не забывайте про общую интуитивность сайта: не все пользователи имеют такой же уровень компьютерной грамотности, что у вас!
Что нужно ещё проверить перед версткой?
Каждый работает так, как ему удобно. Однако, чтобы быть уверенным в том, что вы ничего не забыли и верстальщик поймет ваш полет мысли, стоит перепроверить следующее:
- Дизайн страниц 404, 500.
- Сообщения, что браузер не поддерживается.
- Сообщения модального окна:
- глобальную ошибку сайта,
- ошибку при загрузке страниц,
- успешную отправку формы и ошибку при её отправке.
- отображение отдельных сообщений.
- Выдачу и загрузку элементов:
- вид страницы с пустой выдачей и сообщением, что ничего не выбрано;
- порядок загрузки блоков и вид подгружаемых карточек;
- не следует забывать и о прелоадере для всего сайта — не у всех же пользователей ультрабыстрый интернет, а смотреть на черный экран скучно.
- Не забудете проверить такие базовые единицы сайта, как:
- цветовая палитра;
- таблицы с размерами загружаемых изображений;
- таблицы параметров для шейринга в соцсетях;
- лейаут грид и набор отступов.
- Обязательно проверьте функциональные связи, такие как:
- этапы валидации;
- ограничение количества символов в текстовом поле;
- минимальные и максимальные значения счетчиков;
- побочные запросы в систему на смартфонах;
- количество выгружаемых элементов до подгрузки в каталоге.
Сохраните этот чек-лист и возвращайтесь к нему перед сдачей проекта: благодаря нему вы заметно сэкономите время и уменьшите число конечных правок. А мы желаем вам как можно больше закрытых проектов с минимальным количеством правок ( а лучше и вовсе без них).
Оставайтесь с нами, чтобы узнать ещё больше лайфхаков диджитал-специалистов!
