Тенденції веб-дизайну-2013

63

Від автора: в останні кілька років стався величезний зсув у методах створення вебсайтів. Все більше користувачів переходять на мобільні платформи і більш нові браузери, що підтримують веб-стандарти HTML5/CSS3. У співтовариства дизайнерів з’являються унікальні ідеї – схоже, межі змінюються кожні кілька місяців!

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

Дизайн Mobile First

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

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

A List Apart опублікував невелику книгу під назвою Mobile First. Вона написана Люком Вроблевски (Luke Wroblewski), і він висуває безліч аналогічних ідей. Тенденція акцентує потреба наповнення мобільних інтерфейсів як пріоритетну серед користувачів Інтернету. Велика частина браузерів настільних комп’ютерів буде рада будь-якого типу розмітки, лише б та нормально працювала. Набагато важче закріпити свій успіх на мобільних платформах, тому так корисно починати з малого, плануючи при цьому більший дизайн.

Нескінченна прокрутка

Багато соціальні мережі стали застосовувати ефект нескінченної прокручування до інструментальних панелей, тимчасовим шкалами і користувальницьким стрічок новин. Цей ефект став користуватися успіхом завдяки популярності унікального стилю розмітки Twitter’а і Tumblr’а. Пізніше Pinterest також застосував до своєї домашньої сторінки нескінченну прокрутку.

Дизайнерів може в першу чергу цікавити, чому він такий успішний. Звичайно ж, таким чином забезпечується «безшовний» інтерфейс без перезавантаження сторінки. Але потім користувачам буде складно генерувати постійні посилання на різні сторінки. А так як це вірно, виникає важливе питання про те, що не кожному вебсайту знадобиться нескінченна прокрутка. Я думаю, цей тренд найкраще працює, коли можна вантажити інформацію, що не вимагає посторінкового нумерації.

Наприклад, архіви блогів не дуже підходять, так як читачам замість прокручування безлічі елементів може знадобитися перейти навпростець до сторінки 15 або 25. Але для Tumblr’а чи Pinterest’а це відмінна ідея, тому що інформація постійно і динамічно змінюється. Те, що з’являється на 1-й або 2-й сторінці стрічки вашого Twitter ‘ а з часом буде оновлюватися і, таким чином, швидкості Ajax порівняно дуже помітні. Нікому не хочеться переходити на наступну сторінку» для завантаження наступного набору твітів.

Білий простір & мінімалізм

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

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

Елементи природного дизайну

У специфікації CSS3 привнесено так багато змін. Введення друкарської розмітки тексту через застосування @font-face і анімація – лише пара тем для обговорення, здатних продемонструвати просунуті характеристики. Але навіть основні властивості CSS3 вплинули на застосування всередині розмітки природного дизайну.

Ці елементи можуть включати в себе закруглені кути, тіні блоку або фонові градієнти з гнучким контейнером. 5-10 років тому всім цим стилям знадобилися б зображення. Зараз можна створити макет дизайну повністю в браузері вживши для генерації потрібних ефектів один CSS3. 2013-й стане черговим роком, коли вбудовані в розмітку зображення будуть замінюватися стандартно-сумісними властивостями CSS.

Мені завжди подобався вебсайт Dabblet за його неймовірне базове застосування фонових градієнтів до кожної нової сторінки. Це мережеве додаток прив’язується до каркаса Github Gist і дозволяє розробникам будувати маленькі прототипи HTML/CSS в режимі реального часу. Весь інтерфейс повністю ґрунтується на властивостях CSS3 і можна легко бачити, наскільки далеко просунулися тенденції за якихось кілька років.

Великі фотографії

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

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

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

Більш чистий вихідний код

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

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

Два найважливіших ресурсу, які я рекомендував би – це Github і Stack Overflow. На першому пропонується багато безкоштовного вихідного коду, який можна завантажити і застосувати до проектів вебсайтів. Останній – дуже люб’язне співтовариство розробників, які з радістю допомагають один одному у форматі «питання-відповідь». Ці два сайти пропонують досить хорошого матеріалу для побудови чистого, читаного вихідного коду своїх вебсайтів.

Останні роздуми

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

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