- PVSM.RU - https://www.pvsm.ru -
Часто мне приходится работать с макетами разных дизайнеров и так же часто их качество оставляет желать лучшего.
Хотя я человек педантичный, мне не всегда это помогало. Например, я мог делать что-то аккуратно, скрупулёзно, но неправильно, просто из-за отсутствия опыта. Сейчас я постоянно наблюдаю одни и те же проблемы дизайнеров и, что бы помочь, собрал несколько практичных советов. Вот некоторые из них:
Это значительно облегчает работу, как с небольшими, так и с большими и сложными проектами. Больше нет необходимости делать несколько psd-файлов или использовать группы внутри, чтобы показать разные состояния интерфейсов.
Качество экранов растет вместе с требованиями к графике. Работая в большем масштабе у вас всегда будет небольшой запас. Не очень удобно менять outline-иконку размером в 16х16px или писать примечания 11-12 шрифтом и видеть эту рвань.
По умолчанию, новый слой создается выше остальных. Не ленитесь, перемещайте их соответственно тому, где располагается объект или начинайте с конца. Мы читаем/смотрим слева направо, сверху вниз. Хорошо, когда не приходится верхнюю иконку искать где-то внизу или, что бывает хуже, в середине слоев.
Тут прям две крайности. Или все группы разукрашены или все серое. Но, если использовать это там, где уместно, то это может стать удобным инструментом. Например, если у вас много похожих слоев (иконка+текст) или графики, диаграммы, таблицы…
Обычно, сетка формируется направляющими. В процессе работы они могут сбиваться, добавляться, удаляться и, никогда, не понятно, почему тот или иной объект выровнен так или какая из направляющих базовая, а какая нет. Вынеся сетку на отдельный слой будет проще сверяться.
Зачастую, макеты могут содержать сотни слоев и найти нужные не всегда просто. И еще более сложно, когда стили слоев раскрыты. Обычно они не несут большой информативности.
Это также относится к прошлому пункту, но может усугубляться тем, что вы будете включать/выключать их, надеясь увидеть что-то полезно, а не мусор. Зачем эти нервы.
Тут, конечно, все индивидуально, но основное правило такое: подписывайте слой соответственно его содержимому. При этом приучайте себя использовать английский язык, на случай, если вы будете расти и работать с интернациональными проектами.
Старайтесь как можно меньше использовать растровую графику, иконки и тем более иконочные шрифты. Уже давно нет никаких проблем с использованием SVG формате. Он легко масштабируется, имеют гибкие настройки и хорошую поддержку.
Вставляете ли вы иконку, картинку или что-то еще, делайте это через «Поместить связанные». Практика показывает, что удобней изменить один файл, чем вносить изменения в множество мест. Например, такие части как подвал или шапка чаще статичны и их удобней вынести в отдельные файлы и поместить через импорт.
Как часто я наблюдаю картинки в виде кругов, пятиугольников, звёзд, которые сделаны не самым практичным образом. Чаще из картинок вырезают нужную часть в нужной форме и вставляют. Но вот когда дело доходит до редактирования, становится грустно. Для таких задач хорошо использовать маски. Они показывают нужную часть и при этом картинка остается целой. Ее можно масштабировать, кадрировать или заменить без лишних действий.
Они похожи на группы, но умеют сохранять стили. Например, если у вас есть несколько одинаковых кнопок на странице, то удобней использовать смарт-объекты. Редактирование одного распространяется на все в пределе файла. Также удобно использовать, если хочется сократить бессчетное кол-во слоев.
Бывает, верстальщикам непонятно, какой размер кнопки предусмотрен, если в дизайне не используются фоны или окантовки. Добавьте охранное поле в виде пустого блока под ней или добавьте префикс к названию.
Очень неудобно копировать текст с макета, если он был вставлен не как блок и переносы проставлены в ручную. Приходится удалять их. К тому же такой способ помогает увидеть, как это будет выглядеть при верстке макета.
По завершению не забывайте прикладывать шрифты, оригиналы картинок, инфографику, описания… Обычно, на поиск/запрос тратится много времени. Например, часто у меня такая структура:
svg – все иконки;
материалы — картинки, инфографика, шрифты;
from client – то, что изначально пришло от клиента;
includes — связанные части шаблона
Каждый из этих приемов хорош, но вместе они помогают более эффективнее работать с макетами вам и другим и экономит время.
Автор: SkSeven
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/278911
Ссылки в тексте:
[1] Источник: https://habr.com/post/354466/?utm_campaign=354466
Нажмите здесь для печати.