Web 2.0 доминирует. Везде и всегда. Новые дизайнерские тренды существуют вокруг тебя и меня, на блогах, которых вы были и на тех, что только собираетесь посетить. Снова и снова мы находим новые дизайнерские элементы, которые каким-то образом становятся обязательными для каждого модного, элегантного и стильного вебсайта разработанного в эру его величества Web 2.0.
Вспомните вебсайты со старыми серыми кнопками Javascript, с заголовками написанными Comic Sans и видимыми счетчиками eXtreme, которые мы посещали несколько лет назад? Посмотрите на них и посмотрите на последние разработки, заметьте, как много изменилось. Но что действительно изменилось - ok, мы больше не видим тех кнопок, заголовков и счетчиков. Фактически мы видим что-то другое.
Этой статьей мы начинаем серию статей о последних дизайнерских трендах и узорах, о которых должен помнить дизайнер, создавая новый вебсайт.
1,2,3… Старт!
Представление сервисов и конечных продуктов потенциальным клиентам вебдизайнер старается сделать простым. Информация предоставляемая клиентам изложена в доступной форме. Веб разработчики стараются, чтобы пользователь ясно понял, что предлагает компания, в чем преимущества и какие сервисы предоставляются пользователю.
Интересно то, что дизайнеры в процессе визуализации приходят к тому же решению снова и снова. Вы не видите длинного списка требований (фактически он обычно находится внизу страницы и написан шрифтом размером 7px или меньше) или детальных .pdf мануалов на главной странице. То, что вы видите, это «три-шага» и «легко-перейди» в центре страницы – они описывают, что нужно сделать, чтобы воспользоваться сервисом за несколько кликов. Использование графики существенно и обязательно. Также для привлечения внимания используют Flash.
Примеры:
friendster.com
fon.com
communitywalk.com
blish.com
dpolls.com
Значки и цветочки
Возможно, одна из наиболее популярных тенденций эры Web 2.0 является наличие «Значков» с различными закругленными и острыми углами и различные модификации цветов, которые использовались на пакетах молока в 90-х годах.
Примеры:
sixapart.com/comet
goowy.com
ajaxload.info
haveamint.com
conversate.org
sidejobtrack.com
zerohex.org
secondsite.biz
Бета
Вы пытались хотя раз найти один релиз сервисов Web 2.0? Просматривая Web 2.0-сайты вы чаще находите бета версии ресурсов, чес релизы их. Смешно, но несколько лет назад новые идеи рождались каждый день. Но сегодня они сразу реализуются и предоставляются публике как бета версии.
Конечно, «Beta»-статус оставляет много преимуществ для разработчиков. Быть «Beta» означает быть недоработанным и поэтому предлагать функциональные возможности, которые будут вероятно улучшены в ближайшем будущем. В этом случае легко предотвратить критику, привлечь внимание новых пользователей и выиграть немного времени для дальнейшей доработки.
Лейбл «Beta» становится своеобразной торговой маркой для чего-то нового. В последнее время он стал стандартом для новых проектов и часто подчеркнут ярким бросающимся в глаза цветом в логотипе сайта.
Примеры:
clickcaster.com
bubbleshare.com
shozu.com
riya.com
picpix.com
redtoucan.com
mabber.com
Облака тегов
Облака тегов могут упростить навигацию и наоборот запутать пользователя. При эффективном использовании они могут помочь раскрыть тематику и самые обсуждаемые темы на блоге. Однако, иногда они просто не соответствуют и ухудшают читаемость и простоту использования: главным образом, если веб типография использована не правильно или основные правила не соблюдены (то есть высота строк задана не в em, а в px).
Примеры:
shadows.com
connotea.org
blogmarks.net
imeem.com
browsr.com
Большие поля для ввода
Не один веб разработчик не отважился на это несколько лет назад, в частности, потому что не каждый браузер отображает поля для ввода правильно. Больше такой проблемы нет и разработчики пользуются этим. Веб формы изменяются, легенды и fieldsets становятся все более и более популярными, и большие поля для ввода появляются как грибы после дождя – вот некоторые их примеры.
Примеры:
Совершенно неожиданное дизайнерское решение. Это поле для ввода поисковика seekum.com.
podbop.org
feedpile.com
Огромные шрифты
Оформление заголовка становится важным элементом стиля каждой веб страницы. Изображения в заголовках уступают место текстовым заголовкам - CSS делает это замечательно. Время маленьких заголовков прошло, напротив они становятся все более и более крупными – а иногда экстремально большими. Крупные шрифты встречаются не только в заголовках, но и в навигации и вводных текстах.
Примеры:
krugle.com
clearleft.com
blog.qype.com
rrove.com
Закругленные углы
Есть причина, почему мы любим закругленные углы. Такие элементы улучшают читаемость и упрощают понимание представленной информации. Фактически закругленные углы используются при создании веб сайтов и новых проектов. Все элементы страницы становятся закругленными – меню навигации, кнопки, поля для ввода, таблицы и текстовые колонки.
Типичные примеры сайтов, использующих закругленные углы для всех эффектов, могут быть Ioutliner, Netsquared и Springdoo.
Закругленные углы с резкой тенью: cluckoo.com
ning.com
Закругленные углы повсюду: zimbra.com
Ваш коментарий будет первым
