Основні правила веб-дизайну
З чого починається розробка сайту? Правильно, із зовнішнього оформлення чи дизайну. Дизайн - це те, що насамперед бачить відвідувач, коли заходить на сайт. Тому дизайну при його розробці слід приділити особливу увагу.
Ось основні правила, якими має керуватися дизайнер під час розробки макета сайту. Пишу це від себе, як верстальник. Хто, а верстальник ці правила точно знає.
Шановний веб-дизайнер, якщо ви читаєте цю статтю, то, будь ласка, поставтеся серйозно до всього, що викладено нижче і тоді у вас буде шанс залишитися не вкушеним верстальником.
Правила дизайну сайту
Технічне завдання (ТЗ)
Пам'ятайте завжди про те, що веб-дизайнер повинен тісно співпрацювати з верстальником, щоб не було різних казусів.
Шановний дизайнер! Якщо у вас стоїть тридцятидюймовий монітор, то це зовсім не означає, що ви повинні малювати макет в 3000 px по ширині. Ви повинні розуміти – ви поки що у меншості. У левової частки відвідувачів, що прийшли на сайт, роздільна здатність екрану буде 1024 - 1920px. Щоправда, сьогодні ринок девайсів користувачів інтернету завойовують мобільні пристрої, їх уже перевалило за 50%. Тут існують деякі правила та стандарти.
Визначаємось із шириною макета основного блоку (контейнера) сайту. Зазвичай ширину макета підлаштовують під найпоширенішу роздільну здатність екрана. Останнім часом я прошу дизайнера, щоб він малював дизайн модульною сіткою фреймворку twitter bootstrap, шириною 1170px. Коли дизайн намальований строго по сітці, це значно спрощує верстку.
Завжди дотримуйтесь строго розмірів блоків пікселя до пікселя. Зрозумійте, ці кілька десятків неврахованих пікселів можуть спричинити серйознінаслідки.
Якщо сайт буде фіксованим, то обов'язково вказуємо ширину полотна трохи ширше за ширину основного блоку (контейнера) сайту і задаємо фон – як фон може бути зображення, або просто градієнт, або однотонна заливка. Втім, про фон ми ще поговоримо.
Усі шари в макеті повинні бути ретельно згруповані та підписані адекватними іменами. Пам'ятайте таке правило: «Якщо один елемент у макеті має більше двох шарів, то його обов'язково слід укласти в загальну групу». Ось, наприклад, на сайті є різні модулі. У кожного модуля є заголовок. Так ось, заголовок у макеті має два шари: сам текст назви та заднє тло. Таким чином ми ці два шари об'єднуємо в загальну групу і називаємо, наприклад, «Заголовок» або «Title». Ця група також може лежати у батьківській групі під назвою модуля, тобто. у групі модуля «Новини» лежить підгрупа «Заголовок новини». З вище сказаного, має бути якась ієрархія груп верств. Таке угруповання дуже спрощує життя верстальнику. Також не забуваємо підписувати самі шари, щоб не було там жодних Layer1 або Layer2…
Шари ніколи не повинні бути склеєні, краще об'єднати їх у групу, а там уже верстальник сам розбереться, склеювати їх чи ні.
Також, особливу увагу приділіть режиму перекриття, щоб не було такого, що відключаєш усі шари, крім потрібного, а він змінив свій колір – перефарбувався з червоного кольору на білий.
Відключені шари краще не залишати і видаляти при передачі макету верстальнику. У шарах повинно бути нічого зайвого, т.к. Верстальник може легко заплутатися.
Задній фон сайту
Задній фон - основна проблема дизайнерів-початківців, вірніше це проблема постає перед верстальником. Дизайнер повинен розуміти, що макет сайту цене просто красива картинка, це складний та динамічний сайт, який може розтягуватися та стискатися як по вертикалі, так і по горизонталі.
Якщо ви малюєте картинку на задньому фоні і розташовуєте її по центру, то вона в жодному разі не повинна мати краї, що обрізають. І ще, на задньому фоні завжди має бути якийсь фрагмент однорідного фону, який верстальник може пустити на повторення. Цей фрагмент може бути як однорідною заливкою, так і градієнтом. Краї картинки повинні плавно переходити на "ні". Тут мається на увазі перехід на якесь однорідне тло.
Якщо в якості заднього фону використовується текстура, то обов'язково збережіть один фрагмент, що повторюється, для верстальника окремим файлом у форматі jpg, png або gif.
Стандартні шрифти — це шрифти, які встановлені в операційній системі за промовчанням. Список стандартних шрифтів для веб-дизайну можна знайти в інтернеті – їх небагато. Можете їх виписати і тримати як шпаргалку.
Нестандартні шрифти — це шрифти, які не встановлені в операційній системі. Зазвичай нестандартні шрифти підвантажуються в шаблоні веб-сайту за допомогою правила font-face. Слід пам'ятати, що кілька нестандартних шрифтів — небажано, т.к. нестандартні шрифти збільшують час завантаження веб-сторінки (документу). Важити вони можуть набагато важче за стандартні шрифти. Тут ще залежить від того, які нариси шрифтів використовує дизайнер — чим більше накреслень, тим важчий шрифт. Бажано використовувати платні шрифти, т.к. потім виникають проблеми з їх перетворенням на WEB. Для пошуку шрифту цілком можна обійтися безкоштовними Google шрифтами.
Якщо раніше дизайнери обмежувалися стандартними шрифтами, то сьогодні, коли минули часи браузерів ІЕ6.ІЕ8, дизайнерам дається повна свобода у польоті фантазії підбору шрифтів. Якщо в макеті використовуються нестандартні шрифти, то обов'язково додайте їх окремо до макета сайту, або дайте посилання на гугл шрифти.
Розміри шрифту (кегль) обов'язково вказуємо цілими числами, розміри типу 19,82 px тощо не допустимі. Без необхідності не використовуйте будь-які трансформації та знущання з шрифтів. Додайте трохи головного болю верстальнику.
Бажано не заливати колір шрифту градієнтом. Можна, але лише без фанатизму. Краще все ж таки вказати однотонним кольором.
І останнє, що стосується шрифтів - ніколи не текстовані блоки. За це діяння вам точно відірвуть голову, не в буквальному значенні звичайно.
Про колірну гамму
Намагайтеся не користуватись нестандартними кольоровими профілями. Це в результаті призводить до того, що хтось почне кричати і кидатися тапочками, що в дизайні були інші кольори. І, звичайно, всі претензії посипляться на голову верстальника. Про те, як правильно налаштувати колірний профіль у фотошопі, я написав окрему статейку, рекомендую почитати.
Активні елементи
Резюмуємо все вище сказане
Що хотілося б відзначити останнім пунктом так це те, що кожен веб-дизайнер повинен бути ще й трішечки та верстальником, щоб розуміти які можуть виникнути труднощі у верстальника.
От і все. Так, піст вийшов великим, але думаю він знадобиться багатьом, хто вирішив підкорити ази веб-дизайну.
До зустрічі у наступних постах. Успіхів.
Заур Магомедов
Верстальник із великим досвідом роботи. Займаюся створенням сайтів із 2009 року. Постійно навчаюсь та вдосконалюю свої навички. Веду свої проекти, у тому числі і цей блог.