Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Комерційна точка зору на веб-дизайн

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

За визначенням «Інтернетсько-російського розмовника Яндекс» Веб-дизайн – це оформлення веб-сторінок. Він відіграє таку ж роль для сайту, як поліграфічний дизайн і верстка для паперового видання. Часто під веб-дизайном розуміють не тільки створення графічних елементів для сайту, але й проектування його структури, навігації та іноді навіть движків, потрібних для роботи сайту, тобто створення сайту цілком. Дизайн у змісті розумного обладнання сайту значно важливіше, чим його "красивість".

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

У даній статті ми обговоримо найбільш загальні вимоги до дизайну сайту, а в наступних уже поговоримо про деталі: колір, шрифт, анімація та ін. Можливо, деякі пункти статті здадуться спокушеному в Інтернеті читачеві «дитячим белькотінням, підказкою для чайників», але повторювання – мати навчання. Тому давайте ще раз розглянемо основні вимоги до зовнішнього вигляду сайту.

  1. Швидкість завантаження сторінок

    Дані статистики на березень 2008 року говорять: якщо сайт завантажується довше 10 секунд, то 90% відвідувачів з нього йдуть. Відомо, що швидкість завантаження прямо пов'язана з «вагою» сторінки (грамотна веб-сторінка не повинна бути важче 100 кб), а найбільш важкими об'єктами веб-файлу є зображення.

    Ви напевно зустрічали сайти з такими громіздкими ілюстраціями, що вже й текст сторінки прочитаний до кінця, а малюнки ще не відкрилися. Отже, при розробці дизайну сайту потрібно підбирати легкі зображення, щоб вони відкривалися одночасно з текстом або з мінімальним запізненням. Вважається, що вага великого зображення не повинна перевищувати 20 кб, маленької – 5 кб.

    Що стосується кількості малюнків на одній сторінці – отут добре б знайти «золоту середину»: занадто велика їхня кількість дратує відвідувача, тому що заважає шукати і читати потрібний текст. З іншого боку, суцільні тексти зовсім без ілюстрацій нудні й монотонні. Та й чого гріха таїти – адже ми з дитинства звикли до книжок з малюнками! Гарним тоном вважається, коли на сторінці не більше 4, але не менше 2-х малюнків ( маються на увазі не постійні елементи дизайну, а ілюстрації, що супроводжують текст).

    розробка сайту
  2. Кольорове рішення сайту

    У сайті повинно бути мінімум 2 кольори, максимум 3. При існуючі нині прийоми добору кольорів для сайту ми поговоримо окремо – це велика і дуже важлива тема. Тут же звернемо увагу на те, що неодмінно потрібно враховувати, як кольори сприймаються оком (наприклад, зелений – найсприятливіший, червоний – навпаки).

    розробка сайту
  3. Фон і текст

    Найпрофесійнішим вважається сайт, де написано чорним по білому. Якщо все-таки фон не білий, то він повинен бути майже прозорим, а текст – дуже темним і контрастним стосовно фону. Категорично не можна писати білим по чорному, жовтим по синьому й т.п. По-перше, від цього у відвідувача швидко втомлюються очі, і він піде з такого сайту. По-друге, усе населення Інтернету звикло читати чорним по білому, і намагатися переучувати своїх клієнтів – справа безперспективна і збиткова.

    розробка сайту
  4. Кнопки (пункти основного меню сайту)

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

    розробка сайту
  5. Головна сторінка сайту

    На головній сторінці повинна бути коротка й чітка інформація: про що сайт, своєрідна анотація. Вона повинна відразу впадати в око, а не губитися серед дизайнерських витребеньок. Аналізуйте статистику: якщо більш 50% відвідувачів не йдуть далі головної сторінки, виходить, вона невірно складена
    На головній сторінці повинна бути інтрига, що мотивує на подальший перегляд сайту.
    Бажано, щоб головна вміщалася у вікні екрана. Якщо не вміщається – найважливіша інформація повинна бути нагорі. Категорично неприпустимий горизонтальний скрол!
    Вхідна сторінка не потрібна категорично – це двері, за якими нічого немає. За статистикою з сайтів із вхідною сторінкою 90% відвідувачів ідуть відразу.

    розробка сайту
  6. Навігація сайту

    У навігаційному блоці обов'язково на видному місці повинні бути посилання на розділ про авторів або хазяїв сайту – це правило гарного тону. В авторському розділі розміщується інформація про компанію і контактні дані
    Також на видному місці потрібно розмістити посилання на форму зворотного зв'язку: «Пишіть», «Контакти» і т.п.
    У цілому навігація сайту повинна бути проста та зрозуміла навіть для найнедосвідченішого користувача (не забувайте про «правило 4-х клацань»!), а назви розділів меню чітко відповідати змісту текстів.

    розробка сайту
  7. Фрейм

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

    розробка сайту
  8. Flash

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

    розробка сайту
  9. Музика

    Якщо замовник або автор сайту з якихось причин вирішив поставити на сторінку музику, те в жодному разі не можна робити так, щоб вона включалася автоматично. Уявіть собі: відвідувач відкриває Ваш сайт у себе на роботі, і раптом на весь офіс починає волати поп-група. Або ще краще: людина пізно ввечері заходить на Ваш сайт – і сонний будинок оголошується бадьорими звуками. Чи зайде він ще раз на такий сайт? Особливо після пошуків спроб відключити музику під «добрі» коментарі домочадців, що прокинулися. Висновок: якщо Ви вже ніяк не можете обійтися без музичного супроводу на своєму сайті, обов'язково дайте можливість Вашим відвідувачам самостійно включати та відключати мелодію.

    розробка сайту
  10. Тестування сайту

    Оскільки на Ваш сайт будуть заходити люди, що користуються різними браузерами, різними розширеннями екрана, то в ході розробки дизайну необхідно тестувати сайт, щоб він однаково добре виглядав в Explorer і в Firefox, під резолюцією 1024Х768 і 1088х612 – і т. д.
    Пам'ятайте також, що різні монітори по-різному відображують кольори, і іноді сайт, який у вас у комп'ютері виглядає просто чудово у своїй пурпурно-золотій гамі, у комп'ютері Вашого сусіда може придбати брудно-рожевий колір з жовто-зеленими фрагментами
    Тому при доборі кольорів для сайту неодмінно перегляньте ваші макети на максимально більшій кількості моніторів і постарайтеся вибрати колірні рішення, найменш підвласні змінам.

    розробка сайту

На закінчення хочеться нагадати, що основна мета комерційного сайту – залучення відвідувачів, збільшення конверсії (перетворення відвідувачів у покупців), а для цього сайт повинен бути стильним, раціональним і максимально зручним для користувача.

Теги:
веб-дизайн, краса сайту, зручність сайту, швидкість завантаження, кольорове рішення, навігація сайту, flash, тестування сайту, юзабіліті, конверсія, стильний дизайн сайту, раціональний