Drupal для дизайнера - Шаблоны и полезности

26.09.2017

Введение

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

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

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

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

Придумав  концепцию сайта, нарисовать только одну страницу - мало, нужно подготовить все типичные страницы. А их немало:

Сетка.

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

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

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

Форма

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

Зображення видалено.

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

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

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

Зображення видалено.

 

2. Полезно помнить 

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

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

Зображення видалено.

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

Вся статья тут: Drupal для дизайнера - Шаблоны и полезности