Поради щодо створення макета дизайну сайту

Будь-який вид розумної діяльності слід починати з написання плану дії, тобто - технічного завдання.

Грамотне складання брифу - важливий етап на шляху до отримання прогнозованого результату роботи дизайнера.

Бриф - це документ-опитувальник, який надається замовником дизайнеру з усією необхідною інформацією для останнього. Зазвичай це інформація про компанію, цілі і завдання проекту, терміни і бюджет. Приклади брифів можна у відкритому доступі скачати в інтернеті. На основі інформації, отриманої з брифа, складається технічне завдання для виконавчих осіб. Це чітка і послідовна структура вказівок до дії для всіх задіяних в проекті фахівців. Розробнику також слід відзначити для себе ключові моменти дизайну, визначити складні етапи роботи, проставити пріоритети розробки макета сайту. Наступним логічним етапом буде складання ескізу.

Складання ескізу макета сайту

"Від великого до малого", "Від загального до деталей" - ці два правила по організації роботи - одні з перших, яким навчають у художній школі. Не можна починати малювати портрет з очей так само, як і не слід починати складати макет сайту з кнопок навігаційного меню. Накресліть схематично основні структурні елементи сайту, не вдаючись особливо в деталі, мета ескізу - візуалізувати основні блоки макета. Після того, як мета досягнута і ескіз виглядає відповідно до вимог технічного завдання та естетичному смаку кріейтера, ескіз переноситься на сітку.

Вибір розміру при створенні макета сайту

Припустимо, ви отримали технічне завдання, в якому зазначено, що тіло сайту буде з фіксованою шириною по центру і гумовим фоном з боків. Виникає питання, яку ширину слід задавати. З урахуванням мінімального дозволу монітора, а воно становить 1024x768, ми створюємо робочу область 1003 пікселя. Куди подівся 21 піксель? Він пішов на бічній скролінг, розмір якого і складає 21 піксель. Отже, очевидно, що робоча область не повинна перевищувати 1003 пікселів. Більшість дизайнерів рекомендують задавати фіксовану величину тіла сайту в 1000 пікселів і по 100 пікселів на бічну гуму. Правильно задана ширина макета сайту дозволить уникнути горизонтальної прокрутки. Яку висоту слід задавати? Висота макета сайту ділиться на екрани. Всю важливу інформацію слід розміщувати на першому екрані, його висоту, точно так же, як і ширину робочої області, слід задавати з урахуванням навігаційних елементів браузера.

1. Manuscript grid або блокова сітка. Найпростіший вид сітки, на якій визначена тільки одна область:

2. колоночного. Одна з найпоширеніших сіток, приклад популярної колоночной сітки - 960. gs. Всупереч поширеній думці, колоночная сітка не є модульною, хоча і знайшла широке застосування в веб-дизайні сайтів. Колоночного сітки поділяються на різні підвиди, залежно від кількості колонок в ній. Це 8-, 12-, 16- і 32-стовпчик сітки:

На сайті використана 12-колоночная сітка:

3. Ієрархічна. Блоки сітки розміщуються ієрархічно в залежності від цілей і завдань дизайну:

Сайт BBC в структурі свого дизайну дотримується ієрархічної системи розміщення новин.

Що таке модуль? У нашому світі до сих пір ще немає єдиної системи вимірювання. Більшість елементів різних систем вимірювання були взяті з людських фізичних пропорцій. Колись двері міряли плечима, а метри - кроками. У будь-якій системі виміру основна одиниця - модуль. Метрична система, яку використовують в Європі, також складається з модулів. Модульна сітка - це система пропорцій, яку використовують для пропорційності чого-небудь.

Для чого використовують модульну сітку в дизайні сайтів?

Структурування елементів за заданим шаблоном дає баланс пропорцій і правильно побудовану композицію. Уніфікація елементів дизайну за заданим шаблоном пропорцій дає цілісність сприйняття макета сайту. Використання модульної сітки не тільки полегшить розуміння розташування елементів сайту і їх вирівнювання, але також значною мірою полегшить життя верстальщику. Модульна сітка допоможе йому прискорити процес щодо обчислення розмірів елементів дизайну і визначення відстані між ними.

Побудова модульної сітки:

1. Визначаємо робочу область.

2. Визначаємо кегль і висоту рядка, часто це і є висота модуля.

3. Визначаємо ширину модуля. Це можна зробити двома способами: відштовхуючись від величини значимого статичного елемента дизайну, або від їх кількості. Наприклад, знаючи, що дизайн сайту повинен вміщати в себе шість кнопок навігаційного меню, рівних між собою і рівновіддалених один від одного, нескладно вирахувати необхідну відстань між ними. Пам'ятайте, що мінімальна ширина модуля дорівнює його висоті.

4. Об'єднуємо елементи модульної сітки між собою, створюючи композицію нашого ескізу.

Анатомія модульної сітки.

Перенесення основних елементів дизайну на сітку.

Готовий дизайн сайту на модульній сітці.

Пам'ятайте про те, що сітка - всього лише один з інструментів-помічників дизайнера і, може бути, в деяких випадках легко замінна напрямними. (Дізнатися більше про застосування модульних сіток в графічному конструюванні можна в книзі Аллена Хёрлберта "Модульна сітка".).

Нижче наведені приклади сайтів, графічний інтерфейс яких побудований на модульній сітці:

Структурування макета сайту

Що відрізняє професіонала від аматора? Якість виконаної роботи. Створення сайту - справа колективна, і над проектом працюють кілька людей. Наступний, хто отримує ваш макет в руки, верстальник. Щодо того, чи повинен дизайнер вміти верстати, існує безліч протилежних думок, але всі вони, по суті, об'єднуються в одне умовивід: дизайнер повинен розуміти основні принципи верстки і готувати макет з урахуванням цих принципів.

1. Об'єднувати шари в групи. Всі дрібні елементи дизайну слід об'єднувати в групи і називати їх відповідно. Щоб уникнути проблем при відкритті в інших операційних системах всі верстви обов'язково називати по-англійськи.

2. Групи шарів діляться на графіку і типографіку Розділіть типографіку на загальний текст і заголовки.

3. Ставити глобальні елементи.

4. Всі невикористовувані шари слід видалити. Досить поширеною помилкою початківців дизайнерів є відключення непотрібних шарів. Пам'ятайте про те, що верстальник робить видимими відразу всі верстви. Виняток становлять верстви інтеракції, але про них пізніше.

5. Не плодити зайвих шарів. Для цього використовуйте ефект Gradient Overlay. Всі ілюстрації перетворити в один шар. Зазвичай у досвідченого дизайнера дві версії макета: деталізована версія, на випадок внесення поправок, і лаконічна - для верстальника.

- всі використані шрифти прикріпити до супровідного листа;

- перевірити шрифт на безпеку.

За цим посиланням можна подивитися список шрифтів, які є безпечними і загальними для всіх версій OC Windows, і їх еквіваленти в OC Mac.

7. Округлити значення.

8. Текст-рибу використовувати відповідно до реального контентом сайту, якщо це російськомовний сайт, то популярний текст-риба Lorem ipsum адекватно не візуалізувати типографіку в макеті дизайну.

9. Інтеракція. Дизайнер в макеті сайту повинен не тільки продумати всі зміни дизайну при взаємодії з користувачем, але ще і визначити їх в окремий шар. Такі шари можна відключати, але обов'язково робити позначку в назві шару і / або супровідному листі. Рекомендовано їхні капітали кнопок виділяти окремим кольором, для кращої візуалізації. Тоді не виникне питань типу: "Як ця кнопка підсвічується при натисканні?"

Ці, досить прості і логічні, нормативні етапи складання макета сайту в значній мірі полегшать роботу не тільки дизайнерові, але і всім, хто буде працювати з продуктом вашої творчості. Робіть якісний дизайн і, можливо, вічна Holy War між дизайнером і верстальником закінчиться.