x
 
Сулейман Сулейманов
20 июня 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Давайте снова поговорим про «полосатые» сайты, а точнее про то, когда можно использовать нежелательные приёмы. На примере главной страницы Дропбокса — это исключение или не самый лучший вариант?

Хочется более широкого обсуждения про неписаные правила дизайна. В каких случаях можно нарушать и какие удачные примеры можно встретить в современном дизайне? Рубрика а-ля «развеиваем мифы».


Сулейман!

Илья Бирман тоже высказался по теме

И ещё пара примеров полосатых сайтов:

И немножко теории: совет Артёма Горбунова о чередовании слоёв

Раз­де­лить стра­ницу на полосы от края до края окна — это не неже­ла­тель­ный, а про­сто ещё один приём. Как и с любом дру­гим при­ё­мом, исполь­зо­вать его нужно осмот­ри­тельно и отда­вая себе отчёт в том, какого эффекта хочется добиться.

Илья Бирман тоже высказался по теме

И ещё пара примеров полосатых сайтов:

И немножко теории: совет Артёма Горбунова о чередовании слоёв

К сожа­ле­нию, дизай­неры очень часто поло­суют сайты про­сто так, не бес­по­ко­ясь о струк­туре и впе­чат­ле­нии. Всё это от того, что рас­по­ло­со­вать сайт очень легко, даже голову вклю­чать не нужно. Как пра­вило, полу­ча­ется набор несвя­зан­ных эта­жей, кото­рые можно пере­ста­вить в любом порядке. А потом они при­прав­ляют своё тво­ре­ние выров­нен­ным по цен­тру тек­стом. Пред­ставьте себе бутер­брод, в кото­рый напи­хали сыр, кол­басу, оливки, салат, огурцы, лосось, кот­лету, трю­фели, гор­чицу, кет­чуп, май­о­нез и Нутеллу — вроде всё вме­сте под одной булоч­кой, но соче­та­ние ужасное.

Вот мы и руга­емся на полосатость.

Но если дей­ство­вать осо­знанно, то почему нет? Напри­мер, глав­ная стра­ница интер­нет‑мага­зина «Лави­шуст­ринг» раз­де­лена на отдель­ные полосы‑слайды. Каж­дый слайд посвя­щён одному пред­мету, боль­шие полосы и плашки с цвет­ными или атмо­сфер­ными фонами помо­гают вос­хи­щаться кра­си­выми вещами. За счёт общей сетки и типо­гра­фики слайды дру­жат друг с другом:

Похо­жая исто­рия на глав­ной стра­нице Эпла. Одна полоса — один продукт:

А на глав­ной стра­нице сайта ком­па­нии «Актион‑МЦФЭР» полосы исполь­зо­ваны не только, чтобы раз­де­лить темы, но и ради боль­шего погру­же­ния. Пер­вый слайд с кос­мо­сом все­гда зани­мает всё окно бра­у­зера — ничто не отвле­кает от созер­ца­ния пла­нет‑про­дук­тов и полёта к цен­тру звёзд­ной системы (покру­тите насто­я­щий сайт).

Или вот этаж о работе с госу­дар­ством наме­ренно стоит на тём­ном фоне с рос­сий­ским фла­гом — офи­ци­ально и солидно.

Я не знаю точ­ной при­чины, по кото­рой Дро­п­бокс раз­де­лил свой сайт на цвет­ные этажи, но мне кажется, что они тоже хотели отде­лить рас­сказ об одной фиче от рас­сказа о дру­гой. А ещё, думаю, хотели под­черк­нуть, что сер­вис помо­гает дер­жать в порядке любое барахло — будь то иллю­стра­ции или фото­гра­фии. Нако­нец, по‑моему, они пыта­лись при­влечь вни­ма­ние худо­же­ствен­ной ауди­то­рии — посмот­рите, как интел­ли­гентно подо­браны цвета, как акку­ратно меняет цвет шапка при про­крутке. При этом бла­го­даря типо­гра­фике этажи хорошо дру­жат и ощу­ще­ние бутер­брода не воз­ни­кает. Полу­чи­лось недурно.

Кстати, в рус­ско­языч­ной вер­сии Дро­п­бокса испор­ти­лись шрифты. Лучше смот­рите английскую:

При­гла­шаю всех поде­литься сво­ими при­ме­рами удач­ных поло­са­тых сайтов.

P. S. Это был совет по сре­дам о вёрстке и типо­гра­фике в вебе. Хотите знать всё об интер­ли­нья­жах, полях, отсту­пах, кег­лях, вырав­ни­ва­ниях и модуль­ных сет­ках? При­сы­лайте вопросы .
Типографика и вёрстка — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть




Недавно всплыло

10 дизайнерских товаров японских студий 2 Хочу научиться сторителлингу 2 Как найти себе замену 1 Как в бюро верстают электронные письма и рассылки. Третья часть: рассылки Школы и Издательства бюро 1