Drupal — платформа з відкритим вихідним кодом, яка користується великою популярністю серед дизайнерів. Проте, створюючи елементи дизайну для сайтів на Drupal, варто дотримуватись певних “золотих правил”. З їх допомогою ви полегшите життя програмістам, які писатимуть код, а також скоротите терміни робіт. Та й кишені замовника не постраждають аж надто сильно. Ось деякі з цих правил:
Графічні елементи багаторазовоого використання
Використовуйте якнайбільше стандартизованих елементів дизайну — кнопок, іконок, стріл, булетів і т.д., замість того, щоб змінювати їх розмір згідно з особливостями макету. Темізаторам буде зручно працювати з групами подібних елементів, згрупованих на спрайтах, адже так кожен блок коду можна буде використовувати повторно щоразу, коли трапляються ці елементи. Якщо елементи зустрічаються на різних фонах, розмістіть елемент на окремому шарі з прозорим спрайтом.
Застосовуйте “фокуси” Photoshop’а з обережністю
Не сподівайтесь, що зможете відтворити в Інтернеті все, що вам вдається робити в Photoshop. Наприклад, динамічне накладення кольору з точними фільтрами не зможе настільки ж акуратно і точно відображатись в Інтернеті. Ви можете застосувати прозорість (opacity) тільки до прозорих елементів PNG або шляхом використання відсотків в CSS (тільки для певних браузерів).
Деякі елементи Photoshop можна відтворювати і за допомогою CSS, але це забирає набагато більше часу. Наприклад, якщо ви використовуєте складні меню, що включають відображення тексту при наведенні мишкою або фонові зображення, то можуть виникнути проблеми, якщо меню поділене на шари. Звісно, з усім цим можна впоратись, але часу на це потрібно набагато більше.
Подумайте про використання сітки
Сітки не такі вже й потрібні на маленьких сайтах, але використання стандартної сітки ідеально вписується в основні принципи використання Drupal: стандартизація, гнучкість і можливість багаторазового використання елементів. Оберіть сітку і застосовуйте її стабільно для підвищення візуальної привабливості сайту і логічності подачі матеріалу, а також для економії часу.
Шаблони швидко налаштовуються і вимагають мінімальної уваги в майбутньому. Розміщуючи сітку на найнижчому шарі PNG, PSD або AI-файлу, ви можете вмикати і вимикати її в міру необхідності. Можете передати її розробнику, який буде застосує ті ж розміри для створення тем. Або ж ви можете використовувати тему, побудовану на основі сітки.
Налаштуйте параметри кольору
Якщо ваші налаштування в Illustrator або Photoshop не мають правильної конфігурації, можуть з’явитися суттєві відмінності при переході в інтернет. В цих програмах вам потрібно застосовувати різні колірні налаштування в залежності від сфери використання проекту: інтернет, друк або фотографія.
Є ресурси, які допоможуть вам налаштувати веб-параметри так, щоб не було зміни кольорів при переході в інтернет. Як варіант, можна використовувати програму Fireworks — вона не потребує таких колірних налаштувань, як Illustrator або Photoshop.
Познайомтеся з формами Drupal
Drupal комплектується вбудованими формами, які дизайнеру захочеться налаштувати — контактна форму, форма логінації, форма коментарів, форма додавання нод тощо. Змінювати структуру вбудованих форм в Drupal можна, але це дуже трудомісткий процес, що забирає багато часу.
Якщо у вас є проект з певними термінами здачі, то краще робіть CSS-зміни в формах Drupal. Зберігайте порядок полів, мову та розмітку. Просто ознайомтеся зі структурами форм. Деякими елементами у формах особливо важко маніпулювати - ви заощадите час і гроші, залишивши їх такими, як вони є.
_____________________________________________________________________________________________________________________________________
Про автора: Лаліт Шарма — SEO консультант, який керує SEO-компанією під назвою Ranking By SEO. Він спеціалізується на лінкбілдінгу та інших видах діяльності в галузі оптимізації пошукових систем. Його також можна знайти на Twitter, Google+ та особистому сайті.