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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Х ід роботи:

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

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

3. Для зручності можна включити сітку (Вид – Показывать сетку). Сітку можна налаштувати для ваших потреб в пункті меню (Изображение – Настроить сетку)

4. Розставляємо направляючі за такими параметрами:

• зовнішні відступи горизонтально (зліва на право): 100px, 1080px;

• зовнішні відступи вертикально (зверху вниз): 20px, 1250px.

Сам макет

Вертикально (зверху вниз)

• Нижня межа header: 170px;

• Верхня межа nav: 190px;

• Нижня межа nav: 290px;

• Верхня межа article і aside: 310px;

• Нижня межа article і aside: 1070px;

• Верхня межа footer: 1090px;

• Нижня межа footer: 1255 px.

Горизонтально (зліва на право)

• Ліва межа article: 694px;

• Права межа aside: 714px.

В результаті ми отримаємо розграфлений макет сайту.

Створюємо новий шар, на якому будемо робити всі зміни. (Слой – Создать слой).

За допомогою прямокутного виділення виділяємо основні елементи макету: header, nav, article, aside, footer. (Щоб виділити декілька елементів одночасно, потрібно утримувати Shift)

Виділену область інструментом «Плоска заливка» заливаємо чорним кольором.

Щоб переглянути наш макет без направляючих ліній, знімаємо виділення «Выделение – Снять выделение» і вибираємо «Вид – Показывать направляющие».

Зберігаємо наш макет. (Файл - Сохранить)

Якщо потрібно зберегти з розширенням .jpeg, .psd, чи будь-яким іншим розширенням (не .xcf) зберігаємо макет за допомогою меню Файл - Export As…