Санкт-Петербургский Государственный университет телекоммуникаций

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы Сайт компании «Yves Rocher» был сделан в 1996 году. Множество недочетов ресурса, типичны для того времени. Большое количество мелких элементов, мелкий текст, множество картинок, а так же меню исполненное в виде картинок. Модульная сетка сайта соблюдается небрежно. И один из важнейших факторов – время загрузки страницы, так же страдает на этом ресурсе. Все это в совокупности создает крайне негативное восприятие ресурса. Сайт компании «Рив Гош» был создан в 2001 году и скорее всего был обновлен. Данный сайт создает гораздо более положительное впечатление. Элементы сайта крупные, четкие. Цвета корректно акцентируют внимание посетителя. Модульная сетка выдержана. Скорость загрузки страниц соответствует текущему развитию интернет технологий и не вызывает дискомфорт.