Элементы дизайна в стиле Веб 2.0
Smashing Magazine, 2 июля 2007
Сегодня Веб 2.0 силен как никогда, новые тенденции в дизайне прослеживаются на каждом блоге, который вы посещаете и только собираетесь посетить. Снова и снова мы находим новые элементы дизайна, которые становятся обязательными для каждого модного, элегантного и стильного сайта разработанного в эру его величества Веб 2.0.
Вспомните сайты с серыми кнопками, заголовками гарнитурой Comic Sans и видимыми счетчиками eXtreme, которые мы посещали несколько лет назад. Сравните их с последними разработками, изменилось действительно многое, больше нет этих кнопок, заголовков и счетчиков.
В этой статьей мы начинаем серию публикаций о последних тенденциях в веб-дизайне, которые веб-разработчик должен помнить, создавая современный сайт.
1,2,3… Старт!
Представление продуктов и сервисов потенциальным клиентам, становиться максимально простым. Вся информация, предоставляемая клиентам, изложена в понятной форме. Разработчики стараются упростить понимание предложения компании, его преимуществ и условий предоставления сервисов.
Интересно то, что в стремлении к простоте дизайнеры приходят к похожим решениям. Больше нет длинных списков требований (на самом деле он обычно написан внизу страницы мелким шрифтом) или детальных мануалов в .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
Бета
Вы пытались найти хотя бы один релиз среди множества Веб 2.0 сервисов? Почему среди Веб 2.0 ресурсов, чаще встречаются бета версии, а не релизы? Конечно, новые идеи рождаются так же часто, как и несколько лет назад, но сегодня они сразу же реализуются и предоставляются публике как бета версии.
Бета статус дает возможность создавать сервисы часть функций, которых нуждаются доработке или будут разработаны в будущем. Начать привлекать пользователей, и в то же время защититься от критики, выиграть некоторое время на дальнейшую разработку.
Пометка «Бета» становиться своеобразной торговой маркой для всего нового и интересного, она стала стандартом для новых проектов и часто подчеркнута ярким, привлекающим внимание, цветом в логотипе сайта.
clickcaster.com
bubbleshare.com
shozu.com
riya.com
picpix.com
redtoucan.com
mabber.com
Облака тегов
Облака тегов могут, как упростить навигацию, так и наоборот, запутать посетителя. При правильном использовании они могут показать тематику ресурса и наиболее популярные на нем темы. Тем не менее, иногда они оформлены неправильно и только ухудшают юзабилити и читабельность, в основном это связано c ошибочной настройкой типографики или базовой логики (например, если высота строки задана в px, а не в em).
shadows.com
connotea.org
blogmarks.net
imeem.com
browsr.com
Огромные поля ввода
Не один веб-дизайнер не отважился бы на такое всего несколько лет назад, потому что не каждый браузер отображал поля ввода правильно. Теперь этой проблемы нет, и все больше дизайнеров оформляют элементы форм оригинальным образом, а огромные поля ввода появляются там и тут, как грибы после дождя.
Совершенно неожиданное решение. Огромное поле ввода поисковика 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
Похожие статьи
Денис 2 июля, 2007 16:52 #
Огромное спасибо за перевод
Не зря просил перевести;)
Евгений 2 июля, 2007 17:11 #
Всегда пожалуйста
Ссылки на интересные статьи, которые стоит перевести, только приветствуются.
Bezz 2 июля, 2007 17:40 #
НО
Всегда есть это НО. Статья хорошая НО не стоит следовать моде и бессмысленно вставлять вышеупомянутые трюки. Все хорошо на своих местах. Любой дизайн предполагает мышление и будет хорошо, если оно приведет к созданию чегото нового.
maximum 3 июля, 2007 8:37 #
Согласен, в погоне за этим веб 2.0 народ теперь обвешивает свои сайты значками бесплатно и бета. Такие статьи нужно переводить акуратно, чтобы у пользователя это не вызывало руководства к действию.
Nikk_Hvostikov 3 июля, 2007 11:23 #
ну-ну
На мой взгляд, многое правильно, но далеко не все.
1. WEB 2.0 дефакто не существуе, это миф, которы чем дальше, тем больше обрастает небылицами и элементами дизайна... )
2. Наличие "beta" версии... конечно выгодно с точки зрения комерческой выгоды проекта (можно запустить "сырой" проек), однако списание ответственности с разработчиков дает долгострой и неудобства для пользователей.
3. Я понимаю, что статья переводная (за что спасибо), однако рунет сильно отличается. И сдесь многое преобретает свои формы и обличия совершенно по другим тенденциям, имхо.
AntonG 3 июля, 2007 11:24 #
странно но чисто субъективно все эти примочки
больше раздражают чем ....
1,2,3… Старт! - честно говоря теряешся в этих картинках
Значки - острое сходство с рекламой. Купи один, и еще один бесплатно. Резко чуствуется лохов разводят.
Бета - есть еще второе значение сырое, недоделаное - я не пользуюсь недоделаными сервисами, в них баги, дыры и xss скриптинги.
Облака тегов - обычно сайт имеет тематику и то сколько раз на сайте microsoft повторится слово CtrlAltDel не даст мне больше информации о синем экране винды и почему МАС не зависает.
Огромные поля ввода - это как на Эверест взбираться, пишешь пишешь а ощущаешь что мало что то ты пишешь, по сравнению с полем, или если я введу строку
To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep;
To sleep: perchance to dream: ay, there's the rub;
поисковик что найдет мне данное произведение? он скорее пошлет меня на : слово не найдено, так как больше 10 слов не переварит.
Огромные шрифты - это просто за фасадом не видно входа, в фидо ведь было правило НЕ КРИЧИТЕ :)
Закругленные углы - забыли только добавить что они сделаны из картинок и подгружаются, конечно в век оптики это не актуально, но на модеме в глубинке выглядит очень прикольно.
Зы: просто личное мнение об изысках :)
seekum.com кстати, что еще жив?
yopopt 3 июля, 2007 21:47 #
Оно надо?
Вот всё чаще встречается этот "термин" Веб 2.0... Упростить? Да, я поддерживаю. Чем проще, тем лучше. Чем меньше элементов на странице, тем проще пользователю найти необходимую информацию. Однако делать огромные значки, заголовки, формы - это лишнее. А месиво из тегов вообще кошмар. Найти нужную информацию становится практически невозможно. По поводу значка "бета" соглашусь с предыдущим оратором. Так же часто бывает что такие простые сайты непомерно поглащают трафик совершенно необязательными вещами типа закруглённых уголков. Нет, тут я пожалуй несколько преувеличил, ну ладно... Я всё это к тому, что отказываться от этих фенечек не нужно, но применять крайне осторожно. А то вдруг получится - придёт на сайт человек, полюбуется и пойдёт на другой сайт, состоящий из одного лишь текста.
Tokolist 4 июля, 2007 23:12 #
>Бета - есть еще второе значение сырое, недоделаное - я не пользуюсь недоделаными сервисами, в них баги, дыры и xss скриптинги.
Беты для этого и создаются, чтобы обнаружить "баги, дыры и xss скриптинги". И сервис честно об этом предупреждает "значком". Типа пользуйтесь на свой страх и риск :) Что тут плохого?
> А месиво из тегов вообще кошмар.
ИМХО облако тегов наоборот очень удобно. И считаю его одной из лучших идей, которые относят к "2.0"
> Однако делать огромные значки, заголовки, формы - это лишнее.
Такая тенденция из-за увеличения рабочих разрешений мониторов среднестатистических пользователей.
Но вот риторический вопрос: какие из современных графических браузеров не поддерживают масштабирование?
В целом дизайн в стиле Веб 2.0 нравится. Главное не переборщить ;)
aligator 5 июля, 2007 1:40 #
thanks
Thank you
Евгений 5 июля, 2007 6:53 #
Что касается избыточного и неуместного использования этих элементов — статья не руководство к действию, а обзор тенденций в современном веб-дизайне, не освобождающий дизайнера от необходимости думать.
1,2,3 Старт — элемент чисто маркетинговый, символизирующий простоту использования и доступность продуктов и сервисов.
Значки — если к месту то хорошая вещь, четко ассоциируется с бесплатными предложениями и сниженными ценами (возможно не у всех), но злоупотреблять не стоит.
Бета — возможно, этим хотят подчеркнуть, что ресурс динамично развивается, а не только отмахнуться от ответственности. Кстати, Gmail тоже бета, a все пользуются, и уровень сервиса совершенно не сравним с не бетами, такими как mail.ru.
Облака — их удобство вопрос дискуссионный, иногда да, иногда нет. Возможно, у социальных сервисов нет выбора, ведь контент нужно как-то упорядочивать, а традиционные категории тут не очень удобны (никто не хочет 5 минут искать нужную категорию при сохранении закладки). Этот элемент порожден не столько дизайном, сколько структурой информации.
Закругленные углы — сами по себе хороши, смягчают дизайн, но реализации бывают ужасны. Если закруглить уголок нужно не сильно (а этого часто достаточно) можно обойтись и без изображений.
И главное — все хорошо в меру и в тему.
Денис Талала 9 июля, 2007 19:08 #
Если бы я был автором, я назвал бы эту статью «Стереотипы Web 2.0». Ведь Web 2.0 — это технологии, а не дизайн.
Ошибки:
1. «Бета статус дает возможность создавать сервисы часть функций, которых нуждаются доработке или будут разработаны в будущем.» — первые 2 слова — через дефис; запятая на 2 слова раньше.
2. «Начать привлекать пользователей, и в то же время защититься от критики, выиграть некоторое время на дальнейшую разработку.» — первая запятая не нужна.
3. «Пометка «Бета» становиться своеобразной торговой маркой для всего нового и интересного, она стала стандартом для новых проектов и часто подчеркнута ярким, привлекающим внимание, цветом в логотипе сайта.» — в третьем слове мягкий знак не нужен; запятая после слова «внимание» не нужна.
4. «Облака тегов могут, как упростить навигацию, так и наоборот, запутать посетителя.» — первая запятая не нужна.
(Ctrl+Enter в Oper'е не работает.)
yopopt 9 июля, 2007 19:45 #
Tokolist
">Бета - есть еще второе значение сырое, недоделаное - я не пользуюсь недоделаными сервисами, в них баги, дыры и xss скриптинги.
Беты для этого и создаются, чтобы обнаружить “баги, дыры и xss скриптинги”. И сервис честно об этом предупреждает “значком”. Типа пользуйтесь на свой страх и риск :) Что тут плохого?"
Пожалуй соглашусь...
Денис Талала
"Если бы я был автором, я назвал бы эту статью «Стереотипы Web 2.0». Ведь Web 2.0 — это технологии, а не дизайн."
А здесь полностью согласен.
И Ctrl+Enter в Opere 9.21(у меня) исправно работает.
Денис Талала 9 июля, 2007 19:49 #
А почему у меня не работает? JavaScript включен.
Tokolist 9 июля, 2007 21:01 #
ОФФТОП
Кстати, раз уж речь зашла о Ctrl+Enter...
ИМХО очень плохой кусок кода:
Я могу сделать спам-скриптик :), который будет за счет Вашего трафика отсылать нежелательные сообщения ;)
Только естественно через CURL и POST
Вместо vasia@pupkin.ru перебирать мыла...
Лучше мыло вынести в ПХП-скрипт ;)
Евгений 9 июля, 2007 21:56 #
Денис Талала
Да уж мало текста, много ошибок. Представляю, что будет если вы прочтете остальные статьи.
Насчет Ctrl + Enter, смотрите в настройки Opera. У меня он отлично работает в IE6, IE7, FireFox 2, Opera 9, в других браузерах не тестил.
Tokolist
Добавил проверку в PHP, до этого там в качестве защиты был коммент /*добавить проверку адресов*/ :)
JavaScript обновлю, чуть попозже, присматриваюсь к фреймворкам.
Tokolist 9 июля, 2007 22:08 #
ОФФТОП - 2
> присматриваюсь к фреймворкам
присмотритесь к CMF MODx
Аццкая вещь 8)
IamLogo 10 июля, 2007 7:34 #
Бета напомнила
Сайты с андер констракшен, и тут же вспомнился текст про 10 основных ошибок в сайтах, не вспомню имя но какого западного гуру... впору ждать такойже для 2.0 )
Или может он уже есть? )
Евгений 10 июля, 2007 9:39 #
Видимо вы говорите о Нильсене, и его Top Ten Web Design Mistakes. Я думаю, что для Веб 2.0 сайтов его материалы остаются актуальными, просто появились новые ошибки и излишества.
lin 18 августа, 2007 22:45 #
Народ всё это очень смешно. Есть в коментах трезвые взгляды. но вобще сплошной ой...
WebDevLab » Blog Archive » Элементы дизайна в стиле web 2.0 26 ноября, 2007 13:19 #
[...] Взято тут [...]
Конкурc - новый дизайн сайта Deftones.Ru 24 декабря, 2007 18:34 #
[...] присутствовать. Почитать на эту тему можно здесь, здесь и здесь (обязательно ознакомьтесь, если решите начать [...]