Тренды веб-дизайна на 2015 и 2016 годы: беспощадные цвета. Лучшие сайты дизайн 2016


Тренды веб-дизайна на 2015 и 2016 годы: беспощадные цвета

От автора: приветствую, дорогой друг. Итак, тренды веб-дизайна на 2015 и 2016 годы. Именно об этом пойдет речь в данной статье. Цвет при проектировании имеет ключевое значение – даже на строгих черно-белых сайтах присутствует множество оттенков, контрастов и баланс между белым и черным цветами.

Flat дизайн популярен уже достаточно долгое время (сейчас называется flat 2.0), и на данный момент цветовой палитре стали уделять еще больше внимания. Сегодня интернет пестрит радугой ярких цветов, которые хорошо смотрятся как на мультяшных сайтах, которые популярны сегодня, так и на элегантных сайтах минималистичного вида, у которых цвет это одна из основных составляющих дизайна.

Сегодня и в ближайшем будущем мы будем видеть все больше сайтов, пестрящих яркими цветами. Яркие цвета это один из основных трендов 2015 и 2016 годов.

Отсылки к моде и дизайну интерьеров

Как говорится в книге Тренды веб-дизайна 2015 и 2016, яркие цвета являются трендом не только в интернете. Данное веяние универсально для всех отраслей, особенно это заметно в моде и дизайне интерьеров. Эти два направления постоянно доминируют в дизайне и имеют много общего.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

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

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

Почему именно сейчас?

Яркие цвета стали столь привлекательны потому, что их можно применять различными способами и стилизовать с их помощью много разных элементов. За счет своего разнообразия и универсальности яркие шаблоны буквально похоронили ранее популярный шаблон тем plug-and-play.

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

Данный тренд зародился на сайтах с портфолио художников/дизайнеров, а сейчас перешел в более традиционные сферы, как новостные сайты или сайты о погоде. Тренд даже просачивается в дизайн сайтов электронной коммерции, где всегда преобладали черно-белые цвета.

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

Увеличивающееся число пикселей на дюйм в HD дисплеях позволяет использовать все больше разнообразных цветов. Если раньше дизайнеры могли с уверенностью использовать лишь 216 безопасных цветов, то сегодня технологии увеличили эту цифру до миллионов. Более 98% пользователей доступны данные технологии (по исследованию W3School).

Популярность плоского дизайна стала расти сразу после того, как Retina дисплеи стали более менее доступны. Это тоже не совпадение. Флэт дизайн тоже стал продуктом новых технологий. Но его появление привело и к обратной реакции, направление дизайна скеоморфизм вышло из моды.

Примеры сайтов с яркой цветовой палитрой

Теперь яркие цвета можно встретить не просто на новостных сайтах, но и на сайтах бизнес новостей, как Bloomberg Business. Мастерское использование цветов подтверждает нашу теорию просачивания ярких цветов в профессиональные сферы.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Но нельзя просто взять и использовать на своем сайте все яркие цвета. Большинство сайтов черно-белые, цветовая палитра ярко контрастирует (текст становится более читаемым, лучший выбор для новостных сайтов).

Ярко-синий цвет это цвет подписи, преимущественно используется в качестве разделителей. Даже в логотипе Bloomberg присутствует ярко-синий. Отличный выбор – данный оттенок вызывает доверие со стороны пользователя, а также внушает уверенность. Пастельный красный в разделе Top News привлекает внимание пользователя. Но он использован только в заголовках, чтобы не перегружать страницу. А ярко-голубой цвет в разделе Commentary & Opinion задает легкий, неформальный тон.

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

Цвета можно отлично применить для навигации по сайту, но на сайте Bloomberg Business используются только яркие оттенки.

Заглядывая наперед

Цвета это неотъемлемая часть веб-дизайна. Тем не менее, с изменением трендов популярность ярких оттенков будет то повышаться, то понижаться. Так как данные процессы цикличны, то вскоре мы увидим заново изобретенные старые методы. К примеру, возможно, вернуться градиенты и вдохнут новую жизнь в дизайн с яркими оттенками цветов.

На сайте Zample+me используются только яркие оттенки голубого и градиент, без темных оттенков. Такой легкий стиль легко совмещается с минималистичным макетом сайта и плоскими интерактивными иконками. Zample+Me – пример того, как данный тренд развивается, а не затухает.

Насыщенный цвет хорошо сочетается с резким шрифтом, еще один тренд из книги Тренды веб-дизайна 2015-2016. Как видно на сайте Piccsy два ярких цвета усиливают друг друга, посылая мощное сообщение пользователю. Настолько глубокий, впечатляющий вид, что данные цвета нужно использовать очень осторожно. Можно отвлечь внимание пользователя на другой объект.

Еще один набирающий популярность тренд это цветовое наложение – добавление фильтров к изображениям с помощью цветных «линз». Таким образом, можно задать любому изображению эмоциональность определенным цветом. К примеру, грустную фотографию можно сделать веселой, добавив желтый оттенок.

Дополнительно

В бесплатной электронной книге Тренды веб-дизайна 2015-2016 более подробно описаны последние тренды, среди прочего там описаны еще 9 полезных трендов. В книге вы найдете разбор трендов на примерах таких компаний, как Adidas, Intercom, Apple, Google, Versace и другие. Также существует список из 100 бесплатных полезных ресурсов, с помощью которых можно ускорить процесс проектирования.

Автор: Jerry Cao

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

webformyself.com

12 трендов веб-дизайна 2016: хорошее и плохое

В своей статье на Searchenginewatch.com Крис Лэйк, CEO агентства Empirical Proof, рассказал про тренды веб-дизайна и поделился своими впечатлениями о плохих и хороших тенденциях. Что хорошего можно вынести из предыдущего года и использовать в 2016, а от чего нужно напрочь отказаться? Размышления Криса по этому поводу читайте ниже.

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

1. Веб-дизайн под копирку

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

Про повальное копирование дизайна уже было сказано очень много. Задумайтесь: если бы все интернет-магазины работали по одинаковому шаблону, скорее всего, брошенных корзин было бы намного больше. И какой смысл выглядеть так же, как выглядят конкуренты? Если вам кажется это преувеличением, то взгляните на изображение и задумайтесь снова:

По наблюдениям Криса, сейчас гомогенизация проявляется не только в веб-дизайне, но и за его пределами. Например, сегодня даже сложно выбрать автомобиль, отчасти потому, что ни одна модель не выделяется и слабо отличается от соседней:

2. Сначала паттерны

Паттерны — это повторяющиеся элементы, которые помогают решать стандартные дизайнерские проблемы. Паттерны являются так называемой отправной точкой для опытного UI-дизайнера.UI-Patterns.com

Современные разработчики пользовательских интерфейсов сначала проектируют отдельные компоненты, а сами интерфейсы представляют собой продуманную композицию из этих компонентов.Vince Speelman

На руководство Google Material Design ссылаются практически везде. Тем, кто еще не знаком с ним, Крис Лэйк настоятельно рекомендует познакомиться.

Нынешний редизайн сайта Codecademy.com основан на десяти руководящих принципах и паттернах, которые могут использоваться повторно вместе с шаблоном UI. Ниже показан набор UI-инструментов Codecademy, созданных на старте проекта. Подобный шаблон очень полезен, особенно при работе в большой команде:

3. Анимация

Flash умер, но творить чудеса сегодня можно с помощью HTML5, CSS, jQuery. Проблема в том, что слишком многие дизайнеры не чувствуют меры.

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

  • Каждая анимация должна быть оправдана с точки зрения пользы для пользователя. «Оно выглядит симпатично» — это не оправдание.
  • Длительность анимации не должна превышать 300 мс.
  • Избегайте равномерного движения анимации (linear easing). Из-за этого она выглядит неинтересной и скучной.
  • 99% анимаций должны быть Ease-in или Ease-out.
  • Необычная анимация вроде Bounce и т. п. нужна крайне редко.

4. Перенасыщенные цвета

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

Еще один сайт, который использовал неоновые цвета в последнем редизайне, — это Medium. Для логотипа был выбран такой оттенок зеленого, который можно увидеть хоть из космоса:

Многие люди терпеть не могут перемен, однако новый логотип Medium теперь лучше виден в панели вкладок:

Spotify также сошел с ума в начале года. «Судя по тысячам твитов, создалось впечатление, что все поголовно возненавидели этот новый ярко-зеленый лого», — говорит Крис:

5. Размытие фоновых картинок

Разработчики Facebook писали о технике размытия и масштабирования, при которой небольшое изображение масштабируется, после чего к нему применяется размытие по Гауссу и картинка загружается постепенно.

В Facebook определили, что такой способ помогает увеличить скорость загрузки веб-страницы на 30%, что является большим прогрессом. Как использовать эту технику, можно почитать в англоязычной статье Эмиля Бьорклунда.

6. Легкая загрузка страницы

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

У Винса Спилмана есть замечательная статья о 9 правилах дизайна. Очень рекомендуется к прочтению.

7. Дизайн, превращающийся в дурной тон

Крис уверен, что сегодня веб-дизайн переживает примерно то, что было с модой в 80-х годах: нам стало доступно так много новых возможностей и разработок, что все начали сходить с ума и пытаться добавить всё это на свои сайты. И в итоге у нас есть куча мусора, который, как мы думаем, выглядит круто, а по сути — непригодно. Через лет 10 мы вспомним эти сайты и ужаснемся.

Технология — это сила, но стоит напомнить: тот факт, что вы можете что-то сделать, еще не означает, что вы должны это делать.

8. Прелоадеры

В обсуждение про анти-UX можно добавить еще одну тему — прелоадеры. «Это порождение Сатаны, которое существует только для того, чтобы показать пользователям, что вы с удовольствием заставляете их ждать. Не очень хороший знак», — заявил Крис Лэйк.

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

9. Послайдовый скролл

Попадали ли вы на такие сайты, где вам казалось, что мышь ведет себя странно? Если да, то скорее всего, вы столкнулись со скроллджекингом (scrolljacking) — техникой послайдового скролла (когда контент меняется по мере прокручивания колесика мыши). Крис искренне удивлен, что заставляет людей творить подобные сайты, и уверен, что нет никакой логики в том, чтобы привязывать управление к скроллу, лишая пользователя возможности просмотреть сайт без использования мыши либо с других устройств.

10. Пассивно-агрессивные поп-апы

По мнению Лэйка, всплывающие окна (popups) — еще одна большая проблема для UX сегодня. Во-первых, на сайте часто возникают поп-апы, рекламирующие этот же сайт. В сообщениях, как правило, навязчиво просят подписаться на рассылку или что-нибудь купить/скачать. Во-вторых, из-за ужасной манеры подачи создается впечатление, что если пользователь откажется от предложения в поп-апе, то он круглый идиот.

Несколько примеров угнетающих всплывающих окон, после которых хочется закрыть вкладку:

11. Прощай, гамбургер

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

Многие крупные компании отказались от гамбургер-меню в прошлом году в пользу чего-то более понятного и очевидного. Это знак, что были сделаны правильные выводы. Например, YouTube заменил гамбургер на вкладки:

Google, Apple и Microsoft также избавились от гамбургер-меню. Вскоре и другие последуют этому примеру.

12. Тяжелые страницы

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

Еще десять лет назад мы старались не заходить за пределы 100 Кбайт. Контент страницы, который не вмещался в эти пределы, не индексировался Google. В какой-то момент, несколько лет спустя Google отменил это правило, и понеслось: страницы начали становиться всё более и более увесистыми.

К 2010 году вес средней веб-страницы вырос до 702 Кбайт, а в 2015 вес среднестатистической страницы составил 2219 Кбайт — это более чем в 3 раза выше, чем 5 лет назад. Скорее всего, всему виной низкокачественные скрипты, несжатые изображения, видео и тяжелые шрифты:

Это довольно печальная новость как для пользователей, так и для тех, кто тратит время и средства на разработку дизайна под различные устройства, поскольку комфортно загружать такие страницы с мобильных устройств можно только при хорошем Wi-Fi.

Некоторые сайты особенно отличаются. Домашняя страница онлайн-газеты Daily Mail весит 8.8 Мбайт.Впечатляет, не правда ли?

Это были 12 трендов веб-дизайна 2016. Крис Лэйк мог бы продолжать эту беседу еще очень долго, однако краткость — сестра таланта, поэтому на этом его обсуждение заканчивается.

Какие тенденции, на ваш взгляд, сегодня появляются и развиваются? Что начинает выходить из моды? Поделитесь своими размышлениями в комментариях.

idg.net.ua

Самые красивые сайты января 2016. Первые рейтинги.

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

1. Qualcomm.com

Функциональность и стильный дизайн сайта Qualcomm делает его простым и удобным. Простая в использовании панель навигации присутствует на всем веб-пространстве и выполнена очень эффективно. Минималистичный СТА, разделенный блоками и полосами информации, обеспечивает эффективную коммуникацию с пользователем. Что может быть лучше?

 

2. GV.com

Дизайн сайта Google Ventures и веселый и функциональный одновременно. Навигация проста в использовании и постоянно у вас перед глазами на протяжении изучения всех страниц. Иллюстрации современные и излучают чувство инноваций и надежности. Тонкая анимация на странице делает сайт более интерактивным, что приводит к большей вовлеченности пользователя. Беспроигрышно!

 

3. Rainforest.arkivert.no

Здесь простой и мощный веб-дизайн блестяще работает на продвижение ценности бренда. Использование фото в качестве карты и навигационной формы сохраняет страницу чистой и не загроможденной. Минимализм дизайна помогает не отвлекаться от сообщения о благотворительности – как раз то, что нужно некоммерческой организации. Отлично!

 

4. Worldfoodclock.com

Еще один простой дизайн. Уникальные «пищевые часы» проведут вас через историю производства пищевых продуктов и отходов. Вам даже не придется прокручивать или нажимать на страницы, так как сайт автоматизирован. Хотя возможность перехода по страницам не исключена — простые стрелки перехода отлично работают, если вы хотите передвигаться по сайту самостоятельно. Простота – главная ценность!

 

5. Gnosh.co.uk

Этим творческим драйвовым дизайном Gnosh действительно демонстрирует индивидуальность своих брендов. С одной стороны — на сайте легко ориентироваться, с другой – он предоставляет пользователю экспериментальную систему навигации. Совмещая на странице стилизованную типографику и фотографии еды, дизайнеры добились действительно «вкусного» результата.

 

Если вам понравилась наша подборка – сигнализируйте в комментариях. Тогда в следующем месяце мы найдем что-нибудь еще более вдохновляющее.

И не стесняйтесь обращаться к нам, если у вас есть какие-либо вопросы, касающиеся веб-дизайна или веб-разработок. Помните, мы умеем не только составлять обзоры!

blog.pioneers.com.ua

[Лучшее 2016 года] 6 типичных ошибок при создании сайта

Сайт в наше время — не просто дань моде, а самый простой способ рассказать незнакомому человеку о том, кто вы такой и чем занимаетесь. И произвести приятное впечатление! Правда, для этого он должен быть красивым, современным и без серьезных ошибок, способных все испортить.

Благодаря платформе Wix создание сайта — больше не проблема. Но прежде чем переходить к выбору подходящего шаблона и садиться за работу, давайте разберемся, о каких ошибках идет речь, и постараемся их не допустить.

Нечитаемые тексты

Вы потратили время и придумали классные тексты, а потом сделали все, чтобы их никто не смог прочитать. Вот примеры неудачных дизайнерских решений, от которых в первую очередь страдает читаемость: слабый контраст между цветом текста и цветом фона, чересчур мелкие буквы, перебор с количеством шрифтов (один-два — это максимум), слишком много печатных знаков на одной странице. Запомните: тексты должны быть разборчивыми и аккуратными, тогда люди с интересом их прочитают, а не убегут в ужасе.

Слабо выдержанный стиль

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

Поймите, что принцип «всего понемногу» не годится для веб-дизайна, а стиль сайта зависит от его предназначения и задач. Что вы хотите сделать? Блог о путешествиях? Портфолио с фотографиями? Интернет-магазин кухонной утвари? Страничку консалтингового агентства? Это совершенно разные проекты, поэтому их сайты не могут быть похожими друг на друга. Экспериментировать, разумеется, можно, даже нужно, но лучше делать это в рамках выбранного стиля.

Запутанная навигация

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

Некачественные фотографии

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

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

Полная неразбериха

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

Есть хорошее правило: лучше меньше да лучше. Зачем вам сайт, битком набитый всякой ерундой? К счастью, есть действенное лекарство под названием «воздух». Мы имеем в виду пустое пространство. Если вам нужно визуально выделить какой-нибудь элемент, не добавляйте рядом с ним ничего, лучше оставьте побольше «воздуха». Чем просторнее и чище ваш сайт, тем он красивее и элегантнее.

Нет мобильной версии!

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

Если в качестве платформы вы выбрали Wix — вам страшно повезло. Откройте редактор, включите мобильную версию сайта и при необходимости отредактируйте ее. На все про все уйдет буквально несколько минут.

 

Готовы показать миру, на что вы способны? Сделайте сайт на Wix — это просто и бесплатно!

ru.wix.com

5 основных трендов веб-дизайна 2016 | GeekBrains

Веб-дизайну как динамичной области веб-разработки характерны собственные тенденции.

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

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

Тренды

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

Индивидуальность

Must-have каждого уважающего себя ресурса — уникальные, созданные талантливыми авторами фотографии, иллюстрации, иконки. Шаблонные элементы, взятые из бесплатных или платных (неважно) фотобанков уже изрядно надоели как самим веб-дизайнерам, так и пользователям. Индивидуальный стиль — вот что будет выделять хороший сайт от посредственных в ближайшей перспективе.

Сочный контент

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

Эмбиент-видео, фотосессии, инфографика, иллюстрации помогут контенту стать не просто тематическим, а «сочным», «аппетитным», таким, чтобы на сайт захотелось вернуться за порцией очередных впечатлений и знаний.

Дружелюбие

Нельзя сказать, что адаптированный или отзывчивый дизайн сайтов является чем-то новым. Он был в тренде и раньше. Однако после того как Google обновил поисковые алгоритмы (апрель 2015 года), назвав инициативу мобайлгеддоном (mobilegeddon), актуальность такого дизайна возросла в разы. В 2016 году количество дружелюбных к мобильным устройствам сайтов будет только увеличиваться. То есть программист web дизайнер, который сможет быстро писать крутые адаптированные ресурсы, без сомнения,окажется в выигрыше, будучи востребованным и высокооплачиваемым.

UX дизайн

Одним из свежих и перспективных трендов в веб-дизайне является расширение использования UX (userexperience) или уникального пользовательского опыта. Популярная еще несколько лет назад стандартизация сайтов, создаваемых на основе популярных шаблонов привела к безликости большинства ресурсов. В результате даже информационно наполненные, но типичные сайты стали малоинтересны. Успешная реализация уникального пользовательского опыта позволит выделить ресурс из общей массы, запомниться его посетителям.

Эффективная прокрутка

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

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

 

Расскажем о веб-дизайне подробнее: профессия «Веб-дизайнер».

geekbrains.ru

8 трендов веб-дизайна 2016 года. Инфографика

Окружающий нас контент становится все разнообразнее, смелее и ярче. Казалось бы, технологии и принципы его создания должны усложняться, но специалисты отмечают обратное – упрощение процесса и результата.

Многие сферы жизни в этом году обретут минимализм формы. Сдержанность и «плоскость» дизайна актуальны как никогда.

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

Поговорим подробнее об этих и других тенденциях.

Что будет актуально в этом году?

Мода мимолетна, но прошлые годы стали плодородной почвой для нового грандиозного дизайна будущего. Для многих компаний качественный дизайн стал верным помощником в достижении лидерства на рынке. Теперь планы идут гораздо дальше печатного и веб-дизайна – в приоритете мобильность и интерактивность. Дизайн продолжает двигаться в заданном ранее направлении, но свежие  идеи придают ему новые очертания.

Утвердившиеся тенденции

1. Плоский дизайн

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

2. Видео-фон

Полноэкранное и фоновое видео существенно повышают качество и авторитетность  всего ресурса. Скорость интернета увеличивается с каждым годом, что дает прекрасную возможность максимально использовать воздействие видео-роликов.

3. Мобильные приложения

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

Как мы проводим время, пользуясь iOS и Android

Лишь 14% времени занимает  использование браузера, в то время как в приложениях пользователь находится в 86% случаев. Где именно проходит это время?

  • Игры 17%
  • Facebook 17%
  • Twitter5%
  • Прочие соцсети 9.5%
  • Утилиты 8%
  • Деловые приложения 4%
  • Apple Safari 7%
  • Google Browser 5%
  • Прочие браузеры 2%
  • YouTube 4%
  • Прочие развлечения 4%
  • Новости 3%
  • Другое 3%
4. Адаптивный дизайн

С появлением множества электронных устройств, растет разнообразие и в дизайне. Перед дизайнерами встает вопрос: как адаптировать контент для различных девайсов, сохраняя общую идею и стиль?

Свежие тенденции

5. Новое в форме

Многообразие доступных шрифтов ставит нелегкий выбор перед дизайнерами. Соблюдение традиционных оформительских принципов и тематическая ориентированность всегда дают отличный результат. Классика снова актуальна.

6. Минимум деталей

Плоский и адаптивный дизайн спровоцировали распространение минимализма. Сайты становятся компактнее, детали исчезают, цветовые решения упрощаются. Увеличение количества и качества контента влечет необходимость упрощения формы.

7. Сторителлинг

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

8. Карточный дизайн

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

rusability.ru

тренды дизайна сайтов 2016 года

Чтобы размещенная в интернете виртуальная площадка выглядела современно, ее владельцам надо тщательно продумать дизайн сайта, который бы соответствовал последним трендам в сфере разработки веб-страниц. В 2016 году желающим создать свой web-проект стоит обращать внимание на графику, шрифты, наличие мультимедии на своих онлайн-порталах. Какие популярные приемы используют разработчики, чтобы придать сайтам стильный и модный вид?

Зафиксированная шапка

Если раньше шапка сайта при прокрутке страницы вниз поднималась вверх (как и все остальное содержимое сайта), то сейчас она остается недвижимой. Она фиксируется в верхней части экрана, пользователь ее видит постоянно. Это удобный вариант для компаний, которые в шапке размещают свои контактные данные. Потенциальным клиентам не надо искать координаты фирмы, если их заинтересовали ее товары или услуги. Чуть позже появился еще один тренд с бесконечной прокруткой страниц.

Картинки большого формата

Фоновые картинки большого формата все еще популярны. Они стали трендом 2014 и 2015 годов, и они востребованы до сих пор. Главное, что требуется учитывать при выборе изображения, – его качество. Картинка должна быть четкой, иметь высокое разрешение. Фоновые изображения собой закрывают весь экран, на них содержится тематическая информация.

Крупные блоки

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

Контурные кнопки

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

Видео

Видеоролики, включенные в дизайн, всегда повышали интерес посетителей к сайту. В 2016 году в моде будет еще и фоновое видео. При этом на видеоизображение накладываются и другие элементы дизайна сайта – тексты, картинки.Интересный вариант – зацикленное видео. Оно движется по кругу, регулярно повторяется. Такое видео размещается в урезанном виде на главной странице сайта. Чтобы просмотреть полную версию ролика, требуется нажать на кнопку «Play».

Цветовые эффекты

В текущем году актуально цветовое разделение меню. Элементы навигации разных оттенков позволяют пользователям не промахнуться при выборе нужного им раздела. Разноцветное меню выделяется на сайте, особенно если он содержит большое количество контента. Однотонные цветные кнопки навигации будут хорошо заметны на фоне текста, рисунков, прочих элементов дизайна.Еще один актуальный вариант – одноцветная схема сайта. Оформление ресурса (фон, картинки) выдерживается в единой расцветке, чаще всего она бывает яркой. Для выделения элементов навигации и надписей используются крупные буквы контрастного оттенка (часто белого).

design-mania.ru