Создание собственного сайта студии GLYF

Главное о кейсе

По данным Google Analytics: рост уникальных посещений сайта на 240%, уменьшение процента отказов на 28%, увеличение средней продолжительности сессии на 2200%.

Бизнес-задача и ее решение

ЗАДАЧА

Разработать сайт дизайн-студии с фокусом на простые нетривиальные решения и юзабилити.


РЕШЕНИЕ

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

Прогресс-бар скролла с якорными ссылками на подразделы, свитчер объёма текста в блоках «О нас» и «Отзывы», ссылки в услугах для перехода в отсортированные разделы портфолио — всё это обеспечивает понятную и удобную навигацию по сайту и совершение целевых действий.

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

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

Адаптивный дизайн, состоящий из 5 диапазонов для дисплеев любого размера, позволяет комфортно пользоваться ресурсом на самых разных устройствах: от небольших телефонов до широкоформатных мониторов. Код хорошо структурирован и оптимизирован, сайт работает быстро и стабильно — 98 баллов в Google PageSpeed Insights.


BRIEF

To create a design studio’s website with a focus on simple non-trivial solutions and usability.


SOLUTION

A large navigation block on the first screen helps a visitor to quickly find a link to go to the desired section. Animated block transformation hints you where to find it from the inner pages. The running panel of selected projects softly draws your attention to the main section of the website and complements the UI of the “Studio” page, which is made up of text mainly.

Page scroll’s progress bar with anchor links to subsections, text volume switcher in “About Us” and “Reviews” blocks, the services’ navigation links to the sorted sections of the portfolio — all this ensures clear and easy navigation through the website and taking of targeted actions.

The “Projects” section contains navigation within parent categories, as well as major project cards. Each contains a title, product launch year, sorting hashtags, website link, and project description, hidden by default. In the future, we are planning to publish links to detailed case studies on external platforms.

To support the studio’s new brand concept — “Design and Technology. People”, the “Contacts” section contains an interactive brief for clients that simulates live communication and a gallery of atmospheric photos of the studio workflow.

The adaptive design, consisting of 5 layout ranges for any-size displays, allows you to comfortably use the resource on a variety of devices: from small smartphones to widescreen monitors. The code is well structured and optimized, and the website is fast and stable — 98 points by Google PageSpeed Insights.

Прочая информация о кейсе

Создание сайта для размещения информации о студии, портфолио и нескольких контактных форм.

Website for a design studio with information about the company, projects showcase, and several contact forms.

Скриншоты