Текущий стиль веб-дизайна

Предлагаю вашему вниманию перевод статьи о текущем стиле проектов Web 2.0. Оригинал находится здесь.

NB! Только что посмотрел – там сейчас несколько урезанная версия, но я решил привести здесь первоначальный, более полный вариант статьи – со всеми обновлениями. Итак, по выражению автора – зальем “котелки”

Я рад сказать, что веб-дизайн в 2006 лучше, чем когда либо. И это не только потому, что появилось много новых веб-сайтов, т.е. появилось больше материала, на который можно смотреть. В нем все еще много ужасной муры. Я просто думаю, что большинство веб-дизайнеров знают о том, как дизайнить, больше, чем ранее.

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

Самые-самые

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

Общие фишки

Классные сайты, указанные выше, разделяют следующие фишки дизайна:

• Простой вид
• 3D-эффекты, скупо используемые
• Мягкие, нейтральные цвета фона
• Яркие цвета, используемые редко
• Изящные иконки, используемые скупо
• Изобилие пустого места
• Приятный большой текст

Давайте посмотрим на эти фишки по порядку.

Простой вид

Похоже, мы видим больше простых 1-но или 2-х колоночных дизайнов, чем в предыдущие годы, в нашей выборке горяченького:

• 4 (Avalonstar, Sirruf, Plaxo и emaginacion) имеют простой 1-но колоночный вид
• 5 (Prolotize, 9rules, LinkedIn, 31Three and Icon Buffet) имеют 2-х колоночные дизайны
• 2 (Mozilla and Squarespace) используют 2 и 3 колонки
• 1 (Iomega) использует комбинацию 3 и 4 колонок

Создается общее ощущение, что дизайнеры в-общем согласны, что простые страницы работают лучше.

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

3D-эффекты, скупо используемые

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

Отражения и плавные переходы очень распространены. Падающие тени все еще используются, но с осторожностью.

Мягкие, нейтральные цвета фона

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

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

Яркий цвет, используемый редко

Мягкий, стильный фон – это отличная база для добавления привлекающих глаз фишек. Яркие цвета и тональный контраст идеальны для притягивания глаз к более важным элементам на странице.

Изящные иконки, используемые скупо

Основная мысль: не используйте слишком много привлекательных элементов на просматриваемой целиком странице (так как это взывает к глазам и отвлекает внимание пользователя).

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

Изобилие свободного места

Сегодняшние веб-дизайны так свежи, они как будто дышат полной грудью.

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

Ваш глаз нуждается в пространстве вокруг материала, чтобы помочь вам ясно и четко определять вещи.

В-общем, чем больше пустого пространства, тем лучше. Очень редко я смотрю на страницу и думаю: “Елки, им действительно нужно напихать что-то на страницу!”

Конечно – пустое пространство необязательно должно быть белым. Но оно должно быть пространством!

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

Посмотрите на все эти восхитительно освежающие пустые пространства!

Приятный большой текст

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

Что эти хорошие дизайны показывают, так это:

Как и остальные увиденные нами техники дизайна, это работает, когда используется умеренно. Если весь ваш текст большой, у вас нет большого текста.

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

Ссылки

Ниже даны ссылки на другие коллекции сайтов, которые могут быть красивы, очень гибки, эффективны, или все это вместе! Обогатите свой ум.

• Design Melt Down – изумительное проникновение во все аспекты веб-дизайна, с фокусом на стиль “web 2.0″
• CSS Beauty gallery – восхитительная и легкая в использовании коллекция качественных ссылок
• CSS Thesis – большая коллекция миниатюр
• Stylegala – сообщество для обсуждения веб-стиля, хорошо отфильтрованные и умные комментарии
• Список Энди Бадда “Хорошие сайты на CSS” – более 400! Залейте котелок…
• CSS Blast – на русском
• CSS Drive – ссылки по категориям
• chobi.net (Японский) – хорошая свежая идея
• Piepmatzel.de – множество и множество миниатюр, из которых можно выбрать
• Web Creme
• Web Designers – список ссылок на домашние странички веб-дизайнеров по всему миру

Дальнейшее чтение

Анализ стилей логотипов Web 2.0 Стивена Колиса (Stephen Coles) на FontShop