На протяжении всего существования гипертекста, существовали дизайнерские клише своего времени, которые были популярны у большинства пользователей. Мы уже видели танцующих хомяков, анимированные gif, и тег <blink> в Netscape Navigator, такие клише приходят и уходят в свое время – но, какие клише есть в современном веб дизайне?

Градиенты

Градиенты

Градиенты становятся одним из основных элементов современного веб дизайна.

Как средство оживления однотонных областей градиенты, не имеют себе аналогов по универсальности. При печати одноцветные области приобретают особенности материала, на котором напечатаны – на глянцевой бумаге цвета становятся глянцевыми, на матовой матовыми, цвета на экране не имеют ни различимой текстуры, ни вариаций в освещении, поэтому одноцветные области выглядят безжизненными и скучными. Градиенты позволяют оживить цвета и придать страницам блеск.

Я думаю, что при умеренном и обдуманном использовании градиенты могут быть великолепным инструментом дизайнера, но к несчастью сейчас градиенты часто используются без меры и только вредят оформлению страницы.

Пример: Blinksale (прекрасный сайт, но слишком много градиентов)

Странные названия

Странные названия и точки где попало

В условиях дефицита хороших доменов адреса сайтов становятся все более причудливыми и находчивыми.

Пропущенные гласные и орфографические ошибки давно в порядке вещей, тому пример очень популярные сайты Flickr, Digg и Reddit. Использование пунктуации только начинает набирать популярность в битве за запоминающиеся адреса сайтов, всем известны ma.gnolia.com и del.icio.us.

И хотя в этой тенденции нет ничего оригинального все же это лучше чем ever-longer-domain-names-stuffed-with-keywords.com.

Пример: del.icio.us

Диагональные подложки

Диагональные подложки

Диагональные подложки по той или иной причине набирали популярность у дизайнеров на протяжении всего года.

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

Пример: StumbleUpon

Крупные шрифты

Крупные шрифты

Эра использования мелкого 7-8pt Verdana прошла – разрешение мониторов увеличилось, а CSS позволяет более полно контролировать представление текста. Теперь вы можете легко настроить расстояние между буквами и словами, высоту строк и тип шрифта.

Проблема слишком мелких шрифтов возникла во многом благодаря тому, что Verdana, немного крупнее, чем другие шрифты, используемые в веб, 8pt Verdana имеет такой же размер символов, как и 9 или 10pt другие шрифты, помня это, дизайнеры использовали, намного меньшие размеры шрифта при использовании гарнитуры Verdana. Основной шрифт размером 7.5-8pt стал нормой даже для таких сайтов как Microsoft.com.

Тем не менее, наметилась тенденция, укрупнения шрифтов. Заголовки больше не ограничены размером 24pt, а шрифт основного текста достиг 14pt и даже больше.

Ясность содержания и простота стали более важными. Крупные (и что более важно масштабируемые) шрифты, хорошо подходящие для высоких разрешений современных мониторов очень быстро набирают популярность.

Пример: Blogger

Белый фон

Белый фон

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

Будь то ультра-минималистичный стиль Google, положивший начало стилю Web2.0, более красивый дизайн Flickr, Digg, Reddit или множества других современных сайтов белый остается доминирующим цветом фона.

Так что же плохого в использовании черного или любого другого цвета для фона? Конечно есть примеры удачного использования различных цветов в фоне страницы, но тем не менее чистота дизайна ассоциируется с белым фоном.

Тем не менее, нейтральные цвета, такие как бежевый или серый могут быть использованы вместо белого и сделать дизайн более теплым и глубоким. Для примера можно привести Blogger и Ma.gnolia которые очень успешно используют нейтральные цвета в фоне страниц.

Пример: Google

Эффект мокрого пола

Эффект мокрого пола

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

Этот эффект как и эффект стеклянных кнопок впервые использован Apple, после чего многие применяли его в своих работах.

Пример: neondragon.net tutorial

Пиксельные шрифты

Пиксельные шрифты

После того как стала популярна Verdana 7.5pt, дизайнеры решили сделать следующий шаг, с помощью пиксельных шрифтов, ухитрившись поместить все литеры в битмап 5x5. Эта техника была довольно популярна у некоторых дизайнеров, и даже сегодня вы часто можете увидеть примеры ее использования.

К счастью, никто не использовал такие шрифты для основного текста сайта, хотя я видел несколько flash сайтов использующий большие объемы текста размером 6pt. Вполне возможно существуют применения и для очень мелкого текста (для небольших банеров он может быть просто необходим), но заставлять пользователей щуриться не лучшая идея.

Пример: Подборка пиксельных шрифтов

Теги

Теги и фолксономия

Если вы не используете теги, значит, вы пропустили важную тенденцию «общественной классификации». Также ее называют «folksonomy», это способ точной классификации информации с помощью пользователей.

Сайты, такие как Technorati, теперь позволяют пользователя классифицировать посты на блогах в соответствии со своими пристрастиями, с помощью тегов. Flicr использует такую же технику для упорядочивания фотографий, только вместо тегов используются кластеры.

Упорядочивание с помощью пользователей может очень хорошо работать на сайтах, где контент, в соответствии с веяниями Web 2.0, создается пользователями.

Пример: Flickr

Похожие статьи