Практическая работа №6 «Анализ визуальных решений в веб-дизайне»

Практическая работа №6 «Анализ визуальных решений в веб-дизайне» Лившиц Дмитрий ИСТ-81 Санкт-Петербург 2012 год Санкт-Петербургский Государственный университет телекоммуникаций им. Проф. М.А. Бонч-Бруевича

Оглавление Сведения о выбранных ресурсах Основные характеристики визуального решения Модульная сетка сайта «Yves Rocher» Модульная сетка сайта «Рив Гош» Прототипы сайта «Yves Rocher» Прототипы сайта «Рив Гош»

Сведения о выбранных ресурсах В качестве зарубежного ресурса мною был выбран сайт французской косметической компании Yves Rocher (Ив Роше). Данный ресурс представляет собой интернет магазин компании для американских пользователей продукции данной сети магазинов. Рассматриваемый, мною сайт содержит информацию, как о самой компании, так и производимой данной компанией продукции, включая каталог для заказа. Ресурс зарегистрирован на компанию «Yves Rocher» URL: http://shop.rivegauche.ru/ - сайт компании «Рив Гош» В качестве отечественного ресурса мною был выбран сайт парфюмерно-косметической сети «Рив Гош» (Rive Gauche). Данный ресурс представляет собой интернет магазин компании для российских пользователей продукции данной сети магазинов. Рассматриваемый, мною сайт содержит информацию, как о самой компании, так и производимой данной компанией продукции, включая каталог для заказа. Ресурс принадлежит организации ""AromaLuxe" Co LTD" URL: http://www.yvesrocherusa.com/ - сайт компании «Yves Rocher»

Основные характеристики визуального решения и

Основные характеристики визуального решения Количество шаблонов ресурса 3 шаблона – шаблон главной страницы, шаблон информационной страницы верхнего меню сайта и шаблон каталога. Тип дизайна 3 шаблона – шаблон главной страницы, шаблон информационной страницы верхнего меню сайта и шаблон каталога. 1 2 Дизайн фиксированный, центрированный, без фрэймов. Дизайн фиксированный, центрированный, без фрэймов.

Логотип Расположен в верхнем левом углу. Есть ссылка на главную страницу. Ориентация дизайна Расположен в верхнем левом углу. Есть ссылка на главную страницу. 3 4 Характерно большое кол-во картинок и большое кол-во текста. Сайт можно охарактеризовать, как статичный. Характерно большое кол-во картинок и умеренное кол-во текста. Сайт можно охарактеризовать, как статичный, за исключением главной страницы. Основные характеристики визуального решения

Шрифтовые гарнитуры Сайт предусматривает использование одного из след. шрифтов: Tahoma, Verdana, Arial. Размер основного шрифта “Arial”: 11 px. Стиль выделения ссылок Сайт предусматривает использование одного из след. шрифтов: Verdana, Arial, Helvetica, Sans-Serif. Размер основного шрифта “Verdana”: 12 px. 5 6 В главном меню – выделение цветом при наведение мышкой. Ссылки в тексте выделены полужирным текстом с подчеркиванием. В верхнем меню ссылки выделены полужирным шрифтом, меняющим цвет при наведении. В боковом меню при наведение ссылки подсвечиваются темным фоном. В тексте при наведении у ссылок пропадает нижнее подчеркивание Основные характеристики визуального решения

Цветовое решение На сайте использовано 3 основных цвета: Скорость загрузки основных страниц На сайте использовано 3 основных цвета: 7 8 Главная: 4 сек Информационная: 3,1 Каталог: 4,1 Информация о продукте: 3,5 Главная: 1,1 сек Информационная: 0,6 сек Каталог: 1,1 Информация о продукте: 0,8 и 4 дополнительных, взятых из логотипа компании: Основные характеристики визуального решения

Личная оценка Недостатки: Данный сайт содержит чрезмерно большой объем текста, периодически перемешанного с очень большим числом картинок. Элементы сайта или собраны в мелкие группы, или имеют неадекватно большие пробелы. Шрифт маленький, это создает трудности восприятия. Достоинства: Использованы пастельная, нейтральная цветовая гамма. Недостатки: Неудачное использование фоновой картинки и фонового цвета. Редкие большие куски текста. Достоинства: Элементы сайта четко выделены. Кол-во элементов на одном экране соответствует правилу 7+-2. Цветовая гамма достаточно агрессивная, но запоминающаяся. Быстрая скорость загрузки страниц. Четкое выделение панелей навигации. Крупный, удачный шрифт 9 Основные характеристики визуального решения

Модульная сетка сайта «Yves Rocher»

Модульная сетка – главная страница Модульная сетка ширина сайта: 981 + 15*2 = 1011 px ширина сетки: 981 px количество колонок: 10 шт ширина колонки: 90 px расстояние между колонками: 9 px Исходный снимок

Модульная сетка – страница каталога Модульная сетка ширина сайта: 981 + 15*2 = 1011 px ширина сетки: 981 px количество колонок: 10 шт ширина колонки: 90 px расстояние между колонками: 9 px Исходный снимок

Модульная сетка – страница описания и заказа товара Модульная сетка ширина сайта: 981 + 15*2 = 1011 px ширина сетки: 981 px количество колонок: 10 шт ширина колонки: 90 px расстояние между колонками: 9 px Исходный снимок

Модульная сетка сайта «Рив Гош»

Модульная сетка – главная страница Модульная сетка ширина сайта: 939 + 20*2 = 979 px ширина сетки: 939 px количество колонок: 4 шт ширина колонки: 228 px расстояние между колонками: 9 px Исходный снимок

Модульная сетка – страницы каталога Модульная сетка ширина сайта: 939 + 20*2 = 979 px ширина сетки: 939 px количество колонок: 4 шт ширина колонки: 228 px расстояние между колонками: 9 px Исходный снимок

Модульная сетка – страницы товара Модульная сетка ширина сайта: 939 + 20*2 = 979 px ширина сетки: 939 px количество колонок: 4 шт ширина колонки: 228 px расстояние между колонками: 9 px Исходный снимок

Прототипы сайта «Yves Rocher»

Прототипы – главная страница Прототип Исходный снимок Картинка Панель со ссылками Основное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Мини навигация Инф. закладки

Прототипы – страница каталога Прототип Исходный снимок Картинка Панель со ссылками Основное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Мини навигация Инф. закладки

Прототипы – страница товара Прототип Исходный снимок Картинка Панель со ссылками Основное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Мини навигация Инф. закладки

Прототипы сайта «Рив Гош»

Прототипы– главная страница Прототип Исходный снимок Картинка Панель со ссылками Информационное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Слайд шоу

Прототипы– страница каталога Прототип Исходный снимок Картинка Панель со ссылками Информационное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Слайд шоу

Прототипы– страница описания и заказа товара Прототип Исходный снимок Картинка Панель со ссылками Информационное меню Меню каталога Кнопки/ссылки Панель/заголовок Элементы ввода Слайд шоу