Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Графики в веб-дизайне: разбираем трендовые примеры

28 февраля 2019 | Опубликовано в статьюшечки | Нет комментариев »

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

 

 


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

Lab Board

На сайте Lab Board использованы красивые последовательные тона, тонко выполненные градиенты и большие тени.

Lab Board

SE Ranking

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

SE Ranking

Dropbox Transparency

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

Dropbox Transparency

Shoplo

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

Shoplo

Stripe Connect

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

Stripe Connect

Appfigures

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

Appfigures

CA Technologies

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

CA Technologies

Median for Mac

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

Median for Mac

Unamo

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

Unamo

Tapdaq

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

Tapdaq

Автор статьи Ben Bate

Перевод — Дежурка

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




Коментарии запрещены.

[an error occurred while processing the directive]


[an error occurred while processing the directive]