Стилі дизайну сайту. Уроки стилю Зайцева або що одягти сайту.

Якщо жінка змінює зачіску, то вона збирається змінити життя. А якщо вона змінює життя, до змін підключається гардероб і стиль. І як би шафа не ломився від речей, завжди нічого одягнути. Ну, от погодьтеся, коли змінюється начинка, повинна змінюватися і обгортка. Як часто в реальному житті Ви помічали, що якійсь людині не йде те, що вона носить? Може, вся проблема в стилі, який їй не підходить, і Ви не можете сприймати її як гармонійне ціле. Та ж біда і з сайтами. Дуже часто стиль дисонує з продукцією або виставляє її не в потрібному світлі, відволікає нас від мети нашого пошуку і просто набридає. Це реально відлякує відвідувачів і з цим терміново треба щось робити. Пропоную викликати швидку дизайнерську допомогу! І одягнути наше дітище згідно з нормами, законами і пріоритетам хорошого стилю. Отже, програма «Модний вирок» почалася! Для початку розберемо основні характеристики, які можна визначити:

1. На око - якщо Ви думаєте, що колірна гамма нічого не означає, то Ви дуже помиляєтеся! Сайт може бути виконаний в темній, світлій або кольоровій гамі. І тільки в Ваших руках зробити так, щоб веб-сайт не був мрією епілептика!
2. На відчуття - наше сприйняття залежить від багатьох факторів, наприклад, від яскравості або нейтральності сайту.
3. На кількість графічних елементів: художні, чисті, стандартні.
4. На утримання: мінімалістичні і складні.
5. На тему. Про це ми і будемо говорити в цій статті.

Модний вирок на більшості сайтів, як мішком по голові, пролунав: «Зніміть це негайно!». Для нашого нелегкого вибору, є вірні помічники: головний суддя - В'ячеслав Зайцев, медсестри з швидкої дизайнерської допомоги та інтернет для наочності. Тема першого уроку: «Класичний стиль». Ось тут Зайцев і розійшовся! А почав він із зведення правил, які неодмінно потрібно виконувати, якщо вже це Ваш вибір. Коротенько назвемо їх всіх:

1. Сайт повинен мати чітку стовпчасту структуру: саме в шапці розташовується назва і слоган. Вид згори краще!
2. Розміщення меню або зліва по борту, або зверху. Це естетично з дизайнерської точки зору і зручно з боку юзабіліті.
3. Такому сайту до лиця м'які і стримані тони, мінімальна кількість графіки і повна відсутність анімації. Якщо у Вашої компанії є корпоративний стиль, то саме його колірна гамма ляже в основу оформлення. Якщо корпоративного стилю немає, то гамма підбирається на етапі розробки і представляється традиційними кольорами. Пам'ятайте, ніяких яскравих вириваючих очі відтінків!
4. Підбір шрифтів для такого сайту теж класичний, стандартний і зручний для читання.

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

Урок другий за стилем буде на тему: «Мінімалізм». Тут В'ячеслав всія Зайцев кидає не зайву фразу «Less is more», покопавшись в словниках, ми знайдемо переклад істини мінімалізму: «Краще менше, та краще». І наведемо основні правила, яких потрібно дотримуватися при виборі цього стилю:

1. Відмова від усього зайвого. Мінімум анімації, великої кількості фонів і текстур, занадто широкої кольорової палітри тощо. Навіть інформації на такому сайті повинно бути мінімум. Всього мінімум!
2. Основні колірні поєднання: білий, сірий і чорний, які можна розбавити якимось яскравим кольором в навігаційної панелі або меню сайту.
3. Ні великій кількості фонів! Для мінімалізму необхідний тонкий і ненав'язливий візерунок, який дуже важливо, щоб повторювався на всіх сторінках.
4. Меню і навігаційна панель в мінімалізмі максимально прості і лаконічні. У меню не повинно бути довгих метрових списків, воно повинно складатися з 3-5 пунктів. Тут не варто використовувати яскраві кольори, тільки якщо основна сторінка виконана в нейтральній кольоровій гамі, тоді меню потрібно виділити для кращої орієнтації відвідувачів.

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

Третьою темою від Зайцева буде: «Корпоративний стиль». Цей стиль диктатор, гірше Гітлера. Тут теж є свій статут, але не на користь Рейху, а для благополуччя компанії. Диктується не тільки зовнішній вигляд сторінок, але і структура сайту, яка обов'язково повинна відповідати духу і корпоративній ідеї компанії. До основних характеристик цього стилю відносять:

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

Диктатура стилю страшна, але вона націлена на користувача і враховує його потреби і побажання. Корпоративним стилем ми залучаємо нових клієнтів, а також утримуємо вже існуючих. Стиль виправданий! Модний вирок: «Потрібно носити!»

Четвертою темою наших уроків стилю буде: «Хай-тек». Для Зайцева ненависна тема, але їй теж потрібно віддати належне. У чому сіль такого стилю? Композиція проста і лаконічна плюс високий рівень юзабіліті. Найчастіше використовується в магазинах електроніки, техніки і в IT-сфері. Основними відмінностями такого стилю є:

1. Меню у верхній частині сторінки, яке має каскадну структуру.
2. Колірна гамма холодна, ніяких яскравих або контрастних кольорів.
3. Текстура імітує матеріали, які використовують в дизайні інтер'єрів в стилі хай-тек: сталеві поверхні, гофрований метал, скло з напиленням і т.д.
4. Шрифти дуже специфічні. Це рублений шрифт, він дуже схожий на той, який можна побачити на дисплеї електроніки.
5. Наявні різні анімаційні ефекти і великі зображення на тему високих технологій.

Використовуючи такий стиль, Ви створите своїй компанії імідж причетний до високотехнологічного середовища. Також цей стиль створює ауру елітарності і нагадує, що «future is coming».

П'ятий урок стилю від Зайцева зачіпає один з найпопулярніших зараз стилів і тема нашого уроку - це «Гранж». Для сприйняття цієї течії потрібно налаштувати свої хіпстерські радари і ловити кайф. Основні характеристики такого стилю:

1. Неотесані елементи: простота і лаконічність точно не про нього!
2. Гранж теж взяв щось від ідеї мінімалізму. Він поєднує в собі різкі форми із закругленими кутами і чисті або суворі урбаністичні фони.
3. Фон в цьому стилі вже може рекламувати товар, що продається. Фоновими зображеннями можна також демонструвати реальні саморобні речі (сільські покажчики, цегляні стіни, дерев'яні дощечки, віртуальні стрічки, штампи).

Це хіпстерскій гранж, чуваки! Він відходить від всіх правил і ламає всі стереотипи. Ще досить молодий стиль, але вже має своїх шанувальників.

Отже, вітаю всіх тих, хто пройшов курс лекцій від В'ячеслава Зайцева і не загримів у швидку дизайнерську допомогу. Вибрати правильний стиль для сайту - це свого роду мистецтво відчуття і домовленості. Дизайнери повинні відчувати, що підходить під той чи інший запит і вміти аргументувати клієнту, чому саме цей стиль. Можливо, це будуть всього невеликі поправки в замовленні, а можливо, повна зміна курсу. Але, важливо пам'ятати, що моді не потрібно сліпо наслідувати ні в одязі, ні в оформлення інтер'єру, ні в створенні сайту, ні в житті. Просто відчуйте її і проконсультуйтеся з фахівцями. І тоді Ваш сайт буде виглядати впізнавано і прекрасно!