Что такое Swiss Style веб-дизайн?

Swiss Style возник в Швейцарии в 1950-х благодаря дизайнерам вроде Йозефа Мюллер-Брокманна и Армина Хофмана как реакция на декоративный, рукописный графический дизайн. Он заменил орнамент структурой: каждый элемент на странице - заголовок, изображение, подпись, номер страницы - стоит на точной сетке из колонок и строк, ничто не размещено «на глаз». Сетка часто видна не буквальными линиями, а последовательным выравниванием всех элементов.

Типографика набирается по левому краю с рваным правым (никогда не по центру и не по ширине), почти всегда простым гротеском - изначально Akzidenz-Grotesk, после 1957 года - Helvetica, - выбранным именно потому, что он не несёт исторического или декоративного «багажа» и позволяет содержанию читаться максимально объективно. Фотография следует той же логике: документальная и непостановочная, а не тщательно срежиссированная.

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

Ключевые визуальные характеристики

• Строгая, часто 12-колоночная сетка - каждый блок, изображение и текстовая колонка занимают явно заданный диапазон колонок, а не центрированы «на глаз»
• Выключка текста по левому краю с рваным правым по всему макету - никогда не по центру и не по ширине
• Крупные уверенные цифры в роли структурных или навигационных элементов (номера страниц, маркеры списков, счётчики разделов)
• Одна тонкая горизонтальная или вертикальная линия, обозначающая границу сетки, а не декоративный разделитель
• Щедрое, намеренное пустое пространство, используемое как элемент композиции, а не просто пустой отступ
• Объективные, документальные изображения, а не тщательно срежиссированная или сильно отретушированная фотография

Цветовые характеристики

• База почти чёрный на белом (или наоборот) почти без полутонов
• Один яркий насыщенный акцентный цвет - классически красный - используемый скупо и последовательно для акцентов, никогда не смешиваемый в градиенты
• Плоские, немодулированные цветовые заливки; никаких теней, градиентов или текстуры вместо объёма

Типографика

• Простой, объективный гротеск (Helvetica, Akzidenz-Grotesk или похожий нейтральный шрифт) по всему макету, редко смешивается со вторым шрифтом
• Абзацы и заголовки по левому краю с рваным правым, набранные с плотным, последовательным интерлиньяжем
• Крупные цифры и короткие лейблы используются с той же насыщенностью и уверенностью, что и заголовки, а не как второстепенный UI-декор

UI-паттерны

• Верхняя панель с простым вордмарком и нумерованным списком навигации (01 Work, 02 Studio...) вместо навигации на иконках
• Многоколоночная секция, объединяющая крупный заголовок, документальное изображение и колонку текста, каждая занимает явно заданные колонки сетки
• Крупная цифра акцентного цвета в роли маркера раздела или индикатора страницы
• Буквенный или нумерованный список услуг/ссылок в один ряд, выровненный по той же сетке, что и всё выше