Пора в отпуск
6000 миль
за оформление карты
Подробнее
(function(w, d, promoUrl, loc) { var modal, box, closeModalBtn, isModalAnimation, body, html, scrollBarWidth, promoButton; var teaser = d.querySelector('.tinkoff-all-airlines'); if (!teaser) return false; initModal(); preloadImages(['https://leonardo.osnova.io/2755fcfd-f5aa-3496-f0b8-2066ac91e9fa/', 'https://leonardo.osnova.io/0006b8c0-6e01-4b3f-6765-45d1606a2c48/', 'https://leonardo.osnova.io/da12942b-f4f3-2560-40b3-a1c930f4b330/']).then(function() { setTimeout(function() { analyticsEvents(); teaser.classList.add('is-init'); teaser.addEventListener('click', openModal); onDestroy(); }, 100); }); function onDestroy() { var moduleAjaxify = window.Air && window.Air.get('module.ajaxify'); if (moduleAjaxify && moduleAjaxify.on) { moduleAjaxify.on('Before page changed', function() { window.removeEventListener('scroll', scrollHandler); hideModal(); if (teaser) { teaser.removeEventListener('click', openModal); } if (box) { box.removeEventListener('click', stopPropagation); } if (closeModalBtn) { closeModalBtn.removeEventListener('click', closeModalStop); } if (promoButton) { promoButton.removeEventListener('click', clickPromo); } if (modal) { modal.removeEventListener('click', closeModal); modal.remove(); } }); } }; function initModal() { body = d.querySelector('body'); html = d.documentElement; modal = d.querySelector('.tinkoff-all-airlines-promo'); box = d.querySelector('[data-tinkoff-all-airlines-box]'); closeModalBtn = d.querySelector('[data-tinkoff-all-airlines-close]'); isModalAnimation = false; scrollBarWidth = getScrollbarWidth(); box.addEventListener('click', stopPropagation); modal.addEventListener('click', closeModal); closeModalBtn.addEventListener('click', closeModalStop); promoButton = d.querySelector('.tinkoff-all-airlines-promo__button'); if (promoButton) { promoButton.setAttribute('href', promoUrl); promoButton.addEventListener('click', clickPromo); } body.appendChild(modal); }; function clickPromo() { sendEvent('Promo button'); }; function stopPropagation(e) { e.stopPropagation(); }; function closeModalStop(e) { e.preventDefault(); e.stopPropagation(); closeModal(); }; function openModal() { if (isModalAnimation) return false; isModalAnimation = true; sendEvent('Popup', 'Open'); body.style.overflow = 'hidden'; html.style.marginRight = scrollBarWidth + 'px'; modal.classList.remove('is-hidden'); setTimeout(function() { modal.classList.add('is-show'); setTimeout(function() { isModalAnimation = false; }, 300); }, 0); }; function closeModal() { if (isModalAnimation) return false; isModalAnimation = true; hideModal(); sendEvent('Popup', 'Close'); }; function hideModal() { modal.classList.remove('is-show'); setTimeout(function() { modal.classList.add('is-hidden'); body.style.overflow = 'auto'; html.style.marginRight = '0px'; isModalAnimation = false; }, 300); }; function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; function preloadImages(urls) { return Promise.all(urls.map(function(url) { return new Promise(function(resolve) { var image = new Image(); image.onload = resolve; image.src = url; }); })); }; function sendEvent(label, state) { state = state ? state : 'Click'; var value = 'Tinkoff All Airlines 650 (' + loc + ') — ' + label + ' — ' + state; console.log(value); if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function getScrollbarWidth() { var outer = d.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; d.body.appendChild(outer); var inner = d.createElement('div'); outer.appendChild(inner); var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); outer.parentNode.removeChild(outer); return scrollbarWidth; }; function analyticsEvents() { sendEvent('Teaser', 'init'); window.addEventListener('scroll', scrollHandler); scrollHandler(); }; function scrollHandler() { if (isScrolledIntoView(teaser)) { sendEvent('Teaser', 'Show'); window.removeEventListener('scroll', scrollHandler); } }; function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= w.innerHeight); return isVisible; }; }(window, document, 'https://www.tinkoff.ru/cards/credit-cards/all-airlines/promo/form/black-friday/?utm_source=vc0920_cc&utm_medium=ntv.fix&utm_campaign=allairlines.vcbf', 'entry-head'));
Дизайн
Embacy
3206

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

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

В закладки
Слушать
Новая главная sk.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Делаем фирменные стили и сайты для айти-продуктов. Работаем со Skyeng, «Яндексом», МТС, ВТБ. Портфолио: http://be.net/embacy
{ "author_name": "Embacy", "author_type": "editor", "tags": ["\u0441\u043a\u043e\u043b\u043a\u043e\u0432\u043e","\u0441\u0430\u0439\u0442\u044b"], "comments": 26, "likes": 20, "favorites": 62, "is_advertisement": false, "subsite_label": "design", "id": 149749, "is_wide": true, "is_ugc": false, "date": "Thu, 13 Aug 2020 11:10:16 +0300", "is_special": false }
Объявление на vc.ru
0
26 комментариев
Популярные
По порядку
Написать комментарий...
4

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

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

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

Ответить
11

Ты сам ответил на свой вопрос (про дыру).
На, не скучай))

Ответить
0

Квадрокоптер совершил {{Роскомнадзор}} ?

Ответить
3

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

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

Ответить
4

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

Ответить
4

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

Ответить
3

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

Ответить
2

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

Ответить
0

Не трожь Короля Дров!

Ответить
0

Да я сам в нем много всего делаю ))

Ответить
3

1. Нет единого стиля – просто визуальная «каша» (шрифты, иллюстрации, ховер-эффекты, полоски – какое-то нагромождение кусков разных тем, которые спорят с друг другом).   
2. Ощущение несерьезности от сайта какая-то подростковая тематика – компьютерные игры из прошлого. 
3. Нет ощущения инновационности, хотели про будущее, а получилось про прошлое. 
4. Первый экран – никакого Wow. Просто унылая картинка здания и блок новостей из прошлого века. 
5. Глазу не за что зацепиться, ощущение пустоты, не радует. 

Как-то даже стало обидно за ребят из Embacy – поклонник их работ. 

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

Ответить
1

Сколько вам заплатили за работу?

Ответить
1

это сайт про бизнес а не дизайн, нормальный вопрос 

Ответить
2

Аккуратная, но очень слабая работа с точки зрения дизайна.

Ответить
2

Мои впечатления:

Плюсы: Дизайн упростился, шрифт стал крупнее, лишние картинки удалили. Стало проще, это позитив.

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

Минус 2: Зачем выносить сервис "Застройщику" в один ряд в поиске с разделом Инвесторам и Инноваторам. Неужели Застройщиков в Сколково столько же, сколько и Инноваторов? Судя по сайту, выходит, что да.

Минус 3. Вместо "Инноваторам" в "Сервисах" я бы писал "Резидентам"

Минус 4. Помимо стартапов-резидентов, есть еще корпорации, которые открыли свои R&D подразделения в Сколково. На мой взгляд, это важнейший пласт обитателей Сколково, которые сейчас остались без своего блока на сайте. Их не найти и не выделано раздела сервисов для них.

Минус 5. Кто придумал термин "Уставной капитал" в карточках компаний? Есть Гражданский кодекс, есть Закон об ООО, и везде написано "УставнЫй капитал".

Минус 6. Я бы показывал в карточках полный статус взаимодействия стартапа и фонда. Сейчас не хватает даты получения статуса резидента, суммы полученных грантов ("нет", если не выделялись), дат выделения грантов ("нет", если не выделялись).

Минус 7. Есть теории экосистем, законы Рида, Меткалфа и прочее. Критически важно для масштабирования, чтобы узлы экосистем становились сами "мини-экосистемами". В контексте Сколково, в карточках стартапов не хватает того, какие услуги они могут оказывать другим стартапам. Нужно стимулировать горизонтальные связи на уровне стартапов.

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

Минус 9. Случайно заметил. Есть сервис "нотариальные услуги". На странице сервиса перечислены эти услуги, которые не полностью бьются с законом о нотариате (не совпадает количество услуг). Нужно или не перепечатывать законы вообще, или перепечатывать их правильно.
К тому же, на сайте самого этого избранного нотариуса нет ни слова о том, что он работает или хоть как-то связан со Сколково, а сидит себе на Сивцевом Вражке. Если Сколково к нему направляет тысячи компаний, стоило бы это отразить на сайте нотариуса.

Минус 10. Сколково стало большой территорией, много чего построено. Была бы очень полезна интерактивная кликабельная карта, что где находится. Да, есть отдельный сайт skolcity, но я бы показал карту на главном сайте. Карта дает ощущение масштаба, размаха. Это важно.

Минус 11. На мой взгляд, категорически не хватает "Историй успеха". Это просто важнейший блок. Есть много скептиков, которые задают вопросы типа "Ну и что там ваше Сколково сделало, где результаты?" Для ответа на подобные вопросы и нужен подобный блок - сделано было действительно много, и много чего полезного. 

Ответить
0

Вы бы там пофиксили 404. Хотя бы с этой страницы: https://sk.ru/education/

Ответить
3

Они еще и про SVG не знают - все иконки размытые. Инновации хуле.

Ответить
1

очень плохо!

Ответить
1

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

Ответить
1

Таргет "лендинга по лендингам" на интересы "Сколково" оправдался :D

Ответить
0

Пустили ностальгическую слезу))

Ответить
0

А мне нравится и дизайн, и сама концепция, минимализм в действии.

Ответить
0

О, сайт сколково это пока самое интересное что я видел от сколково за 10 лет.  

Ответить
0

а как же санта-барбара с пономаревым и прочими скандалами о растратах? ))

Ответить
0

Много белого, скучновато. 

Ответить
0

Не смогли в  ?
Новое слово в типографике?

Ответить

Комментарии

null