пятница, 8 декабря 2006 г.

Все секреты Web 2.0 дизайна (с примерами)!

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

Поверь мне, я Web 2.0

Одной из особенностей технологии Web 2.0 является возможность пользователями самими наполнять сайты содержимым. Пользователи сами могут и строить дизайн, давать свои рекомендации, требовать изменений, но прежде, чем пользователь начнет пользоваться каким-либо сервисом, он должен быть уверен, что попал на дружелюбный и удобный сайт нового поколения. Дизайн сайта должен всё сказать за вас.

Зеленый вместо серого

Светлые и сочные тона доминируют в Web 2.0. Зеленый - неофициальный серый цвет Web 2.0. Это не значит, что стоит им ограничиваться: тусклые оранжевые, голубоватые и розовые тона тоже в моде.

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

Web 2.0 color 1Web 2.0 color 2Web 2.0 color 3Web 2.0 color 4


Закругленные углы теперь везде

Новые технологии CSS позволяют активно использовать закругленные углы для любой сложности элементов веб дизайна. Дружелюбность закругленных уголков по-прежнему создает ощущение комфорта и неформальности многих Web 2.0 сайтов.

Web 2.0 rounded corners 1Web 2.0 rounded corners 2Web 2.0 rounded corners 3

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

Web 2.0 rounded text 1Web 2.0 rounded text 3Web 2.0 rounded text 2Web 2.0 rounded text 4


Бесплатно всё!

Бесплатно! Все бесплатно! Как радуется пользователь, обнаруживая полезный ему ресурс бесплатным. Тем более, если ваш проект посвящен таким сферам, как недвижимость, значки "FREE" или "Бесплатно" только больше заинтересовывают посетителей и свидетельствуют о щедрости Web 2.0.

Web 2.0 free 1Web 2.0 free 4Web 2.0 free 2Web 2.0 free 3


Никаких фотографий

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

Web 2.0 icon 3Web 2.0 icon 1Web 2.0 icon 4Web 2.0 icon 2


Улыбайся, сынок

Большинство Web 2.0 проектов имеют поддержку дополнительных технологических или организационных слоев. Разделяй ссылки с del.icio.us, распространяй фотографии с flickr или организуй задания с Backpack - всё это сталкивает пользователя с совершенным технологическим процессом, ускоряет и делает удобным процесс управления содержимым. Хороший Web 2.0 прост, как спичечный коробок, и легок в обращении, как компьютерная мышь, а правильный дизайн и копирайтинг (защита собственных прав на материал) могут освободить все пути к распространению и просмотру содержимого.

Разумное использование места, цвета и авторских прав может значительно упростить план проекта.

Большое красиво

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

Web 2.0 large text 1Web 2.0 large text 2Web 2.0 large text 3Web 2.0 large text 4


Свобода и простор

Содержание Web 2.0 страниц можно назвать минимальным. Не жалейте места! Добавьте простора! Белое свободное пространство психологически привлекательно, позволяет расслабиться глазам и разделяет содержимое по приоритету. Используйте минимум. Не берите пример с KM.RU, смотрите ниже.

Web 2.0 whitespace 4Web 2.0 whitespace 1Web 2.0 whitespace 2


Ненужные детали

Есть определенные тенденции в Web 2.0, которые не имеют существенной значимости. Такими элементами, как "вид мокрого стола", отблески и стеклянные кнопки, можно пренебречь, но они всё же играют некой изюминкой в дизайне Web 2.0.

Web 2.0 odds and ends 4Web 2.0 odds and ends 5Web 2.0 odds and ends 2Web 2.0 odds and ends 1


Заключение

Вот и всё, что я хотел сказать о прекрасном вебдизайнерском искусстве поколения 2.0. Кто знает, "Визуальный дизайн Web 2.0 с примерами" может стать устарелым конспектом через годик-два, но в нем заложены основные уроки, которые нужно знать сейчас без всяких сомнений.

Jonathan Nicol из F6 Design и Н.А. Халявин.

http://webdesign.myj.lv/cat-26/48

Лучшие программы Web 2.0 2005 года

Прошлый год стал по-настоящему революционным. Возрождение рынка интернет-стартапов принесло в интернет миллиарды долларов. Произошло это в первую очередь благодаря компаниям так называемой «новой волны», то есть Web 2.0.

Новые стартапы Web 2.0 появляются чуть ли не каждый день. Венчурные инвесторы внимательно следят за развитием ситуации. Крупные корпорации вроде Yahoo, Google и Microsoft соревнуются друг с другом за право купить лучших из них.

Программ Web 2.0 стало так много, что сейчас уже сложно разобраться, кто есть кто. Широкой публике известны только самые яркие представители «нового интернета», такие как Google Maps, Flickr и Del.icio.us. А ведь их гораздо больше. В одном из специализированных блогов опубликован довольно любопытный список лучших программ Web 2.0 этого года по различным тематическим категориям.

Общественные закладки

Del.icio.us
Буквально сегодня стало известно, что эту фирму купила корпорация Yahoo, даже несмотря на то, что у них есть аналогичная собственная разработка My Web 2.0. Впрочем, Del.icio.us работает на порядок лучше: он быстрее, удобнее и, что самое главное, популярнее.

Стартовая страница

Netvibes
Существует довольно много Ajax-сервисов, которые позволяют разместить на одной странице ваш любимый контент. Количество таких программ быстро растет, а самой популярной среди них является Netvibes. Интерфейс этой программы переведен на несколько языков, она совместима с текстовым веб-редактором Writely, имеет отличный дизайн, основанный на DHTML. Удивительно, но аналогичные программы даже от таких гигантов как Microsoft и Google, не могут сравниться по функциональности с Netvibes.

Онлайновые планировщики

Voo2do
Как и многие другие программы Web 2.0, планировщик Voo2do создан усилиями одного-единственного программиста. Автор — Шимон Рура (Shimon Rura). Программа эффективно использует технологию Ajax и предлагает пользоваться доступом к своим программным интерфейсам. Таким образом, информацию можно «на лету» экспортировать в другие программы.

Пиринговая лента новостей

digg
Феномен популярности digg (он уже сравнялся по посещаемости со Slashdot) объясняется оригинальным алгоритмом публикации новостей в этом коллективном блоге. Каждая запись здесь проходит через процедуру голосования. На первую страницу сайта попадают только записи, набравшие наибольшее количество голосов (голосование сводится к нажатию одной кнопки «digg this»). Программа не использует технологию Ajax, но совершенно не страдает от этого. По другим признакам digg отлично вписывается в концепцию Web 2.0. Нужно заметить, что RSS-поток digg является одним из самых популярных в интернете.

Хранение и публикация фотографий

Openomy
Бесплатное и надежно защищенное хранилище файлов объемом 1 ГБ. Открытые API с поддержкой Ruby, использование тегов.

Блог-фильтры

Memeorandum.com
Программа для мониторинга блогосферы. Она каждый час автоматически идентифицирует самые популярные темы в различных областях: технологии, политика и т.д.

Web 2.0 для обывателей

Katrina List Network
Один из лучших примеров использования технологий Web 2.0 для нужд обычных людей. Программа Katrinalist.net была создана во время событий в Новом Орлеане как агрегатор неструктурированной информации (данные о пропавших и погибших людях) из многих источников.

Текстовый веб-редактор

Writely
Простой в использовании веб-редактор, понятный каждому, кто знаком с MS Word. Поддерживает изменение шрифтов, проверку англоязычной грамматики и внедрение в документ картинок (до 2 МБ). Интерфейс Ajax, теги, работа с несколькими версиями документов, совместная работа над документом и т.д.

Онлайновые календари

CalendarHub
Один из лучших ежедневников с многочисленными возможностями синхронизации и интеграции с другими программами. Ближайший конкурент — Kiko.

Управление проектами и совместная работа

BaseCamp
Модель Web 2.0 по своей природе идеально подходят для совместной работы, подтверждение чему — блоги и wiki. Поэтому удивительно, что программ для совместной работы и управления проектами на самом деле не так много, как можно было предположить. BaseCamp — пожалуй, лучшая из них.

Источник: http://www.i2r.ru/news.shtml?id=22672
http://webdesign.myj.lv/cat-26/47