<
  • Главная
Статьи

18 трендів веб-дизайну в 2017 році (частина 1)

  1. 1. Дизайн, спрямований на контент
  2. 2. Якісне взаємодія дизайнерів з розробниками і дизайнерів між собою
  3. 3. Спрощений процес "від дизайнера до розробника"
  4. 4. Великий, гучний заголовок
  5. 5. Складна розмітка, яка прийшла з основ графічного дизайну
  6. Експериментальна лабораторія макетів Джен Сіммонс
  7. Grid by Example
  8. 7. Інструменти для адаптивного дизайну на основі правил
  9. 8. Більше яскравих кольорів
  10. 9. Більше уваги анімації
  11. 10. Незвичайна розмітка
  12. Наїжджають один на одного тексти та зображення:
  13. Тексти і зображення, розкидані (здавалося б) випадково по сторінці:

Ми в TruVisibility підготували переклад першої частини статті " 18 трендів веб-дизайну в 2017 році "Джона Мур Вільямса, керівника відділу контент-стратегії Webflow.

Завершення поточного року не за горами, і кожен веб-дизайнер хоча б раз задавався важливим питанням: що ж буде визначати веб-дизайн в наступаючому 2017 році? Я вирішив знайти відповідь на це питання і запитав дизайнерів WebFlow, які тренди, на їхню думку, будуть переважати наступні 365 днів. Їх думкам я також дав власні коментарі.

В першу чергу давайте дізнаємося думку головного дизайнера-проектувальника Webflow Серджіо Магдалини (Sergie Magdalin).

В першу чергу давайте дізнаємося думку головного дизайнера-проектувальника Webflow Серджіо Магдалини (Sergie Magdalin)

1. Дизайн, спрямований на контент

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

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

Було дуже цікаво дивитися на метаморфози, що відбуваються з пріоритетами в розробці.

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

Це одна з причин переходу від "скевоморфного" дизайну (коли елементи зображуються максимально схожими на їх аналоги в реальному світі) до плоского, мінімалістичному дизайну. З цих міркувань Google створив Матеріальний дизайн.

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

2. Якісне взаємодія дизайнерів з розробниками і дизайнерів між собою

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

Така турбота про взаємодію з дизайнерами з'явилася почасти через масивності мобільних і веб-додатків, які розробляються на сьогоднішній день. Крім того, що такі гігантські корпорації, як Google, Facebook, Twitter і LinkedIn вимагають титанічної праці дизайнерської команди з абсолютно різних сторін, дизайнерам необхідно завжди бути на одній хвилі один з одним. Це означає, що потрібно більш тісне спілкування з проекту і способи найбільш ефективної спільної роботи.

Щоб полегшити це завдання, було створено безліч інструментів, починаючи колективними шаблонами і дошками в Webflow's Team і закінчуючи графічним редактором інтерфейсів Figma, що показує зміни в реальному часі. Я впевнений, в 2017 ці платформи будуть поліпшуватися і доповнюватися.

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

Карсон Міллер (Carson Miller) висловився з цього приводу у своїй нещодавній статті " Майбутнє фронтенда в дизайні "На TechCrunch:

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

3. Спрощений процес "від дизайнера до розробника"

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

Тренди веб-дизайну в майбутньому році на думку продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):

Тренди веб-дизайну в майбутньому році на думку продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):

4. Великий, гучний заголовок

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

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

The #MadeInWebflow Heco Partners

The #MadeInWebflow Heco Partners

TruVisibility

TruVisibility

Pomerleau

Pomerleau

Framer

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

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

5. Складна розмітка, яка прийшла з основ графічного дизайну

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

В останні кілька років верстка веб-сторінок обмежувалася можливостями CSS, але такі нові модулі, як Flexbox і CSS Grid (який вийде в березні 2017 року ), Дозволять здійснити найсміливіші задуми в веб-розмітці.

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

Ось кілька прикладів того, що варто очікувати (звичайно, якщо у вас є браузер, що підтримує CSS Grid, наприклад, Firefox Nightly, Safari Technical Preview або Chrome Canary):

Експериментальна лабораторія макетів Джен Сіммонс

Зверніть увагу на стиль головного блоку - явна відсилання до історії графічного дизайну.

Grid by Example

На сайті можна подивитися більше прикладів.

6. Більше SVG

SVG (scalable vector graphics - масштабована векторна графіка) має більше переваг для веб-дизайнерів і розробників, ніж традиційні формати зображень, наприклад, JPG, PNG або GIF.

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

Але це ще не все. SVG також славиться тим, що не вимагає відправки HTTP-запитів. Якщо ви коли-небудь перевіряли швидкість завантаження свого веб-сайту, ви могли помітити, що ці HTTP-запити можуть дійсно гальмувати ваш сайт. З SVG такої проблеми немає.

А ще SVG-файл можна анімувати!

Далі давайте дізнаємося думку продукт-дизайнера Нейтана Ромеро (Nathan Romero).

7. Інструменти для адаптивного дизайну на основі правил

Інструменти для адаптивного дизайну на основі правил

Адаптивний дизайн повністю змінив наш погляд на веб-додатки і на їх створення.

Але, як не дивно, принцип роботи програм для створення дизайну не змінився. Більшість таких інструментів працюють так: вам потрібно створювати аналогічну сторінку знову і знову для різних пристроїв і дозволів. В галузі, де потрібна швидка генерація ідей, швидка розробка і швидкий запуск, таке марнотратство часу просто неприпустимо.

Очікується нова хвиля дизайнерських інструментів (таких як Figma) на основі "правил", коригувальних вид сайтів на різних екранах і пристроях, тим самим скорочуючи кількість повторних дій дизайнера. Такі інструменти грунтуються на просторових зв'язках елементів і, коли ми змінюємо розмір екрану або пристрій, вони прагнуть зберегти ці зв'язку шляхом зміни розмірів елементів і відступів між ними.

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

Тренди дизайну в 2017 році на думку Райана Моррісона (Ryan Morrison), старшого графічного дизайнера.

Тренди дизайну в 2017 році на думку Райана Моррісона (Ryan Morrison), старшого графічного дизайнера

8. Більше яскравих кольорів

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

Погляньте на новий сайт Asana з яскравою кольоровою заливкою:

Погляньте на новий сайт Asana з яскравою кольоровою заливкою:

Нова іконка програми Instagram викликала багато критики, але цей редизайн, безсумнівно, освіжив бренд:

Нова іконка програми Instagram викликала багато критики, але цей редизайн, безсумнівно, освіжив бренд:

Все, що робить Stripe, не вимагає окремого подання:

Все, що робить Stripe, не вимагає окремого подання:

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

Хоча, може бути, варто все-таки трохи зменшити яскравість? Ми стежимо за вами, Asana.

9. Більше уваги анімації

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

Ця тема особливо важлива, оскільки створення анімації спрощується з кожним днем. На Конференції Дизайну та Контенту (Design & Content Conference) в 2016 гуру анімації Вал Хед (Val Head) підкреслила, що при розробці анімованих елементів дизайнерам слід пам'ятати про цілі та потреби бренду, щоб досягти ефект, який очікують побачити творці контенту. Якщо до цієї поради будуть прислухатися, анімація буде виконувати завдання, значимі для бренду, а не просто викликати мігрень у користувача.

10. Незвичайна розмітка

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

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

Метод "зламаною" розмітки полягає у виході елементів за межі скрупульозно вирівняною сітки. Подібні прийоми можуть іноді здатися навіть неприємними для ока. наприклад:

Наїжджають один на одного тексти та зображення:

The Outline

Bauhaus-Archiv

Тексти і зображення, розкидані (здавалося б) випадково по сторінці:

Epicurrence

Heco Partners

Це була перша частина перекладу статті " 18 трендів веб-дизайну в 2017 році ". А ви згодні з думками фахівців Webflow? Як ви думаєте, який веб-дизайн буде в моді в наступаючому році?

Завершення поточного року не за горами, і кожен веб-дизайнер хоча б раз задавався важливим питанням: що ж буде визначати веб-дизайн в наступаючому 2017 році?
Хоча, може бути, варто все-таки трохи зменшити яскравість?
А ви згодні з думками фахівців Webflow?
Як ви думаєте, який веб-дизайн буде в моді в наступаючому році?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью