Пора в отпуск
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'));

С чего начать разработку нового сайта? Опыт «ЛидМашины»

Пожалуй, каждый маркетолог в тот или иной момент задаётся этим вопросом. Нужно сделать лендинг или многостраничный сайт — не важно, проблема всегда одна: с чего начать?

В закладки

Написать большущее техническое задание, в мелочах рассказать, что должно быть на сайте и как всё описанное должно работать? А как понять, что должно быть на сайте? И как понять, как оно должно работать? Так много вопросов и так мало ответов.

Большущее ТЗ — не решение. Читая текст, дизайнеру сложно понять, как блоки должны располагаться на странице. А верстальщику и программисту бывает трудно разобраться, как страница должна работать в динамике. В итоге всё это сплетается в клубок недопонимания, перерастает в кучу согласований с заказчиком и переделок на каждом этапе работы.

Мы в «ЛидМашине» не сталкиваемся с такими проблемами, потому что перед разработкой сайта или лендинга проводим большую подготовительную работу. Наш ROI-маркетёр Тимур Азизов расскажет, как именно мы это делаем.

Анализируем, что есть

Сначала мы изучаем всё-всё-всё, что есть у клиента: его бизнес, текущий сайт, конкурентов и так далее. Так мы найдём грабли, чтобы не наступить на них в будущем, и соберём список крутых идей, которые стоит реализовать на сайте.

Бизнес

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

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

Сайт

Если у клиента есть сайт, пришло время досконально его изучить.

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

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

Проводим юзабилити-тестирование

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

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

Затем соберите фокус-группу. Важно, чтобы в начале тестирования каждый из них самостоятельно высказал свои замечания по прототипу — что понятно, а что нет. Уже после этого можно задавать свои вопросы.

Результат: список того, что посетителям непонятно, и что они хотели бы видеть на сайте.

Конкуренты

У всех есть конкуренты, и глупо не подсматривать за ними.На этом этапе мы изучаем конкурентные ресурсы с точки зрения юзабилити, ищем интересные фишки и полезные сервисы, которые мы пока не используем.

Результат: список крутых решений, которые стоит внедрить в сайт заказчика.

Проектируем сайт

Так сложилось, что, говоря «сделать дизайн», у нас подразумевают «нарисовать дизайн-макет». Из-за этого большинство упускает очень важный этап работы — проектирование (а ведь design переводится именно как «проектирование»).

А меж тем, нарисовать визуальный дизайн по спроектированному макету в разы проще и быстрее, чем делать это с нуля.

Собираем идеи

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

Строим карту путей по сайту

Чтобы не запутаться на этапе проектирования и ничего не упустить, мы рисуем карту путей по сайту.

Это очень важный этап — сейчас мы продумываем структуру сайта, понимаем из каких страниц он состоит, и за что они отвечают.

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

Такая карта особенно полезна, если у вас очень большой проект.

Делаем макет

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

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

Проектировать макет можно в чём угодно: от условного Balsamiq, где вы оперируете набором заготовленных блоков, до более гибких решений типа Moqups и совсем уж профессиональных редакторов вроде Sketch, Figma, Framer или InVision Studio.

Превращаем макет в прототип

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

Интерактивный прототип можно сделать в тех же Sketch, Figma, Framer или InVision Studio, но мы предпочитаем работать в Axure — это мощный инструмент, с большим количеством функций и дополнений. В нём можно спроектировать прототип, близкий к альфа-версии сайта.

На что обратить внимание при проектировании?

  • Блоки в макете и прототипе делайте реальных размеров —по ним дизайнер будет отрисовывать все элементы.
  • Используйте реальные тексты.
  • Продумывайте заголовки страниц, подписи к кнопкам, названия форм — не делайте их шаблонными.
  • Рисуйте макет по сетке, чтобы всё выглядело аккуратно.
  • Не забывайте, что это уже дизайн.
  • Делайте прототип понятным.

Зачем делать условный макет и прототип?

Сэкономите время и деньги. Не нужно будет объяснять дизайнеру и заказчику последовательность блоков. А все изменения внесёте ещё на этапе условного макета, а не визуального дизайна.

Это удобно! Согласовывать детали на примере интерактивного прототипа удобнее, чем в письменном ТЗ.

Глядя на интерактивный прототип, заказчику гораздо проще высказывать свои замечания и пожелания. А верстальщику и программисту — понять как всё это лучше реализовать.

Ну и, по моему опыту, после согласования интерактивного прототипа, изменения в проект вносят в разы реже.

Тестируем прототип

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

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

Приступаем к разработке

Теперь, когда у нас на руках есть интерактивный прототип сайта, прошедший юзабилити-тестирование, нужно нарисовать визуальный дизайн, сверстать его в HTML и прикрутить логику.

Пишем пояснительную записку дизайнеру

Увы, совсем без этого не обойтись, и нужно будет обратить внимание дизайнера на нюансы.

Например:

Пишем пояснительную записку технологу

Обратите внимание технических специалистов на особенности вёрстки и разработки: как правильно сверстать с точки зрения SEO, по какой логике должны работать различные калькуляторы и динамические сервисы.

Например:

Что дальше?

Осталось дело за малым — проконтролировать каждый этап разработки сайта. Здорово, что вы делаете всё по продуманному и согласованному интерактивному прототипу — теперь вероятность столкнуться с неожиданными проблемами стремится к нулю.

А какой подход к разработке сайтов и лендингов практикуете вы? Пишите в комментариях.

{ "author_name": "Блог Лидмашины", "author_type": "self", "tags": [], "comments": 1, "likes": 19, "favorites": 41, "is_advertisement": false, "subsite_label": "marketing", "id": 65376, "is_wide": false, "is_ugc": true, "date": "Tue, 23 Apr 2019 16:43:11 +0300", "is_special": false }
Объявление на vc.ru
0
1 комментарий
Популярные
По порядку
–1

Да что там изучать... Надо найти полезное действие для посетителя и от него уже строить всю историю.

А так сплошной креатив под видом исследований и решений.

Ответить

Комментарии

null