Тренды веб дизайна 2017
Веб дизайнерам в 2017 нужно предоставлять интерактивный, персонализированный и релевантный UX (User Experience).
Фиксированные размеры уже не всем подходят, и командам дизайнеров приходится мириться с этим фактом. Но как им ответить на вызов?
Вот некоторые быстро развивающиеся тенденции веб дизайна, которые обязательно проявят себя в следующем году – тенденции, которые возведут ваш сайт на вершину UX.
1. Материальный и моушн дизайн
Отчетливый, наглядный и продуманный материальный дизайн создает иерархию, смысл и направленность. Он делает интуитивным использование сеток, полей, отзывчивых переходов и анимаций, освещения и теней.
Моушен и материальный дизайн создают понимание. Материальный может быть спонтанно сгенерирован, и вы можете заставить его двигаться по любой оси.
Google хотели предоставить единый UX всем пользователям, независимо от размера их экрана. Они включили материальный дизайн во все свои мобильные приложения на Android, включая Gmail, Google Docs, Google Drive, YouTube, Google Maps и в определенной степени в браузер Chrome.
Поисковой гигант The mountain View тоже отказался от рекламных объявлений в результатах поиска в левой части экрана.
WhatsApp и Jetradar – лучшие примеры материального дизайна, которые мы видели.
2. Карточные интерфейсы и минималистичный дизайн
Веб и мобильные приложения уходят от страниц в сторону персонализированного UX с помощью карточного интерфейса. Карточки (Cards) – это прямоугольные изображения с текстом, которые служат отправной точкой к более подробной информации.
Карточный интерфейс улучшает опыт взаимодействия, предоставляя максимум информации в небольшом пространстве, создавая позитивное влияние на пользователя.
Мощный минималистичный дизайн вкупе с карточками и моушн графикой просто невозможно проигнорировать.
Netflix, например, изменил дизайн своего сайта, сделав упор на карточки. Они убрали самую раздражающую часть – карусель изображений – и избавились от медленного сайд-скроллинга, заменив его на просмотр с помощью кликов.
Смысл ребрендинга Netflix’а заключается в том, чтобы улучшить UX на всех девайсах.
Недавно Netflix изменили свой логотип просто на букву N.
Этот логотип – одна буква, обернутая красной лентой – лучше использует пространство в квадрате или вертикальном формате. Это самое существенное изменение в лого Netflix’а за последние 4 года.
3. Микровзаимодействия
Микровзаимодействия дают хорошую возможность пользователю повзаимодействовать с сайтом или мобильным приложением. Как объясняет Dan Saffer в своей книге Microinteractions, важны эти небольшие детали:
1) Возможность оставить отзыв или увидеть результат действия;
2) Достижение изолированности и индивидуализации задач (например, соединение одного девайса с другим, возможность дать ссылку на сообщение друга);
3) Управление настройками;
4) Предотвращение ошибок пользователей.
Хорошо продуманные микровзаимодействия очень сильно влияют на пользователей. В качестве примера также можно привести регулировку громкости в музыкальном плеере, активация/деактивация свойства, регулировка настроек, подтверждение действия.
Каждое прикосновение, каждое нажатие, прокрутка, масштабирование и щелчок становится лучше с большим количеством анимаций и интерактивных элементов.
4. Биг дата, аналитика и визуализация
Данные играют решающую роль в сети будущего. Крупные бренды часто дают пользователям возможность проанализировать их данные в виде красочных графиков.
Пользователям значительно проще просматривать информацию в визуализированном формате, что мотивирует бренды предоставлять данные пользователей в графическом виде.
5. Виртуальная реальность и полноэкранные видео
Многие компании добавляют в свои веб приложения доходчивые обучающие видео. Короткие видео, длиной от 60 до 90 секунд, также хороший способ впервые представить посетителям продукт.
Видео помогают удовлетворить любопытство пользователя, и добавляют лучшее понимание того, что они собираются использовать или купить. Пользователи могут посмотреть и «пощупать» продукт на сайте или в мобильном приложении, что может помочь им определиться с выбором.
Заключение
Просматривая упомянутые выше быстроразвивающиеся тренды веб дизайна, будущее веб дизайнинга выглядит многообещающим.
Не все тренды хорошо подойдут вашему следующему веб проекту, но вы должны быть готовы к тому, чтобы адаптироваться под эти тренды и создавать лучшее для вашей компании или клиентов.
Графический и Веб-дизайн655 постов 11.8K подписчика
Правила сообществаПубликовать свои посты / обзоры, и я до сих пор удивлен почему этого никто еще не делает. Практически любой более-менее вменяемый пост можно запилить, и я уверен, что его лампово примут.
Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.
1. Публиковать сообщения, картинки, не соответствующие тематике;
2. Размещать ссылки рекламного характера;
3. Перегибать палку;
Если оступился:
в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;
UI vs UX
Parallax переход между страницами сайта
Photoshop + After Effects
*звуки боли*
Sthool. Сидеть достаточно
Привет, удаленщики! Надоело заставлять себя пялиться в монитор? А и не надо больше. Ваш Sthool сделает это за вас.
П. с. Концепт разработан для конкурса на "плохой дизайн" от Десигн. Байт на коммент: о том как это работает и почему это плохой дизайн читайте в презентации или спрашивайте в комментариях. Отвечу ВСЕМ.
П. п. с. По вопросам приобретения для себя или своего врага не пишите, СКВОРЕЧНИК НЕ УЧАСТВУЕТ В ФЕСТИВАЛЕ, это всего лишь концепт, который, я надеюсь, НИКОГДА не будет реализован кем бы то ни было.
П. п. п. с Все (почти) материалы разработаны автором и при необходимости он может поделиться исходниками презентации или 3D-модельками, просто попросите его в комментах (автор я)
П. п. п. п. с. Отпишитесь, кому не западло: попал ли пост сообщества в общую ленту свежего. Хочу немного расшевелить коммьюнити про дизайн и добавить авторского контента в ленту, но пока не знаю как лучше реализовать всё, да и в новых механиках паблишинга на Пикабу приходится разбираться заново.
Всем пис, спасибо за просмотр!
Аж страшно представить
За каждым, казалось бы, идеальным пользовательским интерфейсом скрывается беспорядок, которого вы не видите.
Бесплатный пак иконок. Figma, scetch, adobe xd
Нашел крутой, а главное бесплатный пак иконок для твоих проектов.) Архив прикрепил. Внутри все нужные файлы их можно перетащить в программу, которой ты пользуешься.
Как я стал внештатным "бесплатным" работником gosuslugi.ru
Обычно такие посты не встречают аплодисментами. В этой истории нет ничего прикольного и смешного. Так что если уже не понравилось, то не читайте. Просто история о том как я в очередной раз наткнулся на кривой интерфейс одной из форм услуг на сайте gosuslugi, описал техподдержке что плохого в интерфейсе и предложил им свое решение.
Дело в том, что это я делаю не в первый раз. И знаете что, работает! Техподдержка рапортует мне, что их сайт разработан согласно такому-то и такому доку, а потом правит все постепенно в соответствии с моими предложениями. Только вот не платят мне за то, что я тут тестирую на себе все их услуги.
За время тесного сотрудничества, у меня сложилось такое впечатление, что в support сидит всего один человек, который и на письма по части техподдержки отвечает и сайт правит и с документами/нормативами всякими разбирается. Короче, такой, мастер на все руки. Как я это понял? Человек на другом конце всегда в теме, понимает о чем говорю, ссылается на документы на основании которых что-то разрабатывал ось, говорит кто дал им эти документы.и самое банальное - делает одни и те же опечатки/ошибки.
Но к чему это я. Это так. чтобы читатель понял, что их саппорт рассматривает предложения и вносит изменения для улучшения и совершенствования качества оказываемых услуг!
Итак, все началось с того, что нужно было оформить приглашение на вьезд иностранного гражданина в РФ. Сделать это можно, заполнив анкету, через gosuslugi.ru . Потом нужно привезти документы в МФЦ к которому ты приписан. Вроде все просто.
Но есть одно Но! Дело в том, что иногда попадаются формы, которые фиг заполнить. Все вроде верно, но форма выдаёт много слов "ошибка" и не говорит в чем именно твоя ошибка. Это была одна из таких форм. Как же меня запарила вот эта вот работа внештатным сотрудником/тестером сайта gosuslugi.
Итак, на одном из шагов форма выдало это:
Это форма со датами работы/учёбы.
Где-то при заполнении документов я прочитал, что при вводе ложных данных мне светит какая-то ответственность.
Как ни пытался ввести даты, ничего не помогало. Саппорт и их горячая линия помощи помочь не могли. Ибо никто не заикался о том, что нельзя вводить данные "внахлест", пока один из сотрудников не намекнул мне на это.
То есть получается, что учиться и работать одновременно человек не может! И работать на двух работах человек не может тоже.
Ну, теперь-то все просто, но вы прикиньте, у меня в голове и мысли не было, что данные вводятся именно последовательно. В общем ввёл я им данные.