18.09.2018 в 12:15 |

8 0


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

Розташування компонентів.

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

Зміст головного контейнера:

• Логотип. Це фірмовий знак. Розташування логотипу зазвичай зліва вгорі, але в залежності від ідеї макета, він може знаходитися як всередині, так і справа.

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

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

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

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

Дизайн сайту.

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

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

Існує також два види дизайну:

• Скевоморфизм – це, коли інтерактивним частин сайту приписують властивості реальних предметів, наприклад, об’ємна кнопка. Але зараз цей метод почав застарівати.

• Плоский дизайн. Самий популярний дизайн. Кольори підбираються на контрасті, а на самому сайті знаходиться мінімум елементів.

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