→ Модные цвета в веб дизайне. Минимальное количество полей в формах. Насыщенные цвета и палитры

Модные цвета в веб дизайне. Минимальное количество полей в формах. Насыщенные цвета и палитры

Привлекательный уютный интерьер развернут во весь экран, так и хочется пройтись по комнате
http://cheslara.kz/


Веточка едва колышется на ветру, передавая ощущение загородной идиллии
http://id-es.ru/

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

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

Сплит-макеты

Если на сайте предлагается несколько разных видов продуктов или услуг, сплит-экран помогает разделить аудиторию на 2 потока быстрее всего. Так пользователь идет по тому пути, который удовлетворит его интерес.


Сплит-экран разделяет разношерстную целевую аудиторию клининговых услуг на 2 большие группы. Для каждой группы подготовлена отдельная страница с привлекательными именно для нее условиями
http://www.bee-agency.ru/

Иллюстрации занимают центральное место

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

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

Монохроматические цвета

«Призыв к действию» всегда должен выделяться. Яркий цвет кнопки или надписи и приглушенный тон фона действительно помогут сделать правильный акцент.


Фон затемнен, все внимание на кнопке с целевым действием
http://mmobnovka.hostim.ru/

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

Брутализм достигает основного статуса

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

Приоритет навигации

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


Меню с услугами компании спрятано за едва заметным аккуратным значком.
Первое, что видит посетитель – кнопка с целевым действием

https://ewebdesign.com/

Более органические и косые формы

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

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

Минимальное количество полей в формах

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


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

Еще более распространенные взаимодействия и анимации

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

Ничего лишнего в форме: лишь имя и телефон (причем обязательным является лишь телефон)
http://mmobnovka.hostim.ru/

Использование видео

Что останавливает посетителя от покупки на сайте? Правильно, отсутствие доверия. Видеоролик – отличный способ представить свой бренд, рассказать вашей аудитории о себе.

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

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


Видеоролик наглядно показывает стиль и возможности студии
http://dev.smartlanding.ru/matroshka/

Призыв к действию, доступный в любой момент

Если в момент прокрутки посетитель принял решение выполнить ваш призыв к действию, нельзя создавать ему препятствия на этом пути. Располагайте CTA каждые 1,5-2 экрана страницы: как минимум, в первом и последнем экранах.

Серафиты поставили свои лучшие ноги вперед

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

Карточное расположение элементов

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


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

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

Каждый блок в портфолио посвящен одной фотосессии, а карточное расположение блоков позволяет быстро просмотреть все обложки и кликнуть на приглянувшуюся
http://dev.smartlanding.ru/matroshka/

Призыв к действию – кнопка, а не форма

При клике отроется модальное окно. Доказано, что оформление призыва к действию только одной кнопкой может увеличить клики по ней.

Более захватывающая «мультимедийная» длинная форма

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


Целевое действие воплотилось в кнопке. Кликнуть по ней гораздо проще, а пользователь уже морально готов оставлять заявку и заполнять поля в модальном окне
http://eco-hyla.ru/

Еще 5 трендов веб-дизайна, не утративших актуальность в 2016

    Адаптивность под мобильные устройства

    Поиски идеального инструмента цифрового дизайна

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

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

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

    Элементы легко перестраиваются под узкие экраны мобильных, меню собирается в «гамбургер»
    http://alfaclean-ufa.ru/

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

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

    Типографика как основа дизайна

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


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

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

    Маленький шрифт тоже может быть убедительным
    https://www.worldclass.ru/


    Крупный шрифт – основной прием для привлечения внимания
    http://www.spbinvestment.ru/ru


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

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

    Текст и изображение составляют одно целое
    http://www.mcdonalds.ru/

    FlatDesign (Плоский дизайн)

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

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

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

1. Принцип «mobile-first»

Название принципа говорит само за себя: дизайн разрабатывается, прежде всего, с учетом удобства просмотра на экранах мобильных устройств. Этот принцип не нов, но так как более 60% пользователей выходят в интернет именно со смартфонов, он стал определяющим в этом году. Поскольку экраны мобильных устройств имеют малые размеры, дизайнеры предусматривают максимально информативное, но при этом эффектное отображение контента. То же самое касается текстов - воде и пустым фразам в концепции «mobile-first» нет места.

2. Иллюстрации «от руки»

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

Пример иллюстрации с сайта dropbox.com

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

3. Анимация

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

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

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

4. Смелые цвета

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



Пример использования смелых цветов на spotify.com

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

5. Необычный скроллинг и параллакс

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

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

6. Асимметричные шаблоны

2016 год прошел под влиянием сетчатых шаблонов, а в 2017 году наметилась тенденция к использованию асимметричных и «рваных» шаблонов. Несмотря на то, что в подавляющем большинстве бренды предпочитают традиционные и понятные карточные UI-шаблоны (ведь они логичны и просты для ориентации), некоторые все же начинают экспериментировать для того, чтобы выделиться и отстроиться от конкурентов.



Пример асимметричного дизайна (isaidicanshout.com)

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

7. Тени

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



Глубокие тени при наведении курсора на изображения (abduzeedo.com)

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

8. Большие и жирные шрифты

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



Пример использования крупного шрифта (bigyouth.fr)

9. Ультраминимализм

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



Абсолютный минимализм (mathieuboulet.com)

В приведенном примере есть только указание «Scroll», ссылка на раздел «О Себе» и ссылки на профили в соцсетях. Далее при прокрутке уже идет портфолио дизайнера.

10. Микс горизонтального и вертикального текста

Изменение привычного горизонтального расположения текста «освежает» сайт и мотивирует прочитать, что же там написано.



Пример необычного направления текста (takewhatyoucancarry.com)

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

11. «Модуляция»


В этом случае текст должен контрастировать с фоновыми изображениями, чтобы они не сливались.

13. Двухцветность

В основе дизайна сайта лежит 2 базовых цвета. Смотрится это стильно и современно. Например, сайт Australian Design Radio выдержан именно в таком стиле:


14. «Геометрические» шрифты

В этом случае шрифты сочетаются с разнообразными геометрическими формами. Для этой цели подходят шрифты вроде Futura, ITC Avant Garde и Proxima Nova.



Пример использования «геометрических» шрифтов (hugeinc.com)

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

Подводим итоги

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

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

 

 

Это интересно: