{"id":10776,"title":"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0432 \u043e\u043a\u0435\u0430\u043d \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430","url":"\/redirect?component=advertising&id=10776&url=https:\/\/vc.ru\/acer_russia\/347915-acer-vypustila-pervyy-noutbuk-iz-pererabotannogo-plastika&placeBit=1&hash=368c351f012741e124bb4bc6c0b9b05d5e0f9033fab83ea5e301424877f73936","isPaidAndBannersEnabled":false}
Дизайн
PINKMAN

Четыре вызова дизайна для БВШД: дедлайн, структура, второй подрядчик и креатив

Меня зовут Миша Розов, я основатель и Chief Design Officer дизайн-лаборатории интерфейсов Pinkman. Год назад к нам пришла Британская Высшая Школа Дизайна с задачей — сделать редизайн сайта. Для любой дизайн-студии реализовать подобный проект — стратегически важная и крутая история, тем более, что я сам выпускник БВШД.

У нас было несколько вызовов и сложностей, связанных с проектом, о которых я расскажу ниже.

Старый и новый дизайн главной

БВШД – флагманская школа университета креативных индустрий Universal University в России. Основана в 2003 году. Специализируется на обучении в сферах дизайна, визуальных искусств, моды, бизнеса и маркетинга. Школа предлагает формат высшего образования, дополнительного профессионального образования, интенсивные курсы. Особенности обучения в БВШД – творческая среда, большое количество практики, международный преподавательский состав.

Нам было важно, чтобы над проектом нового сайта Британки работали именно выпускники. Мы рассматривали несколько агентств, но в условиях ограниченного времени на проект быстрее всего мы договорились с Pinkman.

Ирина Сергеева
экс-директор по коммуникациям БВШД

Задача

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

Челлендж №1: структура сайта

Клиент сделал подробную аналитику по всему сайту, из которой выяснилось, что ⅔ сайта – мертвые страницы.

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

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

Структура сайта

Челлендж №2: сам дизайн

БВШД знаменита своими студентами. Когда человек говорит «Я учился в Британке» – тебе сразу понятно, чего стоит от него ожидать. Клиент хотел дизайн, который бы показывал, что они не просто академическое учебное заведение, но еще и про людей.

Нам нужно было учитывать фирменный стиль БВШД, который придумала студия Ильи Рудермана в 2015 году. Это отражения, яркая градиентная заливка и шрифт Graphik. Мы решили развить эту тему дальше – так родился динамический градиент на главной и в некоторых заголовках. Наша команда вынесла на первый план функциональность. Мы обновили систему навигации, сделали простой тест, который упрощает выбор и автоматически выводит подходящие программы.

При создании дизайна мы взяли в основу два принципа: атомарность и швейцарский стиль.

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

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

Атомарность и швейцарский стиль

Челлендж №3: время

На старте мы неверно оценили масштаб работы: ее оказалось больше, чем мы планировали. Студия не могла сделать дизайн плохо – прессинг от индустрии мотивировал выкладываться еще больше.

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

Челлендж №4: второй подрядчик

У заказчика есть подрядчик по бэкенду, с которым он сотрудничает с 2015 года – Группа МАХАОН. На этом проекте мы работали вместе. Несмотря на плотную коммуникацию с коллегами, у нас случился фейл: МАХАОН не подключили на раннем этапе разработки сайта, поэтому мы не были в курсе некоторых нюансов. Когда наша команда показала готовый вариант, оказалось, что интегрировать его в бэкэнд нельзя. Пришлось вылезать за рамки бюджета и переделывать все в срочном режиме. Да, мы все справились и получилась отличная работа, но не скажу, что такой формат сотрудничества эффективен. Чаще всего это – головная боль для разработчиков и дизайнеров, которая чревата дополнительной оплатой.

Я сам очень горжусь сайтом, который получился. За него мы получили несколько наград: первое место в категории «Лучший сайт образовательного учреждения» на премии «Золотой сайт» в 2020 году и второе место в схожей номинации «Тэглайн».

Взгляд со стороны разработчика: как сделать классный проект с другим подрядчиком и не поругаться

Мы как раз больше продакшн, поэтому часто работаем над сайтом вместе с другим подрядчиком, который делает дизайн. Главный нюанс в такой работе – это подготовка макетов. А в случае с БВШД еще и качество frontend’а. И то и то было сделано профессионально.

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

Мы коммуницировали в «Битрикс24». В задачу были подключены все заинтересованные лица – менеджер со стороны заказчика, менеджер и тимлид от PINKMAN, менеджер и тимлид от Группы МАХАОН. Багфиксинг был в Trello. Весь код хранился и передавался через git. Доработки и обновления – тоже, что позволяло быстро накатывать изменения по верстке на сайт.

Если вы – заказчик, который собирается работать с двумя командами сразу, то:

1. Назначьте внутри своей компании единственное ответственное лицо, которое будет коммуницировать с подрядчиками. В противном случае будет анархия в коммуникации.

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

3. Спланируйте сроки всех этапов и обозначьте общий дедлайн для всего проекта. Это спасет от ситуации, когда подрядчик не выполнил первый этап в срок, заняв 80% времени проекта, оставив коллегам на выполнение 20%.

Илья Торопов
директор Группы МАХАОН

Мнение заказчика

В начале 2019 года перед Британкой встала задача по редизайну сайта. Мы понимали, что продуктов у Школы становилось всё больше, а каркас главной страницы уже не позволял нам в полной мере управлять вниманием аудитории.

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

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

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

В новом сайте я кайфую от трех вещей:

— он построен не на галлюцинациях, а на аналитике;

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

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

Ирина Сергеева
экс-директор по коммуникациям БВШД
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Ёлки, столы и другие опыты: как ищет точки роста цех, который строил стенды для выставок, а потом — столы для удалёнки Статьи редакции

Монолог предпринимателя о выходах из ситуации, когда спрос на твои основные продукты резко падает уже во второй раз за два года, а материалы не дешевеют.

Производство Stayhomedesk
Говорит Москва: Yota определила самые общительные регионы России в 2021 году

Yota проанализировала количество и продолжительность телефонных звонков своих пользователей, а также объем использованного мобильного трафика за 2021 год в разных регионах страны. Таким образом мобильный оператор определил самые «звонящие» и «качающие» регионы.

Как изменить визуализацию, не изменяя при этом себе. PyDeck

PyDeck - библиотека Python с открытым кодом. Она позволяет с лёгкостью создавать гибко настраиваемые графики, гистограммы и другие средства визуализации данных. Всего за несколько минут и пару строк кода можно создать стильный график.

Исследование: как бизнес преодолел кризис в 2021 году, часть первая

Мы провели исследование российского рынка и посмотрели, как чувствовал себя бизнес в 2021 году. Аналитики компании выяснили, что, благодаря смягчению коронавирусных ограничений, рынок стал постепенно восстанавливаться и выходить на докризисные показатели.

Международный валютный фонд призвал Сальвадор отказаться от биткоина в качестве национальной валюты Статьи редакции

В фонде назвали легальный статус криптовалюты в стране главным препятствием для выделения ей кредита в $1,3 млрд.

«Яндекс Go» блокирует аккаунты пользователей, не нарушающих правил пользования сервисом
Позитивные результаты Ericsson смогли повлиять на Nokia

Несмотря на потерю доли рынка в Китае, прибыль Ericsson за IV квартал 2021 года приятно удивила. Возросший спрос на поставку оборудования 5G в Европу, Северную и Латинскую Америку увеличили чистую прибыль компании на 40%, и она достигла $1,1 млрд. Фондовый рынок моментально отреагировал на новости от Ericsson – акции Nokia возросли на 1,46%.

Очистка репутации застройщика, девелопера, объекта

Здравствуйте! Вы тут, потому что у вас есть проблемы с online-репутацией. Если это не так – не читайте дальше.

Ваше идеальное резюме: 9 рекомендаций от HRD

Привет! Меня зовут Антонина, я – HRD группы компаний Digital Hub. За 20 лет работы в HR я видела тысячи резюме и составила свод рекомендаций, которые помогут соискателям не быть «забракованными» при первом же взгляде на их CV.

null