Разработка дизайн-концепции сайта для премиум бренда кормов для кошек и собак

1. АИТИ
ПРЕДЛОЖЕНИЕ ПО РАЗРАБОТКЕ
ПРОМО-САЙТА БРЕНДА MOLINA
Москва. 14 декабря 2015. Подготовил Успешный А.С.
Корма для кошек и собак
суперпремиум-класса
www.ircit.ru +7 499 215-34-34

2. Один из самых значимых дизайн-трендов последнего времени.
В основе flat (плоского) дизайна лежит двухмерное пространство
(собственно, поэтому он и называется «плоским»).
Плоский дизайн представляется как противоположность
скевоморфизму.
По задумке «плоский дизайн» должен подчёркивать эффект
«очаровательной простоты» и утончённости.
Стал набирать популярность с 2010 года, а с 2014 —
становитсяновым стандартом в web-дизайне.
РАЗУМНЫЕ
ТРЕБОВАНИЯ
К ДИЗАЙНУ
Простота
Красота
Чистота
Простор
Удобство
Соответствие
современным
трендам дизайна
FLAT-ДИЗАЙН
Н А Ш В Ы Б О Р
АИТИ
2

3. БЕЗУПРЕЧНЫЙ СТИЛЬ И ТИПОГРАФИКА
В ЛУЧШИХ ТРАДИЦИЯХ FLAT И MATERIAL DESIGN
Посмотрите полноразмерный дизайн-концепт
https://yadi.sk/d/l9mI2Ju_mJQgV
АИТИ
3

4. МАСШТАБИРУЕМАЯ КОНТЕНТ ОБЛАСТЬ
ШИРИНОЙ ОТ 320PX ДО 1920PX
И ГИБКАЯ СЕТКА ИЗ 12 КОЛОНОК
АИТИ
Для каждого контент-блока
продумана эластичность
4

5. АИТИ
При разработке дизайна мы обязательно
учитываем современные устройства
с экранами сверхвысокого разрешения
и подготавливаем графику специально
для качественного отображения
на экранах retina.
RETINA READY!
Retina (англ., «сетчатка») — обобщающее
маркетинговое название экранов очень высокого
разрешения. Благодаря высокой плотности пикселей
на квадратный дюйм (от 264 и выше), изображение
на экране максимально приближается по качеству
к изображениям на странице журнала.
Все элементы интерфейса
в векторном формате - SVG
Растровая графика создается
в smart objects с учетом
увеличенного разрешения.
5

6. Интерфейс должен эмоционально взаимодей-
ствовать с пользователем, реагировать на его
действия (например, прокрутка страницы, события
при наведение или клике на определенный
элемент), быть отзывчивым.
ЭТО НРАВИТСЯ ПОСЕТИТЕЛЯМ САЙТА.
Поэтому мы встраиваем привлекательные
и необычные эффекты, стилизуем стандартные
элементы управления, добавляем анимацию
отдельных блоков или элементов.
Работать с сайтом становится действительно
интересно, растет вовлеченность и лояльность
посетителя.
Для повышения юзабилити мы встраиваем
всплывающие подсказки и уведомления
о результате обработки сайтом запросов
пользователя, встраиваем интерактивную
проверку корректности заполения форм.
ОТЗЫВЧИВОСТЬ
АИТИ
6

7. ОСОБОЕ ВНИМАНИЕ
USER EXPERIENCE
(ОПЫТ ВЗАИМОДЕЙСТВИЯ)
АИТИ
Ощущения, возникающие у человека
при непосредственном взаимодействии
с объектами окружающего мира.
В более узком смысле, опыт взаимодействия
характеризует личное восприятие человеком
функциональных и эмоциональных характери-
стик продукта или услуги в процессе
использования.
7

8. «Аудитория пользователей мобильных
устройств растет стремительными
темпами, игнорировать это при
разработке сайта - значит потерять
«мобильных» клиентов».
27% ПОЛЬЗОВАТЕЛЕЙ ИСПОЛЬЗУЮТ
МОБИЛЬНЫЕ УСТРОЙСТВА ДЛЯ ВЫХОДА
В ИНТЕРНЕТ И ГЕНЕРЯТ ПОЧТИ 50% ТРАФИКА.
Исследование LiveInternet 2014 год
Мы профессионально разработаем
адаптивную верстку для нового промо-сай-
та премиум корма Molina.
Блоки всех страниц будут динамически
подстраиваться под заданные размеры
окна браузера или устройства, которые
использует ваш посетитель, в любом
современном браузере!
РЕШЕНИЕ?
АДАПТИВНОСТЬ
АИТИ
8

9. АИТИ
МОНИТОР
С ВЫСОКИМ
РАЗРЕШЕНИЕМ
9
ПОДКЛЮЧЕННЫЙ К КОМПЬЮТЕРУ ПОД УПРАВЛЕНИЕМ
ЛЮБОЙ ОПЕРАЦИОННОЙ СИСТЕМЫ

10. АИТИ
ЭКРАН НОУТБУКА
10

11. АИТИ
ПЛАНШЕТА
11

12. АИТИ
И ДАЖЕ ТЕЛЕФОНА
12

13. АИТИ
У ВАС НИКОГДА
НЕ БУДЕТ
ВТОРОГО ШАНСА
ПРОИЗВЕСТИ
ПЕРВОЕ ВПЕЧАТЛЕНИЕ!
— Аллан Пиз
13

14. Технология изменения видимого положения объекта относительно
удалённого фона в зависимости от координат курсора мыши
пользователя или прокрутки страницы.
PARALLAXИМЕННО ПОЭТОМУ ИСПОЛЬЗУЕМ ПРИ ВЕРСТКЕ
САЙТА САМЫЕ СОВЕРМЕННЫЕ ТЕХНОЛОГИИ
ОТЗЫВЧИВОСТИ, ИНТЕРАКТИВНОСТИ
И АНИМАЦИИ СОЗДАВАЕМЫХ СТРАНИЦ.
МЫ ЭТО ОТЛИЧНО ПОНИМАЕМ,
АИТИ
14
Слой 2
Слой 1
Слой 3
САМЫЕ
СОВРЕМЕННЫЕ
ТЕХНОЛОГИИ
НАПРИМЕР,

15. АИТИ
Мы проработаем ключевые страницы сайта,
тщательно продумаем их структуру
и реализуем потрясающую анимацию
подгрузки контента.
В предлагаемой нами концепции любая
страница проекта предполагает чередование
блоков с информацией. Такая порционная
подача материала способствует более
простому восприятию материала.
По мере прокрутки пользователем страницы
к тому или иному блоку активизируются
скрипты, загружающие содержимое данного
блока. Элементы контента собираются
как пазл, эффекты сменяют друг друга.
Пользователь работает с интересным,
динамичным интерфейсом, который
с одной стороны превращает работу с сайтом
в некую игру, а с другой грамотно расставляет
акценты на информационном содержимом
страницы и ключевых элементах интерфейса.
АНИМАЦИЯ
КОНТЕНТ БЛОКОВ
15
Выпрыгивает собакаПустой экран с фоном
Все элементы сайта загружены в порядке
необходимом для фокусирвоки внимания

16. ВАШ САЙТ
БУДЕТ ВЫГЛЯДЕТЬ БЕЗУПРЕЧНО,
ЧТО БЕЗУСЛОВНО ПОДЧЕРКНЕТ
ПРЕМИАЛЬНОСТЬ БРЕНДА
И УВЕЛИЧИТ КОНВЕРСИЮ.
АИТИ
16

17. АИТИ
СЭКОНОМИЛ –
ЗНАЧИТ ЗАРАБОТАЛ!
Cколько времени тратят сотрудники
на информационное обслуживание сайта?
Cколько времени занимает обучение?
Часто ли возникают проблемы?
А что, если сократить
это время в 3 или даже 5 раз,
исключив при этом возможность
возникновения программных
ошибок?
17

18. АИТИ
И МНОЖЕСТВО УЖЕ ГОТОВЫХ, ПРОВЕРЕННЫХ КОМПОНЕНТОВ
СОБСТВЕННОЙ РАЗРАБОТКИ ДЛЯ РЕШЕНИЯ ВАШИХ ЗАДАЧ,
РАБОТУ КОТОРЫХ МЫ С УДОВОЛЬСТВИЕМ
ВАМ ПРОДЕМОНСТРИРУЕМ
У НАС ОТЛИЧНЫЕ
ПРОГРАММИСТЫ
18

19. На протяжении 8 лет имеем высший
статус золотого партнера 1С-Битрикс,
в нашем штате только сертифицированные
программисты, обладающие всеми
необходимыми компетенциями, которые
соблюдают все стандарты разработки
и внедрения.
АИТИ
В качестве системы для создания сайтов
мы используем проверенное временем
решение от лидера рынка коммерческих
систем управления сайтом 1С-Битрикс.
ВНЕДРЯЕМ
ПЛАТФОРМУ
1С-БИТРИКС
ВАШ ПРОЕКТ ПЕРЕД ЗАПУСКОМ
ПРОЙДЕТ КОМПЛЕКСНУЮ ПРОВЕРКУ
НА СООТВЕТСТВИЕ СТАНДАРТАМ
ПО МОНИТОРУ КАЧЕСТВА 1С-БИТРИКС.
19
ОБЩИЙ РЕЙТИНГ
ПЛАТНЫХ CMS
* по состоянию на 26 ноября 2015 г.

20. МЫ ОБЕСПЕЧИМ ВЫСОЧАЙШУЮ
СКОРОСТЬ РАБОТЫ САЙТА
По статистике,
каждый четвертый посетитель, закроет страницу,
если она будет загружаться дольше 4 секунд!
НО ТОЛЬКО НЕ В ВАШЕМ СЛУЧАЕ, ПОТОМУ ЧТО,
АИТИ
20

21. КОМПОЗИТНЫЕ САЙТЫ
Применяем уникальную технологию создания композитных сайтов,
позволяющую добиться ускорения загрузки страниц в 100 раз.
HTML CSS JavaScript Изображения Динамические данные
Страница разделяется на
2 соcтавляющие: статическую
и динамическую.
Статическая часть
кешируется и отображается
мгновенно.
Динамическая часть
подгружаетсяв фоновом режиме
и кешируется
НАГРУЗОЧНОЕ ТЕСТИРОВАНИЕ
После завершения всех работ мы в обязательном порядке
проводим нагрузочное тестирование сайта и подбираем хостинг
(выделенный сервер или кластерную систему), способный
обеспечить оговоренные параметры быстродействия и
отказоустойчивости.
АСИНХРОННЫЙ ОБМЕН ДАННЫМИ (AJAX)
Подход к построению интерактивных пользовательских
интерфейсов сайтов, заключающийся в “фоновом” обмене
данными браузера с веб-сервером.
В результате, при обновлении данных веб-страница не
перезагружается полностью, и работа с сайтом становится
быстрее и удобнее.
КЛАСТЕРИЗАЦИЯ ДЛЯ РАБОТЫ
С ВЫСОКИМИ НАГРУЗКАМИ
Настраиваем кластерные системы, репликацию данных, CDN
и хранение медиаконтента на облачных серверах для обеспечения
бесперебойной работы высоконагруженных проектов.
Динамическая часть подгружается в фоновом режиме
и кешируется.
Страниц в секундуВремя генерации
АИТИ
21

22. АИТИ
ЗА БЕЗОПАСНОСТЬ
НЕОБХОДИМО ПЛАТИТЬ,
А ЗА ЕЕ ОТСУТСТВИЕ —
РАСПЛАЧИВАТЬСЯ!
— Уинстон Черчилль
22

23. МЫ ЗАЩИТИМ ВАШ САЙТ ОТ ВЗЛОМА
Сертификат соответствия
2004 ФСТЭК России
Мы проводим целый комплекс технических
и организационных мер, которые объединены
общей концепцией безопасности и позволяют
значительно расширить понятие защищенности
и реакции сайтов на возможные угрозы. «Облачный» сканер
безопасности
Стоп-лист
Проактивный фильтр
Веб-антивирус
Журнал вторжений
Защита сессий
Контроль активности
Безопасность
кода
Разделение прав
доступа к проекту
Регулярное резервное
копирование
СЕРТИФИКАТЫ СООТВЕТСТВИЯ
«Защищенное
веб-приложение»
МОДУЛЬ «ПРОАКТИВНАЯ ЗАЩИТА»
НЕЗАВИСИМЫЙ АУДИТ БЕЗОПАСНОСТИ
АИТИ
23

24. НАСТРОИМ СИСТЕМУ WEB-АНАЛИТИКИ
Цели на сайте для измерения вовлеченности,
лояльности и конверсии.
UTM метки для отслеживания эффективности
каждого из каналов коммуникаций.
Много чего еще. На эту тему отдельная
презентация
АИТИАИТИ
24

25. www.ircit.ru
+7 499 215-34-34
+7 916 953-57-60
mailbox@ircit.ru
А Л Е К С А Н Д Р
У С П Е Ш Н Ы Й
Генеральный директор
АИТИ
ПОЗВОНИТЕ НАМ,
ДАВАЙТЕ ОБСУДИМ
ВАШ ПРОЕКТ ДЕТАЛЬНО.