9 правил хорошего дизайн-макета

work_web_design

Дизайн проекта это одна из главных составляющих его успеха. Хороший дизайн привлекает людей, создает индивидуальность и позволяет выбиться из общей массы. Существует множество статей и советов о том, как сделать красивый и грамотный дизайн сайта, от разработки пользовательского интерфейса до выбора цветовой схемы. Но мало кто обращает внимание на то, как правильно скомпоновать проект для его дальнейшей отправки в верстку. Об этом мы сейчас и поговорим.

Для начала немного предыстории. Свой первый дизайн-макет я получил почти 10 лет назад в рамках расширения своих должностных обязанностей. Тогда я работал php-программистом и для нового проекта наша фирма заказала у какого-то фрилансера, т.к. штатного не было, в принципе, красивенький дизайн. А поскольку в те времена практика разделения труда была мало распространена я начал осваивать одну из ключевых профессий в web-разработке. Вот с тех самых пор открытие очередного psd файла превращается для меня в русскую рулетку. Спросите почему? Просто иногда хочется или самому застрелиться, что бы не мучиться, или пристрелить того, кто это рисовал.

Думаю на этом стоит закончить лирическое отступление и приступить к разбору полетов.

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

1. Компоновка проекта или что положить в архив.

  • шрифты
  • паттерны
  • иконки
  • страница с элементами
  • пояснительная записка

2. Выбор программы для отрисовки макета.

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

3. Работа со слоями.

  • Группируем слои по папочкам
  • Многослойные элементы собираем в отдельные папки
  • Запрет на смешивание слоев
  • Запрет на использование эффектов, которые нельзя воспроизвести средствами CSS

4. Работа со шрифтами

  • Для сглаживания использовать только шарп
  • Цвет задавать только через параметр цвета, а не через заливку, прозрачность
  • Запрещается растягивать буквы
  • Желательно не увлекаться межбуквенными отступами
  • Запрещается использовать градиенты для раскраски шрифтов
  • Запрещается применять эффекты которые нельзя воспроизвести средствами CSS

5. Иконки и другие векторные элементы

  • Все иконки на прозрачном фоне
  • Если используются векторные элементы, которые должны быть таковыми же и в верстке, то присылать в отдельной папке и в SVG формате
  • Если рисуется дизайн адаптивного сайта, то желательно использовать векторные иконки

6. Вспомогательные слои и страница с элементами

  • Все элементы, имеющие более одного состояния, необходимо отрисовать
  • Все выпадающие элементы так же нужно рисовать
  • Сделать отдельную страницу с типографикой и элементами в разных состояниях

7. Комментарии и пояснительные записки

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

Желательно составить пояснительную записку с описанием элементов проекта, основные цвета, поведение элементов, размеры отступов и т.д.

8. Размер и вес макета

Если есть фоновые картинки, то размер макета должен быть не меньше 1920px.

Оптимизировать макет убрав весь мусор и лишние слои использовать реального размера, а не в высоком разрешении

9. Дополнительные макеты для адаптивного дизайна

Отрисовать дополнительные макеты для разных размеров экрана или приложить блок-схему для отображения поведения элементов


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

Добавить комментарий