Разработка диайн-концепции корпоративного сайта компании Infotex

1. АИТИ
ПРЕДЛОЖЕНИЕ ПО РАЗРАБОТКЕ
КОРПОРАТИВНОГО САЙТА INFOTECS.RU
Москва. 26 ноября 2015. Подготовил Успешный А.С.

2. дин и са ы на и ы ди айн трендов последнего вре ени.
основе плоского ди айна ле ит дв ерное пространство
собственно по то он и на ывается плоски .
Плоский ди айн представляется как противополо ност
скево ор и .
По ад ке плоский ди айн дол ен под ркиват ект
о аровател ной простоты и тон нности.
Стал набират поп лярност с 2010 года а с 201
становитсяновы стандарто в ди айне.
РАЗУМНЫЕ
ТРЕБОВАНИЯ
К ДИЗАЙНУ
Простота
расота
истота
Простор
Удобство
Соответствие
совре енны
тренда ди айна
FLAT-ДИЗАЙН
Н А Ш В Ы Б О Р
АИТИ
2

3. БЕЗУПРЕЧНЫЙ СТИЛЬ И ТИПОГРАФИКА
В ЛУЧШИХ ТРАДИЦИЯХ FLAT DESIGN
Пос отрите полнора ерный ди айн кон епт
. 2 2
АИТИ
3

4. МАСШТАБИРУЕМАЯ
КОНТЕНТ ОБЛАСТЬ
ШИРИНОЙ ДО 1720PX
СЕТКА ИЗ 12 КОЛОНОК
АИТИ
ля ка дого контент блока
прод ана ласти ност
4

5. АИТИ
При ра работке ди айна ы обя ател но
итывае совре енные стройства
с крана и свер высокого ра решения
и подготавливае гра ик спе иал но
для ка ественного отобра ения
на крана .
RETINA READY!
англ. сет атка обоб а ее
аркетинговое на вание кранов о ен высокого
ра решения. лагодаря высокой плотности пикселей
на квадратный д й от 26 и выше и обра ение
на кране акси ал но прибли ается по ка еств
к и обра ения на страни е рнала.
се ле енты интер ейса
в векторном формате - SVG
астровая гра ика со дается
в smart objects с учетом
увеличенного разрешения.
5

6. А дитория пол ователей обил ны
стройств растет стре ител ны и
те па и игнорироват то при
ра работке сайта на ит потерят
обил ны клиентов .
. октябр 2015
Меся ная а дитория 6 6
Сеансов 2 2
Прос отров 2 6
Мобил ные 5
Мобильная аудитоия: 3 649
Данные предоставил Александр Лысенко
2 П А СП У
М УС С А А
П 50 А А.
Исследование LiveInternet 2014 год
Мы про ессионал но ра работае адаптивн верстк
для нового корпоративного сайта .
локи все страни б д т дина и ески подстраиват ся под
аданные ра еры окна бра ера или стройства которые
испол ет ваш посетител в л бо совре енно бра ере
РЕШЕНИЕ?
АДАПТИВНОСТЬ
АИТИ
6

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

8. ОПЫТ ВЗАИМОДЕЙСТВИЯ
(USER EXPERIENCE, UX)
АИТИ
то о ения во ника ие
еловека при непосредственно
в аи одействии с об екта и
окр а его ира.
более ко с ысле опыт
в аи одействия арактери ет ли ное
восприятие еловеко нк ионал ны
и о ионал ны арактеристик
прод кта или сл ги в про ессе
испол ования.
8
сновное ен сайта
Поиск по сайт
асширенное ен
в виде слайд панели
апка сайта всегда
на вид

9. АИТИ
МОНИТОР
С ВЫСОКИМ
РАЗРЕШЕНИЕМ
9
П МП У П УП А М
П А С С М

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

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

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

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

14. е нология и енения види ого поло ения об екта относител но
дал нного она в ависи ости от координат к рсора ыши
пол ователя или прокр тки страни ы.
PARALLAX
М П МУ СП У М П С СА А
САМ С М А С
С А МА С А А М АМ С А
АП М
МЫ ЭТО ОТЛИЧНО ПОНИМАЕМ,
АИТИ
14
а дый слой блока и еет аданный алгорит
и енения координат относител но дви ения
к рсора ышки.
Слой 2Слой 1
Слой

15. а главной страни е сайта
предлагае ра естит
полно кранный асштабир е ый
он с про о видео о пании.
Повер видео она
накладывается слой
с си воли ны ра ре о
в ор е отпе атка пал а
и короткой текстовой
ин ор а ией при ыва ей к
прос отр видео.
акой необы ный прие
привлекает вни ание посетителя
как к са о проект так
и к скрыто про о ролик
во действ ет на рител ное
восприятие гарантированно
апо инается и делает аш сайт
непо о и на конк рентов.
ФОНОВОЕ ВИДЕО
С SVG ПОДЛОЖКОЙ
АИТИ
15
с градиендной про ра ности и конт ро отпе атка
икли ное оновое видео

16. При клике на кнопк
ап скается воспрои ведение
про о ролика на оне страни ы
а вер ний слой текст
и ле енты навига ии
скрыва тся тобы
не ешат прос отр .
ставляе лиш
ини алисти ный скин
5 едиа плеера и кнопк
акрытия видео блока
во вра а пол ователя
к предыд е интер ейс .
ПОЛНОЭКРАННОЕ
ВИДЕО
АИТИ
16
нопка ап ска
про о ролика
Полно кранный
видеоплеер

17. проекты наши лиентов ы встраивае
ра нообра ные ани а ионные екты
которые по воля т со дат н ное
впе атление вы ват определенные
ассо иа ии расставит ак енты и повысит
от ыв ивост интер ейса.
ля главной страни ы сайта ко пании
А н о е С ы оти сделат
ани а и л а сканир его
отпе аток пал а.
аки обра о ы акладывае
в со нание посетителя обра ассо иа и
свя ыва аш о пани и торговое
предло ение прод кты решения сл ги
с представление пол ователя
о необ оди о е ровне бе опасности
и наде ности средств а иты ин ор а ии
и высоко ровне ко петен ии
ра работ иков такого рода прод ктов.
ТЕМАТИЧЕСКАЯ
JS-АНИМАЦИЯ
АИТИ
17
Ани а ия
про о ения
сканера
отпе атка
При дости ении
кон а страни ы
ани а ия
повторяется

18. АИТИ
Мы проработае кл евые страни ы сайта
т ател но прод ае и стр кт р
и реали е потряса ани а и
подгр ки контента.
предлагае ой на и кон еп ии л бая
страни а проекта предполагает ередование
блоков с ин ор а ией. акая пор ионная
пода а атериала способств ет более
просто восприяти атериала.
По ере прокр тки пол ователе страни ы
к то или ино блок активи ир тся
скрипты агр а ие содер и ое данного
блока. ле енты контента собира тся
как па л екты с еня т др г др га.
Пол овател работает с интересны
дина и ны интер ейсо который
с одной стороны превра ает работ с сайто
в нек игр а с др гой гра отно расставляет
ак енты на ин ор а ионно содер и о
страни ы и кл евы ле ента интер ейса.
АНИМАЦИЯ КОНТЕНТ БЛОКОВ
18
екстекст
Ани а ия блока проигрывается
1 ра в 2 аса для одного оста

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

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

21. АИТИ
М С У П МП
С С А А А А А
А У М С У С М
АМ П М С У М
У НАС ОТЛИЧНЫЕ
ПРОГРАММИСТЫ
21

22. а протя ении лет и ее высший
стат с олотого партнера 1С итрикс
в наше штате тол ко серти и ированные
програ исты облада ие все и
необ оди ы и ко петен ия и которые
собл да т все стандарты ра работки
и внедрения.
АИТИ
ка естве систе ы для со дания сайтов
ы испол е проверенное вре ене
решение от лидера рынка ко ер ески
систе правления сайто 1С итрикс.
ВНЕДРЯЕМ
ПЛАТФОРМУ
1С-БИТРИКС
А П П АПУС М
П МП С У П У
А С С С А А АМ
П М У А С А 1С С.
22
ОБЩИЙ РЕЙТИНГ
ПЛАТНЫХ CMS
* по состоянию на 26 ноября 2015 г.

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

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

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

26. МЫ ЗАЩИТИМ ВАШ САЙТ ОТ ВЗЛОМА
Серти икат соответствия
200 С оссии
Мы проводи елый ко плекс те ни ески
и органи а ионны ер которые об единены
об ей кон еп ией бе опасности и по воля т
на ител но расширит понятие а и енности
и реак ии сайтов на во о ные гро ы. бла ный сканер
бе опасности
Стоп лист
Проактивный ил тр
еб антивир с
рнал втор ений
а ита сессий
онтрол активности
е опасност
кода
а деление прав
дост па к проект
ег лярное ре ервное
копирование
СЕРТИФИКАТЫ СООТВЕТСТВИЯ
а и енное
веб прило ение
МОДУЛЬ «ПРОАКТИВНАЯ ЗАЩИТА»
НЕЗАВИСИМЫЙ АУДИТ БЕЗОПАСНОСТИ
АИТИ
26

27. НАСТРОИМ СИСТЕМУ WEB-АНАЛИТИКИ
ели на сайте для и ерения вовле енности
лоял ности и конверсии.
етки для отсле ивания ективности
ка дого и каналов ко ника ий.
Много его е е. а т те отдел ная
пре ента ия
АИТИАИТИ
27

28. . .
215
16 5 5 60
.
А С А
У С П
енерал ный директор
АИТИ
ПОЗВОНИТЕ НАМ,
ДАВАЙТЕ ОБСУДИМ
ВАШ ПРОЕКТ ДЕТАЛЬНО.