Зміст

• Крок
• Метод 1 з 2: 3 основні правила
• Метод 2 з 2: Настанови
• Поради
• Попередження

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

Крок

Метод 1 з 2: 3 основні правила

1. Правило 1:Слухайте свого клієнта. Можливо, ви розробляєте "найбільший у світі веб-сайт за всю історію Всесвіту та за його межами", з насиченим чорним кольором, вишуканими шрифтами та яскравими, художніми кольорами для сайту, який кричить "досліджуй мене зараз!" На жаль, ваш клієнт хотів помаранчеву панель меню з яскраво-рожевими та оранжевими літерами. Вас звільнили, і ваш найкращий веб-сайт, на який клієнт має права, знаходиться десь на їх резервному диску, і ніхто його більше ніколи не бачив.
   • Вивчіть фірмовий стиль вашого клієнта. Нехай клієнт покаже вам кілька веб-сайтів, які вони люблять. Це не тільки дасть вам уявлення про те, що їм подобається, але і кілька дизайнерських ідей, про які ви, можливо, і не думали.
   • Якщо ви думали, що ми жартуємо щодо помаранчевого та рожевого веб-сайтів, розгляньте цей класний, вишуканий сайт:
2. Правило №2:Знайте свою аудиторію та те, що вона шукає, та адаптуйте ваш дизайн відповідно. Причина, чому люди мають веб-сайти, полягає в тому, що вони хочуть, щоб їх бачили інші люди. Він може бути інформативним, комерційним або розважати конкретну цільову аудиторію. Ваша робота як дизайнера полягає в тому, щоб знати, для кого ви проектуєте, і тримати їх на сторінці, коли вони там приземляються.
   • Ви можете подумати: "Якщо це виглядає добре, вони залишаться". Але це не обов'язково має бути так. Візьмемо, наприклад, нерухомість. Ось сайт із чистим, веселим дизайном. У ньому багато простору, що надає відкритий вигляд, яскраві кольори та сучасний широкоформатний формат із посиланнями на видному місці:
   • А тепер погляньте на цей підхід до продажу нерухомості в тому ж районі: безладно і дуже зайнято, тьмяні кольори та покрита рекламою.
   • Здогадайтеся, який з них працює краще для тих, хто шукає дім? Правильно, той, де будинків! Коли люди шукають "будинки на продаж в Санта-Моніці", їм байдуже, як виглядає сайт. Вони не хочуть читати про агента з нерухомості або бачити гарні фотографії міста. Вони хочуть побачити будинки.
3. Правило №3:Слухай себе. Ви розумієте, чого хоче клієнт, і знаєте, що шукає ваш ринок. Тепер нарешті настав час звернути увагу на вас, дизайнере!
   • Створіть шаблон у графічному програмному забезпеченні на ваш вибір. Створіть елементи вашої сторінки на різних шарах (щоб ви могли налаштувати речі пізніше, не руйнуючи весь шаблон). Такими елементами можуть бути:
     • Заголовок. Це елемент, який однаковий на кожній сторінці вашого сайту. Заголовок складається із заголовка та логотипу веб-сайту, а також посилань на інші частини веб-сайту (наприклад, Про нас, Контакт тощо). Візуально і практично це зв’яже все це разом. Це хороша практика - зв’язати першу кнопку в рядку меню назад із домашньою сторінкою.
     • Наприклад, давайте поглянемо на Apple:
     • Як і у більшості речей Apple, їх домашня сторінка має дуже чистий, зрозумілий дизайн. Зверніть увагу на рядок меню вгорі з логічними темами для кожної кнопки, а також поле пошуку - завжди гарна ідея, якщо ваш сайт це підтримує. Тепер давайте подивимось на цільову сторінку однієї з кнопок, iPad, щоб побачити кілька елементів:
     • Рядок меню змінюється лише затемненням кнопки iPad.
     • Тема цільової сторінки відображається великими чорними літерами.
     • З'явиться нове підменю, щоб ви могли дізнатись більше про продукт. Якщо натиснути на одну з цих кнопок, ви побачите, що кожна сторінка пропонує новий вміст залежно від теми, але буде однаковою за макетом та дизайном.
     • Часто кожна основна тема у рядку меню матиме різні підзаголовки, які ви повинні заповнити. Замість того, щоб створювати другий рядок меню, ви можете використовувати спливаючі меню, як у цьому прикладі від Musicians Friend:
     • Бічна панель. Це з’явиться на багатьох сторінках вашого сайту, але не обов’язково на всіх - визначає контекст. Однак це дуже важливий елемент і повинен бути ретельно розроблений, щоб бути інтуїтивно зрозумілим і не надто захаращеним. На відміну від рядка меню, вміст бічної панелі може бути дуже динамічним. Ознайомтеся з цими двома бічними панелями від продавця нерухомості Trulia. Перша - для покупців:
       
       

Метод 2 з 2: Настанови

1. Створіть хороший інтерфейс користувача. Розмістіть різні елементи веб-сайту, такі як заголовок, бічні панелі, логотипи, зображення та текст в одному місці на кожній сторінці, щоб зробити ваш сайт зручним та інтуїтивно зрозумілим.
   • Зберігайте однаковий заголовок у верхній частині кожної сторінки. Незалежно від того, чи містить вміст вашого веб-сайту багато повторюваних елементів, переконайтесь, що верх кожної сторінки однаковий.
   • Використовуйте логіку у своєму дизайні. Елементи на одній сторінці мають бути логічно упорядковані за важливістю чи темою; різні сторінки на сайті повинні бути теж.
2. Створіть послідовний стиль. Там, де макет повинен надати вашому сайту структурну послідовність, стиль повинен забезпечувати тематичну гармонію.
   • Дотримуйтесь двох-трьох основних кольорів і переконайтеся, що вони добре поєднуються.
   • Не використовуйте занадто багато стилів або розмірів шрифтів; якщо ви хочете помістити кілька, використовуйте їх однаково на кожній сторінці.
   • Використовуйте каскадні таблиці стилів (CSS), щоб підтримувати єдиний стиль і полегшити зміну елементів на всьому веб-сайті, не переходячи на кожну сторінку окремо.
3. Максимальна читабельність. Щоб ваш текст було легшим для читання, ви можете розділити його на менші частини.
   • Використовуйте субтитри та правильний інтервал, щоб відокремити кожну з частин.
   • Використовуйте жирні літери або різні розміри, щоб показати ієрархію та важливість тем.
   • Зверніть увагу на те, як ви ставитеся до тексту. Не робіть шрифт занадто дрібним, а збільшуйте міжрядковий інтервал, щоб полегшити читання великих фрагментів тексту. Великі фрагменти тексту важче читати; розбийте його на менші абзаци.
4. Зробіть свій веб-сайт універсальним для читання. Використовуйте стандартний HTML і уникайте тегів, функцій та плагінів, доступних лише для однієї марки чи версії браузера.
   • Хоча більшість сучасних браузерів та комп’ютерів можуть обробляти складні зображення, все буде виглядати гладким, якщо зменшити та оптимізувати свої зображення для Інтернету. Зважте важливість якості проти важливості швидкості.
5. Перевірте свій веб-сайт. Переконайтеся, що кожне посилання працює як і слід було очікувати, і зображення відображаються правильно.
   • Можливо, ви захочете організувати тестування користувачів, запропонувавши членам вашої цільової аудиторії перевірити чіткість та простоту використання вашого дизайну та надати відгук про ваш веб-сайт.
6. Опублікуйте свій веб-сайт. Придбайте доменне ім’я, якщо ви цього ще не зробили. Періодично перевіряйте, чи працюють посилання, і слухайте пропозиції, які відвідувачі надсилають вам по електронній пошті.

Поради

• Хоча ви можете вільно розробляти макет на основі власного бачення або речей, які ви бачили на інших сайтах, придбати готовий дизайн може бути простіше.
• Не бомбардуйте відвідувача симпатичними, особливими картинками. Флеш-анімація, яскраві кольори, фони з малюнком та музика, яка автоматично відтворюється при завантаженні сторінки, були цікавими експериментами в 90-х, але тепер вони відлякують користувачів. Дотримуйтесь простих фонів, які контрастують із кольором тексту для максимальної розбірливості.
• Ви завжди можете використовувати CSS для оптимізації інтервалів між абзацами.
• Для відвідувачів із вадами слуху чи зору ви можете субтитрувати відеозаписи, транскрибувати аудіо та додавати повідомлення про доступність. Незважаючи на те, що таблиці можуть бути ефективним способом упорядкування інформації, відвідувачі з вадами зору за допомогою програмного забезпечення для зчитування з екрана можуть не почути матеріал у правильному порядку.
• Нехай ваші відвідувачі економить чорнило: використовуйте окрему таблицю стилів для друку сторінок.
  • Вимкніть фонові зображення під час налаштування параметрів друку.
  • Використовуйте чорний текст на білому тлі.
  • Видаліть рядок меню та непотрібні зображення.

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

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