Дизайн примеры: 40+ примеров блестящего дизайна домашних страниц

Содержание

40+ примеров блестящего дизайна домашних страниц

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

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

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

NoBull

Чему мы можем научиться: простая навигация и красивый дизайн могут (и должны) работать вместе. Хорошо организованный набор интерактивных «плиток» делает этот сайт удобным для «сёрфинга».

Lega-Lega

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

Urban Originals

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

Uncrate

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

Scotch and Soda

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

Подсказка 1: упростите ваш язык

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

Читайте также: 25 примеров великолепного дизайна интернет-магазинов

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

Jib

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

Hello Monday

Чему мы можем научиться: этот дизайн, удостоенный приза «Сайт Года» (Site Of The Year) на конкурсе профессиональных веб-дизайнеров и разработчиков AWWWards, фокусируется на общем виде страницы. Минимальный текст хорошо работает в случае этой дизайнерской фирмы, потому что ее конкурентные преимущества лучше всего передаются визуально, но компаниям из других отраслей может потребоваться размещение на главной странице более четко сформулированного ценностного предложения.

Ride for the Brand

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

Andy Patrick Design

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

This is the Brigade

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

Galpin

Чему мы можем научиться: чтобы показать характер своей деятельности, дизайнер Тайлер Галпин (Tyler Galpin) на домашней странице применяет изысканную типографику. Обратите внимание, что страница в совсем малой степени ориентируется на изображения — для передачи маркетинговых сообщений в основном используется текст.

Made by Vadim

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

Art & Code

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

Riley Cran

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

Подсказка 2: упростите ваш дизайн

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

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

Читайте также: Дизайн лендингов: преимущества минимализма с точки зрения психологии восприятия

Бренды: примеры главных страниц компаний-ритейлеров

REI

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

Austeen Beerworks

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

Jaquet Droz

Чему мы можем научиться: страница швейцарского часового дома Jaquet Droz основана на визуализации главной «рабочей лошадки» компании — часах The Bird Repeater. Роскошное изображение в высоком разрешении также привлекает внимание посетителей к продукту — очевидно, самому важному элементу этой страницы.

Grey Goose

Чему мы можем научиться: домашняя страница должна продемонстрировать индивидуальность и эстетику бренда. В случае Gray Goose речь идет об элегантных изображениях с высоким разрешением и «отполированной» композиции страницы. Миссия выполнена.

Toyota

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

Jacqui Co

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

Buffalo Wild Wings

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

Подсказка 3: создайте пользовательский опыт бренда

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

Читайте также: 13 идеальных, с точки зрения дизайна, посадочных страниц известных брендов

Индустрия развлечений: домашние страницы знаменитостей и средств массовой информации

Clouds over Cuba

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

Pottermore

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

Heath Life

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

Magic Leap

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

Life and Times

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

TV Safety

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

Подсказка 4: проявляйте креативность

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

Читайте также: 39 примеров оригинального дизайна лендингов

«Технари»: примеры домашних страниц

Rezdy

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

Prezi

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

Function Point

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

CSS Riffle

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

Urban Bound

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

Подсказка 5: оптимизируйте для пользователей

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

Читайте также: 15 образцовых примеров мобильного веб-дизайна

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

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

12 примеров хорошего веб-дизайна — Merehead

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

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

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

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

Carmax

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

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

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

CNN

Новостные сайты, как правило, уступают онлайн-магазинам в красоте. Но цель пользователя – узнать последние события дня в той или иной сфере. BBC, New York Times, Reuters и другие бренды поставляют самую актуальную информацию, освещая максимум деталей. Но, согласно исследованию Nettop20, первое место получил CNN.

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

Slack

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

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

Разработчикам нужна регистрация и скачивание приложения. Потому они не дают пользователю сильно засиживаться на сайте. Краткая изложение особенностей и возможностей ПО – все, что есть на домашней странице. В конце предложение: «Попробуйте Slack бесплатно вместо со своей командой».

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

Booking.com

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

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

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

Evernote

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

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

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

Ripple

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

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

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

Protest Sportswear

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

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

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


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

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

Simplychocolate.dk

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

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

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

Словами этот дизайн не передать. Просто попробуйте.


Sirinlabs

Еще один пример из мира криптовалют. Sirin Labs направляют свою деятельность на облегчение использования технологии блокчейн. Об этом они говорят на своей стартовой странице.

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

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


Nixon

Еще один онлайн-магазин, выигравший в номинации «Лучший веб-дизайн 2015 года» по версии Awwwards. Сайт Nixon позволяет выбрать все элементы часов (от материала ремешка до цвета) прямо на домашней странице, благодаря чему пользователь тратить минимум времени на выбор.

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


Adobe

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

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


Заключение

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

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

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

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

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

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

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

Bigdropinc

Контраст задается сочными цветами и 3-мя отличными шрифтами. Очень практичное использование типографики просто, но мощно.

Oribe

Сайт американского бренда косметики – пример превосходного eCommerce дизайна в чёрно-белом утонченном стиле. Главная страница со структурой Landing Page и эффектным видео в первом экране, нацелена на VIP клиента. Следом, по наведению курсора, привлекают внимание анимация стрелки на фоне и фото с эффектом приближения (товара / модели). До карточки товара всего два клика.

Truedigital

Дизайн главной страницы плоского сайта со стильными эффектами и крупной типографикой.

Activetheory

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

Finnlough

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

Oursroux

Интересный сайт-портфолио французского дизайнера с минималистичным дизайном.

Gelateriadelbiondo

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

Kret

КРЭТ – Концерн РадиоЭлектронных Tехнологий. Выразительный сайт с геометричным дизайном.

Moteurdereussites

Один из ярких гугл-проектов на базе домена withgoogle. Сайт интересен деталями оформления с hover-эффектами.

Marie Sixtine

Современный дизайн сайта интернет-магазина в стиле минимализма.

Codetasty

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

Quiver

Колоритный flat сайт с компактной начальной страницей, скролл/ховер эффектами и анимацией персонажа.

Natan

Главая страница свежего e-Commerce сайта с дизайном в стиле минимал.

BBF

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

Snap Surveys

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

Soulight App

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

Molekule

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

Repsly

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

В завершение

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

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

20 примеров веб-дизайна, которые задают тон 2020 году – Сей-Хай

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

Пока 2020 год в веб-дизайне продолжает традиции 2019-го: сайты с большим количество анимации и смелых цветов. Мы собрали 20 свежих примеров отличного веб-дизайна. Все картинки кликабельны и ведут на сайты.

Вдохновляйтесь!

Plink

Чтобы конкурировать с гигантами вроде PayPal, вам нужен убедительный бренд и простое сообщение. А еще можно удивить первым впечатлением — как сделал Plink со своей #D-анимацией.

Madame Turfu

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

Nathan Taylor

Как может не нравиться этот сайт? Вы точно найдете здесь что-то для себя; наша любимая часть – разные режимы освещения.

Meatable

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

Sussex Royal

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

Emotive Feels

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

UN\REAL

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

Kate Jackling

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

Helias

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

Klokki

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

Jonnie Hallman

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

eaast

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

Pantheone Audio

Pantheone Audio доказывает, что элегантная прокрутка все еще очень важна в 2020 году, и использует ее для плавной навигации по сайту со сложной сеткой.

Leaf

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

Mociun

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

Jon Way

В портфолио показаны работы больше чем за 10 лет творчества. Чтобы пользователи не заскучали при скроллинге, авторы добавили анимаций и классный эффект «статики» – он выдержан по всему сайту.

Kota Yamaji

Еще одно портфолио – но оно кардинально отличается от предыдущего. Здесь все просто пестрит цветов. Вау!

Robb Owen

За последние пару лет мы видели много анимированных векторных аватаров, но редко встречаемся с такими проработанными. Робб Оуэн постарался на славу: движение курсора делает его аватара реальным.

Glasgow International Festival 2020

Что нужно для международного фестиваля в Глазго? Конечно же, кельтская типография и яркие цвета!

Megababe

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

Источник

Фото на главной: Lee Campbell

Читайте также:

Свежая порция вдохновения: самые инновационные сайты 2019 года

Тренды веб-дизайна 2020: девяностые возвращаются!

Кейс: как NGN Agency создавали дизайн сайта к 100-летию Citroën

Примеры хорошего веб-дизайна

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

Советы по дизайну для успешного сайта

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

Например, вот сайт магазина Tessemae’s, который продает приправы:

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

А вот пример из сферы услуг — современный сайт архитектурно-строительной компании Kephart:

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

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

  1. Знайте уровень своего пользователя (сайт, с помощью которого можно строить математические модели будет сильно отличаться по интерфейсу от онлайн-магазина с одеждой).
  2. Используйте уже известные модели (если пользователь не поймет, как пользоваться меню сайта, то он вряд ли уделит время его содержимому).
  3. Создавайте визуальную иерархию (покажите пользователю, что самое важное и четко разделяйте блоки текста, чтобы упростить просмотр).
  4. Не усложняйте (если что-то можно сделать еще проще — делайте).

Например, Wunderlist использует значки и принципы, которые знакомы пользователям по почтовым (перетаскивание дел в списке, inbox, чат) и офисным приложениям и календарям (оповещения, сортировка), а также стандартное для бумажных списков вычеркивание выполненных дел:

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

Например, на сайте Starbucks использован фирменный оттенок зеленого и черный — цвет основного напитка, который компания продает в 67 странах мира:

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

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

  1. Понятно ли, кому принадлежит сайт?
  2. Заметен ли логотип компании?
  3. Предоставляются ли подробные контактные данные: почтовый адрес, карта проезда, время работы, номера телефонов, адрес электронной почты.
  4. Есть ли на сайте раздел, посвященный сотрудникам компании? Наличие такого раздела создает ощущение уже состоявшегося знакомства.
  5. Имеются ли на сайте отзывы клиентов и портфолио?
  6. Что известно об истории компании? Как давно она существует? Кто основатель? Кто инвесторы? Какие у компании цели?
  7. Есть ли сведения о гарантийном возврате и обслуживании? Условиях использования и политике конфиденциальности?

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

Также пользователю сразу показывают стоимость техники — это вызывает доверие.

Последние тенденции в дизайне сайтов

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

Адаптивность

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

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

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

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

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

Распространение UI-паттернов

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

Чтобы понять, можно ли следовать той или иной тенденции, спросите себя:

  1. Повлияет ли она понимание цели сайта?
  2. Усложнит ли новый дизайн навигацию?
  3. Помешает ли она пользователям выполнять действия с сайтом? (Например, регистрироваться или оставлять отзывы.)
  4. Способна ли она исказить имидж бренда?

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

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

5 примеров дизайна – как нужно делать

29 Янв Плохой дизайн против хорошего дизайна: 5 примеров, которым можно поучиться

Posted at 14:19h in Интерфейс by Victor Makhankov

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

Они осветляют подводные камни в работе дизайнера для того, чтобы избежать и дать нам понять, как правильно перевести теории дизайна в решения, которые работают в реальном мире. Джаред Спул (Jared Spool), американский писатель, исследователь и эксперт по удобству использования («usability»), однажды сказал: «Хороший дизайн, когда он выполнен правильно, становится невидимым. Только когда он сделан бедно, мы замечаем его». Что же, давайте посмотрим на пять примеров очевидно плохого дизайна и прольем свет на то, как хороший дизайн может работать сам на себя. А также извлечём несколько уроков, как мы все можем создавать прекрасный и невидимый опыт для наших пользователей.  

 

 

 

1.Информационная перегрузка

Плохой пример: Дорожные знаки на парковке в Лос Анджелесе (Los Angeles, далее – LA)

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

Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Поскольку такие знаки на парковках ЛА до сих пор существуют, то, пожалуй –  это яркий пример.

Представьте на минуту, что Вы – водитель, который едет вдоль дороги во вторник, в 9 утра. Можно ли Вам припарковаться в этом месте? То, что звучит как простой вопрос, требует большого процесса размышления для ответа. Как дизайнеры, мы часто сталкиваемся с ситуациями, где мы должны передать  много информации на маленьком пространстве. Знаки на парковках LA могли бы быть крайним случаем, но часто разработка дизайна для мобильных приложений означает столкновение с такой же проблемой. Можно ли найти выход в таких ситуациях: для знаков на парковке и дизайнеров в целом?

Хороший пример: Дорожные знаки Никки Сильянтенга (Nikki Sylianteng)

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

Вариант, который предложил Никки, в конечном счете был использован на парковках ЛА ­­в тестовом режиме.

Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0

Одна из причин удачного дизайна Никки– это использование в работе принципа, что называется «ориентация на пользователя»: дизайнер дает водителям просто понять, когда они могут парковаться. Ведь всё, что нужно водителям – это ДА или НЕТ, а именно такой знак им в этом легко поможет.

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

Сейчас, когда вы смотрите на знак, вы знаете, что парковка во вторник, в 9 утра не разрешена.

Бары доказывают, как на первый взгляд – всё просто.

Извлеченный урок: лучшая практика

2. Скрытая навигация

Плохой пример: LazorOffice.com

Придуманный в 1998 году Винсентом Фландерсом с компании Web Pages That Suck, термин «скрытая навигация (далее – СМН)» относится к кейсам, когда назначения посыла невидимо, пока пользователь не кликнет на это или не наведет курсор мыши. Термин «скрытое мясо» произошел от ситуации с подачи еды в столовых общеобразовательных американских школ: мясо для учеников подавалось так, что совсем не был понятен его первоначальный вид. Использование в дизайне таких элементов плохо влияет на результат, потому что они снижают понятность навигации в целом. Это добавляет когнитивной нагрузки пользователям, потому что теперь они должны догадаться, как именно передвигаться или какой клик ведет за собой определенное действие.

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

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

Author/Copyright holder:Lazor Office, LLC. Copyright terms and licence: Fair Use

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

«Нажать, чтобы узнать» – никогда не было хорошим решением для UX (user experience). Скорее всего, ваши пользователи откажутся от такой навигации и найдут альтернативное решение на сайте ваших конкурентов.

Хороший пример: Карточки курсов на веб-сайте The Interaction Design Foundation.

Слава Богу, проблемы СМН легко решаемые. Ключ к решению  – это четкое осознание того, что у вас должны быть предельно ясные метки на ссылки. Простое добавление «Просмотреть проект», что появляется при наведении курсора мыши, намного улучшит удобство пользования страницей Lazor Office.

Наши карточки курсов также НЕ секретны, как и наши ссылки.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

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

Извлеченный урок: лучшие практики

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

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

Плохой пример: iFly50.com

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

Ярким примером такого случая есть продукт iFly50.com, который был создан в честь юбилея журнала iFly от KLM. На этом сайте вы сможете увидеть 50 мест для путешествий, используя вертикальную прокрутку, а в некоторых пунктах назначения (как показано на примере ниже) появляется кнопка внизу, которая заставляет пользователя удерживать её несколько секунд при желании просмотреть большее количество фотографий.

Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Copyright terms and licence: Fair Use

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

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

Хороший пример: эластичная прокрутка на iOS

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

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

У корпорации Apple есть отличный продукт, который был разработан для мобильной операционной системы IOS. Этот продукт называется «эластичная прокрутка». Смысл такой прокрутки в том, что когда вы попадаете в определенное место или ситуацию (например, в конец веб-страницы), вам становится труднее прокручивать страницу. То есть, к действию пользователя осознанно и намеренно добавляется помеха.

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

Извлеченный урок: лучшая практика

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

  1. «Умный» дизайн: когда удобство использования не имеет значения

Плохо: Bolden.nl

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

Отличный пример вышесказанного – голландский сайт развития и стратегического дизайна Bolden:

Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

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

Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

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

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

Хороший пример: CultivatedWit.com

Веб-сайт Cultivated Wit`s – это отличный пример того, как «умный» дизайн не должен влиять на удобство пользования.

Домашняя страница Cultivated Wit отображает изображение совы.

На домашней странице Cultivated Wit вы можете увидеть изображение совы, которое меняется, когда ваша мышь попадает на неё.

Сюрприз! Сова моргает вам, когда вы наводите курсор на неё. Обратите внимание на разумное распределение белого пространства.

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

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

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

И веб-сайты могут быть «умными» без ущерба UX (user experience).

Копия (четкая, которая выделяется на контрасте) создает смысл остроумия. Но, к сожалению, это не похоже на то, что пытались достичь Bolden, что понесло за собой ухудшение удобства использования. Есть только одна маленькая проблема – это текст «Join our email club». Он, без сомнения, должен быть более видимым, но если брать в целом, то вебсайт Cultivated Wit – это отличный пример использования «умного» дизайна без создания убогого UX.

Извлеченный урок: лучшая практика

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

5. Чрезмерная анимация

Плохой пример: Концепция чека от PayPal на Dribbble

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

Концепция чека для PayPal, которая была разработала Владиславом Тузиным и размещена на Dribbble – это пример, как плохо можно использовать анимацию:

Анимация – красивая, но её чересчур много. В общей сложности, она отбирает 3,5 секунды чтобы посмотреть детали транзакции. Появление самого чека могло бы быть более изящным: это забирало бы меньше времени и было лучше для пользователя.

Проблема становится всё опасней, ведь дизайнерам никогда не бывает достаточно анимации. С 2016 года разработка Владислава получила больше, чем 500 лайков и 8000 просмотров. Это показывает то, насколько ошибочно дизайнеры оценивают качество анимации. Теперь, понимая тенденции среди дизайнеров выбирать напыщенные эпики, вы сможете хорошенько подумать и предотвратить головную боль. Помните о том, что пользователи приходят на сайт с целью  – мы хотим показать им все, что нужно в короткие сроки, а не пускать их в грандиозный тур по галерее.

Хороший пример: Анимация проверки у Stripe

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

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Stripe используют анимацию, чтобы заставить вещи быть быстрее, чем они есть на самом деле: это обеспечивает пользователей своевременной информацией (например, «Отправлено»), даже если они еще не получили смс-сообщение. Это помогает предотвратить чувство фрустрации у пользователя и обеспечивает уверенностью, что смс уже на правильном пути.

Рейчел Наборс, приглашенный эксперт в области веб-анимации в W3C, предлагает 5 принципов, которые необходимо помнить при создании анимации:

  1. Осознанная анимация: продумайте каждую анимацию, прежде чем создать её.
  2. Создание анимации несет в себе больше, чем 12 принципов: 12 принципов работы с анимацией от Диснея работает для фильмов, но никак не для веб-сайтов и приложений.
  3. Польза и необходимость, потом красота: эстетика должна занимать последнее место, когда речь идет об UX.
  4. Сделай ее в четыре раза быстрее: хорошая анимация обычно ненавязчивая, что означает, что она “бежит” быстро.
  5. Установите «kill switch» : для больших анимаций, таких как эффект параллакса, создайте кнопку отказа.
Извлеченный урок: лучшая практика:

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

 

Забери с собой:

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

  1. Поймите, что нужно вашим пользователям, потом передайте эту информацию.
  2. Если у вас много информации, которую нужно передать – попробуйте использовать визуализацию вместо текста.
  3. Всегда ставьте метки на ваших ссылки! Пользователям не нравятся тайные ссылки.
  4. Избегайте добавления любых помех к действиям пользователя, если они не должны отговорить от действия.
  5. Протестируйте ваш «умный» дизайн и используйте его осторожно.
  6. Анимация как проклятие: если вы будете злоупотреблять ею, то она потеряет свое влияние.

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

50 примеров лучших главных страниц сайтов — Plerdy

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

Мы уже писали о рейтинге лучших студий 2018 года по версии ресурса. Очередь пришла к дизайну Главных страниц — примеров особо интересных решений от разработчиков со всего мира. Ниже мы составили рейтинг лучших Домашних страниц, которым компетентное жюри Awwwards присвоило награду “Сайт дня”. На примере этих сайтов можно оценить, сложен ли в реализации проект, способный получить признание лидеров отрасли.

1. Главная страница Welly

Перейти на главную страницу https://www.getwelly.com/

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

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

2. Главная страница Ricky Michiels, 2019

Перейти на главную страницу https://www.rickymichiels.com/

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

В 2013 году тенденцию дизайна сайтов Веб 2.0 сменила портальная (журнальная) верстка. Круглые линии, реалистичные градиенты и объемные иконки уступили место острым углам, плоскому дизайну, минимализму и чистоте изображения. Истина “все гениальное — просто”, определяющая смысл журнальной верстки, не теряет актуальности и в 2019 году.

3. Главная страница Jomor Design

Перейти на главную страницу https://www.jomor.design/

“Лучшее портфолио — собственный сайт” — так решили специалисты канадской студии Jomor Design из Монреаля, и разработали простую веб-страницу, на первый взгляд. Обычные и всем понятные шрифты, обычные фото. Но все дело — в анимации и Parallax-эффекте. Сайт реагирует на каждое действие пользователя, то отзываясь на движение мышки, то реагируя на скролл, то привлекая внимания к ключевым моментам. Гармоничное воплощение возможностей простых эффектов — этим специалисты студии и привлекли внимание жюри Awwwards.

4. Главная страница Precision Run

Перейти на главную страницу https://precisionrun.com/

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

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

5. Главная страница Max Colt

Перейти на главную страницу https://maxcolt.com/

Украинская студия Adwanced.team поделилась с публикой Awwwards результатом работы над портфолио для отмеченного престижными наградами разработчика визуальных эффектов Max Colt, работавшего с Lil Wayne, Coldplay, Nicky Minaj, Kanye West, Imagine Dragons.

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

6. Главная страница True Ventures

Перейти на главную страницу https://trueventures.com/

Студия Ueno уже была в ТОП-25 студий по версии Awwwards-2018, уже имеет 29 наград ресурса, 13 из них — в номинации “Сайт дня”.

Студия представила новую работу, которую оценили жюри — ресурс для платформы для венчурных предпринимателей True Ventures.

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

7. Главная страница Animal

Перейти на главную страницу https://animal.cc/

Еще один корпоративный сайт для дизайн-студии Animal (Стокгольм).  Не мудрствуя лукаво, специалисты студии использовали прозрачный белый фон и простые шрифты. Но волшебство начинается во время взаимодействия: распадающиеся слоганы на первом экране при наведении мышкой, листающееся портфолио во время кликов, меняющиеся надписи раздела features. Простой с виду сайт превращается в увлекательную “залипалку”, в которой пользователь вовлекается в игру с интерактивными элементами страницы. Надолго.

8. Главная страница Ferro

Перейти на главную страницу https://ferro.pt/en/

Еще одна студия, участвовавшая в рейтинге лучших разработчиков 2018 года по версси Awwards — Bürocratik из португальского города Coimbra разработала корпоративный сайт для компании Ferro — международного производителя продукции из углеродистой стали.

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

9. Главная страница Planetary

Перейти на главную страницу http://planetary.co/

“Нужен яркий сайт, мы же дизайном занимаемся” — решили специалисты студии Planetary из США, сделав первый экран своего корпоративного ресурс похожим на клубничную жевательную резинку. Позитивный розовый вписывается как в рамки жизнерадостного настроения и успешно сочетается с бодрой анимацией взаимодействий со страницей и flat-стилем иконок и кнопок страницы. За счет этого внимание к каждому горячему объекту автоматически возрастает. А темный задний фон не выглядит скучным, давая дорогу нужным, целевым действиям.

10. Главная страница LARGO Inc. Rebranding

Перейти на главную страницу https://largo.studio/

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

11. Главная страница EvaGher Makeup

Перейти на главную страницу https://evagher.com/en

Хотите увидеть испанский подход к веб-дизайну? Со всей страстью и увлеченностью специалисты Burundanga Studio подошли к разработке веб-портфолио для визажиста EvaGher. Использование насыщенности и контрастов в фешн-фотографиях, меганадписей в духе глянцевых журналов, как будто сделанных страстной кистью испанского художника — эти приемы смогли стать достойным аргументом для жюри Awwwards и принести проекту титул “Сайт дня”.

12. Главная страница SIROPPE

Перейти на главную страницу https://siroppe.com/

Обычная практика, когда в дизайне сайта используется три цвета. Но разработчики испанской студии Siroppe в своем корпоративном сайте сумели ограничиться двумя. Остальное сделала типографика, забавная анимация и краткая, но нескучная текстовая часть. Например, на странице портфолио вместо заезженного названия в тайтл разработчики поставили крылатую фразу Гэндальфа “Бегите, глупцы!”, что уже вызывает улыбку, еще до загрузки страницы. Минимум фото для проектов и портфолио, и максимум молодежной анимации — и рецепт вкусного веб-сиропа по-испански готов!

13. Главная страница Union

Перейти на главную страницу http://www.union.co/

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

14. Главная страница Vincent Saïsset — Portfolio

Перейти на главную страницу https://www.vincentsaisset.com/

Французский разработчик интерактивных элементов Vincent Saïsset (Париж) совместно с дизайнером Ludmilla Maury разработал сайт, который должен был стать его портфолио. В проекте разработчики использовали силу современной типографики, умноженной на креативные интерактивные взаимодействия мыши, кликов и переходов.

15. Главная страница Kühl&Han

Перейти на главную страницу https://kuhlandhan.com/

Датская дизайн-студия анимации Kühl&Han заказала разработку корпоративного сайта агентству Norgram, и это проект тоже попал в номинацию “Сайт дня”. В дизайне разработчики использовали всю красоту макросъемки и 3D-визуализации, поставив анимированные 3D-ролики на первый экран. Что характерно — страница состоит из одного экрана, при этом, содержит всю информацию, которая может понадобиться — контакты, ссылка на портфолио и описание студии. Все это обыграно современной типографикой, расположено в “горячих” местах, не перетягивая на себя все внимание посетителя, но и не теряясь на динамичном фоне.

16. Главная страница Few and Far

Перейти на главную страницу https://www.few-far.co/

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

17. Главная страница Finding Ctrl

Перейти на главную страницу https://findingctrl.nesta.org.uk/

Креативный проект от манчестерской студии ToyFight (Великобритания) предлагает поразмышлять над историей интернета, которому в октябре 2019 года исполнится 50 лет. Студия уже в шестой раз попадает в рейтинг Awwwards в номинацию “Сайт дня”.

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

18. Главная страница Angle2 Agency

Перейти на главную страницу https://angle2.agency/

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

19. Главная страница Anoukia—in Pink

Перейти на главную страницу https://www.pink.anoukiaperrey.com/

Американская студия Saint Roman совместно с 3D-дизайнером Anoukia Perrey разработали ее портфолио, в котором поместили летний сет ее работ, объединив в коллекцию “Anoukia in Pink”.

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

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

20. Главная страница Fabio Fantolino

Перейти на главную страницу https://www.fabiofantolino.com/en

Дизайн-агенство Adoratorio из Бресции (Италия) — еще один номинант в рейтинге на звание “Студия года-2018” по версии Awwwards на этот раз представила сайт дня — портфолио туринского архитектора Фабио Фантолино. Проект представляет собой постепенно набирающую популярность одноэкранную версию главной страницу, с которой можно быстро перейти в другие важные разделы — услуги, об авторе, контакты и т.д. Функцию создания wow-эффекта берет на себя анимация и фото проектов архитектора, дополненные типографикой в духе глянцевых журналов.

21. Главная страница Design in Motion Festival

Перейти на главную страницу https://demofestival.com/

Использовать рекламные афиши и проспекты в качестве источника вдохновения для веб-дизайна — ход беспрецедентно смелый. Но в разработке оформления сайтов тех же мероприятий смелый шаг приобретает оттенки оптимистичного вопроса “Почему бы и нет?”

Именно интернет-афишей и представляется веб-ресурс DEMO Festival (Нидерланды), разработанный агентством Dept (Амстердам). Яркость и насыщенность цветов, вычурность и гипермасштабность типографики прицельно показывают тематику ресурса — реклама массового мероприятия. Иногда и такой ход позволяет позиционировать мероприятие с первого взгляда. Если это произойдет — дальше только дело за техникой и информативным контентом.

22. Главная страница MST—We create digital stories

Перейти на главную страницу https://mst.agency/

Яркий сайт, напоминающий россыпь сладких леденцов — именно такие ассоциации возникают при взаимодествии с корпортаивным ресурсом и портфолио московского агентства MST. Специалисты студии решили объединить две тенденции — объемность Веб 2.0, наложенную на цветовую схему и требования Material Design. Все, что есть на сайте, сделано в строгом минимализме и единстве стилей. На сайте нет фото — есть иллюстрации, любовно нарисованные под каждый проект. Жюри Awwwards оценили серьезность подхода к самопрезентации и присудили проекту заслуженный титул “Сайт дня”.

23. Главная страница Oui Will Agency

Перейти на главную страницу http://www.ouiwill.com/

Еще одно знакомое по рейтингу-2018 дизайн-студий — агентство Oui Will из сан-Диего (США). На этот раз студия представила обновленный собственный сайт, сделав ставку на Parallax-эффект, эффектные презентационные ролики и тонкую, гладкую типографику. Все разделено по экранам, для каждого слогана, ролика или новости — свой экран, никакого соседства. Сайт щедро сдобрен уместной анимацией и, где это возможно, интерактивным взаимодействием с пользователями, при этом, оставляя дух минимализма и сдержанности. Умение сочетать противоположности в очередной раз принесло студии место в рейтингах Awwwards.

24. Главная страница Alacran Group

Перейти на главную страницу https://alacrangroup.com/

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

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

25. Главная страница Studio P2MV

Перейти на главную страницу https://p2mv.studio/

В мире дизайна все, что сделано во Франции, приобрело славу творчески неординарного бренда. Корпоративный ресурс и портфолио дизайн-студии Poignée из французского города Нант не обманывает это ожидание. Сайт предлагает посетителю оценить необычность каждого элемента оформления:

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

26. Главная страница Getz

Перейти на главную страницу https://www.mariodragicevic.com/

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

27. Главная страница NourishEats by Joanna L.

Перейти на главную страницу https://nourisheats.co/

Дизайн от канадского дизайнера Kin Hui-Lo (Торонто) для кулинарного проекта Nourisheats поражает умением разработчика сочетать фото, типографику, иконографику и parallax-эффект. Специалист использовал всего понемногу в нужный пропорциях, чтобы не сделать блог слишком тяжелым и насыщенным. Использование натуральных неброских цветов позволяет избежать информационной перегрузки. А ненавязчивая анимация курсора и элементов меню позволяет сделать сайт интерактивным и вовлекает во взаимодействие.

28. Главная страница Versett

Перейти на главную страницу https://versett.com/

Агентство Versett из Калгари (Канада) представили публике Awwwards свой корпоративный сайт, и получили награду “Сайт дня” от жюри ресурса.

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

29. Главная страница Temporary Measures

Перейти на главную страницу https://www.craftedbygc.com/

Студия разработки Green Chameleon из Бристоля (Великобритания) ответственно подошла даже к такому ресурсу, как временный сайт-заглушка, который будет отображаться посетителям пока полный корпоративный сайт  будет на переработке. Простой замысел — чистый черный фон, на котором эффектно смотрится цветная композиция с эффектом растекшейся акварельной краски и слоган сайта.

30. Главная страница Lundqvist&Dallyn

Перейти на главную страницу https://www.lundqvistdallyn.studio/

Белый фон, parallax-эффект, играющий черно-белыми информационными блоками, расположенными в шахматном порядке на странице — пожалуй, проще дизайн придумать сложно, однако, именно простота замысла и цепляет в оформлении сайта дизайн-студии Lundqvist&Dallyn, разработанном дизайнерами оксфордской студии Sam&Sara (Великобритания).

31. Главная страница Mogney

Перейти на главную страницу https://mogney.com/

В СССР существовал мультик “Пластилиновая ворона”, в котором животные превращались друг в друга под веселую песенку. Разработчики из отмеченной номинацией “Студия года-2018” воронежской студии Red Collar (Россия) определенно вдохновлялись этим мультиком. Проект Mogney — сайт новой платежной системы по QR-коду поражает впечатление сначала ярким цветовым сочетанием, а потом — анимациями, сменяющими друг друга при скроллинге. На выходе получилась динамичная картинка, которая поднимает настроение и желание воспользоваться сервисом.

32. Главная страница White Square

Перейти на главную страницу https://whitesquarecapital.com/

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

33. Главная страница This Is Sleep

Перейти на главную страницу https://thisissleep.co.uk/pages/your-sleep-solution

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

34. Главная страница Jorik

Перейти на главную страницу https://jorik.askphill.com/

Простой parallax позволяет сделать сайт играбельным, если прикрепить точку просмотра главного экрана к курсору мышки. Решение авторства студии Ask Phiil из Амстердама (Нидерланды) добавило сайт нового бренда Lil’ Kleine: Jorik в рейтинг Awwwards и заслужило симпатии жюри. Чтобы не осталось сомнений, достаточно посмотреть на чистый и гладкий дизайн страницы, интерактивное взаимодействие на клики пользователя и “доезжающий” скролл, оставляющий приятное впечатление и заставляющие повторить опыт взаимодействия с ресурсом если не сразу, то хотя бы через время.

35. Главная страница Baunfire

Перейти на главную страницу https://www.baunfire.com/

Свежий взгляд на дизайн от резидентов Силиконовой долины Baunfire (Сан-Хосе, США). В нем нет масштабных фотографий или претенциозных рекламных роликов. Здесь царит дизайн с использованием простых символов, напоминающих ASCII Art — рисование символами — доведенный до уровня профессионализма. Добавить красивое цветовое сочетание, интерактивное взаимодействие с пользователем и мягкие анимационные эффекты функциональных объектов и элементов дизайна — и получим сайт-номинант на события дня.

36. Главная страница Graphit Type

Перейти на главную страницу https://www.graphit-type.com/

Если есть желание выделиться из потока презентационных сайтов, то можно попробовать красиво нарушить абсолютно все рамки моды на веб-дизайн. Именно так и сделали LitDesignStudio для презентации своего шрифта Graphit, использовав его формы в дизайне сайта. Так они убили двух зайцев одним махом — и продукт показали во всех возможных вариациях, и запоминающийся дизайн, достойный титула “Сайт дня” создали.

37. Главная страница LOOP

Перейти на главную страницу http://www.agentur-loop.com/

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

38. Главная страница Olivier Ouendeno — Portfolio

Перейти на главную страницу http://www.olouen.com/

Красивые фото анимацией и интерактивом не испортишь. Арт-директор Olivier Ouendeno (Париж, Франция) для своего портфолио подобрал фото, которые зашил под чистую подложку. Чтобы их увидеть, достаточно поводить курсором, а для полного просмотра — зайти в портфолио через креативное меню. Отдельного внимания заслуживает винтажно оформленная типографика.

39. Главная страница Auberive

Перейти на главную страницу https://auberivemusic.com/

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

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

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

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

40. Главная страница 2018: Year in Review

Перейти на главную страницу https://2018.craftedbygc.com/

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

41. Главная страница Won Hundred

Перейти на главную страницу https://wonhundred.com/

Есть тут кто-то, соскучившийся по табличной верстке нулевых? Разработчики SPRING/SUMMER удивили жюри Awwwards, предложив на суд беспрецедентный проект сайта для капсульной коллекции одежды Won Hundred. В этой странице есть все из дизайна девяностых-нулевых: белый фон, однопиксельные границы табличек, в которые вписано главное меню, форма рассылки и карточки товаров. Дополнительный флер гениальности вносят стандартные цвета и типографика, и даже бегущая строка заголовков. Вишенкой на торте выступают рекламные баннеры в лучших традициях WordArt. Нельзя упрекнуть датских разработчиков в хорошем чувстве юмора.

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

42. Главная страница Bruegel – Once in a Lifetime

Перейти на главную страницу https://www.bruegel2018.at/

Разработчики студии Wild Вены (Австрия) для сайта выставки Питера Брейгеля в Венском Музее Искусств не стали изобретать велосипед, а воспользовались работами самого мастера. Их они доработали с помощью анимации, оживив многочисленных персонажей картин художника. Этого оказалось достаточно для wow-эффекта на первом экране.

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

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

43. Главная страница RALLY

Перейти на главную страницу http://rallyinteractive.com/

От фантазийных нарушений правил — к традиционному их соблюдению. Разработчики студии Rally из США доказали на примере своего нового корпоративного, что гайдлайны Google относительно дизайна — очень даже полезная вещь. Простое соблюдение правил типографики, правил “чистого” дизайна и белой подложки, добавить немного анимированных геометрических форм и интерактива в виде изменения размера надписей и смены цветов подложки — и можно получить гладкий дизайн, достойный звания “Сайт дня”.

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

44. Главная страница Dapper Fundation

Перейти на главную страницу https://www.dapper.fr/

Рецепт удачного дизайна от креативной студии VIENS-LÀ (Франция) на примере сайта для культурного Фонда Даппера:

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

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

45. Главная страница Pelizzari Studio

Перейти на главную страницу https://pelizzari.com/en/

Еще один “Сайт дня” от итальянской студии Adoratorio — портфолио студии дизайна интерьеров для отелей, вилл и ресторанов Pelizzari Studio. Дизайнеры агентства используют традиционные для своих ресурсов приемы: качественные профессиональные фото, античные шрифты, анимирование элементов в духе Material Design.

46. Главная страница Lasse Pedersen

Перейти на главную страницу http://lassepedersen.biz/

Датчане уверенно нацелились перенять пальму первенства по части креатива у французов. Дизайнеры KASPER LAIGAARD STUDIO представили публике и жюри Awwwards свой проект — портфолио парикмахера и стилиста Lasse Pedersen.

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

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

47. Главная страница Google Store

Перейти на главную страницу http://store.google.com/

Сложно ожидать от сайта Google Store дизайн, не соответствующий строгим гайдлайнам самой поисковой сети. Неизвестно, как студия BASIC (США) подходила к его разработке — сначала поработав над соответствием требованиям Material Design, а потом добавляя креатив, или наоборот? Итогом оказался магазин, наполненный качественными фото, вызывающими восторг — будь то изображение товара или рекламного атмосферное фото.

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

48. Главная страница Goldkant Interior

Перейти на главную страницу https://goldkant.de/

Привычный parallax-эффект может творить чудеса в руках прагматичных немейких дизайнеров. Разработчики из студии HUMANS&MACHINES (Берлин, Германия) предложили для своего проекта — сайта студии интерьеров Goldkant предельно простую структуру и сдержанный дизайн с минимумом цветовых акцентов.

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

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

49. Главная страница Heller Designstudio

Перейти на главную страницу https://heller.tv/

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

Интересен эффект наложения надписи на изображения: когда текст “наезжает” на картинку, то цвета надписи инвертируются в соответствии с картинкой. Так достигается удобство чтения.

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

50. Главная страница My 360° Mirror

Перейти на главную страницу https://www.my360mirror.com/

Как удачно продать дизайнерское зеркало? Дизайнер Stella Petkova (Болгария)  нашла способ, предложив свое видение, каким должен быть дизайн для торгового марки My 360° Mirror, чтобы идея бренда пришлась посетителю по вкусу.

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

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

Выводы

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

  • намечается тенденция перехода от лонгридов к одноэкранным сайтам с переходами через клик или скролл, которые были популярны в нулевых. Отличает лишь современную версию Веб 2.0 сокращение контентной части до предельного минимума, и действительно до одного экрана, без скролла вниз — эта функция уже занята под переходы;
  • parallax-эффект все так же не сдает позиций, являясь классикой для создания wow-эффекта. Разница — в реализации. Не всегда это — простой скролл полотен текста, разделенного окошками с визуальными элементами (видео, фото). Теперь эффект становится основой для 3D-презентации или полигональной развертки, выступая способом управлять картинкой и углом ее обзора;
  • музыка и видео все еще добавляются на сайты — где это важно. Иногда наличие такого оформления может замедлять скорость загрузки ресурса. На этот случай дизайнеры придумывают креативную заглушку с элементами интерактива, чтобы пользователь не скучал;
  • интерактив может стать и способом развлечь посетителя на сайте. Забавные игровые элементы могут присутствовать практически на любом ресурсе — даже на сайте респектабельного дизайнерского бюро, лишь бы приподнятое и веселое настроение, которое они вызывают, было уместным и не входило с в противоречие с тематикой ресурса;
  • дизайн, достойный наград, может быть выполнен и без особо сложных эффектов. При должном усилии, сайт, разработанный фрилансером, может привлечь внимание жюри. “Вывезти” веб-ресурс может просто следование гайдлайнам Google, без покушения на игру с нормами, какую могут себе позволить маститые дизайн-агентства;
  • покушение на нормы — при должном уровне мастерства (или смелости) можно нарушить абсолютно все нормы, и попасть в рейтинг. Если знать, какие нарушения придутся публике по душе. в этом поможет глубокое исследование вкусов целевой аудитории и рынка в целом.

лучших образцов дизайна в 2020 году [80+ потрясающих дизайнов]

Ищете отличные образцы дизайна в 2020 году? Читать дальше.

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

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

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

Вас также могут заинтересовать 80+ лучших источников для поиска ресурсов и ресурсов для проектирования

1. Изображения + иллюстрации

Для начала оглянемся назад.

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

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

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

Просмотреть исходный код

Просмотреть исходный код

2.Иллюстрации… Простые иллюстрации

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Нельзя сказать, что красочные вышли из моды, они никогда не выйдут из моды, но наблюдается заметный рост монохромных тематических дизайнов . Забудем о черном и белом, хотя это еще одна область, которая никогда не исчезнет.Здесь мы говорим о древнегреческом μονόχρωμος — имеющем один цвет. Тенденция к игре с ограниченной палитрой и оттенками в этих пределах уже наступила, и она, безусловно, наступила. Вас также могут заинтересовать бесплатные иллюстрации для вашего следующего дизайн-проекта.

3. Монохромный

Достаточно одного цвета

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

4. Реалистичное 3D

На идеи

Art & Design часто влияет технический прогресс, и все мы знаем, насколько быстро он идет.Монохромные фильтры сделали жизнь проще, как и инструменты и программное обеспечение для работы с 3D. Нам лучше максимально использовать его, пока мы можем, я подозреваю, что скоро будет 4 и 5D.

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

5. Изометрическое искусство

Давайте посмотрим на искусство с другой стороны!

Следуя за 3D-темой, изометрический чертеж долгое время был стандартным способом создания перспективы и глубины 3D-фигуры в 2D-дизайне.Идея изометрического дизайна заключается в том, что дополнительные линии перспективы убирают изображение, оставляя пространство для большего количества деталей и вызывая интерес у зрителя, а часто и ощущение изображения с высоты птичьего полета. Идеально подходит для веб-дизайна, не так ли? Неудивительно, что в 2020 году он будет в тренде.

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

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

6. Золотое искусство

Золотой век дизайна

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

7. Экспериментальная типографика

Текст за углом

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Вас также могут заинтересовать 20 лучших бесплатных шрифтов на 2020 год: Trendy & Evergreen.

8. Линейный дизайн

Одна линия, вторая линия… Дизайн

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

9.Дизайн в стиле ретро

80-е вернулись!

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

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Вы также можете прочитать Ретро-дизайн в наши дни: ультра-вдохновляющая коллекция

10.Шаблон Шаблон Шаблон Дизайн

Повторять, повторять, повторять…

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Если вам нужны шаблоны, ознакомьтесь с этими 150+ бесплатными шаблонами для вашего следующего проекта

11. Геометрия фигур

Квадрат, треугольник, круг… вуаля!

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

12.Жидкости в дизайне

Давайте добавим изюминку в этот дизайн!

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

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

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

13. Нужно больше вдохновения?

Мы только начинаем!

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

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

Просмотреть исходный код

Просмотреть исходный код

Эффект коллажа привлекает внимание и удерживает внимание. Вот две разные, но одинаково крутые современные версии.

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Просмотреть исходный код

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

Просмотреть исходный код

Этот пример дизайна веб-сайта и особенно этот уникальный дизайн меню заставили нас отвлечься!

Просмотреть исходный код

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

Просмотреть исходный код

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

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

Пока вы катаетесь на этой волне, почему бы вам не почитать эти статьи по теме:

31 удивительный пример графического дизайна, который поразит вас

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

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

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

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

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

Пять основных столпов графического дизайна включают Баланс (для стабильности и структуры), Выравнивание (для ясности и резкости), Повторение (для единства и силы), Контраст (для воздействия и фокусировки) и Иерархия (для организации и направления).

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

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

1. Промоакции кинофестиваля BFI, автор Кори Шульц

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

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

3. Приложение для цифровой идентификации растений от Бекки Вуд

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

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

5. Мероприятие Vice Media «Преодолей потолок», автор: Ариана Луиза Вильегас

Промоакции

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

Выпускник

Shillington Брэндон Ли мастерски использует контраст и повторение, чтобы выделить три сорта кофе из разных стран в этом дизайне упаковки продукта.Он использует смелые цвета и простые геометрические формы, чтобы противопоставить текст и значки. Каждое изображение заставляет вас узнать, что отличает следующее. Первое заметное отличие — это регион. Этот пример графического дизайна показывает, что Lighthouse Coffee Co. производит качественный кофе с ярким вкусом. Проект получил премию GDUSA в области графического дизайна.

8. Кампания MTA, автор Джен Бишоп

Эта трехдневная кампания была нацелена на любителей метро Нью-Йорка.Всадников просили голосовать за известных дикторов метро каждый день. Он был разработан, чтобы оживить повседневные поездки наездников, сделав их более интерактивными. В дизайне использованы яркие цвета и единый дизайн всех плакатов и рекламных материалов. Использование разделительных линий привлекает внимание зрителей к каждому призыву к действию. Джен Бишоп, выпускница Шиллингтона, получила премию GDUSA за этот дизайн.

9. Mondo Artisan Bread Mexico Карла Лопес

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

10. Представьте — Фестиваль № 6 Идентификация Jieli Wu

Эта концепция была предназначена для создания идентичности Festival N ° 6, ежегодному фестивалю искусства и музыки, проводимому в Северном Уэльсе.Цель брендинга заключалась в создании чего-то, что выходит за рамки нового измерения и в то же время отражает изысканные вкусы целевого рынка. Шрифт выглядит гладким и современным, но при этом немного несвязным, что намекает на его тему превосходства. Этот выпускник Шиллингтона получил премию GDUSA за дизайн.

11. Брендинг SPAM Food Truck Festival, автор Judy DeMarco

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

12. Комнаты дома — диспут Лос-Анджелеса, Хэмиш Хантер

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

Бекки Маккалок использует баланс, чтобы рассказать историю первой личной встречи. Ее дизайн иллюстрирует суть проблемы, которая является важнейшим качеством хорошего дизайна.Он тонко задает и отвечает на этот вопрос: о чем мы будем говорить, когда наконец встретимся? Контрастные цвета слева привлекают внимание зрителя и вызывают любопытство у наблюдателей. Естественно, им захочется узнать остальную часть истории, которая приведет их к следующему высококонтрастному предмету: картам тигра. Карточки содержат идеи для обсуждения при личной встрече, ответе на вопрос и решении проблемы. Она была финалистом конкурса AGDA Awards 2018 за этот проект.

14.Этикетка продукта премиум-класса Joker’s Gin от Esteban T

Esteban T разработал несколько первоклассных этикеток для бутылок с алкогольными напитками. В этой бутылке Joker’s Gin использован контраст по глубине, чтобы создать акцент в этой привлекательной бутылке элитного джина. Художник использует цвет, чтобы создать стабилизирующий баланс в дизайне, укрепляя доверие к бренду, несмотря на название Joker’s Gin.

15. Натуральные продукты от Хиро Окуда

Подобные пьесы, демонстрирующие баланс и согласованность, помогают зрителям «почувствовать» целостность презентации.Розмарин обеспечивает мгновенный контраст с нейтральными цветами и привлекает внимание к другим зеленым тонам в проекте. Проект выпускника Шиллингтона Хиро Окуда стал финалистом награды AGDA.

16. Fruitea Friends Berry Boo и тропическое танго от Вай Сан Ву


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

16. Дизайн циферблата часов Android от Gmbh

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

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

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

Это еще один пример графического дизайна, который использует повторение и выравнивание для представления бренда продукта. Marusa Rimc вызывает интерес к продукту Infinite Brew, подчеркивая единообразие бренда и пробуждая любопытство к новым вкусам.Художник по упаковке продукта создает причудливые выражения характеристик, чтобы заставить потребителей спросить: что это за вкусы с ограниченным выпуском? Дизайн яркий и загадочный. Эта работа выпускницы Шиллингтона принесла ей награду GDUSA.

20. Обложка книги в пустоту, автор Bob2412

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

Даниэла Томанова сочетает иерархию и контраст, чтобы создать интерес, организацию и фокус в этом примере графического дизайна. Идея ясна: 4U для вас, и это часть вас, несмотря ни на что.Положение руки испытуемого внутри и снаружи логотипа создает ощущение плавности дизайна, отражая динамичный характер провайдера мобильной сети 4U. Подростки мгновенно подключаются к бренду. Даниела — выпускница Шиллингтона и финалистка AGDA.

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

23. Lite Loaves Packaging by Джессика Баккер

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

24. Реквием J Fashion Event от Эрни Холидей

Эта кампания — веб-сайт, плакаты, наклейки и многое другое — рекламировала модную инсталляцию в Нью-Йорке. В проекте использованы яркие цвета, чистый дизайн и геометрические формы, чтобы создать причудливый, но изысканный дизайн.Эта работа одновременно эксцентрична и сбалансирована и игриво взаимодействует со зрителями, сочетая традиционную модную иконографию с оригинальными элементами. Эрни — выпускник Шиллингтона, и этот проект стал полуфиналистом премии Adobe Design Achievement Awards 2018.

25. Летний фестиваль Satchmo в Новом Орлеане, автор Альфред Сервантес

Вот три примера графического дизайна, которые призваны продвигать летний фестиваль в Новом Орлеане в честь Луи Армстронга по имени Сатчмо.Этот студенческий дизайн Шиллингтона получил награду American Graphic Design Award 2018 от Graphic Design USA. В дизайне используется выравнивание, чтобы создать интерес, и контраст, чтобы обеспечить ясность. Синий и розовый олицетворяют лето, а фотография Луи Армстронга по прозвищу Сатчмо напоминает о богатой джазовой истории города. Альфред, выпускник Шиллингтона, получил награду GDUSA 2018 года.

26. Зачарование под морским танцем Саймона Пирса

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

Эти три примера графического дизайна упаковки от Forough Abadian используют контраст и повторение, чтобы передать послание простоты и аутентичности. Похоже, что посылка отправлена ​​прямо из Италии с этикеткой, похожей на почтовую. Вы сразу узнаете, как его приготовить и из чего оно сделано, не оставляя никаких вопросов без ответа.Упаковка также является отличным примером того, как выравнивание способствует ясности. Этот выпускник Шиллингтона является лауреатом премии GDUSA.

28. 2 Ginger Irish Whisky от VSA Partners

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

29. Плакаты Inject Hope от Landor

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

30. Концепция брендинга модной одежды CI от Nnorth

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

31. Дизайн электронного письма Brookson One, автор: Charlim888

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

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

Хотели бы вы создать такую ​​работу? Подумайте об обучении в Шиллингтоне и записи на онлайн-курс графического дизайна, чтобы вы могли учиться из любой точки мира!

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

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

Этический дизайн > Соответствие GDRP

«Когда такая компания, как Facebook, улучшает впечатления от своих продуктов, это похоже на массаж, который мы делаем говядине Кобе: они служат не для пользы коровы, а для того, чтобы сделать корову более качественным продуктом. По этой аналогии вы корова ». — Арал Балкан, дизайнер по этике, основатель 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 часа.

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

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

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

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

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

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

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

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

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

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

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

Мокап функции фильтрации новостной ленты, созданный UX studio

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

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

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

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

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

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

Мокап кнопки «Загрузить еще» и счетчика публикаций, созданный UX studio

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

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

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

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

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

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

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

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

“Потому что:

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

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

Мокап «Почему я это вижу?» раздел создан UX studio

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

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

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

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

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

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

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

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

Мокап обновленного раздела «Сохраненные элементы», созданный студией UX

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

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

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

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

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

Мокап группы уведомлений, созданный UX studio

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

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

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

Мокап функции отключения уведомлений, созданный UX studio

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

7. «Хатики»

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

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

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

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

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

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

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

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

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

Мокап «этически улучшенного» мессенджера, созданный студией UX.

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

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

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

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

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

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

Ищете подходящее UX-агентство? Студия

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

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

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

Открывающих глаза примеров хорошего и плохого UX-дизайна

Иллюстрация Лидии Лукьяновой

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

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

Демонстрация текущего состояния

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

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

Использование ясного, понятного языка

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

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

Эффективное использование цвета и иерархии

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

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

Уменьшите количество ошибок

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

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

Сообщение об ошибках и дальнейшие действия

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

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

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

Не забывайте об аудитории

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

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

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

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

Верно — к сожалению, многие люди до сих пор судят о книге по обложке.

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

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

Что делает хороший дизайн домашней страницы веб-сайта

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

1)

Это четко отвечает «Кто я», «Что я делаю» и / или «Что вы (посетитель) можете здесь делать».

Если вы являетесь известным брендом или компанией (например, Coca Cola), вам может сойти с рук отсутствие необходимости описывать, кто вы и чем занимаетесь; но на самом деле большинству компаний все еще нужно отвечать на эти вопросы, чтобы каждый посетитель знал, что он находится «в нужном месте».”

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

2) Это находит отклик у целевой аудитории.

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

3) Он передает убедительное ценностное предложение.

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

4) Оптимизирован для нескольких устройств.

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

5) Он включает призывы к действию (CTA).

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

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

6) Это всегда меняется.

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

7) Отличный дизайн.

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

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

Вдохновение для дизайна веб-сайтов: 16 лучших дизайнов домашних страниц

1) FreshBooks

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

Почему это великолепно
  • Легко потреблять. Существует много споров о том, какие домашние страницы работают лучше: короткие или длинные.Если вы выберете последнее, вам нужно упростить прокрутку и чтение — именно этим и занимается этот сайт. Это почти похоже на рассказ.
  • Контрастность и позиционирование отлично сочетаются с основными призывами к действию — ясно, на что компания хочет, чтобы вы совершили конверсию, когда вы приедете.
  • Текст призыва к действию «Попробуй 30 дней бесплатно» очень убедителен.
  • Подзаголовок также великолепен: «Присоединяйтесь к 5 миллионам человек, использующих FreshBooks, чтобы безболезненно отправлять счета, отслеживать время и фиксировать расходы.Это сводится к общей болевой точке для фрилансеров и малого бизнеса (целевая аудитория FreshBooks) — бухгалтерское программное обеспечение обычно бывает «до боли сложным».

2) Airbnb

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

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

3) Монетный двор

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

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

4) Dropbox (потребительские)

Почему это великолепно
  • Домашняя страница и веб-сайт Dropbox — лучший пример простоты.Он ограничивает использование текста и визуальных элементов и включает пробелы.
  • Трудно сказать по статическому снимку экрана выше, но этот сайт привлекает ваше внимание тонким использованием причудливой анимации в этом графике.
  • Их подзаголовок простой, но мощный: «Получите доступ ко всем своим файлам из любого места, с любого устройства и поделитесь ими с кем угодно». Не нужно расшифровывать жаргон, чтобы понять, что на самом деле делает Dropbox.
  • В нем основное внимание уделяется одному главному призыву к действию: «Зарегистрируйтесь бесплатно.«Но функция регистрации с помощью Google снижает трение посетителей, которые ненавидят заполнять длинные регистрационные формы.

5) Dropbox (Бизнес)

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

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

6) Whitehouse.gov

Почему это великолепно
  • Создание веб-сайта, поддерживающего всю страну, — непростая задача. Сайт Whitehouse.gov постоянно меняется, чтобы отражать основные проблемы и приоритеты — одна только домашняя страница претерпела сотни изменений.Тестирование и оптимизация — ключевые компоненты блестящего дизайна домашней страницы.
  • Что особенно хорошо в Whitehouse.gov, так это то, что он полностью не похож на большинство правительственных веб-сайтов. Он имеет чистый дизайн и способствует развитию сообщества.
  • Когда вы приземляетесь здесь, довольно легко найти то, что вы ищете. А если вы не можете найти его сразу, есть даже удобное окно поиска.

7) Коптильня 4 Риверс

Почему это великолепно
  • Слюни.Вот что я думаю, когда захожу на сайт 4 Rivers Smokehouse. В сочетании с отличной фотографией заголовок «Brisket. 18 лет на освоение. Вашим смаковать. » звучит как опыт, который стоит попробовать.
  • Прокрутка с параллаксом проведет вас по их услугам, меню и людям, прекрасно проводящим время — прекрасное использование этой популярной тенденции дизайна.
  • Единственный минус? Я живу недостаточно близко от этого места. Бу.

8) Кобб Услуги детской терапии

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

Почему это великолепно
  • Заголовок и подзаголовок обращаются к эмоциональной стороне посетителей: «Работайте с компанией, которая добивается успеха»; «Доверься нам.Мы тоже там были! Мы найдем работу, на которой вы сможете развиваться ». Это ценностное предложение уникально и убедительно.
  • Из скриншота выше сложно сказать, но заголовок находится на вращающейся карусели, которая обслуживает конкретных людей, от соискателей до людей, ищущих терапевта для своей школы.
  • Есть несколько путей, по которым посетители могут попасть на страницу, но призывы к действию хорошо позиционированы, сформулированы просто и контрастируют с остальной частью страницы.

9) Джилл Конрат

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

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

10) Evernote

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

11) Телерик Прогресс

Почему это великолепно
  • «Спокойное предприятие» — это не то чувство, которое вы испытываете, когда заходите на сайт Telerik. Для компании, которая предлагает множество технологических продуктов, их смелые цвета, забавный дизайн и видеосъемка создают атмосферу, похожую на Google. Это всего лишь один важный аспект, позволяющий посетителям почувствовать себя желанными гостями и дать им понять, что они имеют дело с реальными людьми.
  • Мне нравится простой подробный обзор их шести продуктовых предложений. Это очень четкий способ сообщить, чем компания занимается и как люди могут узнать больше.
  • Копия легкая и удобочитаемая. Они говорят на языке своих клиентов.

12) Боксби

ПОСМОТРЕТЬ ВСЮ СТРАНИЦУ

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

13) Электронная свадьба

Почему это великолепно
  • Для тех влюбленных, которые планируют свой большой день, eWedding — отличное место для создания индивидуального свадебного веб-сайта. Домашняя страница не загромождена и включает только необходимые элементы, чтобы люди начали создавать свои веб-сайты.
  • Подзаголовок «Создано более 750 000 свадебных сайтов!» отличное социальное доказательство.
  • Они включают отличные визуальные эффекты продукта, отличный заголовок и призыв к действию, уменьшающий трение с текстом: «Запустите веб-сайт».

14) Базовый лагерь

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

15) благотворительность: вода

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

16) Техническая проверка

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

Что вы думаете об этих домашних страницах? Какие твои любимые? Поделитесь с нами своими мыслями в комментариях.

Примечание редактора. Этот пост был первоначально опубликован в январе 2013 года и был обновлен для обеспечения точности и полноты.

Примеров нестандартного дизайна

Проведите эксперименты, отвечающие вашим потребностям

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

Custom Design предоставляет больше возможностей и контроля, чем платформы Screening, Response Surface, Full Factorial и Mixture Design. Конструкции, которые вы создаете, созданы специально для достижения ваших целей. Это избавляет от необходимости подбирать классический дизайн, который только приближается к вашим целям.

Гибкие специализированные конструкции, которые можно создавать с помощью Custom Design, включают:

• Проекты просеивания, включая пересыщенные конструкции просеивания

• Планы поверхности срабатывания, в том числе с категориальными факторами

• Схемы смесей, в том числе с учетом технологических факторов, и схемы смесей

• Проекты, которые включают ковариаты или устойчивы к линейным временным тенденциям

• Фиксированные и случайные блочные конструкции

• Конструкции с разделенным графиком, разделенным графиком и двусторонним разделенным графиком (ленточный график)

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

Рисунок 5.1 Доля проектной площади

Содержание

Отборочные эксперименты

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

Дизайн, ориентированный на пользователя: принципы, процесс, примеры

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

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

Создание дизайна, уникального для нужд пользователя

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

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

Сохранение последовательности

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

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

Использовать обычный язык

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

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

Снижение усилий пользователей

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

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

Оставить отзыв

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

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

Упростите навигацию

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

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

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

Дайте пользователю всю мощь

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

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

Присутствует Ясная информация

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

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

Без ошибок

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

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

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *