Как мы сделали редизайн сайта «Сколково» sk.ru

К нам в Embacy пришел фонд «Сколково» за редизайном сайта. Мы немного удивились, так как работаем в основном с диджитал-продуктами, но на проект с радостью согласились, потому что у некоторых наших клиентов стоит логотип «Сколково» в подвале. Символично, что теперь в подвале sk.ru ссылка на нас.

Новая главная sk.ru
Новая главная sk.ru

Какая стояла задача

Перейти от преимущественно новостного сайта к платформе, рассказать и показать, что «Сколково» представляет из себя сегодня. Старый сайт выглядел так:

Главная страница старого сайта
Главная страница старого сайта

Что получилось:

Финальная версия обновленного сайта
Финальная версия обновленного сайта

Нахимичили, или рассказ про концепцию

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

Наши встречи проходили в Квартале Менделеева в «Сколково»

В этом здании. Если присмотреться, в левом верхнем углу написано: "Mendeleev Quarter"
В этом здании. Если присмотреться, в левом верхнем углу написано: "Mendeleev Quarter"

Логотип «Сколково» напрямую отсылает к элементу таблицы Менделеева:

Как мы сделали редизайн сайта «Сколково» sk.ru

Поэтому мы взяли за основу концепции сайта… таблицу Менделеева.

Маркетинговый текст звучит так: Менделеев упорядочил химические элементы в систему, а «Сколково» упорядочивает российские стартапы.

Стилистика: табличный минимализм

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

В итоге пришли к тому, что технологические конкурсы оформили близко к классической таблице Менделеева:

Как мы сделали редизайн сайта «Сколково» sk.ru

Из блока мероприятий убрали бессмысленные фотографии и оставили место для ключевого мероприятия слева:

Как мы сделали редизайн сайта «Сколково» sk.ru

Участников «Сколково» на главной странице оформили с корешками по направлениям:

Как мы сделали редизайн сайта «Сколково» sk.ru

Инфраструктуру «Сколково» отрисовали линейными иллюстрациями, единственными вписавшимися в стилистику, а также сделали множество иконок:

Как мы сделали редизайн сайта «Сколково» sk.ru
Как мы сделали редизайн сайта «Сколково» sk.ru
Как мы сделали редизайн сайта «Сколково» sk.ru

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

Как мы сделали редизайн сайта «Сколково» sk.ru

Как мы это все утверждали

Мы привыкли работать с лицом, которое принимает финальное решение. Это удобно, потому что помогает двигаться быстро. Здесь на стороне «Сколково» было 5 уровней принятия решений. Это был главный челлендж. Совещания выглядели настолько серьезно, что мы задумались над тем, чтобы надеть рубашки вместо черных толстовок Embacy.

Что сделали, чтобы процесс прошел эффективно

  • Не показывали промежуточных версий

Например, концепцию и стилистику согласовывали на примере кликабельного прототипа главной страницы в фигме (посмотрите, там даже есть анимации).

  • Четко распределили роли внутри

Этот проект научил нашу горизонтальную структуру трансформироваться четкую в вертикаль (у нас получилось 4 уровня), теперь мы пользуемся этим навыком по необходимости

  • Действовали итеративно

Разбили проект на 12 спринтов, и двигались последовательно, сдавая по частям. На нас был только дизайн, поэтому команда «Сколково» смогла приступить к верстке уже после второго спринта. Вроде банально, но банально удобно.

Итого: 16 уникальных страниц и шаблонов

Финальная фигма с высоты птичьего полета:

Как мы сделали редизайн сайта «Сколково» sk.ru

Отдельно отметим страницу с тем, как стать резидентом «Сколково». Она выглядела так:

Как мы сделали редизайн сайта «Сколково» sk.ru

Мы переработали ее и расписали путь:

Как мы сделали редизайн сайта «Сколково» sk.ru
Как мы сделали редизайн сайта «Сколково» sk.ru

Разделили «что нужно сделать, чтобы стать участником Сколково», и «что делать после того, как стал участником Сколково», отдельно выделили преимущества, полезные документы и ссылки

Как мы сделали редизайн сайта «Сколково» sk.ru
Как мы сделали редизайн сайта «Сколково» sk.ru
3636
27 комментариев

Двоякое ощущение... Вы вроде как помогли им, а вроде как и испачкались.

В превью (ссылка ниже, но можно даже не открывать — описание и так видно) утверждается, что это «некоммерческая организация», а всё равно вызывает столько неприязни, словно это чёрная дыра для бюджетных денег 🙄

Почему такое негативное восприятие, интересно? 🤔

5
Ответить

Комментарий недоступен

12
Ответить

Я призадумался. Не уверен что ребята испачкались. Представим 3 пути развития событий:
1. Sk заказывает сайт непонятно у кого за небольшие деньги и получает трэш.
2. Sk заказывает сайт за бешенный деньги у условного агенства Апостол и понятно куда идут средства.
3. Sk заказывает сайт у ребят из поста, получает хороший результат за вменяемые деньги. 

Мне кажется третий сценарий самый нормальный и мы как раз в нем. Ну  я верю что embacy не попилочная)

4
Ответить

Иконки - жесть, шрифты - жесть... Вы реально считаете что Ариал это лучший шрифт для веба?... 

5
Ответить

— Ваш сайт говно!
— Но это же сайт Сколково.
— Тогда недурно!

4
Ответить

У вас в портфеле хорошие сайты, а это работа стажера из 2010-го ? =/

3
Ответить

Ребята осваивают Corel Draw че вы докопались )))

2
Ответить