WEB-Дизайн

Основы WEB-дизайнаИнформационная архитектураВизуальная концепция сайтаПроектирование эффективных WEB-страницНаписание текстов для интернетаРазработка навигацииПринципы гипертекстовой разметки Структура WEB-документовБазовые теги HTMLТеги тела WEB - документаТеги списковГипертекстовые ссылкиСтруктура ссылок в HTML-документеДобавление стилейТаблицы в HTMLФормы в HTMLЗадание по таблицам и формамЭкзаменационные заданияПримеры решения заданий по WEB-дизайнуИнструменты для построения сайтовLorem ipsumЗаказать сайт

Предметы

WEB-ДизайнМетрология и СтандартизацияSEO оптимизацияМаркетингМаркетинговые исследованияТеория организацииОрганизация маркетинговой деятельности на предприяУправление проектамиУправленческие решенияИнформатикаИнформационные системы и Базы данныхТелекоммуникационные и компьютерные технологии в СИнтернет-маркетингМенеджментИстория МенеджментаПерсональный менеджментИнформационный менеджментМеждународный маркетингМировые Информационные РесурсыПланирование карьерыE-learn

Получите в подарок бесплатный видеокурс по созданию сайта своими руками

 

getsuprize.fw

 

Начни зарабатывать деньги в Интернете!!!

Подпишись на бесплатный курс

Ваш e-mail: *
Ваше имя: *
Подписчиков:

Визуальная концепция сайта

Получите в подарок бесплатный курс по планированию коммерческого сайта

 

getsuprize.fw

 

Разработка визуальной метафоры

Понятие визуальной метафоры не так-то просто объяснить на словах, но при корректном использовании она легко интерпретируется на уровне подсознания. Эта метафора универсально применяется ко всему проекту и усиливает действие хорошо знакомых вам визуальных элементов (изображений, элементов интерфейса, значков, цветовой схемы или шрифтов), подчеркивая тематику сайта. Соответственно, для сайта, рекламирующего новый голливудский фильм, потребуется совершенно иная визуальная метафора, нежели для сайта фирмы, предоставляющей дизайнерские услуги.

Эффективная визуальная метафора требует серьезных раздумий и свободного воображения. Вы должны сесть и как следует подумать, какие цвета, шрифты, изображения, значки и расположение элементов интерфейса позволят подчеркнуть направленность вашего сайта.

Допустим, вы собираетесь создать онлайновое сообщество, ориентированное на детей в возрасте от 7 до 10 лет. Значит, имеет смысл подумать о жирных шрифтах, ярких цветах и мультипликационных элементах интерфейса. В то же самое время, визуальная метафора для сайта, посвященного фильму, должна четко ассоциироваться с этим фильмом и воспроизводить его атмосферу. Замечательным примером подобного подхода может послужить сайт фильма «Планета обезьян» (http://www.planetoftheapes.com).

К сожалению, четких и строгих правил создания визуальной метафоры просто не существует. Определенно можно посоветовать только одно - пользоваться ею умеренно. Всегда проверяйте ваши идеи на друзьях и знакомых, никак не связанных с выполняемым проектом. Часто таким способом можно получить предложения и идеи, которые никогда не пришли бы вам в голову. Не стоит слишком привязываться к однажды придуманной визуальной метафоре, ведь может оказаться, что под влиянием мнения со стороны вы решите, что она не подходит к вашему сайту.

Осмысление компоновки сайта и его дизайна с помощью раскадровок

Одним из наиболее важных шагов в подготовительной бумажной и мыслительной работе является создание раскадровок. Эта идея была позаимствована из киноиндустрии. В общем случае раскрадровки представляют собой последнюю стадию предварительной подготовки и позволяют полностью визуализировать дизайн будущего сайта. С их помощью вы получаете возможность увидеть, как взаимодействуют друг с другом выбранные вами цвета, как соотносятся друг с другом элементы интерфейса, как реализована система навигации, как выглядит визуальная метафора и насколько оптимально представлено содержимое сайта. Раскадровки дают способ выявить потенциальные проблемы с дизайном, которые могут стать помехой на стадии написания HTML-кода. Кроме того, они являются замечательным наглядным пособием для реализации различных дизайнерских проектов и поиска визуальных творческих идей.

rkd rcd1