Визуализация данных в дизайне

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

Что-то на умновом, да? ))) Вот и я так не понимала, что это. А на курсе Тани Мисютиной оказалось, что это то, в чем я довольно хороша. И давно использую в работе.

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

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

Блоки на туристическом сайте

Сайт вообще мной сделан графически интересно для 2016 года: из ТЗ были два огромных некрасивых блока (а они подтягивались из турагрегатора и сильно изменить их было нереально). которые надо было обыграть.

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

Отчет администрации г. Химок

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

Отчет в таком виде был принят без правок.

Комплексно-техническое предложение…

• Брр, уже от заголовка скучно. Опять, да? А мне это опять в Ворде принесли. И снова с табличками. И текст ну не очень понятный. А что делать? Заказ был очень срочный. Вот прям вечером пришёл – утром отдавать))))
  
  Что я сделала, раз текст для меня запредельно непонятный:
  
  • Заголовки выделила. Ну уж их сложно пропустить. Как?
    
    • Я сначала придумала а-ля логотип, графическую плашку в море научного текста))). И ставила эту плашку, как иконку – рядом с важными частями документа;
      
    • Придумала модные и легкие цвета, к которым не придерешься по факту: они нравятся всем и при этом выглядят нейтральными;
      
    • Придумала оформление. Для этого я около часа залипала во всякие дизайн-подборки, у всех свое вдохновение, все понимают куда идти))
      
      Зачем столько сложностей – скажете вы. Р-репутация. И-интересный заказ, проверяющий тебя, как профи, а я люблю такие вызовы)
      
  • Визуально выделила важные элементы. Могла где-то и ошибиться. но в таких сроках это уже было несущественно. В целом, по тексту всегда видно, как его разделить.
    
  • Сделала цветовое оформление: Мне нужны были цвета. Без них как-то получалось… никак. Не так, как от меня ждали. И я придумала цветовую градацию (низ страницы) и буллеты, исходящие из этой градации. Смотрелось – шикарно. На примере ниже это хоор

Визуализация данных в медицине (плакаты. презентации и прочее)

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

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

Визуализация данных в строительстве

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

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

Согласитесь, цепляет взгляд, правда? Я не стала ставить манипулятор в начале, ничего стандартного. Мне надо было – ЗАЦЕПИТЬ. Потом я обратила внимание на блок самого манипулятора и на контакты. Карты выглядели так громоздко! В моем варианте, при клике можно выбрать любую карту. При этом, таких вариантов расположения лично я – не видела. И это тоже привлекает внимание.

Можно рассмотреть получше на Behance

Визуализация данных в недвижимости

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

Из ТЗ было как всегда: вип-клиент, надо дорого и красиво. Штош, ТЗ понятное, работаем)))

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

Из минусов: информации в Интернете НЕ было. Проект только запустили. Крутись как хочешь, придумывай сама))) Штош, не привыкать!))

Какой эффектный визуал я выбрала именно на этих страницах?

1. Обложка. В процессе создания логотипа был вариант использования символа двух Д (Дом Дау), который стилистически перекликается с треугольником. Это было отмечено самими разработчиками бренда. Я решила использовать эту особенность, выделив Дом Дау на картинке с помощью треугольника. А остальные элементы, на которых располагаются текст и логотипы, я сделала более тёмными.
   
2. Цвета. На сайте застройщика основным оттенком – был фиолетовый цвет. Но мне сказали – нам надо выделиться, и я выбрала благородный темно-синий цвет.
   
3. В легенду создания вплетен ученый Лев Ландау, известного в научных кругах как Дау. И я нашла чуть ли не единственное его графическое изображение (прижизненное) и стилизовала его, сделав векторным. Что интересно, разработчики позже сделали страничку у себя на сайте и у них я тоже увидела, что они использовали похожую идею)
   
4. Убрала лишнее. В найденной в интернете 3D-схеме был изображен весь комплекс Москва-Сити. Однако мне нужно было разместить больше информации. Чтобы решить эту задачу, я решила уменьшить размер картинки, не уменьшая ее и сделать акцент на Доме Дау.
   Ведь все знают, где находится Москва-Сити и из чего он состоит. Те, кому это интересно, тоже в курсе.
   
   Поэтому я убрала лишние башни, создала контрастный фон и указала на нём важные данные. Освежила саму схему, переписав нечеткие данные и убрав лишние. Кроме того, я выделила регалии, которые уже были присуждены проекту дома.
   
5. Страница Этажа. Задача не тривиальная: это не продажа чего-то мелкого. И даже не продажа квартиры. Все глобально. Поэтому, чтобы не делать голую страницу я добавила дополнительные данные:
   
   • разрез здания и визуальное указание этажа;
   • упрощённая схема этажа полностью соответствующая реальной;
   • указание сторон света и особенностей ориентации (например, наличие набережной и т. д.;
   • расстояние до важных географических ориентиров;
   • также была указана цена и перечислены преимущества приобретения этого объекта недвижимости.
     
6. Регалии продавца. Страниц с партнёрами и наградами не одна, а две. На одной из них размещены обесцвеченные логотипы. Чтобы глаза не уставали от обилия цветов, на другой странице информация представлена в виде текста, упорядоченного в столбцы. При этом она остаётся легко читаемой. А в контрастном блоке выделены личные достижения.
   

Можно рассмотреть получше на Behance

Визуализация данных в ювелирной отрасли

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

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

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

Подробнее в отдельной статье (много фото)