Комп'ютерна Академія IT STEP - повноцінна IT-освіта для дорослих і дітей. Ми навчаємо з 1999 року. Авторські методики, викладачі-практики, 100% практичних занять.

Ви використовуєте застарілий браузер!

Ваш браузер Internet Explorer, на жаль, є застарілим. Ця версія браузеру не підтримує багато сучасних технологій, тому деякі функції сайту можуть працювати з помилками. Рекомендуємо переглядати сайт за допомогою актуальних версій браузерів Google Chrome, Safari, Mozilla Firefox, Opera, Microsoft Edge

Триває набір в Малу Комп'ютерну Академію!

02

днів

15

годин

43

хвилин

Отримати консультацію
ШАГ логотип

5 типових помилок у веб-дизайні

15.10.2020

312 переглядів

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

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

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

 

Помилка №1. Стильно, яскраво, але незрозуміло і недоречно

У чому помилка? Часто ця помилка є серед веб-дизайнерів-початківців, які пройшли онлайн-курси, де не пояснили зв'язок веб-дизайну і бізнесу. Їм здається, що завдання - зробити якомога креативніше і красивіше. Але дизайнер - це не тільки той, у кого відмінний смак і є почуття прекрасного, а й фахівець з аналітичним, критичним мисленням, який хоче допомогти замовнику прийти до бажаної мети. Інакше виходить так: стильних сайтів багато, але серед них працюють і приносять прибуток - одиниці.

Тут є ще одна проблема - невідповідність сайту очікуванням цільової аудиторії. Це коли розробляється сайт під бізнес-леді і хотілося б бачити стриманий дизайн в 1-2 кольорах, мінімумом непотрібних картинок і максимум корисної інформації, а виходить рожева сторінка з безліччю зображень жінок з кавою або ноутбуками і водянистим текстом.

 

Як потрібно робити?

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

 

Помилка №2. Погано продумана навігація
У чому помилка? Так трапляється, коли веб-дизайнер не знає основ маркетингу і не вміє продумувати шлях клієнта, а це важливо, щоб через кожен блок вести відвідувача до здійснення покупки або задоволення іншої мети підприємця.

Основні помилки:

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

Як потрібно робити?

Важливо пам'ятати такі правила, що стосуються навігації на сайті:

  • Розміщувати блоки в послідовності, яка допоможе клієнтові прийти до рішення у вашу користь. Для цього потрібно вивчити хоча б метод продажів AIDA і згідно з ним продумати структуру сторінки.
  • Кнопки із закликом до дії розміщувати кожні пару блоків і краще не міняти в них текст. Обов'язково виділити цей елемент акцентним кольором.
  • В меню розміщувати тільки важливу інформацію, яку відвідувачі звикли бачити в ньому. Зазвичай це контакти, інформація про компанію, опис послуг і т.д.

 

Помилка №3. Відсутність вільного простору
У чому помилка? Зазвичай під цією помилкою ховається інша - незнання основ композиції. Через це виходить, що всі об'єкти на екрані нібито головні і серед них немає центрального. Це погано, тому що людина не знає, на що саме дивитися, що їй хочуть донести цим дизайном. Перед очима багато інформації і спочатку можна спробувати її розібрати, виділити для себе головне, але скільки відвідувачів буде цим займатися?

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

 

Як потрібно робити?

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

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

 

Помилка №4. Розміщення тексту на зображенні

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

  • Текст погано читається на зображенні/зливається із фоновим зображенням
  • Текст накладається на важливу частину зображення

Як потрібно робити?

  • Щоб текст добре читався, можна накласти на фотографію фільтр кольору, контрастного тексту. Найчастіше використовують чорний, але можна використовувати яскраві кольори і комбінувати їх. 
  • Злегка розмите зображення - чудовий фон для тексту
  • Також для кращої читабельності тексту можна накласти на фотографію фільтр контрастного тексту кольору. Найчастіше використовують чорний, але можна використовувати яскраві кольори і комбінувати їх.
  • При накладенні тексту на важливу частину зображення спробуйте "погратися" з вирівнюванням тексту по правому/лівому краю зображення:


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

 

 

Помилка №5. Складні форми реєстрації, які потрібно довго заповнювати
У чому помилка? Часто цим грішать дизайнери, які роблять дизайн для інтернет-магазинів. Їм здається, що чим більше інформації вони запросять відразу, тим краще будуть знати клієнтів (і в підсумку зможуть перетворити їх на постійних і лояльних), але це так не працює. Коли людина бачить, що на заповнення форми у неї може піти більше 10 хвилин, вона просто в більшості випадків виходить з сайту і йде до конкурента, де на це піде до 2 хвилин.

Як потрібно робити?

Ідеально, коли в контактній формі є максимум 4 рядки, ще краще 2. Зазвичай це ім'я і якийсь із контактів (телефон, пошта). Оптимальний час на заповнення форми - 2 хвилини. Якщо це інтернет-магазин, то слід розділити форму на кілька блоків (основна інформація про клієнта, спосіб доставки, спосіб оплати, інше), але на оформлення замовлення все одно не має йти більше 5 хвилин.

Обравши напрямок вивчення «Комп'ютерна графіка та дизайн» в Академії ШАГ студенти навчаться не тільки робити прекрасні макети веб-сайтів, але і будуть знати про те, як поводяться гості веб-сайту



Автор:

Редакція Академії ITSTEP

Програмування

Яка зарплата у QA Engineer в Україні | Скільки заробляє тестувальник

Середні зарплати тестувальників в Україні: порівняння Manual і Automation QA, огляд доходів у великих IT-компаніях і поради, як збільшити свою зарплату | Блог ITSTEP Academy

Зарплата тестувальника в Україні: скільки можна заробити? Тестувальник програмного забезпечення (QA-інженер) - це фахівець, який відповідає за перевірку роботи додатків, пошук помилок і контроль якості продукту. Його основна мета - забезпечити стабільну та безпечну роботу програмних рішень перед їхнім випуском. Професія тестувальника стала особливо популярною завдяки низькому порогу входу. На відміну від розробників, які повинні досконально знати мови програмування, тестувальники можуть почати кар'єру з базового розуміння принципі

ШАГ логотип

Soft-skills

Синдром самозванця в IT - прокачай впевненість для успішної кар'єри

Дізнайтеся, як подолати синдром самозванця, розвинути впевненість і успішно будувати кар'єру в IT з нашим покроковим посібником ▶ Детальніше

Синдром самозванця у програмістів-початківців: перші кроки до впевненості Синдром самозванця (Imposter Phenomenon) - це психологічне явище, за якого людина переконана у власній некомпетентності та в тому, що її успіхи досягнуті випадково. Для програмістів-початківців це може стати серйозною перешкодою на старті кар'єри. В умовах IT-індустрії, що швидко розвивається, почуття невпевненості може негативно позначитися на професійному розвитку, перешкоджаючи прояву ініціативи і руйнуючи мотивацію. Тематика синдрому самозванця особливо актуальна

ШАГ логотип

Програмування

Головні страхи в роботі IT-спеціалістів і способи їх подолання

Як IT-спеціалісти справляються зі страхами в роботі: провал на співбесіді, дедлайни, ретроспективи? Дізнайтеся, як їх подолати та впевнено розвиватися в IT | Блог ITSTEP Київ

Чого бояться IT-фахівці: 8 ключових страхів у роботі, які переслідують розробників та інженерів IT-фахівці працюють у середовищі, що швидко змінюється, де висока відповідальність, жорсткі терміни та постійний потік нових технологій створюють додатковий тиск. Навіть досвідчені розробники та інженери стикаються з тривогами, які можуть впливати на їхню продуктивність, мотивацію та емоційний стан. Страх - це природна реакція людини на невизначеність і можливі ризики. В IT-індустрії він може проявлятися в різних формах: страх припуститися крит

ШАГ логотип

Програмування

Хто такий Team Lead у команді розробників

Що робить Team Lead? Обов'язки, ролі та важливість в IT-команді для досягнення цілей

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

ШАГ логотип

Набір у розпалі

Триває набір в Малу Академію для дітей 7-14 років! Кількість місць обмежена!

Детальніше

ITSTEP SCHOOL

Йде набір в ліцензовану загальноосвітню школу з поглибленим вивченням ІТ та іноземних мов для 1-11 класів! Тисніть, щоб дізнатись деталі!

Детальніше

Цей сайт використовує Cookies

Політика конфіденційності