Як створити дизайн сайту: 14 кроків (з ілюстраціями)

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

кроки

Частина 1 з 3:

Знаходимо власний дизайн

1. Створіть ваш власний веб-сайт. Якщо ви новачок в написанні коду і веб-дизайні, але дуже хочете самі створити свій сайт, у вас є маса варіантів. Простий сайт можна написати самостійно, вивчивши ази HTML і CSS. Просто повірте, що результат вашої роботи зможе виглядати красиво і професійно!

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

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

Частина 2 з 3:

Обдумуємо основні ідеї дизайну

1. Не захаращуйте сайт. Бажано, щоб все працювало максимально швидко і без проблем. Зведіть кількість пунктів меню до мінімуму, зробивши навігацію по сайту простою і зрозумілою, допомагаючи відвідувачеві сайту .

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

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

Дизайн повинен бути логічним. Елементи на кожній окремій сторінці повинні розташовуватися в логічному порядку, по спадаючій важливості теми-аналогічно повинні бути структуровані всі сторінки.

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

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

4. Зробіть сайт максимально читабельним. Щоб зробити текст легко читається - розбийте його на невеликі частини. Використовуйте підзаголовки і інтервали, щоб відокремити частини тексту один від одного. Використовуйте виділення жирним шрифтом або шрифтом більшого розміру, щоб підкреслити структуру і важливість тексту.

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

5. Створюйте веб-сайт в універсальному форматі. Використовуйте стандартний HTML і уникайте використання тегів, функцій і плагінів, які підтримуються тільки певним браузером.

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

6. Протестуйте ваш веб-сайт. Переконайтеся, що всі посилання робочі, а картинки відображаються коректно.

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

Частина 3 з 3:

Дизайн сайтів для мобільних пристроїв

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

Подивіться приклади мобільних сайтів. Найчастіше, вставивши букву "m."Замість" www "в веб-адресу сайту, ви потрапите на мобільну версію сайту. Ви можете зробити щось подібне.

2. Не робіть сайт занадто складним. Дизайн вашого сайту повинен бути простим і по суті. Веб-сайти зі складною структурою і миготливими банерами давно в минулому. Користувачам до вподоби прості сайти. А це значить: простий дизайн, мінімальна кількість колонок, мінімальна кількість тексту, які необхідно прочитати, щоб знайти на сайті потрібну інформацію.

3. Використовуйте "чуйну" верстку. Чуйна верстка - такий спосіб кодування сайту, при якому він підлаштовується під розмір екрану, на якому відображається (замість фіксованих розмірів). Для досягнення такого ефекту найчастіше застосовується установка ширини колонки в процентному відношенні, а не ставлячи її в пікселях, але є і більш витончені рішення.

4. Уникайте функцій, які не підтримуються мобільними пристроями. Багато телефонів і планшети не можуть відображати спливаючі вікна, Flash-анімацію, Java або фрейми. Це повертає нас до головної засади - робіть дизайн якомога простіше.

5. Розгляньте можливість створення програми. У деяких обставинах вам, можливо, буде простіше зробити додаток, ніж мобільну версію сайту. Для цього вам не потрібно бути супер-пупер програмістом! Як і у випадку з сайтами, є безліч компаній, які виконають за вас всю роботу. Наприклад, можна скористатися послугами Conduit Mobile.

Поради

Щоб ваші відвідувачі не витрачали даремно чорнило, використовуйте окремий стиль для формату сайту для друку

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

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

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

Ви можете використовувати CSS (вкладені таблиці стилів) щоб потрібне поставити відстань між параграфами.

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

кроки

Поради

попередження