Движущие силы дизайна — пример редизайна веб-сайта

Когда лучше всего делать редизайн сайта?

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

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

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

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

Модернизация веб-сайта автомобильной компании

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

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

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

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

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

Зачем редизайн веб-сайта этой автомобильной компании?

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

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

Отличный дизайн веб-сайта должен выделяться в море похожих веб-сайтов

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

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

В автомобильной индустрии высокого класса Ferrari, Lamborghini и Aston Martin имеют слишком простые, типично корпоративные веб-сайты, которые (на мой взгляд) не обеспечивают хорошего пользовательского опыта.

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

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

Почему Rimac лучше Toyota? Глядя на их веб-сайты, нет большой разницы между этими двумя очень разными брендами. Разве это не должно быть очевидно из качества их веб-сайта?

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

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

Автомобили Rimac стоят около 850 000 долларов, и будет выпущено всего несколько экземпляров, что позволит им получить статус «ограниченной серии». Хотя мы не можем точно определить тип клиентов, которые были бы заинтересованы в покупке этих автомобилей, мы можем предположить, что большинство клиентов будут из богатой элиты. Эффективно ли ориентирован веб-сайт Rimac на этих клиентов?

Анализ информационной архитектуры

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

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

Процесс редизайна веб-сайта

Главная страница Изображение героя до и после

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

Дизайн домашней страницы

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

Контент-стратегия и дизайн

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

Процесс прост:

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

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

Редизайн навигации по сайту

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

Чтобы обеспечить немедленный доступ к вторичной странице « Продукты » с главной страницы, было решено, что для повышения эффективности вместо создания еще одной страницы со списком продуктов (на другой веб-странице) « Продукты » и их подкатегории можно было бы включить в домашнюю страницу в виде раскрывающегося списка и сделать частью навигация. Дизайн ниже показывает различные продукты, отображаемые в виде значков на главной странице, когда посетители нажимают « Продукты » в навигации. Для 3D-рендеринга продуктов, обозначающих вторые уровни в разделе « Продукты », я бы рекомендовал Three.js, WebGL, Canvas и Greensock, поскольку они являются хорошо известными стандартизированными инструментами.

Второстепенные страницы в рамках редизайна веб-сайта

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

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

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

Заключение

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

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Основы редизайна веб-сайта — пример из практики
• Истинная окупаемость UX: примеры редизайна B2B
• Взять IKEA из коробки и изменить ее дизайн для 1,6 миллиарда пользователей
• Давайте изменим дизайн Facebook: 10 идей для начала
• Как должен быть спроектирован CrunchBase