Заказать звонок
hello@svettsova.com
Белгород, ул. Костюкова 35В Санкт-Петербург, ул. Кондратьевский 62, корп. 3
Участник рейтинга развития диджитал-агентств
Диджитал сфера развивается с бешеной скоростью, что напрямую влияет на работу дизайнеров. Если ещё 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 правок вручную, то здесь будет достаточно нажать одну кнопку и она поменяется на всех остальных страницах. А история изменений позволит “откатиться” к нужному моменту за несколько секунд.
Перед сдачей итогового макета стоит удалить неиспользуемые слои и ненужные направляющие. Не обманывайте себя — они больше не пригодятся. Если внутренний паникер перекрикивает здравый смысл — сохраните на облако исходный PSD-документ, а заказчику отправьте “чистый” файл без ненужных слоев.
Нередко дизайнер закладывает в макет элементы, которые должны менять свое поведение при наведении курсора мыши. Чтобы верстальщик корректно понял задумку, отрисуйте элемент в активном состоянии и скройте эту группу слоев.
Обязательно прорисуйте все варианты активного содержимого и пропишите в отдельном документе какое изображение когда использовать. Тогда верстальщик перенесет все идеи такими, как они были задуманы.
Еще лучше, если вы вынесете подобный контент в отдельный PSD-файл с названием UI Kit. Тогда любой верстальщик поймет, что здесь хранится контент для активного содержимого.
Перед передачей UI-содержимого, проверьте следующее:
Каждый работает так, как ему удобно. Однако, чтобы быть уверенным в том, что вы ничего не забыли и верстальщик поймет ваш полет мысли, стоит перепроверить следующее:
Сохраните этот чек-лист и возвращайтесь к нему перед сдачей проекта: благодаря нему вы заметно сэкономите время и уменьшите число конечных правок. А мы желаем вам как можно больше закрытых проектов с минимальным количеством правок ( а лучше и вовсе без них).
Оставайтесь с нами, чтобы узнать ещё больше лайфхаков диджитал-специалистов!