Показатель отказов: от чего он зависит?

Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы...

Копия сайта и необходимость ее создания

Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П...

Грамматические ошибки на сайте: накажут ли за них поисковики?

Стоит ли опасаться гнева поисковика, если на страницах сайта присутствуют грамматические ошибки? Этот вопрос волнует всех, кто уже давно распоряжается собственным виртуал...

Как сделать верстальщика счастливым? 13 cоветов веб-дизайнеру

Работать в команде всегда непросто. А сделать так, чтобы тот, кто продолжает сделанную тобой работу был доволен умеет не каждый. Иногда мы сами не подозреваем о том, какие проблемы и препятствия создаем для своих коллег. Частенько такое происходит и в неразлучной связке веб-дизайнер-верстальщик. Как сделать верстальщика счастливым?  Несколько советов на эту тему дадут сегодня двое специалистов — Андрей Орлов (web-дизайнер, по первой профессии — верстальщик и php-программист) и Maya Specctra (веб-программист, верстальщик).

Андрей Орлов (web-дизайнер, по первой профессии — верстальщик и php-программист)

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

Пример (абстрактный) хорошей организации слоёв:



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

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

Никогда не растрируйте слои если в этом нет крайней необходимости;

Никогда не объединяйте слои друг с другом;

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

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

При трансформировании и наложении фильтров на какую-либо растровую графику всегда конвертируйте её сначала в смарт-объект, а только потом всё остальное;

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

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

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

Maya Specctra (веб-программист, верстальщик)

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

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

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

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

Используйте только стандартные шрифты. Нестандартные шрифты не будут видны у большей части пользователей.