Пользователь
1 февраля 2013 в 11:41

Дизайн → Эссе о тенденциях в дизайне и технологиях на 2013 год

Все праздники позади, самое время задуматься, как сложится год наступивший. Что будет в тренде, а что навсегда покинет интернет и станет только историей — сейчас и постараемся выяснить. Итак, о самых быстроменяющихся технологиях и дизайне в 10 абзацах.

image


1. Адаптивный дизайн (responsive design)


image

На первом месте заслуженно находится самый полезный, на наш взгляд, тренд — адаптивный дизайн сайтов. Для тех, кто впервые сталкивается с данным термином, поясним — это дизайн сайта, обеспечивающий хорошее восприятие на различных устройствах, будь то монитор компьютера, ноутбук, iPad, любой другой планшет, или мобильный телефон. Причем, не требуется разработка отдельных версий сайта, как еще недавно было принято, никаких pda.site.ru или m.site.com. При открытии на устройстве сайт автоматически определяет, как ему отображаться правильно. Фантастически удобно!

2. Конец скевоморфизма в дизайне


Для начала поясним, скевоморфизм – элемент дизайна, который скопирован с формы другого объекта. Пользователям iPhone он должен быть хорошо знаком, большинство приложений реализованы как раз по такому принципу.

image

На смену этому подходу в дизайне приходит другой — ориентированный на типографское и «знаковое» оформление интерфейса пользователя, ярким представителем которого является Metro UI.

image

Не так давно Денис kortunov в своей статье очень хорошо описал данный тренд, со всеми его плюсами и минусами.

3. Одностраничные шаблоны


Большинство дизайнеров в последнее время выбирают одностраничные шаблоны сайтов. Они являются более эффективными, пользователи без труда могут сфокусировать свое внимание на содержимом. А используя возможности HTML5 в анимации можно легко создать динамичный и интересный дизайн в одностраничном шаблоне. Этот тренд набирает особую популярность с ростом использования различных тачскрин-устройств – планшетов и мобильных телефонов.

image

4. Большие изображения и свободное пространство


Большие изображения привлекательны и притягивают внимание пользователей. Все чаще крупные бренды, при проектировании своих домашних страниц, используют полноэкранные изображения. Данная тенденция набирает популярность и дальше, уверены, таких сайтов будет становиться все больше.

image

Другое интересное направление – использование большего количества белого пространства. Чистый дизайн помогает пользователям легко акцентировать свое внимание на основных элементах и быть менее отвлеченными.

image

5. Повсеместный отказ от флеша


Новые технологии, такие как HTML5, CSS3, а также старый добрый JavaScript повсеместно вытесняют Flash.

image

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

6. Прозрачность и плавность


Новые возможности CSS3 позволяют вам контролировать и изменять прозрачность любого элемента на странице, благодаря чему появляется возможность создавать элегантные и отзывчивые интерфейсы. И для всего этого больше не нужен Photoshop.

image

Также стоит отметить интересную тенденцию, когда ховер ссылок (эффект при наведении на ссылку) делается плавным. Большинство авторитетных дизайнерских блогов, таких как, например, smashingmagazine.com давно используют этот прием, и в последнее время его часто можно встретить и на других сайтах.


7. Поддержка ретины


Компания Apple подарила всему миру Retina-экраны, графика которых вдвое «плотнее», чем у обычных ЖК-мониторов. Вдвое более четкое изображение значит, что обычная графика на них будет смотреться плохо. А с ростом популярности retina-экранов нельзя игнорировать этот факт.

image

8. Фиксированые навигационные блоки


Простой и элегантный способ, благодаря которому при прокрутке страницы навигационная панель «прилипает» к верху экрана и остается перед глазами пользователя. Данный способ облегчает навигацию, вам больше не нужно возвращаться наверх, меню всегда перед глазами.

image

Другим трендом в дизайне, который нужно здесь упомянуть, является использование кнопки «наверх», которая появляется при прокрутке страницы больше, чем на один экран. С ее помощью пользователь может легко и быстро вернуться к началу статьи. Вконтакте, Кинопоиск или Хабрахабр уже давно используют этот прием в своей работе. На своем студийном сайте мы также используем фиксированные навигационные панели.

9. Умная работа с контентом


В основе любого дизайна всегда лежит контент. И все чаще дизайнеры оформляют каждую страницу сайта, стараясь представить контент наиболее понятным и доступным пользователю способом. Инструментов для этого становится больше, это инфографика, журнальная верстка сайтов, иллюстрации, а с помощью новых возможностей HTML5, вариантов и способов представления текста становится все больше.

image

10. Интерактивная инфографика


Инфографика – это визуальное представление контента, являющаяся прекрасным инструментом для подачи большого количества сложных данных в простой и понятной форме. Интерактивная инфографика позволяет пользователю взаимодействовать с этими данными. С использованием новых возможностей, которые представляет HTML5, вы сможете создавать такую форму подачи информации, которая будет притягивать внимание пользователя и даже удивлять его.

image

На самом деле, мы живем в динамичное время, когда одна технология сменяет другую очень быстро. Тренды, которые мы выделили — это продукт нашего собственного опыта и наблюдений.
Антон Паймышев @nons
карма
78,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (23)

  • +29
    А где новые тенденции?
    Стоило бы назвать статью «Ретроспектива трендов веб-дизайна за прошедшие годы»
    • –6
      На то это и тренды — уже обозначенная тенденция, которая будет развиваться и усиливаться. По поводу предсказаний того, чего еще нет, но может быть — такую подборку я постараюсь сделать в ближайшее время :)
  • +1
    > 9. Умная работа с контентом… журнальная верстка сайтов…

    Мало что мешает читать так же, как разбивка текста на две колонки, когда они не влезают по высоте.

    2 пункт нам как бы намекает, что электронные носители тем и отличаются от бумажных, что они электронные, а не бумажные.
    • –1
      Тут опять же не стоит бездумно применять метод, ко всему надо подходить с умом и думать прежде всего об удобстве.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        А кто говорил про широкие колонки? Я говорил про высокие, которые не вмещаются в экран.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Перечитайте, помогает.
            Контентная часть не становится выше, она сразу слишком высокая.
            • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            Примерно вот так.
            jsfiddle.net/JSUQv/
  • +10
    Главный тренд веб-дизайна 2012 — заходишь на сайт и вдруг всё начинает ездить, менять форму, адаптироваться, фотки на бэкграунде, парампам скроллинг, фиксед менюшки и всё люто тормозит. Я конечно понимаю, что да здравствует HTML5, одностраничные приложения и всё такое, я им сам с Backbone экспериментирую. Но меру-то знать надо.

    В общем и с помощью новых чудесных технологий можно всякого говна понаделать. Хотя не спорю, есть и очень крутые и в то же время приятные в использовании сайты.
    • +1
      Согласен, у меня уже сафари на Айпаде падает от новых трендов, вебстраница небольшого интернет магазина выедает всю оперативку своими эффектами.
      • 0
        Пушка это когда от таких «тенденций в дизайне и технолгиях» сайты заставляют лагать браузер на современном четырехядерном десктопе — сразу понимаешь, что здесь что-то не так.
    • +1
      Увы! Сайтов, которые удобно использовать для получения информации, крайне мало, и становится только меньше. Понятие «текстовый дизайн» забыто напрочь, идёт негласное соревнование — кто засунет на страницу больше графики и JS+CSS. Грузим 5 фреймворков и 50 картинок по 1Мб каждая ради отображения двух строчек текста… А тут ещё тормознутый SVG на подходе, со всеми его фильтрами, эффектами и анимациями.
      Если так пойдёт и дальше, в сеть будет невозможно выходить без установленных AdBlock+NoScript+ImgLikeOpera, а то и вовсе придётся писать GM-скрипты, которые бы парсили код, находили там информацию и представляли её в нормальном удобочитаемом виде. Крутые дизайнерские навороты всё больше походят на крайне навязчивый визуальный спам, причём доля его относительно контента стремительно возрастает.
  • +2
    ༀ Оm my God… Хабр поддерживает тибетский དབུ་ཅན་ скрипт
  • +1
    Лично меня фиксированые навигационные блоки раздражают. Да, и на Хабре тоже.
  • +1
    не будем холиварить, но в подтверждение о тренде HTML5. Люди все чаще обращаются со словами:
    • сделать приложение (не Flash), чтобы работало и на мобильных устройствах
    • переделать Flash на HTML5, чтобы работало и на мобильных устройствах

    и т.п. То есть и в обычных юзеров есть понимание, что то меняется (а не только в разработчиков)
  • +1
    Почти все пункты были трендами один-два года назад, а сейчас повсеместно используются, без ажиотажа.

    Я бы отнес к трендам только одностраничные сайты. Не то чтобы раньше их не делали, но сейчас всё чаще встречаются. Это разумно, и вполне опрявдано для лаконичных сайтов-презентаций. Жаль только, что получаются очень большие, нагруженные страницы, которые часто очень тормозят.

    А некоторые пункты даже к дизайну-то не относятся, не то что к трендам.
    Например, переезд на HTML5 и поддержка ретины. Это ж все равно, что написать «поддержка local storage и opacity — новый тренд». Это технологии, а не дизайн. Устройства и браузеры предоставлят что-то новое, а разработчики следуют этому.

    Думаю, трендом может стать поддержка браузеров в самых разных устройствах — телевизорах, консолях, и т.п. Не просто responsive, а именно проработка отображения для каждого, адаптация под размеры, под отсутствие некоторых технологий, под ограничения манипуляторов, под разные парадигмы дизайна самих устройств (например, сайт в виндоуз-стиле, открытый в айфоне вызывает диссонанс:) ).
    И тут уже получает развитие тренд «mobile-first». Всё чаще компании и разработчики думают о создании сайта для планшетов и телефонов, а на десктопе сайт должен лишь «поддерживаться».

    Еще я бы отнес к трендам всё более массовый приход дизайнеров в open source. Это будет означать, что фреймворки и библиотеки будут всё более качественно и проработанно выглядеть «из коробки», а значит студии будут более охотно пользоваться готовым дизайном, и будут тратить меньше ресурсов на кастомизацию. Пользователи будут всё чаще встречать знакомые, стандартные элементы на сайтах. Несмотря на недостатки, это хорошо скажется на «юзабилити интернета» в целом.
    Это может привести к перераспределению ресурсов от верстки и штамповки контролов в пользу проработки контентной составляющей (извиняюсь за каламбур) — более качественная работа с типографикой, знаками и иллюстрациями и работа над поведением пользователя при использовании даже несложного UI. WindowsUI — только один из примеров.

    Также я бы назвал трендом видео. Недорогие зеркали научились снимать в хорошем качестве, простых видеоредакторов — много, а скрорости современного интернета позволяют всё чаще заменять иллюстрации видеороликами. Всё чаще встречаются сайты с фоновым видео вместо изображения, даже с «полноэкранным» видео, на весь фон.
    Но я бы не стал относить этот тренд к числу тех, которым надо следовать повсеместно.

    Вот такие мысли.:)
    UPD: да, давайте звязывать со статьями «тренды 2013», каждый день встречаю. :)
    • 0
      Видео в фоне — не тренд. Это очень ситуационный элемент, касающийся по большей части промо в люкс-классе и fashion-индустрии. Я делала такой концепт для агентства видеокастинга моделей — вот там да, там это основная работа агентства, которую осмысленно было в первую очередь представить именно так, сделать из этого catch. Но то, что это тренд, я бы не сказала.
      • 0
        Согласен, фоновое видео подходит далеко не для всех страниц. Я имел в виду, что сейчас как раз то время, когда производство видео высокого качества становится простым делом, как в свое время стало простым делом изготовление иллюстраций высокого качества.

        Чего стоило сделать качественное цифровое изображение в 2000 году? Это ж нужно было искать людей с аппаратурой, снимать много кадров, потом выбирать, сканировать, обрабатывать, пробовать, переснимать и т.д. Рендеринг графики занимал кучу времени и редакторы требовали профессионализма. А сейчас — встал пораньше, повесил свой же аппарат на шею, вышел на полянку. Щелк, и готово. Редакоров уйма, и к обеду уже готов фон для промо-сайта. И даже оптимизация не нужна в наши дни, если это и так увесистое промо. В иллюстрациях такая ситуация наблюдается довольно давно.

        Вот такой же процесс и с видео. Множество промо-сайтов с огромными иллюстрациями в свободном от контента пространстве уже сейчас могут себе позволить менять изображения на видео высокого разрешения.
        И производство футажей как раз на уровне, когда любой сможет без труда снять FullHD, смонтировать как угодно, сделать рендер хоть на домашнем компьютере и т.д.

        В общем, я о том, что технологии позволяют использовать видео в большем количестве и это будет востребованно, а не о том, что дизайнеры станут лояльнее к футажам. А может это и не будет востребованно, почем мне знать, я просто гадаю. :)
  • 0
    Набор фактов, рассчитанных на обывателя и новичков, (можно, с лёгкостью, добавить ещё 10-15) поставить генератор случайных чисел и постить их ежегодно или время от времени :)

  • 0
    Скеуморфизм был и до iOS, и вряд ли он помрет окончательно. Это заблуждение. Скорее, такой стиль снова станет нишевым, как было до бума мобильных устройств. Люди, занимающиеся 3D-моделированием и записью музыки знают это, вспоминая многочисленные интерфейсы программ и плагинов (те же VST-синтезаторы), использующие скеуморфические интерфейсы — без этого там никак, не хватает наглядности. Так что хоронить эту стилистику не стоит, она еще послужит верой и правдой, а то, быть может, и вовсе новой волной захлестнет умы дизайнеров. Просто, скорее всего, станет поменьше аляповато-пошловатых заигрываний с псевдокожей, квазидеревом и недометаллом. И потом, что бы не говорили о скеуморфизме профессионалы и теоретики дизайна, обывателю в целом нравится этот стиль, и среднестатистический пользователь с куда бОльим удовольствием будет нажимать на симпатичные кастомные кнопки, чем на плоскую одноцветную иконку.
  • 0
    Мне кажется не хватает стиля — закрой 10 рекламных попапов и ты увидишь сайт.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.