WEBduty.ru css html javascript jquery

Анализ дизайна сайтов: Apple, Microsoft, 37 Signals, YouTube и Myspace

Статья от 12.06.09 в категории Веб-дизайн
Теги: boxuk.com, анализ дизайна, Веб-дизайн, эксперимент

Эта статья – часть большого эксперимента, цель которого узнать, можно ли автоматически (программно) вычислить хорош или плох дизайн веб-сайта. Для опытов были выбраны сайты Apple, Microsoft, 37 Signals, YouTube и MySpace, точнее их главные страницы.

Заметим, что все изображения доступны в увеличенном виде.

Баланс

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

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

В результате ниже, зелёная точка – абсолютная середина страницы, красная точка – определённый нами, центр масс.

Цвета

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

В верхней таблице свет фона учтен, в нижней – нет.

Apple

Microsoft

37 Signals

YouTube

Myspace

Текст сайта в идеале должен следовать заранее определенной типографической иерархии, где каждый шаг в иерархии, должен быть четко дифференцирован: по размеру (по крайней мере один пиксель), стиль (например, курсив) и/или по семейству шрифтов.

Мы создали Javascript приложение, которое хранит информацию о типографике всех текстовых элементах на странице. Ниже показаны различия в типографке каждой главной страницы. Для каждого стиля вычислен процент его использования на странице (посимвольно).

Apple

Microsoft

37 Signals

YouTube

Myspace

Типографика Apple выглядит почти идеально, все стили отличаются друг от друга. С типографикой Microsoft тоже всё в порядке, но два самых крупных стиля имеют разницу меньше пикселы (эти различия могут быть обусловлены неточным CSS, однако результат один и тот же).

37 Sigbals, хотя и отдают предпочтение более большому набору стилей, в их стилях прослеживается чёткая иерархия

YouTube также хорошо прошол этот тест. Не порадовал только Myspace. В их стилях не только отсутствует чёткая иерархия, но и содержат ошибки смешивания аналогичных шрифтов (Arial и Verdana).

Источник: boxuk.com

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Похожие статьи:

• Полубезопасные шрифты
• Делаем кнопку как в Skype с помощью jQuery
• 5 способов оптимизации CSS
• 10 полезных CSS приёмов
• Список полезных PHP классов и библиотек