Свежий взгляд на веб дизайн
и создание сайта
и создание сайта
Тема рассказа сегодня о визуальных особенностях дизайна сайтов WEB 2.0. Вы, наверное, замечали, что такие сайты сильно выделяются на фоне других. Например, зайдя на www.webdesignfromscratch.com или www.skype.com, вы где-то на подсознательном уровне наверняка понимали, что этот сайт "новой волны", WEB 2.0.
Итак, проанализировав несколько сайтов и зарубежных источников, также пытающихся разобраться в визуальном представлении WEB 2.0, составим список особенностей, которыми должен обладать претендующий на дизайн в стиле WEB 2.0 сайт. Итак, для начала рассмотрим сайты, которые созданы с помощью WEB 2.0
...список можно продолжать, но ограничимся этими.
В этих сайтах присутствуют следующие схожие черты:
Отсутствуют:
Округлые формы
Можно использовать 2 безпройгрышных сочетания:
Примеры:
www.feedrinse.com - прямоугольный контейнер, а элементы интерфейса с закруглениями
Тени
Используя тени, помните, что все хорошо в меру. Для дизайнера выгода от их использования может быть неочевидной, но сайты с тенями обычно смотрятся намного интереснее.
Только не пытайтесь придать всему сайту трехмерный вид! Большая часть сайта должна быть плоской. Тени лучше всего использовать вокруг блоков контента и основного блока сайта.
Нежный градиент
Когда делаете нежный градиент, лучше всего делать его из серого цвета (или из цвета пастельных тонов) в белый.
Шрифт без засечек (Sans Serif)
Шрифты из серии Sans Serif: Arial, Verdana, Helvetica. Помнится, раньше использование шрифтов без засечек считалось безвкусицей. Однако те времена остались далеко в прошлом, и сейчас шрифты без засечек очень часто являются идеальным вариантом для сайта.
Фактически Arial (Helvetica, и т.д.) становится стандартом для простого и вместе с тем красивого веб-дизайна. Размер шрифта 8-10 пикселей было принято использовать вчера. Сегодня же в моде шрифты от 14 пикселей и выше. Это не шутка! В веб-дизайне наблюдаются тенденции к упрощению. Весь контент стоит оформлять соответсвующими тэгами: заголовки, списки, ссылки, параграфы.
Еще раз - правила использования шрифтов:
Пастельные цвета WEB2.0
Пастельные цвета используются давно. Единственная интересная новинка - комбинации пастельных цветов с зеленым, синим и красным. Если вы сделайте фон сайта и элементы интерфейса серым, белым или очень светлым пастельным цветом, в шапке сайта очень хорошо будет смотреться 100% зеленый. Или (заметьте - ИЛИ, а не И) используйте красный блок в шапке сайта с белыми ссылками в нем (блоке). Главное - не перестараться, помните, что я написал ИЛИ, а не И.
Нижний колонтитул (Footer)
Нижниий колонтитул должен быть обязательно, хотя большинство посетителей никогда его и не замечают. Но нижний колонтитул все-таки необходим, если вы хотите, чтобы ваш сайт выглядел профессионально. Возьмите на заметку два вида нижних колонтитулов:
Серая горизонтальная линия, а под ней элементы, выровненные по правому или левому краю (www.flock.com)
Кнопки
Сейчас используются прямоугольные либо с закругленными углами. И, главное, очень большими. Если у вас на странице есть кнопка СКАЧАТЬ, делайте её огромной, чтобы не промахнутся! Когда кнопки используются в элементах навигации по сайту, они должны быть немного меньше. Шрифт в кнопках используйте без засечек.
Примеры:
Размер шрифта: больше обычного размера
Храните настройки о шрифтах в отдельном CSS-файле и определите базовый шрифт и размер и после этого прописывайте размер других шрифтов в процентах относительно базового.
Подытожим:
"Лакированные" элементы интерфейса
На сайтах, созданных в стиле WEB 2.0, часто присутствуют будто бы "стеклянные" элементы интерфейса. Интересный эффект "покрытия глянцевым лаком".
Фон с использованием монохромных линий по диагонали
Можно сделать фон с монохромными линиями по диагонали. Фон может быть как с градиентом, так и без.
Наглядный HTML (XML стиль)
И последнее по порядку, но не по значимости правило! KISS (Keep It Small & Simple): Делайте сайт маленьким и простым. Если вы найдете в дебрях своей библиотеки ста-а-арую книжку о веб-дизайне, в которой вас будут учить, какими тэгами оформлять параграфы, ссылки и т.д. - отнеситесь к этому серьезно! Как я ошибался, когда думал, что эта скучная теория о HTML нужна только профессорам-теоретикам в университетах! Ретростиль опять в моде! И совсем не потому, что он классно выглядит, а потому, что он очень "изобразительный" (descriptive).
Если вам не понятно то, что я написал, попробуйте сделать первые шаги в XML'e, и вам все станет ясно. Джев Безос (ТЫ НАПИШИ КТО ЭТО, А ТО ЛИЧНО Я НЕ ЗНАЮ) как-то сказал, что WEB 2.0 делает сеть более читабельной. И это правильно! Вы только представьте: в WEB 2.0 все оформляется правильными HTML-тэгами, никакие Java-скриптов не используют. Очень просто, не правда ли?
Другая причина использовать WEB 2.0 - поисковые машины. Они лучше понимают сайты с правильной HTML-разметкой. Соответственно, с WEB 2.0 вы выше в результатах поиска! Google особенно любит простые сайты :-)
Если ваш сайт начинается с тэга H1, многие поисковики присудят вам первое место :-) И еще: не злоупотребляйте таблицами и подобными сложностями.
