Стиль гранж

Стиль web 2.0.

Як приклади сайтів, представників стилю Web 2.0, можна назвати такі добре знайомі назви, як Youtube, Twitter, Facebook, Myspace. Це приклади великих соціальних мереж, які об'єднують мільйони користувачів по всьому світу.

У цій добірці, підготовленій Yourinspirationweb , ми звернемо увагу саме на графічну складову, на підставі якої можна віднести веб-сайт до стилю Web 2.0.

2.1. Простота і легкість.

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

2.2. Закруглені кути

Web 2.0 надає перевагу плавним вигинам у вигляді округлих і м'яких форм. Виглядає симпатично і не так жорстко, як прямокутні краї.

2.3. М'яке світіння

Дуже успішно використовується локальне м'яке світіння для того, щоб привернути увагу до певної області на сайті.

2.4. Активний, живий колір

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

2.5. Відображення й тіні

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

2.6. Призовні кнопки

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

2.7. Симпатичні іконки

Як правило, іконки використовують для ефективної візуалізації предметів або дій. Плюс це ще й прикраса для сайту.

2.8. Чітке, строге лого

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

Гранж - один з найкреативніших та кумедних стилів у веб-дизайні. Він дає широкі можливості для експерименту, пробувати різні графічні елементи, і при цьому немає необхідності дотримуватися строгих форм і правил. Дизайнери з Yourinspirationweb розглянули 4 основних складових стилю гранж. Саме наявність одного або декількох таких елементів і визначає приналежність до цього стилю. Розглянемо їх по порядку.

3.1. Гранжева палітра кольорів.

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

3.2. Текстура і візерунки.

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

3.3. Реалістичні деталі.

Гранж, як і стиль hand made, має слабкість до всякого роду рукотворним штучкам. Це можуть бути стікери, полароїдні знімки, обривки паперу, шматочки канцелярського скотча, скріпки. А також такі елементи, як ляпки, плями, бризки і розводи на поверхні.

3.4. Гранжеві шрифти.

Гранжевий шрифт може мати потертості, шорсткості, заломи. Він може складатися з нерівних і неправильних ліній і виглядати так, ніби з ним робили якісь маніпуляції. Або, як варіант, це може бути шрифт, написаний від руки.

4. Мінімалістичний стиль

Стиль мінімалізм в веб-дизайні завжди був затребуваний дизайнерам. Однак, здається легкість минималистических сайтів має під собою жорстку закономірність, підпорядковану певним правилам і принципам. Аналітичний опис Smashing Magazine допоміг розібратися в основних складових цього привабливого стилю.

4.1. Краще менше, та краще

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

4.2. Виключити непотрібні речі

Ця фраза запозичена у авторів Strunk and White з їхньої книги «Елементи стилю». Там вона звучала, як «Позбавтеся від непотрібних слів». Автори використовували її для опису мінімалістичної філософії. В застосуванню до веб-дизайну це значить - не включайте непотрібні елементи в ваш дизайн. Для цього сконцентруйтеся на основних функціях вашого сайту і, виходячи з цього, залиште тільки ті функції і елементи, які необхідні.

4.3. Спростити до межі

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

4.4. Кожна деталь має значення

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

4.5. Мінімальна палітра кольорів

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

4.6. Важливе значення порожнього простору

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

4.7. Використання сірого кольору

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

4.8. Використання великий типографіки

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

4.9. Використання фонових візерунків і зображень

Тонкий фоновий візерунок або активне зображення в якості бекграунду можуть додати гостроти та інтересу до мінімалістичного дизайну.

4.10. Використання простих модульних сіток

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

4.11. Використання декоративних кіл

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

Розділ 2. Простір. Закони розміщення в просторі.

Практична робота №1:Створення макету веб-сторінки з використанням закону розміщення «Золоте січення».

Метод вирішення: Створення макету з допомогою графічного редактору GIMP.

Хід роботи:

1. Створюємо новий файл розміром 1180 х 1281 (px)

2. Включаємо лінійку (Вид – Показывать линейки)