пятница, 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

20 коммент.:

Н. Х. комментирует...
Это сообщение было удалено автором.
Игорь Левченко (ака Квентор) комментирует...
Это сообщение было удалено автором.
Игорь Левченко (ака Квентор) комментирует...

Автору респект! :) Согласен на все 200%. Побольше бы в Рунете таких сайтов в стиле 2.0. Пока лишь только в блогах встречал. Ну, мож ещё Шмандекс к этому чуток приближается.

Leon комментирует...

Добрый день!
Спасибо за статью.
У меня к вам вопрос:
не подскажите как сделать так, чтобы углы фотограыфий закруглялись. Т.е. редактор сайта вставляет статью в админку, заливает туда фотографию.
Нужен скрипт, который будет закруглять углы отображаемых на сайте фотографий..
Заранее спасибо.

Анонимный комментирует...

Если все сайты будут такими, можно со скуки будет сдохнуть. Инкубатор.

Кот комментирует...

Вот хорошая книжечка
http://fileplanet.ifolder.ru/5065102

mons-single комментирует...

Я на своем блоге привел два поста про web 2.0 где описано все особенности и фишки. Думаю вам как автору будет интересно.

Пусть не будет считаться спамо конечно... http://blog.mons.ws/?p=65

Создание сайтов комментирует...

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

aquablog комментирует...

Не уверен, что поступаю правильно, но только что наткнулся на бесплатный сервис, где есть 1 миллион уникальных посетителей к Вам на сайт. Вт мой пост на моем блоге про этот сервис http://www.aquablog.ru/1000000/

А как еще всем Вам рассказать про эту хрень??? Может, кому пигодится...

Мой блог все равно ни хто не читает... Наверное...

kaicevy комментирует...

Дружелюбность закругленных уголков по-прежнему создает ощущение комфорта и неформальности многих Web 2

Создание сайтов комментирует...

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

Анонимный комментирует...

Неплохо!

Vladimir Egoholic комментирует...

С автором полностью согласен. WEB2.0 дизайн - это еще и новые технологии к примеру AJAX.

Kolesm комментирует...

Сайты в web 2.0 лекго читаются и не напрягают глаз. Я за!

Анонимный комментирует...

Интересно, а мой сайтпопадает хоть немного под Web 2.0

Адрес: http://www.site-66.ru

Вроде делал минимум графики, крупный шрифт и тд....

Анонимный комментирует...

Очень жду постов на эту тему! Огромное вам Спасибо

Анонимный комментирует...

zx cv vb nm as sd fg gh hj jk kl lq qw er rt ty yu ui io op po oi iu uy yt tr re ew wq qa ql lk kj jh hg gf fd ds sa am mn nb bv vc cx xz zz xx di

Анонимный комментирует...

[url=http://www.ele-project.ru ]3[/url] [url=http://www.muzclassik.ru]1[/url] [url=http://www.muzshanson.ru]2[/url] [url=http://w-country.ru]4[/url] [url=http://www.e-proector.ru]5[/url] [url=http://www.rnbmuz.ru]6[/url] [url=http://www.rnb-project.ru]7[/url] [url=http://www.jazband.ru]8[/url] [url=http://www.pop-project.ru]9[/url] [url=http://www.rockarena.ru]0[/url] [url=http://www.metallmuz.ru]q[/url] [url=http://www.m-proector.ru]w[/url] [url=http://www.quarterrap.ru]e[/url] [url=http://www.bluzmen.ru]r[/url] [url=http://m-classik.ru]t[/url] [url=http://7arena.ru]y[/url] [url=http://kultmuz.ru]u[/url] [url=http://kultovik.ru]i[/url] [url=http://muz-fanat.ru ]o[/url] [url=http://muz-proekt.ru]p[/url] [url=http://muz-project.ru]a[/url] [url=http://muzic-vip.ru]s[/url] [url=http://realteatr.ru]d[/url] [url=http://vipscena.ru]f[/url]

Анонимный комментирует...

12345 678 90qwertyuiopasdf

фрилансер комментирует...

А что так резко бросили блог вести?