Примеры дизайна: 20 лучших примеров дизайна главной страницы сайта

Поставщики услуг: главные страницы профессиональных сервисов

Who Is Wildlife

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

Silktricky

Чему мы можем научиться: еще одним убедительным примером организации контента в интерактивные визуальные плитки может служить сайт Silktricky.

Sagmeister & Walsh

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

Madwell NYC

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

Woodwork

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

Ryan Edy

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

New Breed

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

Oliver Russell

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

Fancy Rhino

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

Blind Barber

Чему мы можем научиться: этот веб-сайт отлично справляется с тем, чтобы сосредоточить посетителя на самом важном аспекте сайта — кнопке в центре страницы. Данная комбинация заголовка и CTA привлекает внимание и вдохновляет узнать больше об этом загадочном «Слепом парикмахере» (Blind Barber).

Подсказка 6: отойдите на шаг назад

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

Вместо заключения: что дальше?

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

Высоких вам конверсий!

По материалам: hubspot.com

12-08-2017

Красочные дизайны сайтов (60+ лучших примеров)

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

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

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

Milkable

Greyp Bikes

Evoenergy UK Energy Consumption Guide

3magine

Vintage Hope

3 Sided Cube

Sweet Leaf Tea

Jobs

SecretKey

Beauty Fashion Magazine

Park Village

Daguia Tortas Finas

Bumbershoot

Helveticons

Cheese Please Game

Guide to the Polish Alphabet

Mailboxing

Danielsitek

Andrei Gorokhov

Red Monkeys

Di Biasotto

Rocka

School Dismissal Solution

L’Année All Inclusive

Beacon

Duroc

Teleset Plus

Penhaligon’s Mystery Mansion

Kappow

Duirwaigh

The Neighbourhood

We Are Royale

Art 4 Web

Cafundoe Studio

Blancreme

Knock Knock

Estudioec

Priscilla Martins

Cestbeau

TwoYearsTogether

Mokhtar Saghafi

Sweet Lunas

Gen3 Creative

Butter Toffees

Spacho

Winesister Hood

RankWarrior

UceMag

Terraneo

CCS Coke

Elevation Studios

Colleen Clapp

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

cubeclub-chemnitz.de

shoppub.com.br

pixelcool.com

learnlakenona.com

brooksrunning.com

adventureworld.ourentry.com.au

apbaxter.com

liptonicetea.pl

sitesoft.ru

2advanced.com

brandstudio.ru

aeroidea.ru

minisol.ru

brightbulbstudio.com

damnfineprints.com

summerclosing.pt

samsonite.ca

nawgan.com

footballprice.com

bbcnordic.com/london-calling

kenexa.com

Надеемся, подборка красочных дизайнов сайтов положительно повлияла на ваше вдохновение. Итого получилось чуть более 60 работ. Здесь представлены проекты совершенно разных стилей: от простых, строгих до креативных и прямо таких художественных. Наспоследок советуем посетить еще один сайт — Awwwards, в частности раздел с «Colorful» макетами.

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

P.S. В интернете достаточно много полезных сайтов, есть даже специальные для детей http://panama.ua/ — это интернет магазин разных товаров для родителей с доставкой по Украине.

Примеры дизайна сайтов. Топ-15 примеров веб-дизайна 2016 года

От автора: рад приветствовать моих любимых вебдизайнутых читателей. Хотите увидеть самые яркие и запоминающиеся примеры дизайна сайтов 2016 года? В этой статье я предоставлю ТОП-15 лучших, по моему мнению, ecommerce-проектов, поток вдохновения от которых просто в клочья раскрошит дамбу вашего сознания и сгенерирует крутые идеи!

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

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

15. mombook.ru

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

14.

В качестве следующего примера веб-дизайна сайта я приведу творение австралийского бренда одежды Zulu&Zephyr. Страница является образцом тонкого вкуса, объединяющего в себе простоту элементов и стилистическую нестандартность. Сайт не перегружен контентом, вследствие чего обладает высокой скоростью загрузки.

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

13. wootten.com.au

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

12. lux-ticket.

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

11. olea.com.au

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

10. dodgeandburn.com

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

9. skinnyties.com

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

8. mibolsa.com.au

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

7. satorisan.com

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

6. iskander-mebel.kz

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

5. lp.delta-boat.ru

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

4. etiquetteclothiers.com

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

3. pitangobikes.com

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

2.

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

1. shop.bigcartel.com

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

50 примеров плохого дизайна | Яблык

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

♥ ПО ТЕМЕ: Опрос: Какого цвета кроссовки вы видите – белые или черные?

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

Неудачно повешенный рюкзак

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

♥ ПО ТЕМЕ: 10 самых трешовых и жутких научных экспериментов.

Удобная скамейка

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

♥ ПО ТЕМЕ: Почему доллар называют баксом, обозначают символом $ и другие интересные факты об американской валюте.

Неудачная юбка

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

♥ ПО ТЕМЕ: У кого больше всех подписчиков в Инстаграм – 40 самых популярных аккаунтов.

Натуральный сок?

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

♥ ПО ТЕМЕ: 50 лучших оптических иллюзий.

Шея фламинго

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

♥ ПО ТЕМЕ: На этой картинке 16 кругов, вы их видите?

Странная игровая площадка

Наивные дети не зададут вопрос, где же расположились головы участников композиции, а вот взрослым это сразу же придет на ум.

♥ ПО ТЕМЕ: Говорящий попугай: какие птицы говорят, легче всего учатся и как научить говорить.

Странный коврик для йоги

Надпись на коврике звучит довольно мотивирующе: Nothing is impossible (Нет ничего невозможного). Вот только неудачная расцветка скрыла пару букв, видимая часть надписи превратилась в Nothing is possible (Нет ничего возможного). Трудно заниматься йогой, когда сам коврик тебе сообщает, что ничего не получится.

♥ ПО ТЕМЕ: Что можно сделать из старого монитора? 12 идей.

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

Рак на картинке может и выглядит забавно, но когда он в поздравлении сообщает о своем присутствии у человека, звучит это как-то не радостно.

♥ ПО ТЕМЕ: Как из старых Mac сделать мангал, аквариум, скамейку, светильник, почтовый ящик, кофры для мотоцикла и т.д. (30 фото).

Все зависит от ракурса!

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

♥ ПО ТЕМЕ: Что такое сусеки, почему ножки курьи, а не куриные и из чего сделана лубяная избушка: слова из сказок, о происхождении которых вы могли не знать.

Неправильный выбор

Не секрет, что азиатские слова в других языках могут иметь непредсказуемые значения. Ресторан Wrong с вывеской «Choose Asia, Choose Wrong» призывает выбирает не только Азию, и нечто неверное. Слово Wrong именно так и переводится.

♥ ПО ТЕМЕ: 70 интересных фактов об IT-технологиях, о которых вы могли не знать.

Не много ли ног?

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

♥ ПО ТЕМЕ: Как правильно произносить Xiaomi на русском и что обозначает это слово.

Чужие ноги

На этот раз число ног вполне верное. Но действительно ли эти мужчины носят такие колготки?

♥ ПО ТЕМЕ: Космические скорости — насколько быстро нужно лететь, чтобы покинуть Землю, планетную систему и галактику?

Монстр на вагоне

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

♥ ПО ТЕМЕ: Лучшие триллеры: Список самых лучших 35 фильмов с описанием, трейлерами и ссылками.

Бесплатный кофе

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

♥ ПО ТЕМЕ: Как сделать голос «доната» («кожаные ублюдки», Discovery) и чей это голос на самом деле?

Безусловная скидка!

Этот магазин дает скидку в 40% абсолютно на все без исключений. Правда, внизу мелким шрифтом все же написано, что есть и исключения и ограничения. Лишний повод обращать внимание на подобные дополнения.

♥ ПО ТЕМЕ: 5 функций старых мобильников, которых нет в современных смартфонах.

Самосожжение

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

♥ ПО ТЕМЕ: БелАЗ-75710: 1 300 литров топлива на 100 км и другие 7 фактов о лучшем самосвале мира из Беларуси.

Трудный выбор

Если вам не хватает Биг Мака, то вы можете выбрать себе Большой БигМак. Вот только на картинке выглядят они как-то одинаково. Стоит ли переплачивать?

♥ ПО ТЕМЕ: Эта черно-белая фотография обманывает наш мозг – вы видим ее цветной!

Дефицит продуктов

Хлеб с перцем? Серьезно? А других продуктов для специи найти не удалось?

♥ ПО ТЕМЕ: Почему вино сухое, или какие вина называют сухими, а какие сладкими?

Главное – результат!

Наверное, клеил этот плакат Человек-паук, висевший вниз головой. Понятно, почему его ничего не смутило.

♥ ПО ТЕМЕ: Почему рождаются рыжие люди и чем они отличаются от остальных.

Убийство друга

Это так весело, тянуть на части конфету! Вот только если ты сам – конфета, это похоже на убийство.

♥ ПО ТЕМЕ: Что такое лошадиная сила и сколько лошадиных сил в одной лошади?

Суперакция!

Это очень выгодно, получить в подарок третий ботинок. Вот только что с ним потом делать?

♥ ПО ТЕМЕ: Как появились названия брендов: Ikea, Lego, Pepsi, Reebok, Skype, Sony, Canon, Google — 16 историй о происхождении названий известных компаний.

Странные хлопья

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

♥ПО ТЕМЕ: Откуда взялось выражение (жест) ОК и что в действительности оно означает?

Веселая игра

Правда весело играть в «Морской бой», когда твоя жена и дочь моют посуду? Впрочем, они тоже кажутся счастливыми.

♥ ПО ТЕМЕ: 35 лучших оптических иллюзий, ставших интернет-мемами.

Странная кухня

Кухня от некоего Ану в английском написании превращается буквально в кухню ануса. Вы готовы это попробовать?

♥ ПО ТЕМЕ: Оптическая иллюзия: все шары на этом рисунке одного цвета, а как видите вы?

Игривый мост

В чопорной Англии даже Вестминстерский мост может оказаться очень игривым. Обратите внимание на тень.

♥ ПО ТЕМЕ: Дональд Трамп в кино: Один дома 2 и другие фильмы, сериалы и клипы, в которых снимался президент США.

Кровавый миньон

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

♥ ПО ТЕМЕ: 10 самых маленьких стран в мире.

Необычная лестница

У вас рябит в глазах от одного лишь вида этой лестницы? А посетителям отеля приходится по ней еще и спускаться.

♥ ПО ТЕМЕ: Скрытый смысл логотипов известных компаний.

Веселая горка

Дети любят спускаться с горки, но не из задницы слона.

♥ ПО ТЕМЕ: 7 известных символов, о происхождении которых вы могли не знать.

Странный компас

С таким компасом немудрено заблудиться – стороны света тут явно не на своем месте.

♥ ПО ТЕМЕ: 12 самых необычных рисунков, видимых из космоса с координатами в Google Картах.

Не все любят велосипедистов

К велосипедным дорожкам привыкли еще не все. Неудивительно, что приоритет все еще у автомобилей и пешеходов.

ПО ТЕМЕ: Настоящие имена звезд — как на самом деле зовут Чака Норриса, Билла Клинтона, Элтона Джона и еще 50 знаменитостей.

Грустное свадебное приглашение

Глядя на это приглашение кажется, что молодожены жили вместе недолго и несчастливо, умерев в один день, повесившись.

♥ ПО ТЕМЕ: Лучший ремикс стандартного рингтона iPhone (аудио + видео).

Необычный кандидат

С таким депутатом во власти будет точно весело!

♥ ПО ТЕМЕ: Лайфхаки и необычные эффективные применения обычным вещам: ТОП-50.

Место для инвалидов

Место для инвалидов выделено и даже заботливо обнесено бордюром.

♥ ПО ТЕМЕ: 15 нестандартных продуктов Samsung, о которых вы могли не знать.

Немецкая школа

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

♥ ПО ТЕМЕ: 29 логотипов с шедеврально скрытым подтекстом.

Гибкие воздушные шарики

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

♥ ПО ТЕМЕ: Волнистый попугайчик активирует голосом Siri на iPhone (видео).

Фривольный светильник

Идея дизайнера светильника ясна, вот только получилось весьма пошло.

♥ ПО ТЕМЕ: ТОП-10 примеров нелепых логотипов компаний.

Любопытный Дональд Дак

Кажется, Дональд Дак явно не прочь покатать на себе… Но это ведь дети!

♥ ПО ТЕМЕ: 500, 1000, 5000 и 100 000 долларов — самые крупные и редкие купюры американской валюты.

Комфортный стадион Блэкпула

Администрация стадиона Блэкпул зарабатывает и на таких местах. 25 фунтов — и вы можете увидеть если не футбол, так хотя бы столб.

♥ ПО ТЕМЕ: Скрытые возможности поиска Google: 20 интересных пасхалок, о которых вы могли не знать.

Логотип ВУЗа

Трудно поверить, что утверждавшие этот логотип института не увидели в нем явного двойного подтекста.

♥ ПО ТЕМЕ: 30 самых знаменитых фейковых фото, в которые вы могли поверить.

Универсальный инструмент

IKEA предлагает очередной инструмент 2-в-1. Вот только точно ли им удобно будет пользоваться?

♥ ПО ТЕМЕ: Почему появляются мурашки на коже, почему пальцы морщатся от воды и другие необычные факты о теле человека.

Шарики из пустыни

А вы готовы попробовать эти шарики из пустыни?

♥ ПО ТЕМЕ: Голландия и Нидерланды: какая разница и как правильно называть?

Качественная кружка

Качественная кружка (надпись на кружке Quality – качество) и качественная ручка от нее, только отдельно друг от друга.

♥ ПО ТЕМЕ: Самые глубокие ямы в мире.

Упаковка для хлеба

Эта упаковка с зелеными узорами едва ли мотивирует купить хлеб. Кажется, что в нем плесень.

♥ ПО ТЕМЕ: Какими телефонами пользовались до выхода iPhone: 10 популярных моделей (видео).

Место для солнечной батареи

А еще говорят, что у солнечных батарей низкий КПД…

♥ ПО ТЕМЕ: Правило 5 / 25 от Уоррена Баффета — выделяем самые важные дела в жизни.

Непонятное направление

Этот указатель не столько помогает, сколько путает.

♥ ПО ТЕМЕ: Как выглядели компьютерные вирусы в 80-е и 90-е годы прошлого века.

Точная диаграмма

Все сектора одинаковые и в сумме дают 100%, или нет?

♥ ПО ТЕМЕ: Что такое сиквел, приквел и спин-офф и чем они отличаются?

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

Пара неожиданно узнала о беременности.

♥ ПО ТЕМЕ: Идеальный вес для женщин и мужчин: как определить с помощью медицинских формул: 5 методов.

Зеркальные потолки в туалете

Подглядывать еще никогда не было так просто.

♥ПО ТЕМЕ: Можно ли заваривать пакетик чая несколько раз?

Место для туалетной бумаги

Для тех, у кого действительно длинные руки.

♥ПО ТЕМЕ: 8 интересных примеров ландшафтного дизайна для манипуляций поведением горожан на улице.

Наручные часы

Кажется, эти часы огромного размера. Наручными их не назовешь.

♥ ПО ТЕМЕ: Чем веганы отличаются от вегетарианцев.

Мужские трусы

Всего 24 доллара и пара трусов для трехногого мужчины – ваша!

♥ ПО ТЕМЕ: Животные и насекомые, или 30 причин не ехать в Австралию.

Выхода нет!

Хотите занять ребенка – предложите ему пройти этот лабиринт!

Смотрите также:

Со всей ответственностью: примеры социального дизайна

Социально ответственный дизайн тесно связывают с именем американского проектировщика Виктора Попанека – автора культовой книги «Дизайн реального мира».

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

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

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

Еще по теме: Что такое социально ориентированный дизайн?

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

Ньюсмейкеры

Всемирно известный стартап Ocean Cleanup – один из ярчайших примеров социально ответственного дизайна. В этом году компания, ставящая перед собой задачу ни много ни мало – очистить от пластика весь Мировой океан, официально запустила первую плавучую систему радиусом около двух километров, которая, используя действие ветра, морских течений и волн, позволяет собирать плавающий в воде мусор. Ocean Cleanup заявляет, что 60 таких систем способны очистить 50 процентов океана.

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

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

Paperfuge может делать тысячи оборотов в минуту и выполнять необходимые для центрифуги функции, но при этом состоит из лески и бумаги, не нуждается в электричестве и стоит 20 центов. Ее создателя Ману Прокаша вдохновила игрушка.

Столяры

EcoFábrica Criativa Santos – проект, запущенный в бразильском городе Сантус при поддержке городских властей и местного клуба дизайнеров. Перед ним, как и диктует социально ответственный дизайн, стоит сразу несколько масштабных задач: переработка (в данном случае – древесины), создание возможностей заработка для социально незащищенных групп людей, экологическое образование и снижение объемов мусора.

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

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

Еще по теме: Социально ориентированный дизайн в продуктах виртуальной и дополненной реальности

Эта история началась еще в 1974 году, когда итальянский дизайнер Энцо Мари опубликовал 14 «сделай-сам» проектов по созданию мебели. Почти сорок лет спустя, в 2013 году, немецкий дизайнер Себастьен Дешле познакомился с пятью выходцами из Западной Африки и запустил для них тренинги столярного мастерства с использованием разработок Энцо Мари.

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

Еще одна мебельная компания – голландская Vepa – специализируется на создании продукции исключительно из вторсырья. Ее стулья Felt – обладатели награды Green Product Award 2018 – произведены из пластиковых бутылок. 60 бутылок = один стул.

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

Любопытные гаджеты

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

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

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

Свои Smog Free Towers их создатель Даан Рузгард называет «пылесосами воздуха», и делают они именно это: с помощью запатентованной технологии ионизации отчищают воздух от смога. Семиметровые башни пропускают до 30 тысяч кубометров воздуха в час и предназначены для мест скопления людей, например, парков.

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

Berlin Boombox – «самые экологически устойчивые переносные колонки в мире» – выполнены из переработанного картона и родились благодаря энтузиастам на Kickstarter’е. По словам их создателя Александра Пфендера, его разработка не только гарантирует звук высшего качества, совместима со смартфонами и другими Bluetooth-девайсами, но содержит минимум электронных и пластиковых элементов.

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

Комплексные решения

Консалтинговая и дизайнерская компания Ecosistema Urbano специализируется на решениях, сочетающих элементы урбанизма, архитектуры, инженерного проектирования и социологии. Ее основатели – авторы многих известных проектов в Европе, в частности павильона Eco-Boulevard в Мадриде площадью 500 на 50 метров.

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

Другая испанская фирма, Basurama, объединяет дизайнеров, создающих из вторсырья – дерева, шин, пластика – игровые площадки, элементы декора и другие дизайнерские решения.

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

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

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

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

Топ-10 вариантов дизайна веб-навигации | Umbrella IT

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

Навигация ничем не регламентирована: ее можно сделать прозрачной и интуитивной или многоуровневой и нестандартной.

Как сделать навигацию на сайте максимально эффективной и какой дизайн подойдет именно вам?

У компании веб-разработки Umbrella IT есть ответы на все ваши вопросы.

Но обо всем по порядку.

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

Максимально эффективная веб-навигация держится на 3 китах:

• Структура
• Лаконичность
• Дизайн

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

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

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

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

1. ГОРИЗОНТАЛЬНАЯ НАВИГАЦИЯ

Горизонтальная навигация – классический дизайн, соединивший удобство с функциональностью.

Источник

Плюсы:

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

Минусы:

• Большое количество разделов и объемное выпадающее меню могут перекрывать важный контент;
• Добавление новых пунктов меню затруднительно.

2. ВЕРТИКАЛЬНАЯ НАВИГАЦИЯ

Вертикальная навигация — прямая альтернатива горизонтальной навигации – меню, расположенное в левой колонке страницы.

Источник

Плюсы:

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

Минусы:

• В развернутом виде может перекрывать контент;
• Нижние навигационные элементы малозаметны.

3. ВЫЕЗЖАЮЩЕЕ МЕНЮ

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

Плюсы:

• Максимально компактный способ организации сайта;
• Дизайн может быть адаптивным, что в сочетании с гамбургером-иконкой представляет отличный вариант для интерфейса мобильной версии сайта;
• Скрытое меню позволяет сделать сильный акцент на контенте;
• Удобный доступ к меню из любой точки сайта.

Минусы:

• Скрытая навигация затрудняет доступ к меню;
• В развернутом виде меню перекрывает контент.

4. ЛЕНДИНГ

Лендинг – это одностраничный сайт с длинной или бесконечной прокруткой, оптимизированный под определенные цели.

Источник

Плюсы:

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

Минусы:

• Ограниченная свобода пользователя: невозможно контролировать порядок информации и способ представления контента;
• Невозможно использовать футер;
• Увеличивает нагрузку на серверы;
• Снижает показатели SEO.

5. ФИКСИРОВАННОЕ МЕНЮ

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

Источник

Плюсы:

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

Минусы:

• Перегруженный и навязчивый хедер затрудняет веб-навигацию и перекрывает контент.

6. ГАМБУРГЕР-МЕНЮ

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

Источник

Плюсы:

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

Минусы:

• Несмотря на свою распространенность, пользователи не всегда легко находят скрытое меню;
• Гамбургер – негласное стандартное меню на платформе Android, и его использование на iOs приводит к нарушению единообразия базовых навигационных элементов и перегрузке навигационной панели.

7. АДАПТИВНАЯ НАВИГАЦИЯ

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

Источник (полная версия)

Источник (мобильная версия)

Плюсы:

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

Минусы:

• Типичные для десктопных версий сайтов активные элементы (встроенные карты, видео, анимация) замедляют загрузку сайта на мобильных устройствах;
• Мобильная версия дизайна может оказаться нечитабельной и перегруженной в виду того, что пользователи мобильных устройств, как правило, пользуются более узким функционалом сайта;
• Отсутствие альтернативы: в случае с самостоятельной мобильной версией всегда есть возможность вернуться к полной версии сайта. Адаптивный дизайн этого не позволяет: если адаптированная верстка неудобна или скрывает важный элемент навигации, единственный вариант – искать ноутбук или обращаться к сайту конкурентов.

8. МЕГА-МЕНЮ

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

Источник

Плюсы:

• Все опции доступны одновременно: максимально быстрое направление пользователя — большой плюс для онлайн-магазинов и сайтов с обширным набором опций, категорий и сервисов;
• Раскрывается и скрывается по наведению курсора, щелчку или касанию без ущерба для контента.

Минусы:

• нарушение принципа организации способно осложнить навигацию;
• сложно реализовать на мобильных устройствах.

9. РАСШИРЕННЫЙ ФУТЕР

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

Источник

Плюсы:

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

Минусы:

• Рядовой пользователь часто не дочитывает до футера.

10. ПОЛНОЭКРАННАЯ НАВИГАЦИЯ

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

Источник

Плюсы:

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

Минусы:

• Возможно снижение скорости загрузки;
• Нерациональный выбор для сайтов со сложной навигационной картой.

И традиционный бонус от компании Umbrella IT, которая всегда готова предложить Вам больше  — 11 вариант — АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ НАВИГАЦИИ.

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

Источник

Плюсы:

• Привлекают внимание пользователей;
• Структурируют меню;
• Улучшают юзабилити сайта и ориентируют пользователя.

Минусы:

• Чрезмерная визуальная перегруженность затрудняет навигацию по сайту;
• Могут замедлить скорость загрузки сайта.

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

Представленные примеры – лишь малая часть того, что позволяет реализовать современный веб-дизайн. Остались вопросы? Свяжитесь с Umbrella IT, и мы поможем воплотить Ваши самые смелые проекты в реальность .

Фото: Shutterstock.com

10 отличных примеров интерактивного дизайна для вдохновения дизайнеров | by Mockplus

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

Каждый великий дизайнер знает, что дизайн никогда не был пустым разговором, вы должны сочетать теоретические знания с серией книг по UI / UX дизайну, а также ресурсы с практическими примерами.Так вы получите больше вдохновения, чтобы стать продвинутым дизайнером. Вот 10 отличных примеров интерактивного дизайна о дизайне мобильных приложений и дизайне веб-сайтов.

Примеры интерактивного дизайна для мобильного приложения

1. Список трехмерных стереоскопических изображений

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

2. Изображение отображается стековыми картами

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

3. Звездочка на странице поиска

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

Лучшие материалы для дизайна UI / UX бесплатно

СКАЧАТЬ

4. Дизайн приложения, ориентированного на данные

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

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

Примеры интерактивного дизайна веб-сайта

1. Sketchin

Простая панель навигации делает весь сайт очень простым и красивым.

2. Просмотр данных

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

3. 1000 экспериментов Chrome

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

4. Празднование китайского Нового года

Празднование китайского Нового года — это профессиональная реализация эксперимента WebGL, который может превратить ваше поздравление в фейерверк.

5. Carbon Studio

Скучаете по старому перетаскиванию навигации? Взгляните на Carbon Studio.

6.Nick Jones

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

Заключение

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

Оригинал размещен по адресу: 10 отличных примеров интерактивного дизайна для справок дизайнеров

31 Эффективный дизайн домашней страницы и идеи для вашего веб-сайта

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

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

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

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

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

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

Преимущества хорошо продуманной домашней страницы

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

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

Что вам нужно на вашей домашней странице? Чего будет ожидать ваша аудитория? И какие элементы имеют приоритет?

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

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

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

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

Улучшение взаимодействия с пользователем на вашем веб-сайте

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

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

Увеличение количества конверсий

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

Сделав эту информацию легкодоступной на вашей домашней странице, вы увидите всплеск конверсии.

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

Повышение узнаваемости бренда

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

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

Какие проблемы вы решаете для своих клиентов? Как вы улучшаете жизнь своих клиентов — в личном или профессиональном плане?

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

Как создать домашнюю страницу веб-сайта

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

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

Лучшие примеры дизайна домашней страницы (и почему они работают)

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

1. Dropbox

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

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

2. Слабина

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

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

3. Green Mountain Energy

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

4. CarMax

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

Множественные CTA направляют посетителей либо к поиску автомобиля для покупки, либо к продаже своего подержанного автомобиля.Чисто и просто. Изображение главного героя явно индивидуализировано, потому что вы можете увидеть логотип CarMax на номерном знаке автомобиля.

5. thredUP

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

Надеюсь, вы этого не сделаете.

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

6. StudioPress

Минимальные элементы, плоский дизайн иллюстраций и приглушенные цвета делают дизайн домашней страницы StudioPress сияющим. Благодаря копии вы точно знаете, что StudioPress делает для своих клиентов: «Создавайте потрясающие сайты WordPress». Затем у вас есть три CTA на выбор в зависимости от того, как вы хотите действовать.

7. Линия здоровья

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

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

8. Сумасшедшее яйцо

Вы не думали, что я напишу эту статью без Crazy Egg, не так ли? Главная страница этого веб-сайта ориентирована исключительно на то, чтобы побудить посетителя ввести свой URL-адрес для просмотра тепловой карты. Также есть ссылка, по которой можно начать 30-дневную бесплатную пробную версию, с надписью «Отменить в любое время» рядом с ней.

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

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

9. Abacus Plumbing

Это сильно отличается от других примеров на этой странице, но мне очень нравится, как Abacus Plumbing структурировала свою домашнюю страницу.

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

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

10. trivago

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

11. Сенчури21

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

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

12. Марк Джейкобс

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

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

13. Лаура Уортингтон Шрифты

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

В то же время элементы не кажутся загроможденными, и вы сразу понимаете, что продает Лаура Уортингтон.

14. Skype

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

Затем у вас есть три вещи, для которых люди используют Skype: разговор, чат и совместная работа. Кнопка CTA с синим фоном и белым текстом красиво привлекает к себе внимание.

15. Фитнес-блендер

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

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

16. Гнездо

Копия и изображения занимают центральное место в дизайне домашней страницы Nest.В этом примере я вижу некоторые элементы дизайна Apple. У вас есть продукт, выстроенный во всех его цветах, и слоган «Экономия энергии никогда не выходит из моды». CTA «Купить сейчас» точно сообщает посетителям, что им делать дальше.

17. Международный аэропорт Тостмастерс

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

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

18. Bookouture

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

19. Ensurem

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

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

20. Горячая линия по предотвращению самоубийств

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

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

21. L’Oursin

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

22.Пестрый дурак

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

23. FindLaw

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

24. UnitedHealthcare

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

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

25. Зрителей

Если вы посмотрите мои видео на YouTube, то знаете, что мы с Адамом регулярно проводим серию по четвергам, где мы отвечаем на вопросы людей, оставивших комментарии к предыдущим видео. Компания Адама Viewership.com направлена ​​на то, чтобы помочь людям воспользоваться преимуществами видеомаркетинга.

Дизайн домашней страницы идеален. Мы видим розовый / красный цвет всего в двух местах, а зеленый — только в двух местах.Таким образом Viewership привлекает внимание посетителей к релевантным частям страницы.

26. Lyft

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

27. ступица

Мне нравится дизайн домашней страницы hubEngage, потому что он самый удобный и привлекательный.«Раскройте потенциал вовлеченных сотрудников». Это единственная цель бизнеса. Затем у вас есть окно чата в правом нижнем углу, что является отличным UX-решением, и актуальное изображение героя.

28. Старбакс

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

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

29. Копировщик

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

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

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

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

30. Убер

Любой, кто меня знает, скажет вам, что я ненавижу водить машину. Я всегда звоню Уберсу, чтобы забрать меня.

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

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

Это непростая задача, особенно с таким небольшим количеством слов на странице.

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

Это два совершенно разных сегмента рынка. Тем не менее, это как-то работает.

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

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

31. Розеттский камень

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

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

Мы снова имеем дело с изображением героя, на этот раз мирского путешественника, который использует свой телефон — якобы для доступа к приложению Rosetta Stone.

Почему это работает: Rosetta Stone лидирует со своим основным USP: технологией TruAccent. Дополнительные преимущества технологии выгодно отличают ее от конкурентов и делают ее более эффективной в помощи людям в овладении языковыми навыками.

Тогда у вас есть еще одно ценностное предложение: компания работает уже 25 лет.Есть и социальное доказательство: «Самое надежное языковое решение…»

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

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

Эта домашняя страница отлично справляется с задачей привлечь внимание посетителя и предоставляет множество мест для изучения, не отвлекая посетителя от основного CTA.

Контрольный список по оптимизации домашней страницы

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

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

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

1. Напишите четкий и четкий заголовок.

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

• Создайте свой авторитет в Интернете с помощью высокоэффективного контент-маркетинга
• Доберитесь — ваш день принадлежит вам
• Единственное языковое программное обеспечение с TruAccent ™ — лучшей в мире технологией распознавания речи.

Очевидно, они очень разные, но у них есть несколько общих черт.

Во-первых, они используют слова силы. Это слова, которые сразу вызывают эмоции или связывают с читателем.

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

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

Затем у вас есть Розеттский камень, в котором слова «только» и «лучший в мире» используются для выражения авторитета и авторитета. Эти слова подразумевают, что Розеттский камень — это все, что вам нужно для достижения ваших целей.

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

2. Не путайте пользователей

Одна из наиболее частых проблем, которые я замечаю на домашних страницах, — это конфликтующие CTA.

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

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

Другими словами, будьте проще.

Вы хотите, чтобы на странице было достаточно информации, чтобы привлечь внимание, но не настолько, чтобы читатели не знали, где искать.

3. Добавьте прямую и большую кнопку CTA для предложения

Ваш CTA — это то место, где вы хотите, чтобы посетители сосредоточили свое внимание. Это приглашение: вот что делать дальше!

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

Кроме того, убедитесь, что вы используете фразу призыва к действию, которая имеет смысл и передает ценность. Призыв к действию вроде «Подписаться сейчас» меня не волнует. Измените его на: «Подпишитесь сейчас, чтобы получить бесплатное исследование». Теперь мне интересно.

4. Используйте контрастные цвета

Я большой поклонник контрастов, когда дело касается моих сайтов. Вы увидите мой фирменный оранжевый цвет на NeilPatel.com и Neil Patel Digital.

Контрастность не означает яркого или неприятного цвета. Вы можете создать контраст разными способами.

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

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

5. Держите предложение в верхней части страницы

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

Как вы можете видеть из лучших примеров домашней страницы, которые я упомянул выше, каждая из них включает предложение или USP (уникальное торговое предложение) в верхней части страницы. Это очевидно с момента прихода посетителя.

Как узнать, что работает, а что нет на вашей домашней странице

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

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

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

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

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

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

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

Заключение

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

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

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

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

20 примеров дизайна UX для вдохновения

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

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

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

Вот почему мы составили список из 20 замечательных примеров, когда UX-дизайн был актуален. Держите свои любимые инструменты UX-дизайна под рукой — вы собираетесь вдохновиться!

1. Instagram: пример визуальной эффективности

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

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

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

2. Booking.com: пример упрощенного опыта

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

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

3. Spotify: пример визуальной и поведенческой согласованности

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

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

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

4. Airbnb: пример минималистичного UX

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

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

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

5. Uber: ментальные принципы, применяемые к совершенству

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

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

6. Duolingo: пример визуальной иерархии

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

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

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

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

7. Disney + (для Smart TV): пример предотвращения ошибок

Disney + произвела настоящий фурор с момента своего дебюта в мире потокового контента. Это правда, что у его UX-дизайна было немного шаткое начало, но изменения и обновления изменили пользовательский опыт к лучшему.Есть один аспект пользовательского опыта, который, по нашему мнению, абсолютно верен в этом примере дизайна UX: предотвращение ошибок.

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

Disney осознал этот простой факт и разработал меры, которые помогают пользователям меньше печатать и добиваться большего прогресса. Такие вещи, как ввод электронной почты, упрощаются благодаря тому, что приложение предлагает наиболее распространенные провайдеры электронной почты, такие как «@gmail.com »в качестве предложения для пользователей, которые входят в систему или регистрируются. Это может показаться незначительным, но для пользователей это имеет большое значение. Еще один способ, которым Disney минимизирует ошибки, — это включение подтверждающих сообщений, когда задачи выполнены успешно.

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

8. Twitch: бесперебойная работа пользователей

Twitch — огромное имя в игровом бизнесе. Платформа ориентирована на прямые трансляции видеоигр, включая даже киберспортивные мероприятия, такие как массовые соревнования. Он также работает как лучший пример дизайна UX для дизайнеров UX.

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

9. Calm: передача расслабленного пользовательского опыта

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

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

10. Telegram: пример пользовательского управления в дизайне

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

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

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

11. H&M: пример отличной навигации в UX

H&M — классический пример дизайна UX, который должен обрабатывать огромное количество контента. Сам магазин предлагает покупателям широкий выбор товаров, что создает потребность в исключительном дизайне навигации, объединяющем все это.

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

Еще одна вещь, которая нам нравится на веб-сайте H&M, — это их «хлебная крошка». Сделано так, чтобы было заметно, но не бросаться в глаза, давая пользователям возможность перемещаться по категориям и уровням в магазине. Речь идет о том, чтобы помочь пользователям увидеть, где они находятся в данный момент, и помочь им найти, куда они хотят отправиться, работая как прекрасная вторичная форма навигации.

12. Amazon Kindle: пример дизайна доступного UX

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

Фактически, Amazon’s Kindle помогает пользователям с помощью собственной вспомогательной технологии VoiceOver. Это помимо наличия ряда настроек, которые предназначены не только для удобства чтения, но и для облегчения работы пользователей с умеренными нарушениями зрения.Добавьте к уравнению такие функции, как настоящая линейка для чтения, на которую пользователи могут положиться, чтобы направлять свой взгляд, — и вы получите очень доступный дизайн продукта. Это прекрасный пример UX-дизайна, который понравится всем!

13. Skyscanner: пример статуса видимости системы

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

Однако есть один аспект, который нам очень нравится здесь, в Justinmind. Skyscanner всегда сообщает пользователям, что происходит. Яркий пример — это когда пользователь выполняет поиск с определенными требованиями, что может занять некоторое время. В течение этого времени ожидания пользователей заверяют, что поиск выполняется, а не из-за какой-то ошибки в системе.

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

14. Tripadvisor: пример точного поиска

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

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

15. Trello: пример, позволяющий пользователям делать то, что они хотят

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

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

16. Bla Bla Car: пример бесшумного UX

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

Еще одна вещь, которая нам нравится в Bla Bla Car, — это то, как приложение разбивает информацию на мелкие кусочки, как в Duolingo. Несмотря на объем информации, которым приложение должно делиться с пользователями, все остается простым, потому что эта информация не предоставляется сразу.

17. Vueling: пример отличной вторичной навигации

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

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

18. Nike: пример UX-дизайна, который продает

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

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

19. WestWing: быстрое получение пользователями форм

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

20. HBO: сила индикаторов прогресса

Кто не любит HBO? Мы в Justinmind любим его как за потрясающую серию, так и за продуманный дизайн UX.Теперь ясно, что HBO взяла заметки от ветеранов бизнеса потоковых сервисов, таких как Netflix.

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

Завершение замечательных примеров UX-дизайна

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

10 удивительных примеров дизайна взаимодействия

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

Что такое интерактивный дизайн?

Дизайн взаимодействия — это облегчение взаимодействия между пользователями и продуктами (чаще всего это приложения или веб-сайты). Согласно Interaction Design Foundation, «цель интерактивного дизайна — создавать продукты, которые позволяют пользователю достичь своих целей наилучшим образом.Другими словами, дизайнеры взаимодействия несут ответственность за создание каждого элемента на экране, с которым пользователь может взаимодействовать, будь то посредством щелчка, пролистывания, касания или какого-либо действия.

Пять измерений интерактивного дизайна служат полезной моделью для понимания того, что он включает в себя. Впервые представленная Джиллиан Крэмптон Смит, академиком интерактивного дизайна, модель включала только четыре измерения. Кевин Сильвер, старший дизайнер взаимодействия в IDEXX Laboratories, добавил пятый.

1D: Слова должны быть простыми для понимания и сообщать пользователю необходимый объем информации (слишком большое количество деталей может подавить, а слишком мало информации может вызвать путаницу).

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

3D: Физические объекты или пространство относится к фактическому оборудованию и объектам, с которыми взаимодействует пользователь.Например, они используют смартфон или ноутбук с мышью? А где они, за своим столом или в переполненном метро?

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

5D: Поведение было добавлено Кевином Сильвером и включает в себя то, как предыдущие измерения определяют взаимодействия продукта. Он также включает реакцию пользователей и продукта.

По теме: 6 причин, по которым UX-дизайнерам следует изучить жестовое взаимодействие

10 примеров дизайна взаимодействия

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

Автор: Джони Вино. Разделить счет с друзьями не всегда так просто, как кажется, особенно если вы в большей степени визуальный человек, чем человек с цифрами. Эта концепция приложения позволяет ввести общий счет, выбрать процент чаевых, а затем посмотреть, сколько будет платить каждый человек.Лучшая часть? Вместо того, чтобы вручную настраивать роль каждого человека и постоянно обновлять долю каждого пользователя, вы можете просто изменить размер раздела каждого человека в приложении, и числа будут автоматически пересчитываться для всех.

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

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

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

Сделано Рахулом. Дизайн. Если вы занимаетесь охотой за домом и не можете лично увидеть объект, следующий лучший вариант — это виртуальный тур. Эта концепция приложения для недвижимости Spec использует наше естественное поведение при взгляде на новое пространство. Вы можете щелкнуть любую комнату, например кухню или гостиную, и переместить телефон, чтобы получить 360-градусный обзор. Переключаться между комнатами можно одним нажатием.

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

Дмитрий Петренко. С приложениями для смартфонов ставить на охрану и следить за своим домом проще, чем когда-либо, но между 94% -99%

Связано: Создание инструмента для записи взаимодействий с пользователем

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

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

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

Мы пропустили ваш любимый пример интерактивного дизайна? Поделитесь этим с нами в Twitter: @InVisionApp.

7 примеров этичного дизайна, которые сделают Facebook лучше для всех

Эта статья была первоначально опубликована в июне 2018 г. и обновлена ​​в октябре 2020 г.

«Когда такая компания, как Facebook, улучшает впечатления от своих продуктов, это похоже на массаж, который мы делаем говядине Кобе: он делается не для пользы коровы, а для того, чтобы сделать корову более качественным продуктом.По этой аналогии вы корова ». — Aral Balkan, дизайнер по этике, основатель Ind.ie

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

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

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

Одна из крупнейших организаций, борющихся за лучший цифровой мир, Center for Humane Tech сообщает:

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

Вау, тяжело… По мнению Центра, мы подошли к возможному поворотному моменту в подходе к дизайну продукта.

Для того, чтобы это произошло предпочтительным образом, они выделяют четыре задачи:

1. Вдохновляющие компании
2. Оказание политического давления
3. Создание культурного пробуждения
4. Привлечение сотрудников

Подробнее о дальнейших шагах можно узнать здесь.

Цель статьи

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

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

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

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

Эти примеры применимы к Facebook, но многие из них будут перенесены и на множество других социальных платформ. Мы не хотим злить богов дизайна в Калифорнии. Мы знаем надежный процесс UX и чрезвычайно осознанное принятие решений на основе сложной и хорошо изученной информации, лежащей в основе их решения.Мы также понимаем, что Facebook — это, в конце концов, предприятие, ориентированное на прибыль.

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

Правила визуального мерчандайзинга в табачной промышленности служат хорошим примером из другой отрасли.

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

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

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

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

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

Пример: этический редизайн Facebook

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

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

1. Индикатор затраченного времени и данные об использовании
2. Параметры фильтрации ленты новостей
3. Убийство бесконечного свитка
4. Почему я вижу то, что вижу
5. Повышение узнаваемости сохраненного предмета
6. Группировка уведомлений (системная и человеческая)
7. Планирование отключения звука уведомлений / «отключение звука» / пакеты уведомлений
8. «Chetics» — этические особенности обмена сообщениями

1.Индикатор «Затраченное время» и данные об использовании

Одна из самых больших ловушек Facebook заключается в том, что он «заставляет» тратить время впустую.

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

Наше предложение, основанное на принципах этического дизайна:

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

Вот и все! Хорошо, также если щелкнуть, может открыться оверлейное окно, чтобы дать более подробный взгляд на статистику и общие сведения о времени, затраченном на прокрутку и просмотр. Хотя он должен скрывать счетчик 👁️, он будет полезно напоминать людям, сколько времени они проводят непреднамеренно.

2. Параметры фильтрации новостной ленты

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

В сообщении FB 2013 года один из их исследователей написал, что они определили «беспорядок» как главную проблему. Она правильно упоминает,

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

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

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

Наше предложение, основанное на принципах этического дизайна:

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

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

3. Убиваем бесконечную прокрутку

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

Хорошо известный пример представляет собой эксперимент с бездонной суповой чашей, проведенный профессором Корнелла Брайаном Вансиком. Когда миска наполнялась, участники съели на 73% больше калорий. Репликация тестировалась при повторном наполнении серверов и самозаполняющейся чаше, и разница оставалась значительной.Пустая чаша представляет собой сигнал остановки, когда разум должен проснуться и спросить: «Я действительно хочу большего?»

Наше предложение, основанное на принципах этического дизайна:

Мы предлагаем кнопку «Загрузить еще» внизу ленты (новостей или профиля), которая также позволит Facebook отображать контент в области нижнего колонтитула, что положительно.

Кроме того, текст под кнопкой «Загрузить еще» может беспрепятственно предоставлять информацию об объеме потребляемого контента и о том, сколько еще требуется при нажатии.

4. Почему я вижу то, что вижу

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

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

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

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

Наше предложение, основанное на принципах этического дизайна:

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

Категории могут включать, но не обязательно останавливаться на:

“Потому что:

• вам нравится это хобби / это занятие / этот политик / много таких страниц / и т. Д. »
• вы подружились с КТО-ТО »
• вы были здесь / сделали то / понравилось это / попробовали то / и т. Д. »
• это нравится вашей сети »
• сейчас в тренде »
• это важно »
• по какой-либо другой причине, которую я не могу знать, потому что алгоритм «на удивление неэлегантен, безумно ртутный и упорно непрозрачный.”

Кстати, я также хотел бы знать, чего я не вижу и почему! Но не будем сейчас туда идти.

5. Повышение узнаваемости сохраненного элемента

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

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

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

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

Наше предложение, основанное на принципах этического дизайна:

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

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

6. Управление уведомлениями

а) Группировка уведомлений

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

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

Когда он прибудет, вы никогда не узнаете, заботитесь ли вы (ваш поклонник комментирует под вашим 5-летним аватаром) или нет (обновление статуса от старого одноклассника, о котором вы вообще никогда не заботились).

б) Планирование отключения уведомлений и пакеты

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

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

. Мы предлагаем отключение уведомлений, планирование пакетов уведомлений, отключение звука и группы уведомлений.

7. «Хатики»

Помните, что означало «доступен», «нет на месте», «занят», «не беспокоить» и «режим инкогнито»? Pepperidge Farm помнит.

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

Slack зарекомендовал себя в этом отношении лучшим учеником. Это связано с разницей в их целевой аудитории. Messenger имеет невероятно разнообразную базу пользователей: 1.3 миллиарда пользователей по всему миру в 2018 году. С другой стороны, в Slack в 2017 году было 6 миллионов активных пользователей в день, при этом гораздо более конкретный контекст использования был связан с производительностью.

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

Наши предложения, основанные на принципах этического дизайна:

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

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

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

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

Будущее ближе, чем вы думаете

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

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

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

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

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

UX работает с растущими стартапами и признанными технологическими гигантами по всему миру.

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

Наши специалисты будут рады помочь со стратегией UX, исследованием продуктов и пользователей, дизайном UX / UI и т. Д.

Индекс примеров шаблонов проектирования ARIA

7 современных примеров дизайна веб-сайтов (и чему вы можете по ним научиться)

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

Знаете ли вы, что как только посетитель формирует мнение о вашем сайте, ему требуется около 15 секунд, чтобы решить, остаться ему или уйти?

Если добавить к этому сокращение объема внимания людей в Интернете, становится все труднее удерживать посетителей в Интернете.

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

Итак, что именно делают эти компании и как их «украсть» и использовать на своем веб-сайте?

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

Готовы? Давайте нырнем.

1. Mailchimp

Mailchimp — это комплексная маркетинговая компания, наиболее известная своими услугами электронного маркетинга. Компания занимается этим бизнесом уже почти 20 лет, и вот что они делают правильно.

Превосходное использование ярких цветов

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

Фон также помогает выделиться наиболее важным CTA — «Выберите план», который направляет вас на страницу цен Mailchimp, и «Зарегистрироваться».

Но это еще не все, что делает этот яркий желтый цвет на сайте.

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

Отличное использование пробелов

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

Более того, Mailchimp использует простую иллюстрацию, чтобы подчеркнуть ценное предложение, которое они предлагают клиентам.

Безупречное использование типографики

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

2. Тесла

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

Что можно узнать из макета веб-сайта Tesla?

Сделайте короткий и простой путь покупателя

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

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

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

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

Будьте ориентированы на продукт

Как указывалось ранее, первое, что вы заметите в момент, когда зайдете на сайт, — это все продукты, которые они предлагают.

Но это не самое лучшее.

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

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

Будьте интерактивными для пользователя

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

От типа колес до цвета салона — вы будете тесно взаимодействовать с сайтом, чтобы настроить автомобиль по своему вкусу.

3. Amazon

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

Вот почему так много людей со всего мира делают покупки на Amazon.

Вы можете легко перемещаться по сайту

Имея так много товаров на продажу, вы можете подумать, что веб-сайт Amazon загроможден, но это не так.

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

Amazon настолько оптимизирован, что вы не можете потеряться, пытаясь найти то, что хотите, что упрощает конверсию посетителя в покупающего клиента.

Превосходное использование четких изображений

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

Amazon также использует цветовые контрасты — изображения с яркими цветами — чтобы изображения выделялись на их фоне и привлекали внимание посетителей Интернета.

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

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

Предлагает простой путь покупателя

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

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

Короткий и простой путь облегчает покупателям покупку на сайте, что увеличивает продажи и увеличивает прибыль.

Делает покупки персонализированными

Когда вы войдете в систему, Amazon попросит вас поделиться некоторой информацией, которая формирует основу для персонализации вашего взаимодействия с пользователем.

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

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

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

4. Netflix

Netflix — компания, которая произвела революцию в просмотре фильмов, превратив любую семью в кинотеатр. Компания привлекла внимание почти всех, имея более 200 миллионов платных подписчиков по всему миру.

Это большое дело, и вот почему так много людей любят использовать Netflix помимо фильмов.

Отличное использование темного режима

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

Более того, темный режим помогает сэкономить заряд батареи, если вы смотрите на своем телефоне или другом OLED-экране.

Отличное использование пробелов

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

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

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

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

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

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

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

Практически не использует копии

Netflix выводит минимализм на совершенно новый уровень, используя всего содержания из одного предложения , чтобы объяснить, что вы получите за оплату членства.

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

Отличное использование типографики

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

Текст красиво контрастирует с темным фоном, привлекая к нему внимание.

Безупречное использование ярких образов

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

Теперь эти видео и анимация имеют резкий контраст с фоном, что помогает вам сосредоточиться на них.

5. Fitbit

Fitbit — это фитнес-компания, которая много лет продает трекеры и часы, чтобы помочь своим клиентам контролировать свое здоровье.У компании около 30 миллионов активных пользователей.

Вот как веб-сайт Fitbit помогает клиентам сосредоточиться на покупке товаров.

Имеет минималистичный дизайн

Fitbit имеет только три кнопки меню на главной странице. Каждая кнопка меню — это категория продукта, представляющая то, что предлагает Fitbit.

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

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

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

Использует четкие изображения

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

Изображения имеют резкий контраст на фоне, что делает их более заметными.

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

Отличное позиционирование CTA

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

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

Превосходное использование ярких цветов

Fitbit использует различные жирные цвета на всем веб-сайте, чтобы выделить наиболее важные элементы.

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

Отличное использование типографики

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

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

6. Рока

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

Вот чему вы можете научиться у Рока.

Отличное использование привлекающих внимание визуальных эффектов

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

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

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

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

Такие привлекательные визуальные эффекты запоминаются и увлекательны, а также привлекают внимание посетителей Интернета.

Простая навигация

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

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

Отличное использование жирного шрифта

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

Rocka также использует увеличенный текст по всему сайту, чтобы привлечь внимание к тому, что более важно: их продуктам и услугам.

Превосходное сочетание цветов

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

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

7. Асана

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

Вот что делает сайт Asana исключительным.

Отличное использование пробелов

Asana использует пробелы, чтобы привлечь внимание к важному.

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

Превосходное позиционирование ценностного предложения

Как только вы попадете на главную страницу Asana, ваше внимание будет обращено на ценностное предложение в верхнем левом углу, написанное большими жирными буквами.

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

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

Отличное сочетание визуальных эффектов и короткой копии

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

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

Акцент на надежности

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

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

Сделайте свой сайт заметным с помощью современного дизайна

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

Итак, что может выделить ваш сайт сейчас?

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

  Где узнать больше

  Чтобы узнать больше о том, как создавать лучшие веб-сайты и интерфейсы, ознакомьтесь с онлайн-курсами Interaction Design Foundation по веб-дизайну для удобства использования и шаблонам дизайна пользовательского интерфейса для успешного программного обеспечения.