Web 2.0 дизайн

Эта статья посвящена стилю Web 2.0. Я постараюсь Вам объяснить на примерах, что же такое стиль Web 2.0 и как его использовать в web-дизайне. Статья получилась большая и интересная!

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

Соответственно нужно придумать некоторые методы для взаимодействия с пользователем. Появляется возможность комментирования, оценивания статей, появляется Ajax (возможность догрузить часть страницы или полностью без перезагрузки) и т.д., что сказывается на качестве взаимодействия с пользователем.

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

Ясное дело, если изменяется структура сайта, то и дизайн тоже необходимо разработать под такую структуру! Вот здесь-то web-дизайнеры поработали на славу! И образовался новый стиль web-дизайна – Web 2.0!

После этого важного вступления, начнём говорить уже о самом стиле.

Ниже приведены некоторые особенности стиля Web 2.0, применяя которые Вы создадите совсем непохожие дизайны сайтов на те, которых сейчас полно в Рунете (русскоязычный интернет) и Укрнете (украиноязычный язычный интернет)!

Хотите выделиться? Хотите, чтобы Ваш сайт запомнился каждому посетителю? Хотите получить отклик от читателя? Тогда читайте внимательнее!

Шрифт

Размер шрифта. Первое, на что стоит обратить внимание, так это шрифт. Если Вы хотите, чтобы пользователь прочитал Вашу статью, то упростите ему чтение! Сделайте шрифт побольше! Наиболее удобный это 17–18 px.

Не нужно портить зрение, нет необходимости сидеть на мониторе. Да и никто не будет присматриваться к тексту, просто закроет страницу и всё. Вы дорожите посетителем?

Не надо делать синий текст на чёрном фоне. Просто нереально прочитать пару страниц нечитабельного текста! Лучший фон для страницы – белый! К белому фону проще подобрать красивый цвет текста. Вот с цветом текста нужно подумать. Не стоит брать светлый на белом фоне. Средние и тёмные тона прекрасно подойдут.

Название шрифта. Не стоит брать супер-мега-крутой-и-красивый-шрифт, который есть только у Вас. У пользователя может такого шрифта и не быть. Страница отобразится стандартным, и вся красота пропадёт. Лучше подберите один из стандартного набора Windows. Тогда проблем не будет.

Градиенты

Применяйте их! Градиенты нужны для придания нестандартности web графике. Они делаются в Photoshop ’е. Градиент – это плавный и не очень переход от одного цвета или оттенка к другому.

Web 2.0 просто доверху набит графикой с градиентами. Вот некоторые примеры градиентов в Web 2.0:

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

Не стоит делать этого:

1) Применять графику, где только можно. Это большая ошибка начинающих web дизайнеров. Если сайт весит несколько мегабайт (!) – это не порадует пользователя. Ведь не у всех такой мощный интернет, многие сидят на модеме, а про выделенку вообще никогда не слышали! Они будут грузить Вашу страницу несколько минут, и уж точно ждать такое время не будут, а просто закроют. Они пришли не поглазеть на Ваше умение (если сайт не сделан специально для этого), а получить качественные знания по нужной теме.

2) Заменять заголовки картинками. Это только раздражает. Да и вес страницы становится большим. Не говоря уже о поисковиках, которые не смогут проиндексировать текст с картинки.

Круглые углы

Делайте округлые формы. Например, нужно сделать меню. Постарайтесь сначала нарисовать в Photoshop нужное меню. Но углы сделать скруглёнными. Для этого возьмите инструмент «Rounded Rectangle Tool», выберете Radius и нарисуйте необходимую картинку.

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

Иконки

У Web 2.0 есть свои иконки. Вот некоторые иконки, которые Вы сами можете без труда сделать в Photoshop:

Как видите, на них также применяются характерные градиенты.

Какие иконки должны быть:

Единственное, что Вы должны соблюдать для дизайна в этом стиле, так это градиенты. И ВСЁ! Всё остальное — исключительно Ваша фантазия! Если «тырить» чужие идеи ничего хорошего не будет!

Только Вы сами можете создать качественный дизайн и иконки!

Эффект отражения

Отражения для текста, элементов на картинке. Эта имитация отражения в воде. Представьте речку. Посмотрев на воду, Вы видите отражение домов, деревьев и т.д. Такой эффект популярен и в стиле Web 2.0. Постарайтесь применять этот эффект не везде, а только в важных частях дизайна, например, в хедере, в логотипе.

Главные части

Обязательно (!) выделяйте значимые части дизайна и текста. Выделить текст можно цветом, чуть большим (на пиксель — два) шрифтом, сделать подчёркивание. Изображение также поможет выделить необходимую часть сайта, например, меню.

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

Пользуйтесь этим!

Разметка страницы

Максимум 1–2 колонки – вот к чему надо идти:). В web дизайне стандартном на сайте есть всегда колонка навигации, основной блок вывода текста и третья, дополнительная колонка для вывода некоторых специфичных данных. А Вам нужно сделать этих колонок как можно меньше – в идеале одна для вывода основного текста. Это удобно! Вот примеры:

Центральное выравнивание. Если Вы последовали совету и ограничились одной колонной, то Вам нужно расположить основной контент посередине. Вот так:

А не так:

Если Вам нужно две колонны, то выравнивание сделайте как на моём сайте. Вам это будет в самый раз.

Маленькая область вывода основного текста. Это значит, что не старайтесь основную колонку сделать как можно больше. Так не очень удобно читать. А вот если она пикселей 700, то так читать будет удобнее.

Другие важные отличия Web 2.0.

1) Текст поделён на абзацы. Не надо писать поэмы, не разделяя по смыслу куски текста.

2) Используйте Ajax. Позвольте пользователю наслаждаться Вашим сайтом, а не ожидать его загрузки. Постарайтесь такие элементы как: комментирование, голосование, галереи картинок, обновление незначительной части страницы сделать на Ajax!

3) Не сильно важные элементы прочь! Не надо перенагружать страницу всяким ненужным хламом. И страница тяжелее и пользователю не надо.

И самое главное:

Web 2.0 – это прежде всего для пользователя! Старайтесь всё делать для удобства! Удачи!

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *