Советы для новичков в сфере ВЕБ-РАЗРАБОТКИ


Какими бывают сайты?


Способы раскрутки и оптимизации сайтов

   
Веб-дизайн | Создание сайтовГЛАВНАЯ
СОЗДАНИЕ САЙТА

 

Что для этого необходимо

Как заказать создание сайта
Художественный образ
Используемые технологии
Размещение в Интернете

Стоимость создания сайта

Срок исполнения

Тематика сайта

 

КАК СОЗДАЮТСЯ САЙТЫ

 

Какими бывают сайты

Корпоративный сайт
Авторский веб-дизайн
Последовательность работ

Анализ и оценка сайта
Оптимизация сайта

Оптимизация контента

 

ТЕХНОЛОГИИ ВЕБ-ДИЗАЙНА

 

Веб-дизайн. Браузеры

Экранное разрешение

Иллюстрирование сайта

Обновление сайта

Заработок в Интернете

Курсы веб-дизайна

Терминология веб-дизайна

Счётчики посещаемости сайта

Ликбез

Склейка доменов

Статьи

 

ОФИС



Композиция в веб-дизайне

Поговорим немного о композиции в изображении и веб-дизайне. Изображения в Интернете (в большинстве случаев создания сайтов) статичны, и большинство законов веб-дизайна и его технологий из изобразительного искусства прекрасно подходят (и даже обязательны). Например, передача скорости движения с помощью размывки. Но в Интернет есть анимация! Почему бы не дополнить ей классические способы передачи движения? Я сделал сам объект ярко выраженным смысловым центром, а анимацию «замаскировал», используя цвета, которые сливаются с окружающими, и «оживил» только ключевые элементы изображения, подчеркивающие (но не слишком сильно) движение и его направление, с учётом перспективы.

Технологии веб-дизайна: анимация

Но! Движение — само «бросается в глаза» (анимация является «ярковыраженным» смысловым центром). Если сделать контуры мелькающих полос чёрными, то они перетянут внимание на себя своей выразительностью. Важно не потерять статический смысловой центр в композиции.  Если создается страница веб-сайта, значит, должно быть меню для навигации по нему — ещё один центр внимания в композиции. Но как его сделать заметным и выразительным при таких мощных элементах композиции (яркий смысловой центр и анимация)?

Очень просто: есть направление движения и «летящий главный герой». Поставим меню у него на пути. Только аккуратно, благо нынешние технологии веб-дизайна это позволяют. Слишком большие буквы будут выглядеть «серьёзным препятствием» и вызывать чувство неудобства при просмотре. Текстовый блок с рамкой кажется расположенным на переднем плане и отстранённым от «сюжета» (изображение имеет пространственную перспективу, а текстовый блок не может её иметь). Я поставил кнопки меню на угол рамки, подвязав меню к рамке с текстовым блоком и убрав его с «дороги» на ближний план. Направление и линия движения остались и указывают на меню, но оно теперь не «валяется на дороге», вызывая беспокойство за «стремительного главного героя».

Технология веб-дизайна: разумный баланс

Анимированная линия разделительной полосы стала (сама собой, почти без моего участия) линией равновесия. Пора подумать о балансе! Так как это пространственная композиция, то текстовый блок с рамочкой живёт своей жизнью на переднем плане, да-да, есть веб-технология, позволяющая это сделать. Оставим его в покое. Чем перевесить такой вес ярко выраженного смыслового центра? Хорошее решение — это использовать существующую перспективу. Так и просится линия горизонта с удалённым ключевым элементом (небольшого размера) справа.

Он придаст чувство равновесия за счёт «расстояния» в перспективе (помните рычаг Архимеда?). Только не слово о солнце, хотя оно так и «напрашивается»! Его мощный блик на капоте и тень от машины говорят очень точно о его расположении (довольно частая ошибка — не понимание освещения, сколько поддельных фотографий было из-за неё разоблачено!). Да, красивая идея композиции с линией горизонта, но, увы... Эту идею придётся оставить, ну нет технологии веб-дизайна, позволяющей это сделать. 

Нужно место для названия — у веб-страницы должен быть «хозяин» (в данном случае название веб-студии). Создать оформленное название в виде веб-графики, с подбором шрифта, градиента по  современным технологиям веб-дизайна — это добавить сайту лишнего веса. Веб- графика требует жертв, а нам жертв не нужно. Я набираю название обычным текстом большого размера и единственным возможным цветом в этой композиции. Но Интернет поворачивается ко мне задом... Я не могу использовать всё разнообразие шрифтов в композиции и должен использовать только общепринятые системные шрифты, продиктованные мне веб-технологией. Поигрался с таблицей стилей и успокоился... Хотя, с равновесием можно засесть на неделю, как аптекарь со своими весами.

Веб-дизайн | Композиция в оздании сайтов

Вроде, всё неплохо... А где же сюжетный контраст — кульминация фильма? То, что делает его выразительным и увлекательным? А вот теперь — Интернет ко мне передом! Я могу привлечь пользователя в сюжет, благодаря определённой технологии веб-дизайна,  и он сам будет вызывать события, двигая мышкой по кнопкам меню. Как всё хорошо — надпись, интрига, действие... Ух — лихо закручен сюжет. Но... Что может быть сюжетным контрастом для движущегося автомобиля? Кирпичная стена? Ну, это избито (в прямом и переносном смысле)... О, нашёл! Рисунок на бумаге..., технический эскиз этой машины. Стилистика технического рисунка выражает полную статичность. Хорошо уметь рисовать, правда?

Психология... Пройдёмся по ассоциативному ряду в композиции в веб-дизайне. Это, вообще-то, секретные данные и только для внутреннего пользования, но вы же никому не расскажете, да? Ассоциативный ряд здесь очень короткий, а технология веб-дизайна проста и интуитивно понятна. Сама необычность идеи хорошо запоминается (особенно в сочетании с данной статьёй:) и главная моя задача — заставить вас запомнить создателя («6 FLOOR»). Там большими красными буквами написано и ни каких отвлекающих надписей. Это пассивная информация. Теперь, если пользователь захотел продолжения сюжета и обратился к меню, нужно «правильно» подать активную (а значит — более яркую) информацию. Обратите внимание на появляющийся элемент кнопки «услуги» — он большой, его много; а «цены» — маленькие! Поводите мышкой туда, сюда и всё быстро «поймёте». Прикладная психология основанная на определённой технологии веб-дизайна... Кстати, если быть до конца искренним, то это соответствует действительности.

Теперь продолжим наши игры с веб-технологиями и  создание сайта, немного поиграемся со скриптом, усложним «сюжетную линию» активными слоями (посложнее... мы же не первый год в веб-дизайне...) и подшлифуем сервис — отсечение лентяев с 3-ми версиями браузеров, загрузочный слой, чистка кода, тестирование и т. п. Вылизывать можно долго, но это же всего лишь эскиз...

Посмотрим, что же получилось? Да, неплохо... Но уже надоело... Вот в следующей работе я развернусь и такое придумаю...! А может, эта работа будет уже для вас?

P. S.

Я старался не сильно углубляться в термины и названия, но если вам что-то не понятно, то:

если вы обычный пользователь — не обращайте внимания.
если вы потенциальный заказчик — оцените количество возможностей.
если вы веб-дизайнер и, что-то не поняли — то вы не дизайнер. Вам нужно или учиться, или расслабиться.
solus. ru


Теги:

Технологии веб-дизайна,  создание сайтов,  композиция в веб-дизайне


 


 

Веб-дизайн | Создание сайтов На главную

 


«Интернет без ошибок». МСД ©

 ВСЕ ПРАВА ЗАЩИЩЕНЫ


Веб-дизайн | Создание сайтовКачество сайта | Создание сайта