10 вдохновляющих примеров цветных графиков и диаграмм в веб-дизайне

10 вдохновляющих примеров цветных графиков и диаграмм в веб-дизайне

Время чтения: 3 мин.


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


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



Lab Board


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



SE Ranking


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



Прозрачность Dropbox


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



Shoplo


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



Stripe Connect


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



Appfigures


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



CA Technologies


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



Median для Mac


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



Unamo


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



Tapdaq


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