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

Infotex corpsite concept

Embed Size (px)

Citation preview

Page 1: Infotex corpsite concept

АИТИ

ПРЕДЛОЖЕНИЕ ПО РАЗРАБОТКЕ КОРПОРАТИВНОГО САЙТА I N FOTECS .RU

Москва. 26 ноября 2015. Подготовил Успешный А.С.

Page 2: Infotex corpsite concept

дин и са ы на и ы ди айн трендов последнего вре ени.

основе плоского ди айна ле ит дв ерное пространство собственно по то он и на ывается плоски .

Плоский ди айн представляется как противополо ностскево ор и .

По ад ке плоский ди айн дол ен под ркиват ект о аровател ной простоты и тон нности.

Стал набират поп лярност с 2010 года а с 201 становитсяновы стандарто в ди айне.

РАЗУМНЫЕ ТРЕБОВАНИЯ К ДИЗАЙНУ

Простота

расота

истота

Простор

Удобство

Соответствие совре енны тренда ди айна

FL AT-ДИЗАЙНН А Ш В Ы Б О Р

АИТИ2

Page 3: Infotex corpsite concept

БЕЗУПРЕЧНЫЙ СТИЛЬ И ТИПОГРАФИКА В ЛУЧШИХ ТРАДИЦИЯХ FL AT DES IGN

Пос отрите полнора ерный ди айн кон епт. 2 2

АИТИ3

Page 4: Infotex corpsite concept

МАСШТАБИРУЕМАЯКОНТЕНТ ОБЛАСТЬШИРИНОЙ ДО 1720PX СЕТКА ИЗ 12 КОЛОНОК

АИТИ

ля ка дого контент блока прод ана ласти ност

4

Page 5: Infotex corpsite concept

АИТИ

При ра работке ди айна ы обя ател но итывае совре енные стройства

с крана и свер высокого ра решения и подготавливае гра ик спе иал но для ка ественного отобра ения на крана .

RET I N A READY !

англ. сет атка обоб а ее аркетинговое на вание кранов о ен высокого

ра решения. лагодаря высокой плотности пикселей на квадратный д й от 26 и выше и обра ение на кране акси ал но прибли ается по ка еств к и обра ения на страни е рнала.

се ле енты интер ейса в векторном формате - SVG

астровая гра ика со дается в smart objects с учетом увеличенного разрешения.

5

Page 6: Infotex corpsite concept

А дитория пол ователей обил ны стройств растет стре ител ны и

те па и игнорироват то при ра работке сайта на ит потерят

обил ны клиентов .

. октябр 2015

Меся ная а дитория 6 6

Сеансов 2 2

Прос отров 2 6

Мобил ные 5

Мобильная аудитоия: 3 649

Данные предоставил Александр Лысенко

2 П А СП У М УС С А А

П 50 А А.

Исследование LiveInternet 2014 год

Мы про ессионал но ра работае адаптивн верстк для нового корпоративного сайта .

локи все страни б д т дина и ески подстраиват ся под аданные ра еры окна бра ера или стройства которые

испол ет ваш посетител в л бо совре енно бра ере

РЕШЕНИЕ?

АДАПТИВНОСТЬ

АИТИ6

Page 7: Infotex corpsite concept

Интерфейс должен эмоционально взаимодей-

ствовать с пользователем, реагировать на его

действия (например, прокрутка страницы, события

при наведение или клике на определенный

элемент), быть отзывчивым.

ЭТО НРАВИТСЯ ПОСЕТИТЕЛЯМ САЙТА.

Поэтому мы встраиваем привлекательные

и необычные эффекты, стилизуем стандартные

элементы управления, добавляем анимацию

отдельных блоков или элементов.

Работать с сайтом становится действительно

интересно, растет вовлеченность и лояльность

посетителя.

Для повышения юзабилити мы встраиваем

всплывающие подсказки и уведомления

о результате обработки сайтом запросов

пользователя, встраиваем интерактивную

проверку корректности заполения (валидацию)

форм.

ОТЗЫВЧИВОСТЬ

АИТИ7

Page 8: Infotex corpsite concept

ОПЫТ ВЗАИМОДЕЙСТВИЯ (USER EXPER I ENCE , UX )

АИТИ

то о ения во ника ие еловека при непосредственно

в аи одействии с об екта и окр а его ира.

более ко с ысле опыт в аи одействия арактери ет ли ное восприятие еловеко нк ионал ны и о ионал ны арактеристик прод кта или сл ги в про ессе испол ования.

8

сновное ен сайта

Поиск по сайт

асширенное енв виде слайд панели

апка сайта всегдана вид

Page 9: Infotex corpsite concept

АИТИ

МОНИТОРС ВЫСОКИМ РАЗРЕШЕНИЕМ

9

П МП У П УП А М П А С С М

Page 10: Infotex corpsite concept

АИТИ

ЭКРАН НОУТБУКА

10

Page 11: Infotex corpsite concept

АИТИ

ПЛАНШЕТА

11

Page 12: Infotex corpsite concept

АИТИ

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

12

Page 13: Infotex corpsite concept

АИТИ

У ВАС НИКОГДА НЕ БУДЕТ ВТОРОГО ШАНСА ПРОИЗВЕСТИ ПЕРВОЕ ВПЕЧАТЛЕНИЕ !

Аллан Пи

13

Page 14: Infotex corpsite concept

е нология и енения види ого поло ения об екта относител но дал нного она в ависи ости от координат к рсора ыши

пол ователя или прокр тки страни ы.

PARALL AX

М П МУ СП У М П С СА А САМ С М А С

С А МА С А А М АМ С А

АП М

МЫ ЭТО ОТЛИЧНО ПОНИМАЕМ ,

АИТИ14

а дый слой блока и еет аданный алгорити енения координат относител но дви ения к рсора ышки.

Слой 2Слой 1

Слой

Page 15: Infotex corpsite concept

а главной страни е сайта предлагае ра естит полно кранный асштабир е ый

он с про о видео о пании.

Повер видео она накладывается слой с си воли ны ра ре о в ор е отпе атка пал а и короткой текстовой ин ор а ией при ыва ей к прос отр видео.

акой необы ный прие привлекает вни ание посетителя как к са о проект так и к скрыто про о ролик во действ ет на рител ное восприятие гарантированно апо инается и делает аш сайт

непо о и на конк рентов.

ФОНОВОЕ ВИДЕО С SVG ПОДЛОЖКОЙ

АИТИ15

с градиендной про ра ности и конт ро отпе атка

икли ное оновое видео

Page 16: Infotex corpsite concept

При клике на кнопк ап скается воспрои ведение

про о ролика на оне страни ы а вер ний слой текст и ле енты навига ии скрыва тся тобы не ешат прос отр .

ставляе лиш ини алисти ный скин

5 едиа плеера и кнопк акрытия видео блока

во вра а пол ователя к предыд е интер ейс .

ПОЛНОЭКРАННОЕ ВИДЕО

АИТИ16

нопка ап скапро о ролика

Полно кранныйвидеоплеер

Page 17: Infotex corpsite concept

проекты наши лиентов ы встраивае ра нообра ные ани а ионные екты которые по воля т со дат н ное впе атление вы ват определенные ассо иа ии расставит ак енты и повысит от ыв ивост интер ейса.

ля главной страни ы сайта ко пании А н о е С ы оти сделат

ани а и л а сканир его отпе аток пал а.

аки обра о ы акладывае в со нание посетителя обра ассо иа и свя ыва аш о пани и торговое предло ение прод кты решения сл ги с представление пол ователя о необ оди о е ровне бе опасности и наде ности средств а иты ин ор а ии и высоко ровне ко петен ии ра работ иков такого рода прод ктов.

ТЕМАТИЧЕСКАЯ JS-АНИМАЦИЯ

АИТИ17

Ани а ия про о ениясканера отпе атка

При дости ении кон а страни ы ани а ия повторяется

Page 18: Infotex corpsite concept

АИТИ

Мы проработае кл евые страни ы сайта т ател но прод ае и стр кт р и реали е потряса ани а и подгр ки контента.

предлагае ой на и кон еп ии л бая страни а проекта предполагает ередование блоков с ин ор а ией. акая пор ионная пода а атериала способств ет более просто восприяти атериала.

По ере прокр тки пол ователе страни ы к то или ино блок активи ир тся скрипты агр а ие содер и ое данного блока. ле енты контента собира тся как па л екты с еня т др г др га.

Пол овател работает с интересны дина и ны интер ейсо который с одной стороны превра ает работ с сайто в нек игр а с др гой гра отно расставляет ак енты на ин ор а ионно содер и о страни ы и кл евы ле ента интер ейса.

АНИМАЦИЯ КОНТЕНТ БЛОКОВ

18

екстекст

Ани а ия блока проигрывается 1 ра в 2 аса для одного оста

Page 19: Infotex corpsite concept

АИТИ

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

ЧТО БЕЗУСЛОВНО ПОВЛИЯЕТ НА РОСТ КОНВЕРСИИ .

19

Page 20: Infotex corpsite concept

АИТИ

СЭКОНОМИЛ – ЗНАЧИТ ЗАРАБОТАЛ !

Автор неи вестен

Cколько времени тратят сотрудники

на информационное обслуживание сайта?

Cколько времени занимает обучение?

Часто ли возникают проблемы?

А то если сократит то вре я в или да е 5 ра искл ив при то во о ност во никновения програ ны ошибок

20

Page 21: Infotex corpsite concept

АИТИ

М С У П МП

С С А А А А А

А У М С У С М

АМ П М С У М

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

21

Page 22: Infotex corpsite concept

а протя ении лет и ее высший стат с олотого партнера 1С итрикс в наше штате тол ко серти и ированные програ исты облада ие все и необ оди ы и ко петен ия и которые собл да т все стандарты ра работки и внедрения.

АИТИ

ка естве систе ы для со дания сайтов ы испол е проверенное вре ене

решение от лидера рынка ко ер ескисисте правления сайто 1С итрикс.

ВНЕДРЯЕМ ПЛАТФОРМУ1С-БИТРИКС

А П П АПУС М П МП С У П У

А С С С А А АМ П М У А С А 1С С.

22

ОБЩИЙ РЕЙТИНГ ПЛАТНЫХ CMS

* по состоянию на 26 ноября 2015 г.

Page 23: Infotex corpsite concept

МЫ ОБЕСПЕЧИМ ВЫСОЧАЙШУЮ СКОРОСТЬ РАБОТЫ САЙТА

По статистике

ка дый етвертый посетител закроет страницу

если она б дет агр ат ся дол ше сек нд

НО ТОЛЬКО НЕ В ВАШЕМ СЛУЧАЕ, ПОТОМУ ЧТО,

АИТИ23

Page 24: Infotex corpsite concept

КОМПОЗИТНЫЕ САЙТЫ

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

HTML CSS JavaScript Изображения Динамические данные

Страница разделяется на2 соcтавляющие: статическую и динамическую.

Статическая часть кешируется и отображается мгновенно.

Динамическая часть подгружаетсяв фоновом режиме и кешируется

НАГРУЗОЧНОЕ ТЕСТИРОВАНИЕ

После авершения все работ ы в обя ател но порядке проводи нагр о ное тестирование сайта и подбирае остинг выделенный сервер или кластерн систе способный

обеспе ит оговоренные пара етры быстродействия и отка о стой ивости.

АСИНХРОННЫЙ ОБМЕН ДАННЫМИ (AJAX)

Под од к построени интерактивны пол овател ски интер ейсов сайтов акл а ийся в оново об ене данны и бра ера с веб серверо .

ре л тате при обновлении данны веб страни а не пере агр ается полност и работа с сайто становится быстрее и добнее.

КЛАСТЕРИЗАЦИЯ ДЛЯ РАБОТЫ С ВЫСОКИМИ НАГРУЗКАМИ

астраивае кластерные систе ы реплика и данны и ранение едиаконтента на обла ны сервера для обеспе ения бесперебойной работы высоконагр енны проектов.

ина и еская аст подгр ается в оново ре и е и кешир ется.

Страни в сек ндре я генера ии

АИТИ24

Page 25: Infotex corpsite concept

АИТИ

ЗА БЕЗОПАСНОСТЬ НЕОБХОДИМО ПЛАТИТЬ , А ЗА ЕЕ ОТСУТСТВИЕ — РАСПЛАЧИВАТЬСЯ !

Уинстон ер илл

25

Page 26: Infotex corpsite concept

МЫ ЗАЩИТИМ ВАШ САЙТ ОТ ВЗЛОМА

Серти икат соответствия 200 С оссии

Мы проводи елый ко плекс те ни ески

и органи а ионны ер которые об единены

об ей кон еп ией бе опасности и по воля т

на ител но расширит понятие а и енности

и реак ии сайтов на во о ные гро ы. бла ный сканер бе опасности

Стоп лист

Проактивный ил тр

еб антивир с

рнал втор ений

а ита сессий

онтрол активности

е опасност кода

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

ег лярное ре ервное копирование

СЕРТИФИКАТЫ СООТВЕТСТВИЯ

а и енное веб прило ение

МОДУЛЬ «ПРОАКТИВНАЯ ЗАЩИТА»

НЕЗАВИСИМЫЙ АУДИТ БЕЗОПАСНОСТИ

АИТИ26

Page 27: Infotex corpsite concept

НАСТРОИМ СИСТЕМУ WEB-АНАЛИТИКИ

ели на сайте для и ерения вовле енности лоял ности и конверсии.

етки для отсле ивания ективности ка дого и каналов ко ника ий.

Много его е е. а т те отдел ная пре ента ия

АИТИАИТИ27

Page 28: Infotex corpsite concept

. .

215

16 5 5 60

.

А С А У С П

енерал ный директор

АИТИ

ПОЗВОНИТЕ НАМ , ДАВАЙТЕ ОБСУДИМ ВАШ ПРОЕКТ ДЕТАЛЬНО .