1. Технічне завдання (ТЗ)
2. макет
3. шари
4. Задній фон сайту
5. текст
6. Про колірній гамі
7. активні елементи
8. Резюмуємо все вище сказане

З чого починається розробка сайту? Правильно, з зовнішнього оформлення або дизайну. Дизайн - це те, що в першу чергу бачить відвідувач, коли заходить на сайт. Тому дизайну при його розробці слід приділити особливу увагу.

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

Шановний веб-дизайнер, якщо ви читаєте цю статтю, то, будь ласка, поставтеся серйозно до всього, що викладено нижче і тоді у вас буде шанс залишитися не укушеним скаженим верстальником.

структура статті

Технічне завдання (ТЗ)

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

Пам'ятайте завжди про те, що веб-дизайнер повинен тісно співпрацювати з верстальником, щоб не сталося різних казусів.

макет

Шановний дизайнер! Якщо у вас стоїть трідцатідюймовий дорогущий монітор, то це зовсім не означає, що ви повинні малювати макет в 3000 px по ширині. Ви повинні розуміти - ви поки в меншості. У левової частки відвідувачів, які прийшли на сайт, дозвіл екрана буде 1024 - 1920px. Правда сьогодні ринок девайсів користувачів інтернету завойовують мобільні пристрої, їх уже перевалило за 50%. Тут існують деякі правила і стандарти.

Ширина макета вказується в пікселях і повинна бути з точністю до одного пікселя, тобто круглі цифри і ніяких там 899 px або 955 px, наприклад. Також це стосується всіх блоків, які у нас будуть присутні в макеті: ліва, права колонки, форма авторизації, різні модуля і т.д.

Визначаємося з шириною макету основного блоку (контейнера) сайту. Зазвичай ширину макета підлаштовують під найпоширеніше дозвіл екрана. Останнім часом я прошу дизайнера, щоб він малював дизайн за модульною сітці фреймворка twitter bootstrap , Шириною 1170px. Коли дизайн намальований строго по сітці це значно спрощує верстку.

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

Якщо сайт буде фіксованим, то обов'язково вказуємо ширину полотна трохи ширше ширини основного блоку (контейнера) сайту і задаємо фон - в якості фону може бути зображення, або просто градієнт, або однотонна заливка. Втім, про тлі ми ще поговоримо.

шари

Всі верстви в макеті повинні бути ретельно згруповані і підписані адекватними іменами. Пам'ятайте таке правило: «Якщо один елемент в макеті має більше двох шарів, то його обов'язково слід укласти в загальну групу». Ось, наприклад, на сайті є різні модуля. У кожного модуля присутній заголовок. Так ось, заголовок в макеті має два шари: сам текст назви і задній фон. Таким чином, ми ці два шари об'єднуємо в загальну групу і називаємо, наприклад, «Тема» або «Title». Дана група також може лежати в батьківській групі з назвою модуля, тобто в групі модуля «Новини» лежить підгрупа «Тема новини». Виходячи з вище сказаного, повинна бути певна ієрархія груп шарів. Таке групування дуже спрощує життя верстальщику. Також не забуваємо підписувати самі шари, щоб не було там ніяких «Layer1» або «Layer2" ...

Шари ніколи не повинні бути склеєні, краще об'єднати їх в групу, а там вже верстальник сам розбереться, склеювати їх чи ні.

Також, особливу увагу приділіть режиму перекриття, щоб не було такого, що відключаєш всі шари, крім потрібного, а він змінив свій колір - перефарбувався з червоного кольору в білий.

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

Задній фон сайту

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

Якщо ви малюєте картинку на задньому фоні і маєте в своєму розпорядженні її по центру, то вона ні в якому разі не повинна мати обрізані краї. І ще, на задньому фоні завжди повинен бути якийсь фрагмент однорідного фону, який верстальник може пустити на повторення. Даний фрагмент може бути як однорідною заливкою, так і градієнтом. Краї картинки повинні плавно переходити на «ні». Тут мається на увазі перехід на якийсь однорідний фон.

Якщо в якості заднього фону використовується текстура, то обов'язково збережете один повторюваний фрагмент для верстальника окремим файлом у форматі jpg, png або gif.

текст

Веб-дизайнер при підборі шрифтів для сайту повинен враховувати наступне: існують стандартні шрифти та нестандартні шрифти . Що значить стандартні і нестандартні?

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

Нестандартні шрифти - це шрифти, які не встановлені в операційній системі. Зазвичай нестандартні шрифти завантажуються в шаблоні сайті за допомогою правила font-face . Слід мати на увазі, що використання декількох нестандартних шрифтів - небажано, тому що нестандартні шрифти збільшують час завантаження веб-сторінки (документа). Важити вони можуть набагато важче стандартних шрифтів. Тут ще залежить від того, які накреслення шрифтів використовує дизайнер - чим більше накреслень, тим важче шрифт. Бажано не використовувати платні шрифти, тому що потім виникають проблеми з їх перетворенням для WEB. Для пошуку шрифту цілком можна обійтися безкоштовними Гугл шрифтами .

Якщо раніше дизайнери обмежувалися стандартними шрифтами, то сьогодні, коли минули часи браузерів ІЕ6 - ІЕ8, дизайнерам дається повна свобода в польоті фантазії підбору шрифтів. Якщо в макеті використовуються нестандартні шрифти, то обов'язково додайте їх окремо до макету сайту, або дайте посилання на гугл шрифти.

Розміри шрифту (кегль) обов'язково вказуємо цілими числами, розміри типу 19,82 px тощо не припустимі. Без необхідності не використовуйте всякі трансформації і знущання над шрифтами. Додасте трохи головного болю верстальщику.

Бажано не заливати колір шрифту градієнтом. Можна, але тільки без фанатизму. Краще все ж вказати однотонним кольором.

І останнє, що стосується шрифтів - ніколи не растрируется текстові блоки. За дане діяння вам точно відірвуть голову, не в буквальному сенсі звичайно.

Про колірній гамі

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

активні елементи

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

Резюмуємо все вище сказане

• Ретельно вивчіть тех. завдання;
• Ширина основного контейнера сайту мінімум 1000 px. Не важливо сайт гумовий або фіксований. Сьогодні більшу популярність отримала модульна сітка Twitter Bootstrap - 1170px, використовуйте її в своєму дизайні;
• Фіксованому сайту не забуваємо вказати задній фон;
• Всі верстви в макеті повинні бути згруповані;
• Не лінуйтеся малювати кожен елемент, будь то форма авторизації або форма пошуку;
• Бажано використовувати тільки стандартні шрифти. Нестандартні в помірних масштабах;
• Якісно пройдіться по макету і доопрацювати всі відсутні елементи. Якщо це зробить верстальник, то швидше за все зламає весь макет;
• Дизайнер повинен ретельно організувати свою роботу, не забуваючи про те, що після нього будуть працювати інші люди;
• Підготувати макет для здачі верстальщику - зберегти макет у форматі PSD та скріншот в форматі JPEG. Також, слід намалювати іконку сайту favicon і watermark для фото;
• Чи не відключати і не видаляти напрямні, тому що з ними буде працювати ще верстальник;
• Всі блоки на сайті мають бути вирівняні строго по пікселям, тобто полпікселя неприпустимо;
• Чим якісніше намальований макет, тим якісніше він буде зверстаний верстальником;
• Пам'ятайте, що на ряду з красою макет повинен бути легким, тобто зверстаний сайт повинен швидко завантажуватися

Що хотілося б відзначити останнім пунктом так це те, що кожен веб-дизайнер повинен бути ще й трішечки і верстальником, щоб розуміти які можуть виникнути труднощі у верстальника.

От і все. Так, пост вийшов великим, але думаю він стане в нагоді багатьом, хто вирішив підкорити ази веб-дизайну.

До зустрічі в наступних постах. Хай щастить!!!

Перевірка орфографії