Помилки, які ви, найімовірніше, вже зробили як веб-дизайнер
Усі веб-дизайнери хочуть досконалості. Однак вони просто люди, і помилки можуть виникнути завжди. Так легко просто не помітити деякі деталі. Немає жодного дизайнера у світі, який би не робив помилок, і уникати їх – це те, що зазвичай відбувається через деякий час.
Зараз ми поговоримо про деякі з найпоширеніших помилок, які веб-дизайнери роблять постійно, ті, які ви, швидше за все, вже робили хоча б раз. Виправте свої шкідливі звички і подолайте перешкоди, в яких ви зараз винні, щоб ваша робота була кращою, ніж будь-коли.
Використання Flash
У сучасному дизайні веб-сайтів ми рідко бачимо використання Flash, навіть якщо він надзвичайно вражає своїми можливостями. Ми стикаємося з можливістю подарувати відвідувачу анімаційний досвід, який є вражаючим, але має пов’язаний багаж.
З використанням Flash у веб-дизайні виникають різні проблеми. Ви маєте довший час завантаження, проблеми з мобільними користувачами через відсутність підтримки та використання іншої мови програмування. Зараз дуже мало пристроїв, які підтримують Flash. Крім того, в майбутньому ми не очікуємо збільшення підтримки. Абсолютно нові бібліотеки здаються сильнішими та популярнішими, особливо ті, що базуються на JavaScript, як AngularJS і jQuary.
Використання дійсно великих зображень
Сучасна тенденція веб-дизайну полягає у використанні великих зображень на всьому сайті. Це, безперечно, зробить роботу приємнішою, і користувач матиме на що чудово подивитись, але є деякі складнощі, про які слід знати дизайнеру та розробнику.
Завантаження сторінки автоматично збільшується, коли використовуються більші зображення. Це може призвести до дуже поганого сценарію для відвідувача сайту. Доброю новиною є те, що ми маємо доступ до різних інструментів, які дуже допомагають оптимізувати зображення. Серед тих, які ви можете розглянути:
Такі програми, як PrePros, можуть допомогти автоматично оптимізувати зображення всередині програм. Проблема полягає в тому, що інструменти допоможуть робочим процесам, але не вирішать величезну проблему, пов’язану з часом завантаження, принаймні не повністю.
Зараз багато дизайнерів використовують SVG. Вони використовують коди для анімації та малювання графіки в середовищі браузера. Таким чином ми отримуємо прискорене завантаження сторінки та різні елементи, які привертають увагу.
Ми також повинні підкреслити той факт, що більші зображення ускладнять веб-дизайн через фактор невідповідності. Мова йде про елемент конструкції, який має задану висоту і ширину. Браузери масштабують зображення, але у нас той самий розмір файлу.
Зараз W3C працює над використанням «<picture>» як елемента HTML5. Це дозволить викликати зображення різних розмірів залежно від ширини екрана перегляду. Коли це станеться, досвід для глядача стане набагато кращим, але до впровадження ви повинні уникайте великих зображень.
Використання фіксованої ширини та висоти
Адаптація автоматично обмежена для користувачів, коли кодуються фіксовані розміри. У нас є обхідні шляхи, але ми завжди повинні думати про створення шаблону веб-дизайну, який би на 100% адаптувався. Фіксована висота, встановлена в CSS, може обмежити область перегляду для користувача. Перейти до цього можна за допомогою коригування медіа-запитів, але доданий додатковий код призведе до проблем із продуктивністю. Вам це не дуже потрібно. У більшості випадків не слід використовувати фіксовані розміри. У сучасному середовищі веб-дизайну їх слід уникати якомога більше.
Створення припущень щодо дизайну
Веб-дизайнери зазвичай працюють із такими програмами, як Adobe Photoshop або Sketch. Коли роботу виконано, загальним припущенням є певна точка зупинки в адаптивному робочому процесі. Ширина екрана, яка розглядається як стандартна, охоплюватиме багато різних розмірів екрану, але охоплення всіх із них не є впевненим. У нас є тисячі мобільних пристроїв, доступних на ринку. Створити дизайн, який підійшов би всім, дуже складно.
Коли ви працюєте над певною шириною, ви повинні планувати, і перспективне мислення стає важливою навичкою для веб-дизайнера. Ви маєте бути впевнені, що не зроблено припущень і що ви справді виконуватимете роботу всередині браузера після завершення звичайної роботи графічного редактора.
Використання забагато ефектів і анімації
Ви можете побачити цю проблему навіть на деяких найпопулярніших сайтах у світі. Дуже багато веб-сайтів пропонують приголомшливі враження, багато з яких пропонують щось справді унікальне та дивовижне. Однак це не означає додавання якомога більшої кількості ефектів і анімації. Дуже важливо поєднати принципи веб-дизайну з метою пошуку правильного поєднання функціональності та графічного впливу.
Є дві великі проблеми, пов’язані з надмірним використанням анімації та ефектів:
- Збільшено час завантаження сторінки
- Ефекти та анімація будуть проблематичними для старих комп’ютерів
На даний момент популярні хаки та анімації, які додають елементи поступового збільшення або зменшення. Вони можуть виглядати чудово, і сайти виглядатимуть чудово, але це не означає, що їх слід використовувати завжди. Подивіться, чи не буде загальне завантаження сторінки занадто великим для пристроїв, якими буде користуватися більшість відвідувачів, і ніколи не забувайте про швидкість завантаження сторінки. Вони дуже важливі й завжди повинні пропонувати чудові враження для відвідувачів.
Неналежне оформлення посилань
Це помилка, яка є набагато більш поширеною, ніж ви думаєте на даний момент. Посилання повинні завжди робити те, що вони роблять. Це означає, що коли посилання має неправильний стиль, люди не зрозуміють, що це посилання. Нам завжди потрібно думати про відвідувачів, тому посилання завжди мають виглядати як посилання. Ви можете експериментувати і не дотримуватися стандартного синього підкреслення, але ніколи не перестарайтеся.
Не використовується DRY у CSS
Якщо ви цього не знаєте, DRY означає «не повторюватися». Це метод у веб-дизайні, і він практично означає, що дизайнер допомагає зберегти код лаконічним і клонованим. Для оформлення веб-сайту рекомендується завжди використовувати лише необхідний код.
При використанні традиційного CSS потрібно багато повторювати певні елементи, які використовуються всередині інших елементів. Селектори в кінцевому підсумку виходять дуже великими, і їх запис займе багато часу. Коли ви використовуєте класи в дизайні замість стилізації кожного окремого елемента на сторінці HTML, все стає набагато простіше.
На даний момент дуже гарною ідеєю є використання мов попередньої обробки, таких як Sass. Вони досить корисні з точки зору необхідної технології CSS. Мови, які використовуються, прискорять розробку та дизайн через те, що вони включають такі функції, як змінні, функції, міксини, вкладення та багато іншого. Створений код потім буде скомпільовано в код CSS. Веб-розробники та веб-дизайнери тепер можуть використовувати менше рядків коду, і завдяки мовам можна легко уникнути повторень.
Витончена деградація
Ми можемо визначити витончену деградацію як практику створення веб-функціональних можливостей, здатних запропонувати певний рівень взаємодії з користувачем у сучасному браузері, одночасно знижуючи рівень взаємодії з користувачем у старіших браузерах. Це звучить трохи складно, але як приклад ми можемо обговорити підтримку Internet Explorer 8 і 7. Ви були б здивовані, дізнавшись, що більшість користувачів просто не оновлюють браузери протягом тривалого часу. Через це вам потрібно додати витончену деградацію, щоб мати належну підтримку для обох версій браузера.
Сучасні веб-сайти легко розробляти, але пізніше ви можете помітити той факт, що в старішому браузері сторінки виглядають дуже погано через певні залежності.
Прогресивне покращення
Це щось подібне до згаданої вище витонченої деградації. Різниця полягає в тому, що процес виконується у зворотному порядку, починаючи з базового рівня досвіду, який підтримується в кожному веб-переглядачі. Потім дизайнер/розробник додає розширену функціональність, доступну для браузерів, які можуть її використовувати.
І цей варіант, і попередній є складними. Зазвичай вони використовуються тільки дійсно хорошими дизайнерами. Однак, оскільки зараз доступно багато браузерів, нам потрібно серйозно розглянути варіанти. Веб-дизайнери, як правило, пропонують клієнтам вирішити, що саме буде підтримуватися. Вам потрібно спробувати використати ці підходи, щоб запропонувати справді чудовий досвід для особливо активних користувачів, які належать до цільової аудиторії.
Однією з найважливіших частин будь-якого веб-сайту є навігація. Дизайнер повинен мати можливість зробити враження від відвідувача природним. Мета полягає в тому, щоб зробити навігацію дійсно простою та інтуїтивно зрозумілою. Користувач автоматично зрозуміє, що досвід правильний, коли дизайн враховує цей елемент.
Щоразу, коли користувацький досвід поганий, ми бачимо розчарування відвідувачів. Вони просто більше не відвідують конкретний сайт і будуть шукати рішення своїх проблем на інших сторінках. Розробник завжди повинен враховувати можливість використання. Дизайн має виглядати чудово, але ви ніколи не повинні забувати про функціональність. Потрібна простота у використанні, і відсутність цього зробить весь дизайн марним.
Відсутність уваги до вмісту
«Форма слідує за функцією» — це дуже поширений архітектурний принцип, який з’явився у двадцятому столітті, прямо на етапі промислового дизайну сучасної архітектури. Це принцип, який ви повинні завжди пам’ятати у веб-дизайні.
Веб-дизайн і графічний дизайн дійсно схожі на сучасну архітектуру з точки зору необхідної функціональності. Форма об’єкта повинна спочатку базуватися на передбачуваному призначенні або функції. З точки зору веб-сайтів, ми можемо розглядати їх як інформаційні бази даних, які поширені по всьому Інтернету. Користувач відвідає веб-сайт, щоб отримати конкретні дані. Тут вступає в дію вміст, щоб надати ці дані. Оскільки відвідувач потрапляє на сайт і не знаходить дані, він буде шукати їх десь в іншому місці, навіть не дивлячись на дизайн. У той же час, якщо дизайн дуже ускладнює пошук або переробку даних, відбувається той самий результат.
Зараз користувачі Інтернету хочуть отримати доступ до інформації, і вони хочуть, щоб цей доступ був швидким. Функція Form Over стає дуже важливою у веб-дизайні. Неврахування цього принципу означає, що увага приділяється зовнішньому вигляду, а не запропонованому контенту. У результаті веб-сайти не будуть справді популярними. Контент повинен завжди виділятися.
Висновки
Своїм корінням найпоширеніші помилки веб-дизайну пов’язані зі спробами придумати щось дійсно красиве та унікальне, не беручи до уваги причину, чому відвідувачі насправді переходять на сайт. Через це ви завжди бажаєте мати необхідне терпіння, щоб поєднати дійсно хороший дизайн із повною функціональністю.
Завжди створюйте функціональні веб-сайти та з часом вивчайте нові технології. Найкращі веб-дизайнери світу продовжують навчатися та завжди залишаються в курсі всього, що можна і чого не можна робити. Ви хочете створити свій веб-дизайн, поговорити з клієнтом, а потім переконатися, що відвідувачі оцінять те, що пропонується. Це набагато легше сказати, ніж зробити, але з часом усе стає набагато простіше.
Переконайтеся, що ви завжди витрачаєте стільки часу, скільки потрібно, щоб створити щось справді чудове. Ще одна незгадана помилка у веб-дизайні полягає в тому, що ви не виділяєте часу, необхідного для створення ідеального дизайну веб-сайту. Зазвичай це відбувається, оскільки клієнтам потрібно виконати роботу в найкоротші терміни. Переконайтеся, що у вас завжди є достатньо часу, щоб створити чудовий веб-дизайн, який ви знаєте, що можете.