More Related Content
Viewers also liked (20)
Similar to Микаел Арутюнян Mobile First. Современный интернет-магазин: универсальный, быстрый, эффективный, мобильный! (20)
More from elenae00 (20)
Микаел Арутюнян Mobile First. Современный интернет-магазин: универсальный, быстрый, эффективный, мобильный!
- 1. ! ! ! ! ! ! ! ! ! ! ! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! г. Москва, Варшавское ш. 42 +7 495 640 44 84 info@pirogov.ru www.pirogov.ru ! !
- 2. Четыре вектора разработки интернет-магазина Максимально эффектная передача образов Визуальная подача контента Современные технологии и инновации Коммуникации и релевантность информации Анимация Графика 3D! Юзабилити Дружественный интерфейс Типографика HTML5 Новые технологии Адаптивного дизайна RESS (Responsive Design + Server Side Components), анимация, эффекты навигации.) On-line сервисы Правильное структурирование информации Информационная насыщенность без переизбытка информации
- 3. Отказ! от! технологий! flash! позволяет! сделать! сайт! любой! сложности! (с! использованием! любой! анимации),! не! утяжеляя!при!этом!сайт.!! ! Технология! RESS! позволит! сайту! отображаться! корректно! и! без! потери! информации! в! любом! существующем!браузере.!Не!важно,!смотрите!ли!вы! сайт! в! браузере! Internet! Explorer,! Mozilla! или! Safari,! пользователь! будет! видеть! сайт! именно! таким,! каким!его!задумали!Вы.!!! ! Мы являемся одними из общепризнанных лидеров в области юзабилити экспертизы и создания «продающих» сайтов с высокой конверсией.
- 4. Преимущества Responsive Web Design Responsive Web Design. - сохранность содержимого: сайт сохраняет контент и HTML разметку, независимо от используемого устройства; - один URL для веб-страниц: это облегчает процесс использования контента и избавляет от дополнительной нагрузки на сайт; Responsive Web Design и Server Side Components (RESS). Этот метод создания мобильных сайтов использует программирования на стороне сервера. То есть мобильные пользователи получают один набор кода, в то время как пользователям десктопных компьютеров выводится другой набор кода. Это сделано с целью повысить эффективность сайта и лучше всего работает в связке с адаптивной версткой. Такой метод был назван адаптивный веб-дизайн + ПО на стороне сервера (RESS). Существенным преимуществом перед мобильной версией, является то, что поисковые роботы будут посещать как настольные и мобильные версии. Плюсы: - легче ориентироваться пользователю в контенте; - меньше элементов на странице -!быстрое время загрузки
- 5. Концепт первого в России рейтинга адаптивных сайтов
- 7. ! ! !
- 8. Техническое решение и инновации ! ! http://www.hottabych.ru/ ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Полномасштабный сайт для федеральной сети магазинов товаров для дома "Старик Хоттабыч". Сайт включает в себя обширный каталог товаров для дома и авторских дизайн-проектов интерьеров. Сайт выполнен в «чистой», «функциональной» технике, лишен чрезмерного декорирования. Дизайн сайта отсылает к так называемому стилю Metro, который отличается минимализмом и предельной лаконичностью элементов вкупе с цветовым акцентированием и четким разделением блоков.
- 10. ! http://www.saiwala.ru/! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Сайт выполнен по новой технологии RESS, которая объединяет в себе адаптивную верстку (Responsive Web Design) и использование ресурсов серверной части (Server Side Components). Если коротко, эта технология позволяет выполнять часть задач при работе с адаптивным сайтом за счет ресурсов серверной части. При первоначальной загрузке сайта загружается только один шаблон, соответствующий устройству доступа. Соответственно и количество загружаемых обслуживающих его скриптов сокращается в разы.
- 11. ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Вид главной страницы на экране планшета Вид главного меню на экране смартфона Каталог на экране монитора Каталог на экране планшетаКаталог на экране смартфона
- 12. Инфографика В последнее время мы провели исследования и узнали что люди все меньше и меньше читают тексты! Это очень важно понимать и предвидеть, поэтому мы переходим в своих сайтах от длинных текстов к привлекательным картинкам и инфографике (объемные тексты убираются «на следующий клик»). Мы предлагаем некоторые страницы на Вашем сайте реализовать с помощью красивой инфографики, использовать разный по размерам шрифт - это будет действительно уникальный, эффективный и эффектный х
- 13. Главная страница Особое внимание при создании проекта такого уровня будет уделяться Главной странице, мы прекрасно понимаем, что второго шанса произвести первое впечатление не бывает. На главной странице будут имиджевые фото, блок-слайдер, тизеры/баннеры. Продуманность точек входа и путей целевой аудитории. Задача Главной страницы вызвать доверие к бренду и уверенность в правильном выборе. Дизайн Дизайн проекта должен быть функциональным и выполнен в соответствии с брендбуком. В дизайне должны быть использованы оригинальные идеи и находки. Мы предлагаем разработать дизайн ориентируясь на потребителей различных типов и уровня подготовки. Разработать интерфейс с учетом пользовательских сценариев и поведенческих мотивов целевой аудитории. Дизайн-макеты страниц выполняются по сетке и вымеряются с точностью до пикселя. Визуальная подача информации через фото и видео. Акценты на визуал Пользователи интернета, в подавляющем большинстве, крайне не любят читать тексты, это важно понимать и предвидеть, поэтому на ключевых страницах мы будем использовать однозначно понятные и привычные визуальные объекты и инфографику. Анимация и навигация Мы видим на Вашем сайте элементы анимации, часть навигации (там где это уместно) будет происходить без перезагрузки страниц. Ключевые страницы Все ключевые страницы тщательно прорабатываются еще на этапе составления ТЗ и разработке прототипов (юзабилити) и финализируются на этапе дизайна. Отсутствие визуального шума (мусора) Самый важный и «дорогой» ресурс посетителя сайта – это визуальный канал восприятия. Его нельзя перегружать «визуальным шумом» и вместе с тем, пользователь должен получить необходимую ему информацию (фото, графические элементы, пункты меню, текст) для принятия решения о продолжении коммуникаций. Шрифты, типографика, контент Мы тщательно подберем шрифты, чтобы они максимально соответствовали немецкому сайту STADA (при отсутствии русского аналога). Мы не будем использовать стандартные шрифты браузеров, Ваши шрифты, как по типу и стилю, так и по размерам, будут тщательно подобраны среди лучших европейских шрифтов. Компоновка контента и текста на страницах будет выполнена по полиграфическим требованиям и стандартам качества. Тестирование После сборки и наполнения сайта, наши специалисты проведут тестирование его работы. Методы тестирования: Ручное тестирование, Автоматическое тестирование. Виды тестирования: Кросбраузерность, Валидность верстки, Вес страниц, Скорость загрузки страниц, Время обработки запросов к базе Корректность навигации, Наличие битых ссылок, Соответствие работы функциональных модулей и форм, Проверка обработки ошибки 404 (страница не найдена), Корректность отображения контента. Используемые технологии и масштабирование Уникальность функционала, логичность восприятия, понятность и удобство пользования сайтом за счет внедрения современных технологий html5-верстки и программирования. Мы предлагаем использование Адаптивного дизайна, а именно следующий эволюционный этап развития этой технологии: RESS (Responsive Design + Server Side Components). Уже на стадии проектирования мы закладываем возможность многократного расширения функционала, который можно будет подключать (масштабировать) в процессе эксплуатации сайта.
- 15. Пример посадочной страницы Tele2
- 18. О нас «Бюро Пирогова» — это digital-агентство полного цикла, которое разрабатывает технологичные интернет-решения и оказывает комплексные услуги по рекламному сопровождению брендов. Основа нашего позиционирования — внедрение новых технологий и инструментов, которые пока не вышли в массовое производство. Сегодня мы активно используем в своих проектах то, что через несколько лет станет стандартом в разработке. Мы отличаемся фундаментальным подходом к работе, основанным на построении эффективных бизнес-процессов и жестком контроле качества исходящих веб-продуктов. При реализации проектов мы отдаем приоритет созданию высокой конверсии готового Интернет-решения, а не поверхностным понятиям «креатив» и «дизайн». Наши продукты решают реальные бизнес- задачи клиента, а не просто являются карточкой компании в Интернете. Большое преимущество нашей компании в том, что мы обладаем собственным production-отделом, который работает в тесной связи с менеджером проекта. Это позволяет оперативно учитывать пожелания клиента и достигать именно того результата, который нужен. Факты Бюро Пирогова» - один из самых известных брендов на российском рынке веб-разработок, входит в TOP-10 лучших дизайн-студий и ТОП-20 digital-агентств России. o Создано более 250 проектов. o Работы неоднократно отмечены наградами профессиональных конкурсов, многократные призеры авторитетной премии «Золотой Сайт». o В составе жюри различных конкурсов веб-дизайна и программирования. o Регулярные публикации (статьи и экспертные оценки) в ведущих профессиональных изданиях. o Входит в число ведущих участников Ассоциации Интерактивных Агентств (АИА) www.i-association.ru и Российской Ассоциации Электронных коммуникаций (РАЭК) www.raec.ru o Является «Золотым сертифицированным партнером» компании «1С- Битрикс» и партнером ведущих производителей систем управления сайтом. o Оказывает поддержку талантливой молодежи, являясь, совместно с AdobeSystems, соорганизатором Международного конкурса веб- дизайнеров «LevelUp!» www.levelupdesign.ru.
- 19. Наши клиенты Мы обладаем огромным опытом работы с крупнейшими российскими компаниями, для которых реализованы разноплановые проекты, от сложных корпоративных порталов с интеграцией внутренних информационных систем, до имиджевых презентационных промо-сайтов. ! ! !
- 20. г. Москва, Варшавское ш. 42 www.pirogov.ru +7 495 640 44 84 info@pirogov.ru ! ! ! ! ! ! !