Статьи

Интересно и полезно

Тринадцать рекомендаций для веб-дизайнера

Работа в коллективе всегда сопряжена с определенными сложностями. А сделать так, чтобы человек, которую станет продолжать работу, выполненную тобой, был ею доволен, способен далеко не каждый дизайнер. Часто мы не подозреваем, какие сложности и барьеры создаем для своих коллег.

Иногда такое может происходить и в связке дизайнер-верстальщик. Как сделать так, чтобы верстальщик был счастлив? Для наших читателей мы даем несколько рекомендаций на эту тему.

Ваш макет является сложным разобранным устройством, все компоненты которого должны находиться на своих местах и быть четко рассортированными. В противном случае вы вместе с коллегой будете испытывать сложности в работе с подобным документом. Приведем пример качественной организации слоев:

 

Здесь все размещено по логическим группам, которые соответствуют отдельным областям страницы (футер, хедер, «плашка», информационная часть и т.п.). Все, даже наиболее незначительные детали расположены в своей папке, тогда вам не перепутать текст описания продукции и текст на кнопке, размещенной непосредственно под ней. Иерархия слоев и групп базируется на структуре страницы. Это можно считать основным принципом качественно выполненного макета.

Качественный (по техническим критериям) дизайн должен быть разбираем (и модифицируем) вплоть до самой мелкой детали. Поэтому:


1. Никогда нельзя растрировать слои, если это не является крайней необходимостью;


2. Не следует объединять слои вместе;


3. Всегда нужно применять только векторные инструменты (если нет иного пути, то можно воспользоваться Marquee tool, однако не желательно);


4. Не следует «заливать» градиентами и пользоваться инструментами, чей результат работы будет «запекаться» на слое, после чего слой будет неизменяемым (заливка паттерном, заливка градиентом, стандартные фильтры, выделения). Нужно заменять их процедурными аналогами, в случае с градиентом — Gradient layer и Gradient overlay; для выделения следует пользоваться Regtangle (и ему подобными) tool, а растровые маски необходимо замените на векторные и др;


5. В случае трансформирования и наложения фильтров на  растровую графику следует вначале ее конвертировать в смарт-объект, и лишь потом делать остальные действия с ней;

6. Используйте смарт-объекты! В особенности если вам хочется добавить фильтр сверху какого-то слоя. Не нужно его растрировать, просто конвертируйте в смарт-объект. Подобный подход можно называть своеобразной «процедурностью». А основным её достоинством считается гибкость, а также возможность в редактировании почти всего в случае необходимости.

7. Часто так выходит, что практически всегда зазоры, пропорции элементов и маржины на макете продиктованы не чётким расчётом, а случайностью. Чаще всего у разработчиков объектом насмешек над веб-дизайнерами являются разные цифры вроде ширины отцентрированного блока в 997 пикселей. «Именно 997, не иначе! Концепцию можно разрушить использованием 1000» :)
Следует осознанно выбрать размеры и пропорции, и приветствуется, если они будут кратными и аккуратными. То есть не 997, а 1000 пикселей, в частности. В противном случае во время верстки с этим могут возникнуть осложнения.

8. Гайды. В Photoshop их реализация очень сильно хромает, и когда вы в одном документе, который делится на группы, решили хранить все страницы, а иногда и несколько вариантов веб-дизайна, возникнут осложнения. Потому мы бы рекомендовали вам намечать гайдами лишь главные границы. Нельзя переусердствовать в этом, а то иногда попадаются такие макеты, за синими линиями которого сложно было что-либо разобрать. Для разработчика желательно создать отдельный слой, на котором вы сможете нарисовать сетку, по которой следует выполнять верстку.

9. Важно учесть адаптивность вашего дизайна. Во время разработки макета поразмышляйте над тем, каковым будет конечный результат на устройствах с различными разрешениями дисплея. Макет обязан ужиматься и тянуться.

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

11. Если ваш дизайн перенасыщен ховерами (возникающими или меняющимися во время наведения мышкой на элементы), нужно создать отдельный макет, где будет продемонстрирован вариант дизайна с активными ховерами. Тогда у заказчика заказчик и верстальщика перед глазами будет увидеть цельная картина.

12. Если ваши задумки сложно продемонстрировать в макете, следует описать их текстом. Попытайтесь сделать это понятно и развернуто.

13. Следует пользоваться только стандартными шрифтами. Поскольку нестандартные шрифты будут плохо видны большинству пользователей.