{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

Редизайн сайта The12.Studio

Привет!

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

Зачем нам редизайн?

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

Изменения с пользой для клиента

1. Простота и читабельность

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

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

2. Чисто и минималистично

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

3. Фишки

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

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

4. Анимация

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

Итог

У нас получилось сделать классный редизайн и угодить самым привередливым критикам – нам самим. А самое главное, упростить наше взаимодействие с клиентами. Пока что мы только начинаем наполнять сайт кейсами и со временем их будет становиться больше. Вместе с вами мы постоянно совершенствуемся и становимся лучшей версией себя. Спасибо!

___________________________________________________________________________________

Пощупать проект:

Кейсы на Dprofile:

Telegram-канал:

Группа в VK:

0
Комментарии
-3 комментариев
Раскрывать всегда