Альтернативный web дизайн

| Категория реферата: Рефераты по культуре и искусству
| Теги реферата: лечение реферат, шпори для студентів
| Добавил(а) на сайт: Cukanov.

Одна черная корова среди стада рыжих, большое объявление на полосе газеты среди маленьких, цветное изображение среди черно-белых и наоборот. Один и тот же щит наружной рекламы зимой и летом воспринимается по-разному за счет окружения.
[pic] [pic] [pic]
Как это положительно можно использовать на практике? Выделяйте то, что вам кажется главным.
УГОЛ ЗРЕНИЯ
[pic]
Глаз обладает определенным углом зрения, что обеспечивает поле благоприятного восприятия. Максимальный угол восприятия глаза 57 градусов, оптимальный - 35-40 градусов. Эти данные позволяют вычислять наиболее благоприятные размеры рекламы на различных расстояниях. Если экран находится на расстоянии в среднем 35-40 см от глаз, то оптимальный размер изображения составляет 15 - 18 см по высоте и 10-14см по ширине (учтены особенности бинокулярного зрения). Надеюсь, вы не восприняли это как совет делать ВСЕ картинки такого размера.

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

[pic]Взаимодействие

Элементы композиции находятся (должны находиться) во взаимосвязи между собой и с форматом произведения. Эта взаимосвязь определяется прежде всего идеей на уровне композиционой схемы, пластическим мотивом на уровне приемов и принципов композиции, эмоциональным фоном на уровне использования тона и цвета. Например, произведение, выражающее покой и умиротворение, не должно содержать композиционных групп с элементами хаоса или синкопированного ритма (не является жестким правилом), а выражающее стремление к покою - уже есть движение от группы хаоса к группе порядка через определенные принципы.
В первом случае обычно применяется симметричное построение композиции без выраженного движения, во втором - отступление от этой симметрии. На уровне движения он определяет развитие и следование пластического мотива через пятно, ритм или силуэт (оформленный линией или тем же пятном, группой пятен).
Цвет и тон являются в этом случае элементами, способствующими раскрытию замысла (наравне с основными принципами, потому как равноправны с ними).
При применении нескольких принципов преобладает наиболее выраженный
(акцентированный по сравнению с другими).
[pic] [pic] [pic]
В приведенных примерах ни одна из картинок не явялется примером композиции абсолютного покоя, хотя первый вариант очень близок по решению. Чем же он нас не устраивает? Некое условное "повисание" элементов над несуществующей, но автоматически воображаемой плоскостью...

Во втором примере нас не устроит "неустойчивость" почти по тем же причинам, что и в первой...
В третьей картинке вы можете провести линию симметрии достаточно четко, но ни она, ни элементы никак не соответствуют состоянию покоя, а скорее вялого, "анемичного" движения... направление движения тоже фактически не угадывается, вернее, их одновременно несколько, и только ось симметрии каким-то образом преобладает над другими направлениями.
[pic]Что такое стиль?
Это система визуальных элементов, призванная обеспечить цельность восприятия данной странички или всего сайта. Исходя из разработанной вами концепции и контента (текстового материала, готовых иллюстраций и рисунков), вы выбираете шрифты, цвет фона, способ обработки картинок, коллажей, иконок и пр. элементов. Ну а затем просто стараетесь придерживаться выбранной вами манеры исполнения элементов по ходу создания и развития сайта.
Стиль призван обеспечить хотя бы минимальную уникальность вашего сайта. Вы можете использовать распространенный набор цветов, шрифтов, стандартные приемы оформления... Но что-то свое, особенное в нем должно маленько быть.
Иначе среди нескольких миллионов страничек вашу могут и не заметить.

[pic]Основные элементы стиля сайта

Логотип

Модульная

Шрифты

Цвета

Иллюстративный ряд (приемы обработки изображений)

На данный момент можно определить как типы -
"текстовый" дизайн - определяется содержанием и концепцией автора.
"Текстовый" не означает простой или примитивный. На первом уровне это означает почти полное отсутствие изображений как таковых, что значительно ускоряет загрузку страницы. А навигационные и декоративные элементы выполняются теми же "символьными" приемами. Нужно сказать, что HTML как таковой значительно расширил возможности при разверстке страниц этого типа, и теперь при помощи кода можно делать и тени, и даже изображения (хотя иображение кодом зачастую больше по "живому весу", чем аналогичное в GIFе или JPGе)... При таких разверстках следует хорошо знать классические верстальные приемы, особенности используемых шрифтов.
"полиграфический" дизайн - тот вариант, когда веб-страничка изо всех своих сил стремится имитировать печатное издание (особенно буклетные типы). Такой дизайн распространен на корпоративных сайтах, сайтах с рекламным уклоном, там, где особо необходимо образно-эмоциональное наполнение основного содержания. Ставка делается на классические дизайнерские приемы по принципу
- общий дизайн, а потом нарезать и собрать... Как правило, основное впечатление пользователь получает за счет пиксельной графики.
"интерфейсный" дизайн - сейчас его еще кличут usability... Стиль, призванный максимально облегчить жизнь пользователю во всех ее проявлениях, от загрузки странички (минимизирование кода и предельная оптимизация изображений) до особого, доведенного до религиозного поклонения тщательного исполнения каждого элемента. Как пример - сайт студии "Лакмус". Досконально продуманная (как правило) навигация, изначально понятность пользования общей схемой сайта - такой подход к веб-дизайну вызывает только глубокое почтение и уважение. И даже если с точки зрения изобразительной эстетики на таком сайте окажется не все гладко, то с лихвой окупится остальными достоинствами.
"динамический" дизайн - в примитивном варианте бегающие по экрану, или просто шевелящиеся изображения (в основном - флеш, но сюда же можно отнести и DHTML, и какие-то штучки на Javaи даже анимационный GIF). В хорошо продуманном сценарии это может быть целое произведение искусства, последовательно разорачивающее перед зрителем мысль автора или какой-то художественный образ. Интерфейсы на флешах часто поражают наше воображение в самом хорошем смысле этого слова.
"смешанные" типы - суть понятна и так. Обычно комбинация всех этих типов.

[pic]Цветовые ассоциативные и эмоциональные модели
Цвет это эмоции и настроение. Вы можете взбодрить зрителя, навеять на него осеннее или весеннее настроение, или наоборот, вогнать в смертную тоску.

Светло-серый цвет у нас называется серебряным, темно-серый с оттенками -
«мокрый асфальт», грязно-белый - «белая ночь». «Коррида» - и мы сразу представляем алый, но особого оттенка. В ход идут названия напитков -
«кофейный», «шоколадный», «молочный». Не брезгуем и названиями фруктов -
«оливковый», «вишневый». Идет в ход все, с чем можно сравнить необычный оттенок. Ну и примеры.
«Престижные», золото, серебро, темно-серый, черный. Их задача - передать солидность, уверенность, стабильность и высокую стоимость.
[pic]
«Пастельные», нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...
[pic]
«Здоровые», из американской психологии... Чистота, здоровье, уверенность, семья.... (соя, кукуруза :o)
[pic]
«Природные», близкие к естественным органическим, природным компонентам...
[pic]
Как вариант использования цвета - «Растяжки»... Обычно тональные оттенки одного цвета, и как акцент - более активный цвет.
[pic]
Есть и нестандартные цветосочетания: розовый с черным, желтый и зеленый и другие... в таких случаях, как показывает опыт, важна сама идея, а также конкретное ее воплощение. Я думаю, что при осуществлении своей идеи средствами цвета стоит довериться своим эмоциональным ощущениям. Но если пять ваших сайтов вподряд имеют черный фон, то либо вам пофигу на творчество, либо у вас не все в порядке с головой.
[pic] [pic] [pic]
Если ваш сайт про цирк, то ясно, что приемы использования цвета в нем тоже должны быть "цирковыми", то есть яркие насыщенные, а то и открытые
(конкретные) цвета. Но если вдруг вам приспичило сделать страничку про ночной цирк, то и настроение должно быть соответствующим. Полезно посмотреть, как подобные темы решают другие художники (и не только Артемий
Лебедев :o). Я имею в виду и живописцев, и графиков.
[pic]Работа со шрифтами
Во-первых, шрифтовая композиция (с точки зрения художника-шрифтовика, каллиграфа) есть способ самовыражения, выливающийся в самостоятельную творческую форму, композицию, очень часто лист, способный украсить любой офис или кабинет. И такие примеры нам известны с давних времен. Такая композиция должна максимально полно показать особенности шрифта, его тонкости, суть...
[pic]
Иногда это просто алфавит, иногда осмысленная фраза или даже текстовый блок, передающий настроение при помощи как самого шрифта, так и композиции, в которой выражена эта самая мысль.
[pic] [pic]

[pic] [pic]

Но мы можем, например, любоваться чистотой линий в букве «А» какого-либо понравившегося нам шрифта. Если хотите - можете попробовать...
[pic]
Через пять минут вы поймете, что разглядываете не только сам символ, или его контуры, изгибы, но и окружающее его пространство. Через пару месяцев таких упражнений вы ощутите в себе новые качества, позволяющие вам определять выбор шрифта не механически или логически, а по несколько иному принципу (я не буду пытаться описать этот принцип, ибо тут можно наплести такое, что и самому потом вовек не разобраться... Скажем - это вполне тема для диссертации по психологии восприятия). На нормальном языке - это воспитание глаза (и мозга, ессс-но), его обучение различным формам и их особенностям.
Не секрет, что основная масса читателей в наборном блоке вряд ли отличает
«таймс» от «гарамонда», мысленно абстрагируя их до уровня антикв, и только на более-менее крупных заголовочных кеглях способны обращать внимание на разницу. Мягко скажем, они просто не озадачиваются таким вопросом. Протест или возмущение возникает или при очень уж мелком кегле (который в очках прочитать нельзя, а без очков вообще не видно), либо при излишней плотности знаков, когда строка превращается в жирную линию, а текстовый блок - в полосатый матрасик.
Особенностью работы со шрифтом является его знаковость, то есть любой символ можно видоизменять до тех пор, пока он продолжает идетифицироваться со своей графемой, истинным начертанием.
[pic]
Именно это мы наблюдаем в индивидуальных почерках, когда каждый пишет как ему вздумается, но за какой-то гранью почерк становится трудночитаемым, похожим на абракадабру, понятную только автору (впрочем, и это не всегда).
[pic]
И как только знак перестает опознаваться - он перестает выполнять свою прямую роль, теряет свой смысл, превращаясь в абстрактное изображение.
Помимо специальных шрифтовых композиций существуют и функциональные... Это реклама, книги, плакаты, телевидение - по большому счету все, на чем можно что-то написать вообще. За десять лет свободного рынка в России возник огромный интерес к шрифтам как к средству исполнения композиций. Но отсутствие интереса фирм к эксклюзивным шрифтам вследствие сравнительной
«дороговизны» шрифтовых спецразработок превращает все виды носителей в однообразную шрифтовую кашу с настолько намозолившими глаза шритами типа
«АдверГотик», что читатель уже не может опознать по шрифту фирму, а прочитанный слоган тотчас подменяется в мозгу следующим безликим. И в итоге
- фирмы не получают реально возможного, потребители вместо информации имеют сплошную головную боль.
Еще один пример творческого использования шрифта - акцидентация. По сути это - выделенный текст. Он может быть заголовком, девизом, лозунгом...
Иногда для выражения мысли достаточно использовать bold и более крупный кегль. Но часто подобные акценты выполняются индивидуальным образом, нацеливаясь только лишь на суть темы... Задача - помочь полнее выразить основную мысль, помогая при этом художественными средствами. Если вам удастся таким образом придать индивидуальность тексту - его выразительность от этого значительно возрастает. Лишь бы оказалось к месту... и в меру...
[pic] [pic]
При этом часто такие вещи заказываются для индивидуального исполнения мастеру - каллиграфу, ибо компьютерный шрифт, даже самый подходящий, несет в себе повторяемость символов, некий сознательный стандарт... Живая рука художника всегда внесет какое-то разнообразие (не надо путать с обратным вариантом, когда художник не справляется с правильным начертанием шрифта, требующего четкости и правильного исполнения символов). И дело вовсе не в компьютере... Многие графические пакеты уже содержат в себе необходимый набор средств работы со шрифтом.

[pic]Вот теперь можно вернутся к KALIBER 10000 (www.k10k.net)
[pic]
Этот сайт можно отнести полиграфическому и динамическому дизайну. Сайт разбит на 3 основных колонки , а колнки на более мелкие блоки что придаёт ему вид газеты. И главное виден свой стиль и унекальность сайта. Собственно с этого сайта и начелся альтернативный дизайн. Сразу появилось множество клонов и просто пахожих по стилю сайтов.
Безупречно подобранные цвета
[pic]
Большое кол-во анимационных Gif(ов) придаёт динамику.
[pic]
Очень качественно сделанная графика, всё миниатюрное, объёмное и окуратное.
[pic]
Меню состоит из квадратных иконок при нажатии деформирующиеся в круглые.
Что есть интересное решение.
[pic]
Очень профессионально написан HTML код и Java Scripts. Один из немногих разов когда я не могу разобратся в исходных текстах:-)
К сожалению сам дизайн сайта не практичный

1. Не понятно куда человек попадает, нет загаловка.

2. Не понятна цель сайта.

3. Очень мелкий шрифт, не читабельность.

4. Большое кол-во графики, что ведёт к долгой загрузке сайта.

5. Сайт разбит на фрейми, большой минус при индексации в поисковых системах.

[pic]
[pic]KiokenDesign

http://www.kioken.com/
[pic]
[pic]
Сайт Японской дизайн студии Кioken Incorporated очень популярной в
Америке. И является одной из самых дорогих студий. Её услугами пользуются крупные фирмы, Rep и Pop звёзды. Jennifer Lopez, Slim Shady, Sony,
Universal Records, Canon USA и многие другие.
Интерфейсный дизайн сайта, изыскано прост и понятен любому зашедшиму сюда сразу понятно куда идти и что делоть.
В оформлении сайта используются серые тона. Что придоёт сайту определённую стильность.
[pic]
За счёт полосатого фона чувствуется законченность, и как бы сглаживаются пустоты на странице
[pic]
Нестандартно расположено меню как бы ломаной линией и полосы фона ещё больше усугубляет этот эффект.
[pic]
Минус наверно только один, то что сайт хорошо смотрится только при разрешении 800x600, технологии ростут чем больше мониторы тем больше разрешение экрана. Через 2-3 года многие сайты придётся просто переделовать.

[pic]