Макет сайту

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

Створення макету сайту: важливі моменти

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

У межах обраної мети ресурс може вирішувати кілька видів завдань:

• залучення цільової аудиторії;

• збір та обробка заявок від клієнтів;

• підвищення пізнаваності компанії;

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

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

Ось п'ять основних факторів, що закладають основи макету:

1. Типографіка. Стандартна рекомендація – використовувати два види шрифтів: один для графічного виділення значних частин тексту, один – для основного контенту.

2. Палітра кольорів. Часто вона диктується фірмовим стилем чи обраними замовником зразками. В рамках заданих тонів дизайнер може пропонувати свої рішення, щоб повноцінно виразити різні концепції. Докладніше про значення кольорів йтиметься далі.

3. Юзабіліті. Інтерфейс ресурсу та навігація по ньому повинні бути зрозумілими та зручними для користувача. При цьому - ефективно вирішувати завдання ресурсу.

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

5. Контент. Люди вважають приємнішим бачити і слухати, а якщо читати — то добре структурований текст. Тому макет сайту може передбачати фото, 3D-демонстрації, відеоогляди та влоги, анімацію, подкасти.

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

З чого починається розробка

Документ про те, як створити макет сайту – технічне завдання. Ось що має бути в ньому зазначено:

1. Бізнес клієнта: географія, сфера діяльності, цільова аудиторія.

2. Завдання, яке має вирішувати ресурс.

3. Тип та структура сайту.

4. Побажання щодо дизайну: з прикладами за та проти та обґрунтуванням, що подобається, а чого бути не повинно.

5. Які сервіси будуть використані. Можливі сценарії реалізації ресурсу.

6. Система управління: різні CMS мають власні вимоги до структури інформаційних блоків.

7. Види контенту, який розміщуватиметься.

8. Прототипи основних розділів.

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

10. В яких браузерах повинен підтримуватись сайт (кросбраузерність).

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

Яким має бути PSD-макет сайту

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

Ключові критерії для якісного PSD-макету сайту:

1. Для кожного елементу дизайну передбачено окремий шар. Так їх можна редагувати окремо.

2. Зображення зберігається у форматі .psd або .tiff.

3. Дотримання вкладеності, тобто угруповання шарів згідно приналежності до певного елементу структури сайту (меню, футер, сайдбар та ін.).

4. Обґрунтоване використання фонових зображень та незвичайного форматування. Коли їх багато, збільшується швидкість завантаження сторінки. Водночас фон та гра з форматами – шляхи створення оригінального дизайну.

5. Використання напрямних.

6. Пріоритет стандартним шрифтам. Це робить сайт легкочитним. З іншого боку, типографіка зараз активно використовується як художній прийом. Якщо шрифт рідкісний або навіть авторський, файл з ним необхідно додати до макету.

7. Оптимальні розміри — ширина PSD-шаблону для сайту не може бути меншою за 1000 пікселів.

Дотримання всіх цих вимог робить макет сайту готовим для продуктивної роботи верстальника та програміста.

Можливості у кольорі

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

Існує сім колірних схем, заснованих на колірному кільці Ньютона.

1. Монохроматична. Береться один основний колір, решта — його відтінки, отримані за допомогою зміни насиченості та світлосили.

2. Комплементарна. Обираються два контрастні тони і доповнюються кількома їх відтінками.

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

4. Аналогова. У цій схемі 3 кольори із сусідніх сегментів: один основний і два додаткові.

5. Тріада. Палітра кольорів складається з трьох рівновіддалених кольорів.

6. Прямокутник. У цій схемі 4 тони – дві контрастні пари.

7. Квадрат. Використовуються 4 рівновіддалені кольори.

Орієнтуватися щодо впливу кольорів та пов'язаних з ними асоціацій допоможе таблиця.

Це все інструменти. Їхнє застосування в дизайні макету для сайту залежить від трьох базових аспектів:

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

2. Цільові відвідувачі. Сайти, зорієнтовані на жінок, щоб бути привабливими, розробляються у яскравих або пастельних тонах. Сайти для чоловічої аудиторії зазвичай лаконічні, використовують нейтральну чи монохромну палітру.

3. Фірмовий стиль. Якщо у компанії вже існують логотип та фірмові кольори, вони мають бути присутніми у дизайні сайту. Можливо, доповнені своїми відтінками чи іншими кольорами.

4. Легко помітити, що ці три характеристики вже взаємопов'язані. Що полегшує вибір оптимальної колірної схеми.

Краса чи зручність

Кожен замовник хоче бачити свій сайт сучасним. Серед трендів вебдизайну в 2020 році:

• неонові кольори;

• градієнти;

• складна типографіка;

• мінімалізм та багато вільного простору;

• спрощення навігації;

• нестандартне верстання;

• 3D-графіка;

• скетчі;

• паралакс, gif та сінемаграфи (зображення з частковою анімацією);

• поєднання фото, відео та мальованих зображень;

• нашарування зображень.

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

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

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

Наші кейси Tell - технічний супорт концертів та трансляцій

Більше цікавого про маркетинг та дизайн В нашому телеграм-каналі. Підписуйся😀