Першим кроком при створенні нового сайту є розробка візуального дизайну, що передбачає продумування загальної схеми сайту та використання графіки. Ця візуальна архітектура визначає “зовнішній вигляд та поведінку” сайту з погляду користувача.
Спочатку ви повинні вирішити, яке враження ви хочете, щоб складалося у користувача під час роботи з вашим сайтом, і тільки потім приступати до розробки коду, який забезпечуватиме це враження. Одними з основних деталей, що впливають на враження користувача, є меню та можливості навігації, наявність зображень та організація елементів на сторінці.
Меню мають бути інтуїтивно зрозумілими та підкріплюватися навігаційними підказками, такими як карта сайту або контакти, які нагадують користувачеві про те, де він знаходиться щодо кореня сайту загалом. У цьому контексті мається на увазі набір невеликих посилань на сторінці, які служать дороговказом, що дозволяє користувачам повертатися на попередню сторінку за допомогою клацання на відповідній потрібній сторінці посилання в ієрархії сторінок.
Перш ніж приступати до написання будь-якого коду дизайну сайту, обов'язково потрібно познайомитися зі спеціальними засобами, щоб мати можливість скористатися результатами роботи, виконаної розробниками. Добре продумана з технічної точки зору архітектура збільшує ймовірність повторного використання коду і робить його зручнішим у плані обслуговування. Йтиметься про загальну структуру сайту.
Багато розробників починають писати код, не звертаючи уваги на головне завдання сайту: надавати просте, але має безліч функціональних можливостей графічний додаток користувачам для роботи. Створення інтерфейсу користувача здається дуже простим завданням, але якщо її не виконати належним чином, до неї доведеться повертатися під час розробки коду, причому можливо навіть не один раз. Кожне таке повернення та зміна фундаментальних можливостей вимагатиме витрати певних додаткових зусиль, не кажучи вже про перевірку взаємодії та функціонування всіх компонентів із самого початку. Що ще гірше, занадто недбале ставлення до інтерфейсу користувача може в кінцевому підсумку закінчитися тим, що користувачі воліють не користуватися даним сайтом взагалі.
Під час створення дизайну сайту повинні продумуватися різні елементи. По-перше, потрібно переконати себе в одній простій речі: зовнішній вигляд має значення! Краще навіть повторити це кілька разів вголос. Якщо сайт погано виглядає, то люди можуть пошкодувати, що зайшли сюди. Розробники схильні приділяти більше уваги складним завданням, таким як організація вихідного коду до класів та кодування бізнес-логіки — порівняно з ними розробка косметичних засобів сайту не здається такою вже важливою, правильно? Ні не правильно! Інтерфейс користувача - це перше, що бачить кінцевий користувач: якщо він потворний, незрозумілий і взагалі не зручний у використанні, швидше за все, користувач покине цей сайт з поганим враженням як про сам сайт, так і про людей, що його розробляли.
І, як не прикро, це відбудеться незалежно від того, наскільки швидким і масштабованим є цей сайт. Крім того, потрібно ще врахувати той факт, що не всі користувачі мають однакову думку про шаблон сайту. Деякі користувачі можуть погано сприймати текст на сайті з певною колірною схемою і віддавати перевагу якійсь іншій колірній схемі, яка може бути незрозуміла багатьом іншим користувачам. Підібрати один шаблон і одну колірну схему, яка подобатиметься всім, дуже важко. Саме тому на деяких сайтах користувачам пропонується на вибір безліч різних колірних схем і шаблонів, що дозволяє їм налаштовувати інтерфейс користувача за своїм особистим смаком — і, можливо, відповідно до своїх фізичних недоліків, таких як дальтонізм, наприклад.
Дослідження показали, що напрочуд багато людей страждає від часткової "колірної сліпоти", яка не дозволяє їм розрізняти певні кольори, а це означає, що у них має бути можливість вибирати кольори, які вони можуть розрізняти і які при цьому все одно будуть досить приємними на вигляд. Вибравши схему розташування елементів і кольору, які будуть використовуватися, слід переконатися, що сайт виглядатиме однаково у всіх браузерах. Кілька років тому Internet Explorer (IE) був безперечно домінуючим браузером серед користувачів Windows, і, розробляючи технічний сайт, орієнтований на Windows-розробників, можна було сміливо припускати, що для перегляду сайту здебільшого використовуватиметься браузер IE, і, отже, розробляти і тестувати його потрібно лише щодо IE. Однак сьогодні серед користувачів Internet все популярнішими стають інші браузери, які до того ж доступні і для інших операційних систем. Оскільки розрахунок робиться не на вузьке коло користувачів (тобто, не тільки на Windows-розробників, а на всіх людей) і оскільки існують інші популярні браузери крім IE, обов'язково необхідно переконатися в тому, що сайт буде працювати добре з більшістю популярних браузерів.
Якщо не зробити цього і орієнтуватися тільки на IE, може статися, що користувачі Firefox, що зайшли на сайт, виявлять схему розташування елементів, з невдалим вирівнюванням, розмірами і кольорами, з накладаються один на одного панелями і сильно відрізняє від того, що вони очікували. текстом - загалом, повну плутанину. Неважко здогадатися, що користувач, який потрапив на таку безсторонню сторінку, природно, залишить її, що для електронного магазину означає втрату потенційного клієнта або замовника.
У гіршому випадку відвідування такого користувача буде генерацією уявлень сторінок і, отже, перегляд банерів. Оскільки втрачати відвідувачів ніхто не хоче, ми будемо брати до уваги як Internet Explorer, так і Firefox. Процес проектування рівня інтерфейсу користувача не означає тільки написання HTML-коду для сторінки; він також передбачає розробку навігаційної системи та забезпечення для Web-майстра або адміністратора сайту (якщо не кінцевого користувача) можливості легко змінювати зовнішній вигляд сайту, не редагуючи самі сторінки вмісту (яких дуже багато).
Зовсім не завадить розробити систему, що дозволяє людям легко змінювати меню сайту та його зовнішній вигляд (шрифти, кольори та розмір різних компонентів, з яких складається сторінка), оскільки це зводить до мінімуму обсяг роботи адміністраторів та робить щасливими користувачів. Після того, як буде розроблена домашня сторінка сайту, розробка решти сторінок не займе багато часу, тому що домашня сторінка визначає схему та елементи навігації, які будуть застосовуватися до всього сайту. А при необхідності змінити щось у схемі сайту (наприклад, додати нове поле опитування так, щоб воно відображалося в правій частині будь-якої сторінки), це буде дуже легко зробити, якщо був розроблений спільний інтерфейс, який використовується спільно багатьма сторінками. Саме тому, безперечно, варто витратити додатковий час на продумування рівня інтерфейсу користувача, замість того, щоб відразу ж починати писати код. Це справді стратегічне рішення, яке може заощадити кілька годин або навіть днів роботи у майбутньому. Пам'ятайте про те, що фундаментальні зміни, які вносяться пізніше в процесі розробки, забиратимуть більше часу та зусиль.