каким-то образом преобладает над другими направлениями.
[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]
[pic]HSE7EN3
http://www.h73.com/
[pic]
Очень интересный дизайн, нет той стандартности вёрстки и оформления.
Чем то напоминает открытку тем самым относится к полиграфическому дизайну.
Стоящея на заднем плане фигура с переплетением линий в целом приобретает
абстрактные мягкие формы.
Но опять таже самая проблема KALIBER 10000 совершенно не понятно куда ты
попал, названия сайта HSE7EN3 не о чём не говорит ( хотя у «альтернативных»
дизайнеров названия типа ‘s404’, ‘off3nsiv3’ очень популярны), и только
после долгого ползанья по сайту, становится ясно что это
«connecting communities», тоесть «община дизайнеров».
Для общины дизайнеров сайт сделан со вкусом, а главное с идеей!
[pic]
Хорошо подобраны цвета, даже смело.
Получилась яркая, контрастная цветовая гамма.
[pic]
По поводу меню, названия разделов типа .05 APT277:SWF врятли будут понятны
кому либо :-)
Получается не сайт, а крассворд. И пока ты весь сайт не посмотришь, ты не
поймёшь куда пришёл.
Что является большим минусом для поситителей сайта.
[pic]
Кликаем на меню и что сразу бросается в глаза.
Это совершенно другой стиль (здесь показонны два Pop UP окна )
Обычно дизайнеры придерживаются одного стиля. Как бы привязывая одну
страницу к другой, даже разные по тематике. Но с задумкай дизайнера не
поспоришь.
[pic]Какой можно сделоть вывод?
Как показывает практика альтернативный дизайн не всегда применим к веб
сайтам, если надо показать сайт фирмы или информационный сайт например.
Люди хотят чтоб всё было просто и понятно.
Без особых изысков, без палёта фантазии. И с этим приходится мирится Веб
дизайнерам.
Но в любом случае альтернативный дизайн будет жить и развиваться, а
главное он будет востребован!!!
Чтобы поистине насладится альтернативным дизайном:
http://www.threeoh.com/
http://www.yigal-azrouel.com/
http://www.mtv2.co.uk/
http://cmart.design.ru/
http://www.yigal-azrouel.com/
http://www.gmunk.com/
http://www.submethod.com/
http://chapter3.net/imperium/
http://www.21network.com/
http://www.4k-london.com/
http://www.47jane.com/
http://www.52mm.com/
http://www.ad2.com/
http://www.madesign.com/
http://www.addison.co.uk/
http://www.adhoc.com/
http://www.agency.com/
http://www.akimbodesign.com/
http://www.albenfaris.com/
http://www.angrymonkey.co/
http://www.hitanvil.com/
http://www.apldigital.com/
http://www.atg.com/"
http://www.atomicvision.com/
Источники:
Виктор Вязьминов (MrDeSign)
Артёмий Лебедев
Дмитрий Кирсанов
PS.
Реферат по предмету История Дизайна.
Уневерситете Культыры и Искусств.
Санкт-Петербург
22 Май, 2001 года
Писал Лебедев Антон 110 гр
Факультет ФИТиМ
2000 Word обязательно!!!
