Як створити дизайн сайту: 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 (вкладені таблиці стилів)щоб задати відстань між параграфами.
  • Для відвідувачів зі слабким слухом і зором ви можете використовувати відео і аудіо з титрами, вказавши їх доступність. Таблиці є ефективним способом передачі інформації, але слабозорі користувачі, які використовують програми для читання екрану, не зможуть прослухати інформацію в послідовності стовпців.

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

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






Ще почитати: