Макети дизайну сайту

 

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

 

Бриф 

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

 

Що таке бриф? 

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

 

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

 

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

 

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

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

 

Створення сітки 

Види сіток:

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

 

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

                                                                 960. gs. 

 

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

 

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

 

 

4. Модульная Сітка. 

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

 

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

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

 

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

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

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

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

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

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

 

 

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

6. Шрифти: 

– усi використані шрифти прикріпити до сопроводительному письму;

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

 

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

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

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

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

10. Липкі листочки. Комментируйте макет, в програмі Photoshop зробити это досить просто. Прикладайте супровідний лист до макету – це в значною міру полегшить подальшу роботу з вашим макетом. 

 

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