9 примеров актуальных трендов веб-дизайна на 2018 год. Идеи для сайта 2018
65 Трендов Веб-дизайна в 2018 году. Топовые советы от профи
В 2017 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2018.
Проект: Show Go Poster Collection 2018 / Автор: ∆ Studio—JQ ∆
Проект: Daily Posters / Автор: Magdiel Lopez
Последние годы ознаменовались возвращением градиентов. Ожидается, что они снова войдут в тренды веб дизайна, претерпев изменения в 2018 году: в палитру добавятся насыщенные цвета в сочетании с разнообразием текстур. Градиенты в обновленной версии будут использовать двухцветные эффекты.
Проект: Magic.co / Автор: Ludmila Schevenko
Проект: Electric Objects / Автор: Rose Pilkington
Проект: Gradient Studies / Автор: Evgeniya Righini-Brand
В этом году главными цветами Пантона стали несколько ярких оттенков и ультрафиолет. Оттенки лавандового, лилового и сиреневого также сохраняют популярность. Ультрафиолет — это «оттенок фиолетового с синей базой, пробуждающий внимание и способности» и мы его обожаем! Именитые бренды уже начали применять фиолетовый для своей айдентики.
Проект: Pantone Color of the Year 2018 | Ultra Violet 18-3838 / Автор: ∆ Studio—JQ ∆
Проект: Party Casino Rebrand / Автор: PartyCasino Creative Team
«Меньше значит больше» — бессменный тренд. Простота подразумевает аккуратную страницу со светлым фоном в лучших традициях минимализма. Пространство — бог: при его правильном использовании можно получить многофункциональный дизайн.
Проект: Creative case / Автор: Nikita Mahaev
Проект: A propos du cancer / Автор: Extra
Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.
Проект: DIA / Автор: DIA
В 2018 году имеет смысл немного оживить традиционный плоский дизайн: добавление теней поможет сделать элементы более объемными, сохранив основные концепции минимализма, которые сделали плоский дизайн популярным. Пространство и объем — элементы новой концепции глубины.
Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida
Проект: Flyknit Lunar 3 / Автор: Callum Notman
Проект: Made You Look👁 255 | Live a little more / Автор: STUDIOJQ
Использование геометрических элементов, таких как многоугольники (треугольники, квадраты, пятиугольники) и кривые (окружность или эллипс) сделает ваш проект запоминающимся.
Проект: Nike Le Quartier / Автор: Atelier Irradié
Проект: France Colombia cultural season Brand design / Автор: Graphéine
Современные фотосессии и брендинговые кампании стану более дерзкими и экспериментальными, обратившись к искусным дизайнерским приемам. Созданный на основе бумажных зарисовок или 3D визуализации, такой дизайн совершенно точно будет выделяться и сохранится в памяти.
Проект: Aizone / Автор: Sagmeister&Walsh
Проект: Monkifesto / Автор: Snask
Проект: Nike AMD Revolution / Автор: Happy Finish
Дуплекс (репродукция изображения с использованием полутонов двух ведущих цветов) имеет все шансы попасть в ведущие тренды веб дизайна в этом году. Эта техника не является новой — она появилась несколько десятилетий назад, но благодаря Spotify вновь обрела популярность.
Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira
Источник: Spotify
Брутализм — грубая концепция, рассчитанная на захват внимания. Брутализм применяется в дизайне с 50-х годов прошлого века, в основном для оформления плакатов и афиш (направление возникло в архитектуре 40-х и стало трендом). Концепция снова востребована, ее можно встретить во всех сферах дизайна. Направление призвано шокировать аудиторию прямолинейным подходом, громоздкой типографикой и неизящными дизайнерскими техниками.
Проект: DoD Cyber Guide / Автор: Marçal Prats
Проект: Power A political party / Автор: Bruce Vansteenwinkel
Веб-сайты, логотипы, рекламные видео товаров и услуг — графика движения используется везде. Один из ведущих трендов графики движения — незаметные переходы, которые помогают потребителю лучше понять продукт. Графика движения присутствует и в типографике: от бросающихся в глаза заголовков на слайдерах до анимации на логотипе.
В 2018 очень вероятно возвращение в тренды синемаграфики (это статичные картинки с единичными движущимися элементами, например, изображение чашки, из которой с анимацией поднимается пар). Значимые элементы не должны быть неподвижными!
Проект: RED / Автор: Kevin Hou
Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck
Проект: Strong Women / Автор: Andreea Robescu
Генеративный дизайн уже несколько лет используется при разработке айдентики. За счет смешения цвета и формы этот прием позволяет добиться совершенно уникальной айдентики и повысить узнаваемость бренда.
Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio
Проект: Sydney School of Entrepreneurship / Автор: For The People
Проект: Archdiploma Dynamic Identity / Автор: Process
Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?
Их старые игрушки и сомнительные с точки зрения сегодняшней моды наряды родителей послужили вдохновением для возрождения яркого, красочного тренда, дополненного рядом современных веяний.
Проект: Yes To All / Автор: Nick Liefhebber
Проект: LOGOFOLIO 2017 / Автор: 268 Estúdio Design
Проект: 80’s inspired Pattern / Автор: Rahul Das
Персонализация бренда начинается с дизайна. Нахождение языка бренда посредством рисунков и иллюстраций превращает любой сайт в уникальную визитную карточку, которая будет транслировать голос бренда с самого запуска.
Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes
Проект: Illustrations for Koypo Industries / Автор: Milo Themes
Проект: Lifecycle / Автор: Paperpillar Studio
Эклектичный тренд на 2018 год сочетает пользовательские иллюстрации с фотографией. Этот метод дает уникальный и очень современный вид для любого проекта. Добавление рисованных элементов в обычную фотографию может сделать любую фотографию особенной, даже если вы используете ее на модной фотографии или плакате.
Проект: Magazine covers / Автор: Andreea Robescu
Проект: Insects Love / Автор: Andreea Robescu
Фотостоки тоже подвержены влиянию трендов. В этом году будут цениться реальные, честные фотоснимки. Многие бренды используют уникальные фото, снятые в движении и без постановки. Фотография становится более искренней и напоминает моментальные снимки, сделанные в расслабленной и естественной обстановке.
Изометрическое проектирование является способом художественного представления объемных объектов в плоскости. До того, как дизайнеры обнаружили этот прием, он использовался большей частью для составления технических и инженерных чертежей. Изометрический дизайн совершает масштабное восхождение в фотографии, иллюстрировании, 3D графике и иконографике. Можно с уверенностью сказать, что в 2018 году он будет востребован во многих креативных проектах.
Проект: Ultraviolet Break of Day / Автор: Field.io
Проект: Abstractions Vol.1 / Автор: Mohamed Samir
Проект: Isometric House / Автор: Angela Chan
Создавать 3D объекты и помещать их в 2D проекты стало очень модно. Это сочетание дает уникальную внешнюю эстетику, соединяя глубину и плоскость. Технику можно применить в разных направлениях дизайна: от создания логотипов до веб-сайтов и рекламного видео. Конечный результат представляет собой сложную визуальную презентацию, которую невозможно забыть.
Проект: Daily Posters / Автор: Baugasm
За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.
Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.
Несмотря на отсутствие контраста возникает натуральный эффект объема, и мы видим объект, реалистично выступающий из фона. Этот магический эффект останется популярным в 2018 году.
Проект: Magrela Popcorn / Автор: Hugo Aranha
Проект: Amazonia Beverages / Автор: Hugo Aranha
Проект: Nespresso Expertise / Автор: JVG ™
Нарисованные вручную картинки или даже просто отдельные элементы добавляют бренду уникальности. Картинки «от руки» не требуют выверенности линий и могут использовать грубые штрихи, за счет чего композиция получается более естественной.
Проект: Toasted Pets! / Автор: Brosmind ®
Проект: Awake Festival Proposal / Автор: Milo Themes
Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan
Иллюстрация и фотография, типографика и рисунки, градиенты с жирным шрифтом, дуплекс и яркие цвета — сочетайте 2, 3 или даже больше трендов 2018 года, чтобы получить эклектичный и запоминающийся дизайн.
Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly
В мире «отзывчивого» дизайна адаптация логотипа под любое устройство крайне важна. По-настоящему адаптивный логотип не просто уменьшается на странице, а претерпевает дополнительные изменения и подстраивается под окружающий контекст.
Адаптация логотипа стала топовой задачей для дизайнеров: бренд должен быть эффектно представлен вне зависимости от пространства и измерений. Бросая вызов дизайнерам, адаптивные логотипы становятся маст-хевом в 2018 году.
Проект: Responsive Logos / Автор: Joe Harrison
Автор: Design Studio
Логотипы с анимацией используются уже некоторое время, но сегодня их можно увидеть практически на любом сайте. Анимированные лого способны отобразить историю бренда и увеличить конверсию за счет хорошей узнаваемости.
Проект: Type With Pride Gilbert font / Автор: Fontself Team
Проект: Logo Visual identity / Автор: Mariusz Mitkow
Красочные лого с забавными элементами, анимацией и кастомными рисунками — значимый тренд 2018 года. Бренды хотят создать позитивный посыл потребителю, а развлекательный подход этому очень способствует.
Проекты: Axel Flores, Vladimir Lifanov, Silvestri Thierry, Vadim Carazan, Onrepeat Studio, Serafim Mendes
Негативное пространство остается горячим трендом в дизайне. Этот тренд продолжает потрясать основы веб дизайна, хотя активно используется уже некоторое время. Ранее дизайнеры обращались к негативному пространству для создания минималистского стиля, новшество этого года — наполнение свободного пространства яркими цветами, геометрическими фигурами и узорами.
Проекты: SeisTrece Studio , Vadim Carazan, Quim Marin, Bureau Rabensteiner, Andrei Traista
Оформление логотипа едва заметным кастомным узором делает громкое заявление о бренде. Мелкие геометрические элементы добавляют логотипу разносторонности и оригинальности, поэтому мы определенно увидим этот прием в 2018 году.
Проекты: islam biko , Quim Marin, Silvestri Thierry, Vadim Carazan
Монограммы никогда не исчезнут в сфере дизайне логотипа. Это способ создать стабильность, показать качество и традиции в бренде. Монограммы также могут быть созданы с использованием более современного подхода, смешивая некоторые современные тренды с этого года как яркие цвета, дуплекс или геометрические узоры.
Проекты: Milo Themes, Romain Billaud
Градиенты — один из главных трендов, унаследованных от 2016-2017 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?
Проекты: MICHAEL SPITZ, Nicholas Slater, Jeroen van Eerden, Vadim Carazan
В связи с восхождением тренда дуплекс эффект наложения элементов друг на друга невероятно популярен в дизайне логотипов. Взгляните на нашу подборку.
Проекты: CaveLantern, Fontself Team, Rosie Manning
Ни для кого не новость, что мобильный трафик превышает десктопный. Веб дизайн 2018 года учитывает значимость мобильной версии динамических иконок, меню и подменю.
Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .
Они повсюду. Каждый раз, когда вы лайкаете что-то на facebook или пролистываете контент в мобильном приложении, вы участвуете в микровзаимодействиях. И они неплохо работают, учитывая, что их цель — активность пользователя и динамичный UX.
Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2018 году.
Элементы со встроенной анимацией ненавязчиво помогают пользователю в процессе просмотра сайта. Они скрашивают ожидание полной загрузки контента и проявляются при взаимодействии с элементами и процессами на странице, к примеру, при скроллинге или наведении фокуса на определенный блок.
Присутствие анимированных персонажей на странице помогает установить контакт с пользователем, расширяя привычное взаимодействие с сайтом.
Проект: inturn website / Автор: INTURN
Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.
Проект: Awwwards Conference / Автор: Adoratorio
Некоторые дизайнеры считают, что традиционная «сетка» раскладки ограничивает их креативность, поэтому стремятся изменить правила и высвободить свою творческую энергию. «Сетка» с наложением картинок и текста друг на друга способна создать уникальный экспериментальный дизайн.
Проект: The Refugee Nation Web Design Branding / Автор: Justin Au
Проект: Ueno Concepts / Автор: Ben Mingo
Разбивка страницы на части позволяет разделить контент семантически, например, изолировав текст от картинок или расположив информацию по иерархии. В 2018 году, когда объем информации продолжает расти, никто не хочет пробираться через нагромождение контента. Разбивка станет для дизайнеров тем волшебным инструментом, который поможет вместить все, не потеряв в UX и эстетике.
Проект: Product Landing Page UI / Автор: Dinesh Shrestha
Проект: Design Thinking / Автор: Radowan Nakif Rehan
Главный тренд, который признает современный веб дизайн 2018 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.
Проект: Atacac 2017 Yearbook
На протяжении последних лет в дизайне преобладали прямые углы и остроконечные геометрические фигуры. В последние месяцы их сместили плавные линии и округлые формы. В сочетании с сочными цветами и использованием слоев этот тренд укрепляет свои позиции.
Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow
Проект: Landing page project design / Автор: Mariusz Mitkow
«Заставь меня читать» — скрытое обращение пользователя к любому веб дизайнеру. Фоны с движущимися элементами решают эту задачу, притягивая взгляд, но не отвлекая внимание от текста. К тому же они не вызывают проблем при загрузке в отличие от фонов из видео.
Едва уловимое движение текстуры, легкая анимация, эффект вплывающих пузырьков — все они отлично впишутся в веб дизайн сайта, цель которого — понравиться пользователю. Даже в 2018 году.
Проект: Wibicom / Автор: Wibicom Agency
В начале 2000-х будущее виделось похожим на показанное в «Матрице»: бегущие по экрану цифры, технологии, робототехника, пульсирующий свет.
Сценарий утратил свою привлекательность, когда стало понятно, насколько далеко фильм отошел от реальности, которая оказалась намного менее футуристичной. Однако благодаря Глубокому Анализу и Big Data мы наблюдаем возвращение робототехнических трендов: футуристические орнаменты найдут применение и в 2018.
Проект: Crown Tech / Автор: Jan Wolinger
Проект: SpaceShip / Автор: Arif Rachman Hakim
Проект: Data Visualization Concept / Автор: Mario Šimić
В то время, как остальное пространство страницы наполняется цветом и градиентами, иконки продолжают следовать «моно» правилу, ведь их главная цель — оставаться читабельными. Небольшое заполнение вариациями одного цвета сделает иконку визуально привлекательной, а не только информативной, и ловко впишет ее в общий дизайн.
Проект: Icon Design / Автор: Eaton
Части графических иконок будут закрашиваться цветом. Это будет не полное заполнение, а лишь легкое прикосновение цвета, оставляющее пробелы, словно иконка небрежно нарисована от руки. Заливка, которая не перегружает иконку и сохраняет ее читабельной.
Проект: Alfred icons / Автор: Andrea O
Проект: Icons / Автор: Alisa_
Скроллинг с Parallax настолько вездесущ, что невозможно не принимать его во внимание. Когда скроллинг может управлять скоростью анимации, единственный лимит дизайнера — воображение.
Parallax — бессменный тренд веб-дизайна, продолжающий делать сайты оригинальными и запоминающимися. Создавая 3D эффект между движущимися передним планом и фоном, Parallax придает неуловимую глубину странице и плавность пролистывания контенту.
Проект: Dex Multi-Layer Parallax / Автор: Milo Themes
«Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2018 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.
Эквилибриум, основанный на прямоугольных формах и базовых цветах, с идеальным с точки зрения удобства пользователя размещением элементов.
Проект: Mondrian / Автор: Stugbear
Проект: Guernica / Автор: Shota
3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.
Проект: Atypical / Автор: Pawel Nolbert
Проект: Alphabet Project / Автор: Serafim Mendes
Проект: RE NEON vI / Автор: Omar. Aqil
Жирная типографика была большой трендом в последние годы, и она определенно останется. В 2018 году мы увидим гораздо более смелую типографику в сочетании с яркими цветами. Поэтому помните, что если вы хотите сделать сильное заявление, смелая типографика это отличный метод.
Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes
Проект: TEDxGroningen / Автор: Rudmer van Hulzen
На протяжении нескольких лет в типографике преобладали sans-serif шрифты, но сейчас наблюдается возвращение serif. Ниже представле
ichigarev.ru
Подборка красивых сайтов за 2018 год
Привет, друзья! В этот морозный вечерок представляю вашему вниманию не большую подборку красивых сайтов за 2018 год, которые вас 100% вдохновят! Приятного просмотра!
Так же рекомендую:
beloweb.ru
9 примеров актуальных трендов веб-дизайна на 2018 год
Веб-дизайн как цифровая среда гораздо более подвержен изменениям в технологиях, чем его традиционные печатные предшественники. Что удивительно, так это то, как дизайнеры продолжают справляться с увеличивающимся числом технически сложных задач и по-прежнему создают удобные для пользователя, понятные и инновационные, совместимые с корпоративным стилем, адаптируемые к каждому мыслимому и немыслимому устройству и просто красивые сайты.
2017 год ознаменовался большим количеством достижений, включая более широкое использование мобильных устройств, наконец обогнавших стационарные компьютеры по объему загрузки и просмотра контента. Это означает, что в 2018-м мы будем эксплуатировать мобильный функционал как никогда ранее, а десктопным устройствам придется эволюционировать, чтобы оставаться актуальными. Имея все это в виду, взглянем на заметные тенденции в области веб-дизайна, которые обещают стать повсеместными.
Содержание статьи
1. Падающие тени и глубина2. Яркие, насыщенные цветовые схемы3. Кастомные иллюстрации4. Фоны с движущимися частями5. Mobile first6. Крупные жирные шрифты7. Асимметрия и фрагментарные лейауты8. Интегрированная анимация9. Динамические градиентыТренды-2018
1. Падающие тени и глубина
Использование теней не ново, почему же мы его упомянули? Несмотря на то что данный прием уже давно является традиционным в дизайне, сегодня, благодаря прогрессу браузеров, мы видим ранее не существовавшие интересные вариации. Сетки (Grids) и параллакс-раскладки (Parallax Layouts) позволяют «играть» с тенями в еще более широком спектре, создавая иллюзию мира, существующего за экраном. Это непосредственная реакция на плоский дизайн (Flat Design) — тренд, популярный последние несколько лет.
Тени создают на удивление универсальный эффект, не только поднимающий эстетику страницы на более высокий уровень, но также содействующий плавности пользовательского опыта (User Experience, UX) — благодаря расставленным акцентам. Например, использование мягких, деликатных теней в выделенном состоянии (Hover State) для обозначения ссылки — это не новая идея, но их сочетание с яркими цветовыми градиентами (подробнее об этом ниже), как в вышеприведенных примерах, усиливает трехмерный эффект теней.
2. Яркие, насыщенные цветовые схемы
2018-й — это, безусловно, год суперярких цветов. В то время как в прошлом многие бренды и дизайнеры придерживались «веб-безопасных» цветов, сегодня многие из них становятся смелее в своем подходе и окрашивают заголовки в сверхнасыщенные яркие оттенки, а также сочетают с оформлением надписей в виде косых линий и углов (вместо простых горизонтальных форм). Частично это связано с технологически более продвинутыми мониторами и экранами устройств, способными воспроизводить более насыщенные краски. Яркие и даже конфликтующие цвета могут быть полезны для новых брендов, надеющихся мгновенно привлечь внимание посетителей, но также идеально подходят для компаний, желающих отделить себя от всего «веб-безопасного» и традиционного.
Читайте также: Яркие цветовые решения для приложений и сайтов3. Кастомные иллюстрации
Иллюстрации — это чудесный универсальный метод создания игривых, веселых и дружелюбных картинок, добавляющих сайту элемент забавности. Опытные художники придумывают иллюстрации, полные личностного подтекста и учитывающие специфику посыла бренда, а это именно то, к чему стремятся все на современных высококонкурентных рынках.
Данный тренд идеален для бизнеса, ассоциирующегося с весельем и энергичностью, но он также помогает «серьезным» компаниям стать ближе к клиентам.
Если вы хотите попробовать создать лендинг в таком стиле, но у вас пока нет сильного дизайнера, вы можете воспользоваться готовыми шаблонами или секциями в конструкторе LPgenerator:
Также вы всегда можете заказать индивидуальный лендинг у наших дизайнеров. Посмотреть примеры готовых работ можно здесь.
4. Фоны с движущимися частями
Фоны с движущимися частями (Particle Backgrounds) служат прекрасным решением для сайтов, столкнувшихся с проблемой медленной загрузки из-за инкорпорированного видео. Анимация же, о которой идет речь, представляет собой легкий, быстро загружающийся javascript, создающий естественное движение на бэкграунде.
Говорят, изображение красноречивее тысячи слов, и, без сомнения, это так и есть. К тому же фоны с движущимися частями притягивают взгляд, позволяя брендам за считанные секунды оставлять о себе запоминающееся впечатление. Двигающаяся графика становится все более популярной в социальных сетях, поскольку она приводит заинтересовавшиеся лиды на целевые страницы.
Читайте также: 75 инструментов веб-анимации, которые вам нужно испробовать5. Mobile first
Мобильный дизайн приложения для составления и отслеживания диеты
Дизайн приложения для выращивания растений
Как уже упоминалось, мобильный мир начинает доминировать над десктопным. Почти каждый из нас заходит в магазины и делает заказы на своем смартфоне. Когда-то это был громоздкий процесс, который пользователи не спешили так быстро принять. Дизайнеры были озабочены вопросом: как обеспечить наличие нормального меню, подменю и подподменю на маленьком экране?
Но теперь мобильный дизайн стал более зрелым. Появился разворачивающийся гамбургер, и стало возможным сделать меню маленьким. Возможно, вам пришлось отказаться от больших красивых фотографий в мобильной версии, но зато иконки стали намного более экономичны с точки зрения пространства, плюс они сейчас настолько распространены, что пользователи понимают значение почти каждой из них. UX-проблемы стало легче выявлять и исправлять с помощью микровзаимодействий, и вы получаете немедленную обратную связь относительно поведения ваших пользователей.
6. Крупные жирные шрифты
Типографика (Typography) всегда была мощным визуальным инструментом, подчеркивающим индивидуальность, пробуждающим эмоции, задающим тон на сайте и передающим при этом важную информацию. В наши дни, когда революционное развитие экранов на девайсах (в частности, их разрешения) обеспечивает более четкую картинку и облегчает чтение, можно ожидать увеличение частоты применения кастомных брендовых шрифтов. Все браузеры, за исключением Internet Explorer, поддерживают ручное начертание шрифтов, обеспеченное CSS для веб-браузеров. Тренд обращения к крупным буквам и контрастным шрифтам sans serif и serif в заголовках способствует созданию динамичных параллелей, улучшению UX и, что самое главное, удержанию читателей на сайте.
Для веб-страниц хедеры являются ключевыми SEO-элементами: они помогают группировать информацию для удобного просмотра. Заглядывая в 2018-й, можно предположить, что дизайнеры воспользуются преимуществами больших сильных заголовков, оформленных креативными шрифтами.
Кстати, отныне вам больше не нужно открывать сервис Google Fonts для получения сторонних шрифтов, ведь теперь шрифты подключаются прямо из редактора лендингов LPgenerator.
Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Читайте также: Как размер шрифта влияет на UX и конверсию?7. Асимметрия и фрагментарные лейауты
Одним из самых заметных нововведений 2017 года стало появление асимметричных и нетрадиционных «фрагментарных» раскладок (Layouts), и данный тренд останется актуальным и в 2018. Привлекательность асимметричных лейаутов состоит в их уникальности, специфичности и в чем-то экспериментальности.
Несмотря на то что корпорации, производящие большое количество контента, по-прежнему склоняются к традиционным структурам в виде сетки, можно ожидать, что необычные раскладки будут теперь использоваться чаще, поскольку компании все больше стремятся к обеспечению уникального опыта, выделяющего их в остальной среде. Традиционные компании в целом не будут интересоваться данной эстетикой, но крупные бренды, готовые пойти на риск, будут ожидать от своих дизайнеров нестандартного мышления.
Читайте также: Лучшие из лучших: 28 оригинальных примеров лендингов за 2017 год8. Интегрированная анимация
По мере развития браузерных технологий все большее количество сайтов уходит от статических изображений и находит новые пути вовлечения пользователей, такие как анимация. В отличие от анимации отдельных частей фона, упомянутой ранее, меньшие по размеру анимационные фрагменты вовлекают зрителей посредством всего опыта страницы. Например, можно анимировать графику, доступную во время загрузки страницы, или интересно оформить выделенное состояние ссылки. Анимированные элементы также можно внедрить в скроллинг, навигацию или даже сделать их фокусной точкой всего сайта.
Анимация представляет собой замечательный инструмент включения пользователя в историю сайта, позволяющий им увидеть самих себя (и свое потенциальное будущее в качестве клиентов) в изображенных персонажах. Даже если анимация интересует вас исключительно в качестве абстрактного развлекательного визуального средства, она способна будет сделать из этого значимое для ваших посетителей взаимодействие.
Читайте также: Как легко и быстро создать GIF-анимацию?9. Динамические градиенты
Дизайн приложения Fire Works
Приложение для приверженцев ислама с напоминаниями о молитвах
За последние несколько лет плоский дизайн стал наиболее предпочитаемой тенденцией веб-дизайна, и реализовался он с помощью различных оттенков, но именно в 2018 градиенты обещают громкое возвращение на «сцену». Прошлые примеры градиентов встречались главным образом в виде легкого затенения, как бы предлагающего 3D-эффект (посмотрите на иконки Apple iOS).
Теперь градиенты становятся большими, навязчивыми и яркими. Наиболее популярной из последних реинкарнаций стал градиентный фильтр для фотографий — прекрасный способ сделать скучное изображение более интригующим. Простой градиентный фон также может стать идеальным решением в духе тренда, если у вас отсутствуют другие картинки.
Читайте также: Градиенты в веб-дизайне: как использовать?Тренды-2018
Яркие цвета, смелые градиенты и анимация… Следующий год обещает стать одним из самых любопытных и запоминающихся в истории веб-дизайна. Не терпится посмотреть, как дизайнеры будут все это претворять в жизнь и как они раздвинут границы. Ведь оставаться открытым трендам — то необходимое, что вы должны делать, если хотите обеспечить своих пользователей превосходным UX.
Продолжайте читать наш блог, следить за своими любимыми приложениями и веб-ресурсами и думать, какие из дизайн-приемов вы хотели бы видеть на своих лендингах. А реализовать их вам поможет наш конструктор.
Высоких вам конверсий!
По материалам: 99designs.com
08-12-2017
lpgenerator.ru
10 главных трендов веб-дизайна в 2018 году. Читайте на Cossa.ru
Мы в Super design & advertising следим за трендами в веб-дизайне и экспериментируем. Большинство из новых «примочек» полезны для бизнеса, кто бы что не говорил. Когда 2017 год готовится уступить права преемнику, самое время сделать предварительный прогноз.
Давать обещания за вещи, которые от тебя не зависят — дело неблагодарное. Тем не менее выделим десять ключевых направлений веб-дизайна будущего года. Список составлен на основе опыта нашей команды.
Плоский дизайн
В 2017 году дизайнеры и разработчики создавали чистые и простые сайты для лучшего отображения на смартфонах и планшетах. Тяжеловесные ресурсы отпугивают мобильную аудиторию. Трафик со смартфонов неуклонно растёт, вместе с ним меняется и отношение к веб-дизайну. Теперь сайт, адаптированный в первую очередь под мобильные устройства, не кажется прихотью. Тренд актуален и для России.
Согласно отчёту Mediascope, ежемесячная аудитория интернета в России по состоянию на октябрь 2016 – март 2017 года достигла 87 млн человек, что составляет 71% от всего населения страны. При этом 46% заходят в интернет со смартфонов.
Стань перформанс-маркетологом за 19 недель!
Перформанс-маркетинг — это комплексный маркетинг в диджитал-среде. Знакомые каждому маркетологу понятия тут приобретают новый потенциал, ведь в диджитал можно измерить буквально каждое движение!
Научиться перформанс-маркетингу — значит научиться мыслить точно измеряемыми категориями. Освоить инструменты, усиливающие вашу интуицию чёткими цифрами. Изучить тонкости оперативной аналитики.
Хотите успеха в интернет-продвижении — без перформанс-маркетинга вам не обойтись. Для его изучения Cossa рекомендует онлайн-курс курс Перформанс-маркетолог.
Старт занятий уже в ближайшее время!
Реклама
Чистый минималистский дизайн привлекателен для пользователей мобильных устройств и персональных компьютеров. С точки зрения SEO-оптимизации такие сайты предпочтительнее.
Плоский и реалистичный дизайны. Фото сайта pulldigital.com
Не подумайте, что плоский дизайн сводится к двум измерениям — это о минимализме и практичности. Относитесь к нему как к философии избавления от помех и сосредоточенности на важных элементах сайта. После медленных сайтов с их массивными конструкциями яркие цвета, чёткие края и открытые пространства воспринимаются как глоток свежего воздуха.
Минимализм и преобладание функции над формой не делают плоский дизайн скучным. Контрастные яркие краски, иллюстрации, простые образы и шрифты без засечек à la Apple — вместе они передают отличный пользовательский опыт, цепляют и удивляют.
Дизайн одного из блоков портала «Финансовая культура»
Плоский дизайн не делает ставку на фотографии, поэтому он легче для загрузки. Для администрации сайта это означает две крутые вещи:
- Ресурс быстро донесёт message до клиентов. Не важно как они зашли на сайт: с телефона или компьютера.
- Оптимизированные сайты привлекательней для поисковиков: Google, Bing и других.
Сайт с плоским дизайном с большей вероятностью окажется в хорошем положении поисковиков. Да и посетители склонны дольше оставаться на странице. Вот почему плоский дизайн стал популярным и останется таковым в 2018 году.
Выразительная типографика
Не остались ли веб-дизайнеры безоружными без своих фотографий и сложных конструкций? Нет, просто сменился ориентир. В типографике 2018 года одно слово стоит тысячи фотографий. Разберёмся с этим утверждением.
Некоторые возразят: «типографика» не звучит как интересный элемент дизайна. Какая разница, будет у вас в заголовке шрифт Gothic или Modern, с засечками или без?
Каждое решение в типографике способно донести мысли и вызвать ассоциации не хуже фотографии.
Сайт производителя винных напитков cirq говорит о верности традиций
Сайт tucano coffee вызывает ассоциации с южными странами
Вот почему компании готовы платить за развитие собственных шрифтов и делают их частью бренда. Intel и Airbnb вложили значительные ресурсы в создание уникальных шрифтов. В Facebook буква F — это логотип и важный элемент наравне с фирменными цветами.
Выразительная типографика и плоский дизайн создают мощные цепляющие макеты. Они захватят внимание читателя и удержат дольше, чем традиционный тяжеловесный веб-дизайн.
Живые логотипы и активируемая анимация
Современные браузеры прекрасно справляются с отображением анимации. Молодняк использует их для привлечения внимания или наоборот — отвлечения от важных вещей. Нас, помнящих скринсейвер с трубами, удивить сложно.
Современная анимация не требует много ресурсов, чтобы быть привлекательной. Интерактивная анимация, привлекающая участие читателя, приковывает внимание, интригует, демонстрирует продукт или услугу. Анимация хорошо запоминается, и при одном её виде клиент вспомнит ваш бренд.
У Galaxy S8 самый продвинутый в мире процессор – его транзисторы уменьшены до 10 нанометров: https://t.co/tqpjuln2Zm pic.twitter.com/vkeFtTjJSN
— Samsung Russia (@SamsungRu) 7 апреля 2017 г.Особняком стоят анимированные логотипы. Динамичный визуальный ряд удерживает внимание и делает сложные вещи понятными. По этой же причине так популярен видеоформат.
Анимированный логотип музея шведской истории в Стокгольме
Анимированный логотип расскажет историю бренда и компании лучше чем традиционный статичный. Логотип — это первое изображение с которым контактирует клиент. Лучше, если он передаст массу положительных эмоций как можно быстрее.
Интернет вещей
Вещи вокруг нас поумнели. Умный дом, умный автомобиль, умный город и даже умный телевизор. В 2018 году ожидаем увидеть сайты и приложения, взаимодействующие с «умниками». Уже существуют автоматические кормушки для домашних животных Animo. Кормить питомца удалённо можно с помощью приложения для устройств на iOS и Android. С помощью смартфона можно управлять системами умного дома «Трон»: регулировать температуру, включать и отключать сигнализацию и так далее. Подобные интерфейсы будут набирать популярность.
Фото с сайта throne.pro
Важность технологии понимают и в правительстве России. В нашей стране к 2022 году планируют создать национальную операционную систему для устройств интернета вещей.
Видео в виртуальной реальности
К концу 2017 года сложилось впечатление, что каждый уважающий себя сайт сделал видео-интро. Это чудесно. Потребители увидели людей, стоящих за услугой или продуктом. Параллельно развивались сервисы, упрощающие создание видеоконтента.
Виртуальная реальность (VR) с десяток лет назад воспринималась как научная фантастика, а теперь без неё сложно представить вечеринку. VR предстоит подружиться в веб-дизайном. С каждым днём создание видео с обзором на 360 градусов удешевляется и упрощается.
Виртуальная реальность шагает в народ. Государственный Эрмитаж создал ролик об истории музея в формате VR. Экскурсоводом мини фильма стал актёр Константин Хабенский. Отрывок выложен на всеобщее обозрение в сервис YouTube. Посмотрите и вы.
Чат-бот, искусственный интеллект и машинное обучение
Мы чаще общаемся с ботами. Вы наверняка делаете это, когда звоните мобильному оператору. Казалось, чтобы довести их до ума, понадобится много лет. Однако они становятся всё умнее и умнее благодаря улучшенному искусственному интеллекту (ИИ) и машинному обучению. По этой же причине Facebook так хорошо знает ваши предпочтения. Он использует данные геолокации, привычки и просматриваемую информацию, поэтому знает, какую новость предложить.
Ожидаем развития этой технологии в 2018 году, но уже в веб-технологиях. Представьте сайт, анализирующий поведение клиента и формирующий для него специальное предложение. Обслуживание клиентов через интернет становится быстрее и эффективнее благодаря умным системам. Держите их в уме.
Голосовой пользовательский интерфейс и поиск
Голосовой пользовательский интерфейс иногда упоминается как обработка естественного языка: проще говоря, это взаимодействие человека с компьютером в форме речи. Ну, вы понимаете, «Окей, Google. Где мой второй носок?». В сочетании с машинным обучением эта технология способна прогнозировать потребности до того, как человек закончит запрос.
Надеемся увидеть сайты с собственными голосами. Голосовой поиск также на подъёме. Убедитесь, что ваш веб-сайт имеет соответствующий модуль, ведь потребители склонны по-разному взаимодействовать с интерфейсом. Пользователь персонального компьютера наверняка воспользуется клавиатурой, а со смартфона проще продиктовать.
Бесшовное взаимодействие
Помните, раньше в социальной сети ВКонтакте приходилось перезагружать страницу, чтобы узнать, написал кто или нет? (Тогда вы должны и стену помнить, ставьте лайк, если хотите её вернуть). Позже добавили обновление в реальном времени. Вот это и называется бесшовное взаимодействие.
Первая версия социальной сети ВКонтакте. Фото группы wwweb
Внедрение чат-ботов и голосовых пользовательских интерфейсов сделали навигацию по сайту проще. Микровзаимодействия — ещё один элемент дизайна. Только недавно нельзя было оставить комментарий без заполнения формы на отдельной странице. Бесшовное взаимодействие возьмёт своё.
Безопасность
Какие последние новости про кибер-атаки вспомните? У нас в уме всплывают инциденты с WannaCry, Petya и вирусами-майнерами. Да и старый-добрый Троян из интернета никто не удалил. Безопасность завладевает умами, когда речь заходит о веб-дизайне и разработке. Google уже предпринял шаги и предупреждает пользователей о потенциально опасных сайтах. При создании сайта обязательно учтите безопасность персональных данных клиента. Обновляется ли сертификат безопасности?
Риск и вознаграждение
Смелее создавайте новые сайты и экспериментируйте с интерфейсом. Да, это риск. С другой стороны, в вашем распоряжении отличная команда и нужные инструменты. Будущее уже наступило, и это отличная возможность поразить клиентов нестандартными решениями.
Берлинский фонд «Топография террора» и Музей Варшавского восстания подготовили специальный промосайт, содержащий основную информацию о тех событиях. Команда ремесленников сделала бы младшего брата Википедии. Благо Фонду попались мастера. Скажите, удерживает ли внимание такой сайт?
Скриншот с сайта warsawrising.eu
Каким станет 2018 год? Это будет время творчества и смелых решений (впрочем, это не сюрприз). Какие-то идеи станут новым трендом, а другие останутся в тени. Игнорировать новые технологии — вот настоящее преступление. Дерзайте!
Читайте также:
Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.
www.cossa.ru
Тренды веб-дизайна в 2018 году
11 октября прошла лекция арт-директора студии Vintage Web Production Ольги Шевченко, посвященная трендам веб-дизайна и диджитала в 2018 году. Ольга является членом жюри Awwwards и каждый день просматривает сотни новых сайтов, разработанных агентствами и дизайнерами со всего мира. Это позволяет ей отслеживать новинки и тенденции веб-разработки и дизайна. Мы записали главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке.
Итоги 2017
Думаю перед тем, как начать анализировать 2018 год, следует вспомнить, что нового в вебе появилось в 2017. Украина активно развивается, но все еще отстает от ключевых игроков рынка и по уровню технологий, и по качеству дизайна. Поэтому если нам в следующем году удастся внедрить хотя бы часть трендовых направлений мирового диджитала из 2017 года, это будет уже огромным успехом.
Большое меню
Это было трендом. Для многих это must have. А сейчас уже есть те, кто считает это моветоном. После появления бургеров все начали прятать меню под одну кнопку, что вызывало много споров. Но эти три полоски были самой красной зоной на тепловой карте использования сайта, которую мы составили после исследования поведения пользователей. Но в итоге после клика на бургер на странице появлялась маленькая плашка с разделами сайта, которую прятать даже не было смысла.
Поэтому в 2017 появилось большое меню, на которое выделяется не плашка сбоку, а целый экран. Принцип таков: если вы что-то прячете, то сделайте так, чтобы оно красиво находилось и открывалось. Чтобы после того, как пользователь нашел меню, он был более довольным, чем ожидал.
Большое меню. Сайт radioaktivefilm.com
Сейчас большое меню стало фетишем мировых студий, как раньше была страница 404. Дизайнеры начали придумывать в нем композицию элементов, добавлять ховеры и дополнительную информацию. Оно не только добавляет эстетики сайту, но и за счет размеров расширяет функционал.
Fashion-эффекты
Глитч, морфинг, геометрия, взрыв цвета, минимализм. Мы с Дашей Шаполовалой, идеологом Mercedez-Benz Fashion Week в Киеве, обсуждали тенденции в моде, а я рассказывала о новых веяниях в вебе. И мы нашли общие черты в совершенно разных сферах.
Сайт Camper удачно проиллюстрировал использование морфинга, потому что они исходили из задач и специфики бренда. Эффект, когда человек перетекает в ботинок, создает ассоциацию образа с одеждой. «Ага, я похож на вот этого парня. Он носит вот такие ботинки. Скорей всего, они и мне подойдут». Таким образом, вы не только делаете сайт более живым, но и создаете смысловую связку между элементами. Раньше морфинг было сложно сделать, но сейчас в библиотеках есть готовые скрипты.
Пример морфинга. Сайт camper.com
Касательно ломаной геометрии. Ее использовал Nike в своем каталоге при просмотре моделей обуви. Если провести параллели, то можно заметить, что похожие приемы использовались на неделе высокой моды. Ассиметричность форм, наслоение разных структур, мерцание тканей. Отсюда название — fashion-эффекты.
Но UI-дизайнерам советую отработать навыки режиссуры, чтобы знать, где добавить «вау», где немного успокоиться. Перенасыщение такими эффектами делает сайт тяжелым и утомляет.
Brand in lifestyle
Бренды переходят в другое, живое взаимодействие с аудиторией. Дизайн должен приспосабливаться. Раньше для создания хорошего каталога достаточно было качественного фотопродакшена, пост-продакшена. Отфотографировали, разместили, хватит. Но уже недостаточно просто разместить хорошее видео на лендинге. Нужно все ассоциировать с эмоциями. Это заявление отлично подтверждается успехом продаж через Instagram. Вы видите красивое пальто на девушке и влюбляетесь. Вам кажется, что вы покупаете пальто. На самом деле, вы покупаете этот образ девушки в нем.
Сейчас под коллекции одежды запускаются отдельные небольшие промо-сайты. Пример с Lacoste. Тональность кампании — легкость, воздушность. Это настроение и передается визуально. Вы буквально парируете между предметами одежды. Естественно, потом вы перейдете на понравившуюся модель, и вас переводят на классический e-commerce. Но притягивает вас не он, а эта ассоциация легкости в одежде и в стиле жизни.
Скриншот с сайта Lacoste.
Другой пример. Adidas запустил новую коллекцию. Они сразу начали ассоциироваться с новыми паттернами и цветами. Но самое крутое – скролл вниз. Комбинация рваной верстки, видео и фото. Акцент уходит с обуви на людей и их ощущения в одежде. И если сами кроссовки вам, может, и не понравились вначале, то после того, как вы увидите их в движении, динамике, почувствуете эмоционально, возможно, и захотите.
Скриншоты с сайта Adidas.
Storytelling
Был, есть и будет. Правда, меняет форму.
В 2017 году было очень много видео сайтов. Со сценариями, актерами. То есть придумалась допмеханика. Но видео тяжелое, дорого делается и долго грузится. Начали придумывать обходные пути.
Сайт Bear Grylls. Да, по сути история рассказывается сплошным сухим текстом. Но раньше подача кейсов на сайте была классической, по сетке, с имиджевой фоткой, коротким описанием и переходом на другую страницу. Здесь текст идет сплошняком, без сетки. Если вас цепляет месседж, вы кликаете на фразу и переходите по ссылке. Привычные 3-4 колонки уже надоели. Правда, и такой подход применим не везде, но чтобы выделиться, можно попробовать.
Новый вариант подачи текста на сайте Bear Grylls
Content is a king
Still. Сейчас мало чему удивляешься на Awwwards, потому что сайты по сути сделаны все на одних технологиях. У кого-то лучше оптимизация, у кого-то вес. Но контент – это то, на чем нельзя экономить, то, что отличает ваш сайт. Например, если вначале вы покажете клиенту сайт с крутыми фотками с фотобанков, а потом клиент внесет имеющиеся далекие от идеала изображения, все поменяется.
Weathsimple — инвестиционная компания, которая рассказывает о своих услугах и предлагает пакеты. У ребят был просто текст. Но они отрисовали под него 3D-иллюстрацию, которую еще можно заанимировать. Придумали персонажа – монетку. По скроллу она переходит на другие экраны и с ней что-то происходит. Они разбавляют текст диаграммой, таблицами. А будь это стоковое фото, возможно, не так интересно было бы читать. У них месседжи дополнены графикой , чтобы их было легче воспринимать. В конце — отличный прием. Монетка падает, будто бы в ваш карман. У вас подсознательно откладывается «Вы становитесь богаче». Чудесный сайт.
Пример того, как «контент решает» на сайте weathsimple.com
Да, внутри разбираться со всеми пакетами не так просто, нужно вникать. Но главная страница выступает имиджевой. Ее цель — зацепить посетителя, заставить его заглянуть внутрь.
3D
Я считаю, что front-end сейчас самая быстро развивающаяся сфера. Поэтому если у вас есть друг фронт-ендер, который шарит все технологии и которому не лень копаться в новинках каждый день, берегите его. Разбираться во всей сфере невозможно. Если дизайнеры еще могут освоить максимум тулзов, то front-end обновляется каждый месяц. 3D-шники — это люди, которых нужно забирать к себе, работать и никому не отдавать.
Загрузки видео на сайте нужно долго ждать. Его нужно правильно пережать. И все равно есть допустимый минимум, ниже которого сделать не получится.
А в 3D загрузил один раз — и гуляешь свободно по сайту. В нем можно играться с текстурами. Для десктопной версии можно показывать дизайн, насыщенный эффектами, а для мобильной делать версию попроще.
A world with no heros. Сайт-игра. Бегаешь по Боливии, играешь в наркокартель. У него отдельные маркетинговые цели, поговорим об исполнении. Все очень детализировано. Если бы сделали в виде видео, получилось бы очень дорого. А так вы взяли 3D-шника, который за месяц выполнил работу. Проще, дешевле, меньше весит. Вы ходите по сайту, исполняете миссию, вам приходят сообщения о передвижениях – все красиво.
На мобильной версии, правда, нет такой детализации, но тоже работает. И это не игра, это сайт уже. Главное, что грузится за один раз. Сейчас загрузки страницы никто не будет ждать 30 секунд. 3-5 максимум. И дизайнеру нужно помнить об этом, выбирая изображения, формат видео, эффекты и прочее.
WEBGL, Unity
Не факт, что быстро дойдет до Украины. Все же у нас не тот уровень разработчиков и технологий пока.
Но хороший пример использования технологии показан на промо-сайте для фильма «Человек швейцарский нож». Фильм немного артхаусный. Но суть в том, что человек оказался на необитаемом острове и его единственной «компанией» становится… труп. Который иногда издает звуки, странно двигается и выполняет рэндомные штуки. В общем, напихали персонажа какими-то мистическими особенностями.
Ребята Watson/DG, словили свою нишу. Они делают сайты для фильмов, вышедших в прокат. Такой себе пост-продакшн. Для этого фильма они сделали сайт с персонажем этого трупа. Его можно тоже дергать, таскать, куда хочется, двигать. Потом выпадают сообщения: «Набери слово, он начнется взрываться». Это тоже не игра. Это сайт. И это начало 2017 года.
Промо-сайт сериала «Человек-швейцарский нож»
VR&AR
В 3D можно сделать круто и быстро. Но все рендерится неделю. То есть, все готово, у вас одна правка – + 1неделя. Мы начали пробовать VR. Год назад это было очень сложно. Для приложения нужно было подтверждение на App Store и Google Player и еще много нюансов. Но с марта 2017 этого уже не надо делать. Можно просто зайти по ссылке на сайт и все.
Мы разработали для клиента из Майями VR-игрушку для сайта. Аудитория — миллионеры. Они не пользуются компьютерами. Вот вообще. Только мобильный телефон, максимум — планшет. Мы подумали, что может заинтересовать в вебе скучающего миллионера, который приехал на отдых с молодой женой? И создали игрушку — VR теннис. Можно поиграть самому или подключить партнера с очками. И это все через сайт, а не приложение. Есть нюансы с браузером, но все работает.
Konterball – пример VR-игры, построенной на веб-платформе
И это доступно только для мобильных версий. Вообще, мобильные сайты — отдельный тренд. Если раньше у сайта могло не быть мобильной версии, то сейчас есть сайты без десктопной.
Украина на Awwwards
- Украина на период середины сентября подала 39 номинантов.
- Получили 25 honorable mentions — это что-то вроде приза зрительских симпатий. Тоже считается авторитетной наградой в оценке сайта.
- 4 награды “Site of the day”. И это хорошо, потому что в прошлом году было 2.
- Также у нас увеличилось количество судей от Украины — их уже 4.
2018 год
Интерактивный скролл
Курсор у нас обозначается стрелкой. Она либо превращается в палец для кликания, могут появляться ховеры. Сейчас курсором может быть элемент. Под ним высвечивается переход на страницу. Под ним могут меняться элементы или вступать во взаимодействие с курсором.
Cайт Volcan — любимый пример. Ромб-курсор становится подсказкой, что тебя ожидает при нажатии. Присутствует элемент интерактива. В итоге ховер не нужен, его роль выполняет курсор.
Пример интерактивного скролла на сайте Volcano
Новая тема для баттлов UI/UX дизайнеров — насколько это удобно? Но если все грамотно продумать, может хорошо получится.
SVG маски
С их помощью можно сделать космические переходы. В разработке несложные, зато развязывают руки дизайнерами. На сайте Rich Brown используется крест в качестве перехода. Но это может быть любая форма.
Использование SVG-маски для дизайна перехода на сайте Rich Brown
Кто пользуется фотошопом, то там это можно сделать, просто вырезав маской дырку в слое. Либо наложением 6 квадратов. Мы для нашего клиента с помощью этой штуки сделали переход с экрана на экран. Открытие картинки из формы – тоже SVG маска. Но если посмотреть на макет, то он выглядит, как статическая картинка.
Canvas
Это уже сложно. Обязательно нужен человек с пониманием математических аспектов процесса. Некоторые вещи можно взять в библиотеках. Но В SVG нет синхронизации с курсором. А здесь есть.
Сайт Climachill от Adidas, к примеру.
Морфинг с буквой – это Canvas. Перелив градиентов — это Canvas. И это популярно уже несколько лет, но устареет не скоро. Потому что мало весит, и это 2D графика, которую сложно повторить. Подойдет тем, кто хочет много «вау» у себя на сайте.
3D+WEBGL
Направление будет развиваться. Когда вы делаете даже маленький, но качественный видеоролик на 1 минуту — это минимум 10 человек в команде. Когда в 3D — это 1 дизайнер. А webgl – это +1 разработчик. 3D может быть классическим, как на сайте Globekit. Выглядит фантастически, уникально. Хотя состоит из 6 слайдов всего.
Сайт Globekit
Но снова же: надо быть аккуратным с применением. Одного такого эффекта вполне хватит, чтобы сделать сайт ярким, но не кричащим.
VR
В марте 2017 появился первый сайт в VR. Их становится больше. Недавно сделали первую VR трассу на футбольном стадионе. Человек надевает маску, и ему кажется, что он на гоночной трассе.
Приспособление для виртуальных гонок от Audi.
Мы спорили еще недавно, приживется ли VR. Да, у него есть будущее, потому что его стало проще делать. Мы будем делать в VR портфолио, чтобы можно было перелистывать его поворотом головы, а при фиксации взгляда переходить на работу.
AR
Круто, что сейчас можно обойтись без приложения. Вы заходите в браузере по ссылке, и у вас должен быть маркер, который будет считывать некоторые вещи. Вы показываете этот маркер и он дорисовывает то, что вы захотите. То есть сначала в 3D делаете дизайн, показываете ему и он дорисовывает уже дополненную реальность. Можно кастомизировать под себя.
PWA – это функционал браузера, который похож на приложение. Он добавляется, как иконка, и выглядит, как приложение. На самом деле он открывается в браузере и позволяет отправлять пользователю нотификейшны, записывать его через форму, получать контент оффлайн.
A frame
Это готовая библиотека, где можно найти все штуки для AR и VR. Можно посмотреть, как они работают, понаблюдать за ними в действии.
Поэтому я советую всем веб-дизайнерам идти доучиваться на 3D. Это сделает ваш сайт намного живее.
Следите за ними. Они не стоят на месте. Есть такая штука, как Google experiments. Освободите пару часов времени, чтобы изучить всю красоту. Google проводит много экспериментов, к которым подключает разработчиков, агентства. Из последнего – использование big data.
А недавно Awwwards стали сотрудничать с Google. Это значит, что сейчас пойдет акцент на мобильные сайты. Начнется оптимизация технологий, чтобы сделать их легче. Google начинает все больше проявлять интерес к мобильному вебу.
WebVj
Очень новая заморочка. Построение страницы происходит на основе данных. Есть один японец, Масатацу Накамура, который особо серьезно этим занимается. Его графика сделана полностью программистом, а не дизайнерами. Он многое делает для Google Experiments.
Пример графики Масатацу Накамура, сделанной при помощи WebVJ
Трендосики
Самый задаваемый вопрос — “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.
Сейчас невозможно определить один трендовый набор шрифтов или цветовую гамму. Вроде как пастельные цвета начинают набирать тренд. Но потом смотришь на эти яркие взрывные сайты, и понимаешь, что нет.
Я бы советовала обыгрывать подачу компонента с помощью паттернов в любом случае. Так контент будет выглядеть дороже и интересней. Обычный полупрозрачный и легкий паттерн уже придаст статус вашему сайту. Косые линии, ломанные элементы — это не так сложно и не требует подключения разработчика.
И не забывать об иллюстрациях. Пролетающая через страницу ракета легко оживит серьезный скучный сайт инвестиционного фонда.
В классических трендах в вебе больше нет ограничений. Главное — создать нужную атмосферу для пользователя.
За кем следить
Из любимых
- JAM3— сумасшедшие ребята из Канады. Всего их 43 человека, но уже мировое агентство.
- AQuest — итальянцы. Помешаны на последних технологиях веба.
- Hellomonday – много интерактива с пользователями. Любят нестандартные переходы, нестандартно разбивают страницы. Остаются вопросы к навигации и UX, но выглядят очень красиво.
- Goodmorning – норвежцы, агентство года в 2016. У них можно подсмотреть классный корпоративный скандинавский стиль.
- Watsons/DG – космонавты, которых я обожаю. Швейцарский нож – их работа. Треш и космос, видео, 3D– это все о них.
- Unit9 – огромное агентство, представительства по всему миру. Около 50 Каннских львов. Сайты – 1% от предоставляемых услуг. Люблю их кампанию, где они сделали человека из воды.
- Lokomativ – мои любимые канадские ребята. 1,5 года назад познакомилась с их креативным директором. И буквально через год после того, как они взяли site of the day на Awwwrds, они вошли в топ 20 лучших агентств мира. Все потому, что у них появился сумасшедший фронт-ендер, который роется во всех библиотеках. Так они выработали свой почерк. Такой темп – это колоссально.
(Больше ссылок для вдохновения от Ольги Шевченко можно найти в ее статье из рубрики #полезныеископаемые)
Да, все это высокие технологии. Но если вы не знаете, как их воплотить, и у вас нет того самого друга фронт-ендщика, это не значит, что пора завязывать. Просто берите все частями. Заходите на библиотеки разработчиков. Подсматривайте, прокачивайте себя с точки зрения режиссуры, потому что веб становится все более эмоциональным. Никто не говорит, что надо успеть все, но можно выбрать одно направление и в нем развиваться.
Больше примеров, инсайтов, историй в полной версии лекции, которую можно приобрести по ссылке.
telegraf.design
9 новых тенденций в дизайне сайтов 2018 года
В сфере диджитала web-дизайн сайтов наиболее подвержен влиянию тенденций. За 18 лет нового тысячелетия мы уже привыкли ожидать свежих дизайнерских решений. Интересно, что в каждом году дизайнерам сайтов удается реализовывать новое, сдвигать границы устоявшихся веб-трендов и удивлять веб-комьюнити нестандартными идеями. Современному разработчику необходимо соответствовать вызовам рынка, возрастающей сложности технических задач. Это значит, внедряя новации – создавать дружественный пользователю, запоминающийся и адаптированный к всевозможным устройствам дизайн сайта, а также согласовывать новые интерфейсные решения с корпоративным стилем. Это хороший стимул обратить внимание на новые тенденции и веб-дизайн тренды, достигшие пика популярности.
2017-й стал годом достижений: мобильный поиск, наконец-то обошел стационарные ПК. На оформление сайтов в 2018-м повлияют мобильный опыт пользования и эволюционирующие десктопы, также сохраняющие актуальность. Так какие тенденции в дизайне сайтов нам принесет 2018 год?
1. Отбрасываемые тени и глубина
Тренд уже не новый, так почему упомянут? Хотя тени долго были ключевым звеном в дизайне сайтов, благодаря браузерному прогрессу приобрели интересные вариации. Сеточная разметка и параллакс позволили показать глубину, иллюзию выхода за пределы экрана. Своим появлением это направление обязано Flat-дизайну, столь популярному в последние года.
Разнообразными играми теней веб-дизайнеры улучшали не только эстетику сайтов, но и пользовательский опыт (User eХperience), подчеркивая значимость элементов. Мягкой тенью обычно обозначалась их кликабельность. Внедрение в дизайн сайтов оживленных градиентов (подробнее об этом далее) позволило показать трехмерность.
2. Яркие, насыщенные цвета
В 2018 году ожидаем доминирования супер-колоритных дизайнов. Веб-дизайнеры и бренды перестанут ограничиваться безопасными цветами и цветовые схемы сайтов станут смелее. Энергичные, насыщенные оттенки теней будут сочетаться с геометричным разнообразием оформления шапки – больше углов и косых линий.
В определенной мере, WEB-тренду помог технический прогресс в экранах мониторов и устройств, расширивших передачу цветового ряда. Отличная возможность мгновенно привлечь внимание и выделиться среди «web-safe-color» конкурентов.
3. Анимированные бэкграунды
Анимация фона отлично смотрится на сайтах с видеобэкграундом. Легковесный JavaScript делает движущиеся фрагменты частью фона не утяжеляя web-страницу.
Визуал заменяет тысячу слов – с анимацией, выразит еще больше. Анимированный фон мгновенно захватывает внимание посетителей. В 2018 году этот полезный тренд сделает моушн графику еще популярнее. Применительно к соцмедиа интеграции – моушн привлечет больший трафик на Landing Page.
4. Сначала мобильные
Мобильные обогнали десктопы и покупки с заказами со смартфонов ведутся непрерывно. Раньше делать заказы было неудобно и пользовательский опыт формировался не столь быстро. Дизайнеры ломали голову над тем, как сделать удобнее меню и подменю на малом экране.
Мобильные интерфейсы с Web UI дизайном переходят в зрелую стадию – минимизированное меню-бургером, уже сложившаяся практика. Иконка экономит место и уже не вызывает проблем с распознанием. Нельзя забывать о UX – улучшить его помогут реагирующие на пользовательское действие микроитерации (устанавливают немедленную обратную связь).
5. Уникальные иллюстрации
Игривые иллюстрации – великолепный гибкий способ создания непринужденной, дружественной пользователю обстановки. Разжигая воображение пользователя, тематичная картинка способствует продажам. К такому эффекту на странице своего сайта стремится каждый бренд.
Хотя тенденция хороша для энергичного представления бренда, творческая абстракции подойдет и для более серьезных областей. Какой бы айдентика бренда ни была, для нее всегда можно создать уместный иллюстрированный образ.
6. Тенденции шрифтового дизайна
Визуальная мощь типографики всегда использовалась для пробуждения эмоции, придания сайту персональности и передачи важного посыла. Сейчас, когда разрешение экранов становится все выше, а картинка четче, следует ожидать большего применения кастомных шрифтов. Многие «правильные» браузеры поддерживают CSS стилизованные нестандартные гарнитуры. В тренде будут большие буквы, шрифтовые контрасты sans serif & serif (рубленые & с засечками) улучшающие UX-дизайн, но главное — побуждающие читать.
Делая прогноз на 2018 год – дизайнеры в полной мере воспользуются трендом для эффектного оформления заголовков. Ожидаем большего использования крупной типографики, креативных шрифтовых гарнитур и кастомных шрифтов.
7. Асимметрия и нестандартная разметка
Интерес к асимметричному макету у нешаблонно мыслящих дизайнеров был всегда. Мода на нестандартную разметку (совмещающую элементы в общем пространстве) начала проявлять себя в 2017-м. Поначалу в виде творческих импровизаций на главных страницах сайтов, в том числе с коммерческим предложением Идею поддержали игроки посерьезнее и в 2018 году тенденция только усилится.
Пока сайты мировых брендов с большим количеством контента придерживаются традиционной модульной сетки, нестандартные структуры продающих дизайнов продолжают наполнять Интернет. Конкуренция на визуальном уровне должна вовлечь и более крупные бренды.
8. Комплексная анимация
С техническим прогрессом в браузерах все чаще веб-сайты статическому изображению предпочитают что-либо поинтересней, например анимацию. В отличии от рассмотренной ранее анимации в бекграунде (обычно это широкоформатные фоны), меньшими анимациями можно вовлекать на любом этапе посещения страницы. Например, развлечь посетителя анимированным прелоадером загрузки или интересным hover-эффектом обозначить кликабельность элемента. Также, анимацией можно сопровождать прокрутку страницы (скролл-эффекты), использовать в навигации по сайту или анимированными иллюстрациями / персонажами связать все страницы сайта воедино.
Анимация это отличный способ создать историю, разжечь фантазию и с помощью персонажа показать будущее клиента. Даже если вы просто создадите увлекательный зрительный образ, он повысит эффективность взаимодействия посетителя с сайтом.
9. Колоритные градиенты
Последние годы в веб-разработках популярностью пользовался Flat-стиль с его яркими плоскими цветами. И вот в веб-дизайн возвращаются градиенты. Если раньше они были тонким затенением, то сейчас стали большими и колоритными, имитируя 3D. Недавно, тренд нашел воплощение в градиентном фильтре для фотографий, что сделало их более интригующими. Также в моде градиентные фоны — их цветовое разнообразие отлично компенсирует отсутствие привычных изображений.
Ожидаемые тенденции в дизайне сайтов — 2018
Для дизайн-комьюнити 2018-й год обещает много интересного. Ждем появления крутых сайтов, привлекающих внимание броским колоритом, эффектными градиентами и комплексными анимациями.
seo-design.net
Тренды и Тенденции Веб Дизайна 2018
Каждый дизайнер заинтересован в том, чтобы оставаться в курсе последних разработок в этой области, также необходимо знать о текущих направлениях или тенденциях на рынке. Фактически, веб-дизайн настолько динамичен, то что считалось свежим и современным сегодня, может показаться полностью устаревшим завтра. И именно поэтому очень важно быть в тренде и всегда следить за всеми изменениями. Каждый дизайн должен понимать что это беспрерывный процесс познания и обучения. Давайте разберемся какая тенденции и тренд будут востребованы для веб дизайна в 2018 году.
Узоры, линии и круги, геометрические формы
Именно эта тенденция появилась в 2016 году, набрала популярность в 2017 и продолжит развиваться в 2018 году. Используя смешанные формы и узоры на странице можно добиться замечательных результатов. В первую очередь в дизайне ценится композиция, целостная картинка макета. Flat дизайн и material дизайн очень хорошо сочетается с декоративными элементами и простыми формами. 2D дизайн продолжает жить, однако в нём произошли некоторые изменения.
Яркие цвета
Добавляем яркие цвета и мы смело заявляем о себе! Material дизайн и flat дизайн отлично сочетаются с сочными красками. Цветовые переходы - один из трендов современного дизайна. Компания Instagram первая решила изменить фирменные изображения и логотипы. Они поменяли flat цвета на разноцветные градиенты и переходы. Логотипы, кнопки, все элементы получили новый стиль. Это тренд 2017 года и мы видим что он сохранится в 2018. Здесь главное правильно сочетать цвета и не выглядеть кричащим.
Уникальные иллюстрации и графика
Графическому дизайну становится тесно в рамках привычного веб дизайна. Он имеет большой потенциал и в целом еще не полностью раскрыт. Думаю в тренде 2018 года мы увидим рост популярности графической иллюстрации. Предлагаю ознакомится с некоторыми направлениями которые пользуются повышенным интересом среди дизайнеров.
Sketch art. Крафтовая тематика захватила бизнес, а иллюстрации «от руки» завоевали полиграфию. Этот тренд продолжает развиваться в веб-дизайне.
Line art icons. Рисования контурами будет и дальше находить применение в 2018. Например, как сейчас при создании паттернов и сложных иконок (они выигрывают у стоковых по уровню визуального исполнения).
Фотоконтент
Останется актуальным в 2018 подход к фотоконтенту на сайтах e-commerce, уход от одинаковых изображений в магазинах в сторону уникальных авторских фотографий. Что любопытно, все предпосылки налицо: больше 60% пользователей считают, решающим фактором покупки выступают фотографии, поэтому магазины уделяют им максимум внимания.
Вам нужен уникальный дизайн, который способный запомнится любому из посетителей, обратитесь к цифровому дизайнеру. Для этого нужно держаться от стоковых фото подальше, и переключаем наше внимание на оригинальные и уникальные графические изображение. Да, стоковая графика и дальше пользуется своей популярностью, но при этом наблюдалась довольно интересная тенденция, которая продолжит тренд веб дизайна в 2018 году (индивидуальный подход к оформлению дизайна и графики). Именно индивидуальность выделить вашу исключительность в той или иной области!
Анимация
Анимированные объекты сейчас повсюду: логотипы, иконки на сайтах и в приложениях, переходы между состояниями объектов в material design. Иногда даже в почтовых рассылках может пробраться интерактив: обрастают фоновым видео, встроенным процессом оформления заказа, и полноценными меню. Видео и GIF превосходного качества, работающие на непрерывном цикле, предлагающие гладкое визуальное удовольствие для наших глаз, рассматриваются как популярный способ добавления драмы и движения к страницам. Он успешно сохраняет внимание посетителя надолго.
Расширения
Старые и всем известные PNG, JPG, и даже GIF форматы это вещи из прошлого. Их крайне давно изобрели, и в современном мире им нет места. Сейчас больше внимания уделяется качеству изображений и их доступности. SVG станет форматом #1 по популярности. Он легко масштабируемый и к тому, же без потери качества. В добавок, размер исходных изображйний SVG формата очень приемлемый. Это будет наилучшим форматом для мелких графических элементов.
Касательно программного обеспечения, Sketch потеснит Photoshop. Он уже сейчас делает разработку проще и быстрее. Его функциональность в разы превосходит Photoshop, и мы верим что в 2018 году разница станет очень существенной. Как результат, компания Adobe потеряет часть своих преданных пользователей в лице веб и UI дизайнеров.
Попробуйте наш калькулятор стоимости чтобы узнать сколько стоит разработать уникальный и продающий дизайн.
Профессиональный Социальные Сети
Хорошо, мы теперь знаем в каком направлении будут развиваться тренды веб дизайна, но что же касательно социальных сетей? Должны ли мы осмыслить их и уделять больше внимания? Если кратко - определенно да. Наиболее популярные среди дизайнеров Behance и Dribbble станет еще авторитетнее. Ваши работы существенно увеличат узнаваемость бренды на просторах этих дизайнерских социальных сетей.
В 2018 году дизайн продолжит следовать современных трендах 2017, но все же он обогатиться новыми цветами, и идеями. Стоит отметить, что дизайн является одной из самых важных фаз веб разработки, которая занимает до 30% всего времени.
Оцените (77 голосов - 4.6 из 5)
Спасибо!
1(Ужасно)
2(Плохо)
3(Средне)
4(Хорошо)
5(Класс!)
Спасибо!
Подпишитесь на свежие статьи:
Ok
merehead.com
