div.main {margin-left: 20pt; margin-right: 20pt}Свежие стили для вашего сайта Курт Клонингер (Curt
Cloninger)
ВведениеПроблема: Большинство сайтов США очень
схожи по внешнему виду и дизайну. Все это связано с
кровосмешением. Считается, если так делает microsoft.com,
значит это должно присутствовать на любом профессиональном
корпоративном сайте. Потому то все сайты и выглядят как сайт
Microsft (или Adobe, или Ebay, или …)
Решение: Хватит спасть со своей двоюродной сестрой.
Осмотритесь вокруг. Найдите там источник вдохновения. Добавьте
в свой репертуар несколько новых дизайнерских идей. Свежая
кровь, новая плоть - вот что нужно, чтобы разбавить ваши
дизайнерские гены.
Где НЕ СЛЕДУЕТ черпать новые дизайнерские
идеи: В печатных журналах.
Печатные журналы - давнишний источник идей для корпоративных
сайтов, так как большинство корпоративных сайтов было
разработано фирмами, ранее работавшими в издательском деле. Не
трогай эти идеи. Это твои тети, дружок, т.е. сестры твоей
мамы.
Где же поднабраться свежих дизайнерских
идей? Экспериментальные домашние
страницы и сайты фирм, никогда не работавших в
издательском деле. Для них Web - не новая информационная
среда, для них Web - ЕДИНСТВЕННАЯ среда. Они не рассматривают
журналы в поисках идей. Они любуются медицинскими картами,
интерфейсами программ 80-х годов, корзинками для грибов,
мультфильмами и собственно самим окном броузера. Их
экспериментальные стили уже наполняют
Web. По мере того, как путешественники по Web-у привыкнут к
нему, ирония, юмор и насмешка над собой станут ценными маркетинговыми
идеями. Многие телевизионные рекламные клипы уже
сейчас подшучивают над тем, что они являются рекламой.
Большинство экспериментальных сайтов поступает также. Они
смиряются с ограничениями Web-а, и вместо того, чтобы пытаться
их скрыть, эти сайты во всю их эксплуатируют. Давайте бросим
взгляд в ближайшее будущее…
Десять свежих стилей для вашего сайта
A. Готическая органическая школа
источник вдохновения: человеческое тело/арабский алфавит
приемы: неправильные органические формы, коллажи из
реальных предметов, абстрактные анимированные гифы низкого
разрешения в качестве фона, прозрачные анимированные гифы в
качестве текстурного фона, верстка подразумевает и
использует вертикальную прокрутку страницы
домашние страницы/дизайнерские фирмы: Entropy8, Greyscale, SmokeymonkeyS
примеры коммерческих сайтов: Conscience Records, Janet
Jackson
B. Школа проволочного
стиля
Источник вдохновения: интерфейсы старого программного
обеспечения и видеоигр.
Приемы: графики, таблицы, мусор из графиков в качестве
абстрактных дизайнерских элементов, использование сообщений
об ошибках в качестве юмора, неработающие функции-обманки,
использование несглаженных шрифтов в виде гифов для
оттенения низкокачественных HTML-шрифтов.
домашние страницы/дизайнерские фирмы: Test
Pilot Collective (pre-5/00), mike cina, hoggorm, Hel13, zx26, Prototype
19
примеры коммерческих сайтов: levi's europe, adidas, Fusion
banner ads, Wired
logo
С. "Низкопробный" мусорный
дизайн
Источник вдохновения: грязные пятна, кляксы, наложения,
пиктограммы старой школы
Приемы: имитация линий развертки старых телевизоров,
точки и тире, силуэты изображений неправильной формы, парные
фоновые гифы с такими же гифами на первом плане,
использование для наложения друг на друга.
домашние страницы/дизайнерские фирмы: sueellen, jump into the
light, smallprint
примеры коммерческих сайтов: Nokian Tyres, Skate'n Fun
D. "Упаковочная" школа
Источник вдохновения: комиксы середины столетья,
бумажные пакеты
Приемы: полутоновые и двухтоновые изображения, ручные
шрифты, неровности, нарочитое подчеркивание швов,
использование цветов для выделения (если все серое, одна
деталь, выделенная цветом, непременно привлечет все
внимание), утонченные анимации в качестве фонового
изображения или просто для развлечения, иногда намеренно
неверное расположение навигационной панели
домашние страницы/дизайнерские фирмы: Funny Garbage, p2, stereomedia
примеры коммерческих сайтов: levi's vintage, Ka-Ching
E. Стиль a la Пит Мондриан
Источник вдохновения: Пит
Мондриан, Роберт
Лонго. Постеры, выполненные в их технике.
Приемы: Нарочито большие элементы меню, вкрапленные в
общий дизайн, частое использование отрицательных смещений,
все чисто, без суматохи. Все окно броузера рассматривается
как единое пространство для дизайна.
домашние страницы/дизайнерские фирмы: 617,
Once
Upon a Forest
примеры коммерческих сайтов: Lundstrom
Architecture
F. Пиксельный панковский
дизайн
Источник вдохновения: хаос, необычное поведение машин,
программный код, Жорж Серо (George Seraut), дадаизм.
Приемы: сильно увеличенные и искаженные джипеги и гифы,
случайным образом сгенерированные изображения, постоянное
движение, html-код и элементы форм в качестве абстрактных
деталей дизайна, сияющие неоновые цвета, режущие слух звуки,
навороченный dhtml, намеренно испорченная навигация.
домашние страницы/дизайнерские фирмы: Day-Dream, Titler, soulbath's requiem
for a dream, e13, dream7, ShaG, pixeljam
примеры коммерческих сайтов: ???
G. Стиль "Hello Kitty" 1950-х
годов
Источник вдохновения: комиксы для девчонок,
рождественские сувениры, атрибуты домов-прицепов 50-ых
годов.
Приемы: 3-хмерные объекты/текст, скругленные правильные
края, яркие цвета на светлом фоне, курсивный шрифт,
подростковый юмор
домашние страницы/дизайнерские фирмы: Future Farmers, Atlas Magazine, Post Tool, Milky Elephant, You Grow Girl
примеры коммерческих сайтов: California College of Arts
and Crafts, Avant
Card
H. HTMинимаLизм
Источник вдохновения: HTML-код, мозг Якоба Нильсена
(Jakob Neilsen)
Приемы: игры со шрифтом с помощью CSS, упор на цвет для
выделения смысла, быстро загружаемые логотипы в виде гифов,
html и текст - элементы дизайна
домашние страницы/дизайнерские фирмы: 37signals, jovino, test pilot
collective (post-5/00), dreamless, a list apart, suffocate, endquote, mesa.beta.font
примеры коммерческих сайтов: gettyone
I. Стиль чертежной доски, инструкций
и руководств
Источник вдохновения: Архитектурные кальки Заха Хадида
(Zaha Hadid), технические руководства, игрушки
роботы-трансформеры, шрих-код, миллиметровка, тексты мелким
шрифтом
Приемы: ПО 3-хмерного моделирования, мелкие плохо
читаемые нео-технологические шрифты, отрицательное смещение,
крупные элементы, запутанные элементы навигации
домашние страницы/дизайнерские фирмы: DFORM1, Vir2L, chapter3, mr. eel
примеры коммерческих сайтов: mtv2
J. Сверхтонкий дизайн в стиле
SimCity
Источник вдохновения: игра SimCity, игры для Commodore
64, обертки японских конфет
Приемы: тонкие сглаженные шрифты, излишнее дробление и
детализация, мелкие пиксельные изображения
людей/строений/объектов
домашние страницы/дизайнерские фирмы: kaliber 10000, the icon factory, flipflopflyin, hi-res
примеры коммерческих сайтов: iTurf
3. FAQКакой стиль мне следует использовать?:
Зависит от проекта.
Насколько далеко я могу зайти?: Зависит от вашего
вкуса и вкуса заказчика. Примечание: контекст сайта
создаете вы. Если ваш сайт работает, не важно как он выглядит
на фоне других сайтов. Нет такого требования, чтобы он
обязательно был похож на другие корпоративные сайты, в первую
очередь он должен быть похож на себя.
Что делать, если я не желаю вообще имитировать чей-либо
стиль?: Отыщите свой собственный источник вдохновения и
примените его в своем дизайне. Им могут послужить, например,
плакаты коммунистической пропаганды, шведское
граффити, татуировки, оборудование цехов, приборы
ПВО времен холодной войны и даже каталог MacMall.
Что делать, если мне хочется быть похожим на
остальных?: Если это сработает для вас и для вашего
клиента, почему бы нет? Но то, что является традицией сейчас,
завтра станет анахронизмом. Так что в своих решениях не
забывайте о будущем.
В чем главная идея?: Избегайте стерильности.
Цифровой компьютер просто предназначен для того, чтобы
избавляться от застоя и порядка. Если вы хотите, чтобы ваши
сайты выделялись на общем фоне, выделите его. Будьте таким как
Джон Колтрейн (John Coltrane), а не как Kenny G. Люди
постепенно станут это воспринимать как должное. И хватит спать
со своей двоюродной сестрой… Если только у вас хватает сил от
нее отказаться.
ПриложениеЯ переделываю этот сайт в книгу Fresh
Styles for Designers: Eye Candy from the Underground,
которая будет опубликована издательством Macmillan/Que в марте
2001 года. С ума сойти.
Также, я буду обсуждать эту тему на конференции builder.com, что
пройдет в Нью-Орлеане 6-10 декабря 2000 года. Почему бы не
приехать и не послушать? Сейчас я создаю сайт, который будет
состоять из 10 страниц, и каждая страница будет оформлена в
том стиле, который будет обсуждаться на этой странице.
Также, как вы заметили, у меня отсутствует пример
коммерческого сайта для стиля " F. Пиксельный панковский
дизайн" (сомневаюсь, что таковой можно найти, по известным
причинам). Но все же, если вы знаете какой-либо сайт, который
подпадает под один из описанных стилей, пришлите мне ссылку.
(Спасибо Andrew за пример Avant Card. Спасибо Peter за пример
сайта в стиле Хадида (Hadid))
|