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

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

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


Сулейман!

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

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

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

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



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



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

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



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

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



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

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

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

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

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

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

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

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

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

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




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

2 3 2 4