Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!



Web 2.0 как гид по дизайнерскому стилю (часть 2)

Часть 1

Продолжение. Часть2.

2. Центральное расположение

(Больше об этом ищите в моей статье Current Style). Большинство сайтов в настоящее время расположены центрально в окне браузера. Относительно мало сайтов полноэкранных (резиновых) или левосторонних/ фиксированного размера, по сравнению с несколькими годами назад.

Почему центральное расположение это хорошо?

Стиль «2.0» простой, четкий и смелый. Сайты, которые расположены по центру более простые, четкие и смелые.

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

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

Когда и как использовать центральное расположение?

Я же сказал, используйте центральное расположение всегда, если нет веской причины этого не делать.

Возможно вы захотите более творчески использовать пространство или получите так много информации на экране сколько возможно (например с помощью веб приложения).

3. Меньше колонок

Несколько лет назад, трехколоночные сайты были нормой, и четырехколоночные сайты не были редкостью. Сегодня 2 колонки наиболее распространенны, а 3 колонки практически максимум.

Почему чем меньше колонок, тем лучше?

Меньше это больше. Сайты с меньшим числом колонок проще, четче и более надежны. Мы передаем меньше информации, но более надежно.

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

Главная страница 37 Signals

37Signals использует две колонки, хороший пример простого дизайна. Здесь они используют 2 колонки. Это хороший пример простоты. Это позволяет сообщению говорить и ничего не добавлять, что может помешать.

Apple Expo

Apple это другой лидер в простоте и элегантности. Этот тип страниц работает действительно хорошо. Каждый раз просматривая простой дизайн Apple, я убеждаюсь, что он приближается к понятию Святой Грааль дизайна. Типичный сайт Apple показывает, что кто-то основательно задумался над «Сколько блоков/колонок/линий действительно необходимо?». Затем решительно удалил все ненужные элементы, а в результате получил более эффективную и качественную связь с пользователем.

Как выбрать количество колонок?

Я настоятельно рекомендую использовать не более 3 колонок, потому что следует использовать не больше колонок, чем это необходимо. Всегда есть исключения, вот несколько примеров, где использование более 3 колонок эффективно.


Блог сайт Derek Powazek использует 3 колонки для главной секции своего блога, но 4 расположены ниже. Нижняя секция сделана в стиле выбор и смешивание, где избыток колонок только подчеркивает «Выбирайте, что хотите».


Amazon (UK) имеет 2 боковые колонки, а продукты сгруппированы в 3 колонки в центре. Это работает, потому что каждая колонка имеет четкое назначение. Левая колонка только для навигации; правая колонка дополнительная информация. Продукты по центру четко распределены и разделены белым пространством, поэтому они не перегружают центр.


Popurls.com содержит много выбор и смешивание информации, включая горячие ссылки на другие сайты такие как digg и del.icio.us, но они также расположены в 3 колонках главного текстового блока.

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

Вот сайты, которые сделаны не правильно...


All Things Web2.0 использует 4 колонки: 2 боковые колонки и 2 центральные колонки. Обратная сторона этой разметки, что ты не знаешь куда смотреть. Все так или иначе низкоприоритетно (частично из-за темноватого фона).

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

4. Отдельная главная секция

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

Обратите внимание, как четко выделяются шапки на этих 6 примерах.

Почему отдельная шапка это хорошо?

Верхняя часть говорит «это верхушка страницы». Очевидные вещи, но так приятно знать, где начинается страница.

Это также начинает опыт сайта/страницы с сильного крупного утверждения. Это хорошо настроено под стиль «2.0». Нам нравится сильное, простое крупное утверждение.

2 из этих шапок состоят только из бренда (Protolize, Mediconmedia), в одной расположена навигация (Cross Connector), а в оставшихся 3 все вместе.

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

Когда и как использовать отдельную шапку

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

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

Всегда размещайте логотип вверху страницы. Я всегда рекомендую размещать вашу главную навигацию сразу после него.

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

Вот 2 примера, где шапка отделена дополнительной линией вместо отделения цветом.

Здесь шапка просто находится вне блока с основным содержанием.

Часть 3. (Продолжение)

Материал взят и переведен с Web design from scratch

Просмотров: 14831

  Ваш коментарий будет первым

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама