1. Формування дизайну - кілька порад
2. Трохи про шаблони
3. Нічого зайвого або раціональний підхід
4. Як поєднати красу, зручність і доступність сайту?
5. Зробимо висновки і додаткова література

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

Формування дизайну - кілька порад

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

• Дизайн має свою міру. У вас може бути великий бюджет - ви створюєте шикарний (з вашої точки зору) дизайн. Багато фарб, віньєток, стилізованих кнопок, але сайт не працює, користувачі заходять і тут же залишають ваше дітище. Інша крайність - щось сіреньке стандартизоване, шаблонне, але з цікавим контентом. Користувач не оцінить текст і не повірить такому сайту. Візуальне враження і в першому, і в другому випадку буде низьким. Дизайн, взятий з шаблону, вже намуляв очі і сприймається як перша спроба початківця оптимізатора. Оформлення сайту з надмірностями призводить до того, що, скажімо, сайт з продажу автомобільних запчастин, може виглядати безглуздо і нагадувати сайт локального Інтернет-магазину з продажу товарів загального споживання. Такі сайти часто мають недоліки в технічному оформленні.
• Не захоплюйтеся «важкими» сторінками. Швидкість завантаження сторінки, краще красот оформлення. Захоплення дизайном може привести до того, що сторінка буде завантажуватися повільно. Користувач не чекатиме, поки вона з'явиться, особливо, якщо потрібно чекати кілька хвилин. Ніяка стилізована кнопка не втримає його стільки часу на вашому сайті. Швидше він розсердиться і перейде в інше місце. Якщо ви орієнтовані на користувачів віддалених районів, швидке завантаження виявиться кориснішою, ніж кілька ефектних елементів дизайну.
• Дизайн повинен «дружити» з юзабіліті, створюючи користувачам додаткові зручності. Анімація, спецефекти, які так вам подобаються і, дійсно, виглядають привабливо, можуть відлякати користувача своєю складністю або необхідністю виробляти зайві рухи мишею при користуванні меню. Так, дизайнерські предмети меблів, наприклад, «космічні» крісла, радують око своєю оригінальною формою, але в звичайному житті зручніше сидіти в кріслі класичному. Краса дизайну сайту не повинна бути на шкоду його простоті. Адже користувач зайшов на ваш сайт, щоб знайти потрібний йому товар, а не захоплюватися вашими дизайнерськими вишукуваннями.

Трохи про шаблони

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

З'ясувати наскільки точно ви попали користувачеві можна за допомогою спліт-тестування. Його суть полягає в показі кількох варіантів дизайну головної сторінки. Після обробки результатів тестового показу статистичними програмами, ви дізнаєтеся, який варіант виявився найбільш популярним у користувача, і можете зробити його постійним.

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

Нічого зайвого або раціональний підхід

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

Особливо слід відзначити кількість рекламних банерів розміщуються на сторінці. Якщо ви хочете мати гарне просування, не захоплюйтеся їх розміщенням. Як зазначив Метт Каттс, керівник Google Webspam, на зустрічі з веб-майстрами, кількість реклами не повинно займати більше місця на сторінці для Панди, ніж два стікера на аркуші А4. Тим не менш, не забудьте, що при ранжируванні рекламні банери на сайті враховуються алгоритмом Google Panda .

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

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

Приклад поєднання краси і зручності використання.

Як поєднати красу, зручність і доступність сайту?

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

Наша порада Вебдизайнер не захоплюватися картинками для посилань замість тексту. Чому? Виглядає красиво, але не сприяє оптимізації. Особливо це стосується посилань в елементах в меню або навігації. Тут доцільно використовувати шрифти різного розміру і конфігурації. Чи не шкодить оптимізації і виглядає привабливо.

Інший рада - уникайте надмірностей у використанні Flash-технологій і JavaScript. Захоплення першими недоцільно, так як не всі платформи підтримують Flash. Зате всі сучасні пошуковики індексують HTML5, альтернативні технології. Або можна замінити їх на звичайний HTML-код. Помилки в JavaScript ведуть до повільної завантаженні. А труднощі при індексації, які завдають шкоди оптимізації сайту, пояснюються зловживанням JavaScript.

Зробимо висновки і додаткова література

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

• «Веб-дизайн: книга Дмитра Кірсанова» | Дмитро Кірсанов
• «Веб-Дизайн: книга Стіва Круга або" не змушуйте мене думати! " | Стів Круг
• «Дизайн для НЕДІЗАЙНЕРОВ | Робін Вільямс
• «Життя всередині міхура. Як менеджеру вижити в інвестованих проект »| Ігор Ашманов
• «Корпоративний веб-сайт на 100%. Вимагайте від сайту більшого! »| Роман Овчинников, Сергій Сухов
• «Проектування веб-інтерфейсів» | Білл Скотт, Тереза ​​Нейл
• «Розробка веб-сайту. Взаємодія з замовником, дизайнером і програмістом »| Д. Браун
• «Розробка і оформлення текстового вмісту сайтів» | Ростислав Чебикін
• «Створення веб-сайту від задуму до реалізації» | Кирило Панфілов
• «Тотальна видимість» | Пітер Морвільє
• «Що зробив би Google?» | Джефф Джарвіс
• «Web-дизайн по стандартам» | Джеффрі Зельдман
• «Web-дизайн. Зручність використання Web-сайтів »| Якоб Нільсен, Хоа Лоранжер
• «Веб-аналітика. Основи, секрети, трюки »| Олексій Яковлєв, Олексій Довжиков
• "Веб дизайн. Книга Дж. Гарретта. Елементи досвіду взаємодії »| Дж. Гарретт
• «Концепція розробки Web-сайтів. Як успішно розробити Web-сайт із застосуванням мультимедійних технологій »| Й. Якобсон
• «Розкрутка сайтів. Основи, секрети, трюки »| Олексій Яковлєв, Василь Ткачов
• «Копірайтинг: секрети складання рекламних і PR-текстів» | К. А. Іванова
• «HTML 5, CSS 3 та Web 2.0. Розробка сучасних Web-сайтів »| Володимир Дронов
• "Людський фактор. Успішні проекти і команди »| Том Демарк і Тімоті Лістер
• «Введення в інформаційний пошук» | Крістофер Д. Маннинг, Прабхакар Рагхаван, Хайнріх Шютце
• «Розкрутка веб-сайту. Практичний посібник »| Микола Євдокимов, Ігор Лебединський
• «Інформаційна архітектура в Інтернеті» | Пітер Морвільє, Луїс Розенфельд
• «Реактивні веб-сайти. Клієнтська оптимізація в алгоритмах і прикладах »| Микола Мацієвський, Євген Степанищев, Гліб Кондратенко
• «Як зробити сайт зручним. Юзабіліті за методом Стіва Круга »| Стів Круг
• "Веб дизайн. Аналіз зручності використання веб-сайтів по руху очей »| Якоб Нільсен, Кара Перніче
• «Buyology: Захоплююча подорож в мозок сучасного споживача» | Мартін Ліндстром
• «Сучасні інтернет-технології в комерційній діяльності» | Н. А. Інькова