Наш блог

Интересные факты из мира рекламы и продвижения

Памятка хорошего дизайнера

Памятка хорошего дизайнера - 5.0 out of 5 based on 1 vote

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

pic 01

Оптимизируйте .psd макет для верстальщика и сэкономь время себе и ему.

pic 02

1. Дизайн сайтов - это не полиграфия.

Предоставляй макет в традиционном формате .psd (Photoshop). В противном случае сайт будет отличаться от макета.

Используй цветовое пространство North America Web/Internet -> sRGB. Именно оно используется по умолчанию в веб.

CMYK - используется в полиграфии, для web не подходит.

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

pic 03

2. Наводим порядок в слоях.

Группируй слои по смысловым блокам с верху в низ и с лева на право и даем слоям и групппам осмысленные, информативные названия. (Шапка, Контент, Подвал и т.п.)

Объединяй те слои, которые не будут использоваться по отдельности.

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

pic 04

3. Никакой случайности в мелочах.

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

Осознанно выбирай пропорции и размеры и делай их кратными - не 997 px, а 1000 px.

Избегай нечетких пиксельных границ вертикальных и горизонтальных линий.

Указывай размер шрифтов целыми значениями, без дробей и не растягивайте принудительно шрифт.

pic 05

4. Ловушка для верстальщика.

Не присылайте верстальщику макет, где какой-либо эффект достигается с помощью режимов наложения, отличных от Normal (обычное).

КРИТИЧНО!!!

Ни в коем случае нельзя допускать способы наложения, которые не сможет воспроизвести верстальщик.

Не спеши растрировать эффекты и слои без необходимости - верстальщик сможет посмотреть параметры тени, цвета градиента, радиус скругления углов и т.д.

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

pic 06

5. Обязательные элементы макета.

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

Показывай всё типографическое оформление текста: заголовки 1-6 уровней, контентный шрифт, списки, таблицы.

pic 07

6. Как найти то, не знаю что.

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

Все нестандартные шрифты обязательно копируй в ту же папку с дополнительными материалами для проекта. Вдруг у верстальщика нет этого замечательного кириллического шрифта.

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

Don't have an account yet? Register Now!

Sign in to your account