Введение

В этой статье я хочу поделится опытом работы и изложить некоторые соображения по поводу разработки дизайна вцелом и дизайна под Drupal в частности. В этой части статьи основное внимание будет уделено подготовке шаблонов и решению сопутсвующих проблем. Постараюсь рассказать о многих вещах, которые реализованы в Drupal "из коробки" либо легко реализуемы посредством модулей. Этими возможностями дизайнеры пользуются редко, рискну предположить, что по незнанию.  Так же рассмотрю некоторые нюансы технической части, очень важные для программистов и темеров, но не слишком важные для клиентов. Этой статьей я начинаю серию статей "Дизайн из коробки". 

1. Шаблоны. Как их правильно подготовить?

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

• сетка (или "скатерть", или Grid). О ней чуть ниже.
• главная страница
• страница с сайдбарами ( лучше, если их будет с одним сайдбаром + с двумя сайдбарами)
• страница без сайдбаров
• страница с формой (даже если сайт не предполагает интерактива - стоит предусмотреть. Это может быть контактная форма или форма входа/регистрации, форма комментария и т.п.)
• страница поиска
• другие страницы, необходимые в этом проекте (каталог, корзина, блог и т.д.)
• хорошо, когда элементы анимации - отдельные файлы. Еще клево, когда этот файл понятно называется, например: header_dropdown_menu.psd
• страница с элементами администрирования. 
• страницы HTTP ошибок - 403 и 404
• Maintanence page - страница "Сайт на обслуживании"
• Очень хорошо когда нарисована страница таксономии для тегов

Сетка.

Сетка нужна для того чтобы правильно позиционировать элементы. Для темера - это своебразная система координат. Начинайте любой проект именно с нее. Их тысячи, но в основном используют 960 grid system и 1140 grid system. По теме: чудный сайт посвященный квадратной сетке - лучше и не скажешь.

Страница с сайдбарами и без них.

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

Форма

Стоит предусмотреть внешний вид формы, даже если Вы делаете сайт-визитку. Например - это может быть контактная форма. Кстати стандартная контактная форма для Drupal выглядит так:

Не стоит менять на форме надписи и удалять поля. Так Вы добавите лишней головной боли для программистов.

Страница с элементами администрирования

Самым главным пользователем Вашего сайта является сам клиент, а не его клиенты и подчиненные. Поэтому нужно хорошо продумать дизайн административного интерфейса. Часто дизайнеры забывают о поле с системными сообщениями и о вкладках. Важно отметить, что вкладки бывают двухуровневые т.е. главный и вспомогательный ряд вкладок сразу ниже. Также прямо под вкладками могут находится ссылки c локальными задачами. В Drupal 7 появились контекстные ссылки (шестеренка в правом верхнем краю блоков)

 

2. Полезно помнить 
Список тех вещей, о которых нужно помнить:

• Favicon - работа дизайнера
• Заголовок любого текста или блока запросто может не поместится в одну строчку
• У ссылки есть три состояния: обычная, активная, при наведении.  Хорошо добавить четвертое состояни - посещенная.  Все должны визуально отличаться.
• Меню также имеет три состояния. Для многоуровневых меню - показать второй уровень значком, предусмотреть длинные пункты меню
• Не стесняйтесь добавлять автора публикации и дату - это хороший тон.
• Делайте BreadCrumb (Хлебные крошки). Это очень юзабельная навигация
• Делайте образец выделенного текста. Стандартно он синий, но это не всегда подходит к используемой цветовой гамме. 
• Практически любой контент можно пометить жирным или курсивом. В дизайне отражайте эту возможность
• если в Вашем проекте много форм - нарисуйте "disabled form" т.е. форму в состоянии когда она не активна. 
• Пользуйтесь генераторами текста: на английском языке и на русском
• Предусмотрите возможность комментирования. Кстати стандартная форма комментирования в Drupal состоит из таких элементов:

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

Еще статьи по теме есть тут: LT