Швейцарский стиль веб дизайн

Что такое швейцарский дизайн

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

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

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

Рассказывает про дизайн, фотографию и ретушь, всем этим занимается сама. Автор социальных фотопроектов, фоторепортëр федеральных СМИ.
Закончила консерваторию по классу скрипки и больше никогда не играла.

Швейцарский дизайн — ответ на ускорение темпа жизни и передачи информации. Он появился в двадцатых годах прошлого века, стал популярен в пятидесятых и актуален до сих пор. Несмотря на то что его идеи возникли в Швейцарии, он получил второе название — международный стиль.

В основе швейцарского дизайна — философия школы Баухаус , один из принципов которой: «Форма следует за функцией». Ясные читабельные шрифты, простые, понятные иллюстрации помогали быстро доносить информацию.

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

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

Профессия Графический дизайнер

Двухгодовая программа с гарантированным трудоустройством, живыми встречами и воркшопами. Вы узнаете об особенностях работы графического дизайнера, будете учиться у лидеров рынка (Логомашина, Nimax, Pinkman), а по итогу — сможете получить приглашение на стажировку.

Инструменты швейцарского дизайна

Вот основные принципы швейцарского дизайна, которые до сих пор не устарели. Их и сейчас продолжают использовать в графике и вебе.

Модульные сетки

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

Сейчас модульные сетки — обязательный инструмент в веб-дизайне. Благодаря им все элементы удобно структурировать. А ещё благодаря сеткам стало удобно адаптировать дизайн под разные форматы устройств (вертикальный мобайл, горизонтальный десктоп) и под разные разрешения экранов.

Что ещё можно почитать по этой теме:

• Йозеф Мюллер-Брокман. «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок».
• Аллен Хёрлберт. «Сетка».
• Timothy Samara. «Making and Breaking the Grid».

Типографика

В швейцарском стиле шрифт — один из главных инструментов коммуникации.

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

Есть простое объяснение швейцарского дизайнерского подхода к шрифтам: типографика — это речь, кегль — громкость голоса, а гарнитура — его тембр.

При выборе шрифтов дизайнеры начали использовать гротески (Futura, Helvetica). Отказались от шрифтов с засечками и акцидентных . Они считали, что дополнительные украшения вносят ненужный визуальный шум. Поэтому в одном макете допускается минимум шрифтов — один или два.

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

Особенность швейцарской типографики — выравнивание текстового блока по левой стороне. Чтобы растянуть строку по ширине колонки, требуются неравномерные пробелы между словами. Новая вёрстка с выравниванием по левой стороне добавила динамики. Такой текст удобнее читать.

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

Что ещё можно почитать по этой теме:

• Ян Чихольд. «Новая типографика. Руководство для современного дизайнера».
• Ян Чихольд. «Облик книги».
• Эмиль Рудер. «Типографика».

Асимметричная композиция

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

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

В швейцарском дизайне свободное пространство, воздух — важный элемент композиции. Он подчёркивает информационные части макета, делает их более заметными. Чтобы лучше понять законы асимметричной композиции, можно посмотреть работы общества художников De Stijl .

Композиция в швейцарском дизайне получается настолько подвижной, что её оказалось просто анимировать. Посмотрите анимированные на CSS известные постеры.

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

Что ещё можно почитать по этой теме:

• Иоганнес Иттен. «Мой форкурс в Баухаузе и других школах».
• Селим Омарович Хан-Магомедов. «Супрематизм и архитектура (проблемы формообразования)».
• Казимир Малевич. «Супрематизм. Мир как беспредметность».

Фотографии и минималистичные иллюстрации

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

Дизайнеры стали использовать работы фотографов в макетах. Часто это были концептуальные художественные снимки. В них фотографы делились своим мироощущением, размышляли над философскими вопросами: человек, повседневность, общество.

Некоторые брали иллюстрации: с минимумом цветов и простыми формами. Нужны были быстрые коммуникации, поэтому сложные формы на плакатах уже не работали.

На стиль иллюстраций сильно повлияли абстрактные направления — супрематизм и неопластицизм .

Посмотрите на работы Владимира Татлина , Казимира Малевича , Эль Лисицкого . Они вдохновляют дизайнеров спустя сто лет. Супрематистов цитируют, на их работах дизайнеры учатся сочетать формы и цвета.

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

Что с этим делать дизайнеру

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

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

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

Одна из самых влиятельных школ архитектуры, искусства и дизайна XX века.

Сокращение от английского magazine – любительское малотиражное издание на любую тему.

Шрифты без засечек.

Шрифты со штрихами на концах букв.

Нестандартные шрифты. Они выглядят необычно и привлекают внимание.

Общество художников, образованное в Нидерландах в 1917 году. Для их работ характерны геометрические абстракции, чёткие визуальные формы и использование базовых цветов. Направление, в котором они работали, называлось «неопластицизм».

Cоздание нового изображения при помощи объединения разных фотографий или иллюстраций.

Направление в абстрактном искусстве, основанное в 1915 году Казимиром Малевичем. В работах супрематистов нет привычной пространственной перспективы. Свои пространство и перспективу создавали геометрические формы, окрашенные в разные цвета.

Направление в искусстве, в котором работали художники общества De Stijl.

Владимир Евграфович Татлин — русский и советский живописец, график, дизайнер и художник театра. Один из крупнейших представителей русского авангарда, родоначальник конструктивизма.

Казимир Северинович Малевич — российский и советский художник-авангардист, педагог, теоретик искусства, философ. Основоположник супрематизма — одного из крупнейших направлений абстракционизма.

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

Источник

Швейцарский стиль в веб-дизайне

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

Простота, объективность и читабельность. Они были главными идеями швейцарского стиля.

Прошло 70 лет с тех пор, как швейцарский стиль завоевал мир графического дизайна. Но актуальны ли эти принципы на сегодняшний день? И можем ли мы их использовать для создания сайтов и интерфейсов?

Что такое швейцарский стиль?

Швейцарский стиль или международный стиль, относится к движению, которое зародилось в России, Нидерландах и Германии во время 1920-х и 30-х годов. Затем дизайнеры возглавили движение в 1950-х годах в Швейцарии.

Рекламный постер к балету «Жизель», Армин Хофманн

Швейцарский стиль — это модернизм. Это кульминация русского конструктивизма, искусств и ремесел, фотографии, Де Стейл и Баухауса. Определяется швейцарский стиль по смелым заголовкам, яркой композиции и минималистскому подходу.

Ричард Холлис, автор Swiss Graphic Design, отмечает что Швейцария, известная своими навыками в промышленности, а именно, в фармацевтике и машиностроении обладала такими же сильными навыками в графическом дизайне. Они выпускали рекламную и техническую литературу для химической промышленности, упаковку препаратов и многое другое.

Постер препарата «иргапирин», для лечения артрита

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

Шрифт Акциденц-Гротест, предшественник самого популярного гротеска Гельветика

Выбор типографики, в частности, был промышленным. Шрифт XIX века Akzidenz-Grotesk оказал большое влияние на швейцарский стиль и позже на его основе был создан Helvetica.

Неукрашенный, универсальный и функциональный шрифт — то, что нравится модернистам. Изначально разрабатывался как текстовый шрифт для чтения. Позже использовался на вывесках Нью-Йоркского метро в семидесятых, до того как Helvetica заняла его место.

Шрифт использовался в научных публикациях за чистый вид, что подходит веб-сайтам. Известный блогер Джеремия Шоаф, человек, стоящий за Typewolf, высказался о Akzidenz-Grotesk:

“Рад видеть, что Akzidenz Grotesk используется в интернете вместо Helvetica, потому что он сразу придает дизайну отличительный вид.”

Кроме графического дизайна и типографики, швейцарский стиль оказал влияние также на архитектуру, живопись и скульптуру. Например, Павильон Германии был построен в 1929 и являлся примером модернистского подхода.

Так что же характеризует швейцарский стиль?

Характеристики и принципы швейцарского стиля

Швейцарский стиль состоит из множества компонентов, но в частности включает в себя:

• Сетки
• Асимметричное расположение
• Типографику без засечек (sans-serif)
• Точность
• Геометрические абстракции
• Простоту
• Объективность
• Фотографию

Как говориться в мантре Баухауса: «форма следует за функцией». Это делает швейцарский стиль прагматичным и продуманным.

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

Дизайнерам стоит использовать аналогичный подход при проектировании. Дизайн делается не для вас, так что не стоит увлекаться и привязываться к интерфейсам.

Веб-дизайн в Швейцарском стиле

Вот как Диого Террор описывает в Smashing Magazine предысторию швейцарского стиля:

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

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

Но с чего же начать?

Сетка как основа дизайна

Визуальные характеристики швейцарского стиля включают размещение элементов на математически построенной сетке для создания единой композиции. Сетка придает дизайну структуру, в которой можно «ограничить» элементы пользовательского интерфейса.

Эта сетка должна представлять текстовую и визуальную информацию в четкой форме. Не важно, плакат ли это или интерфейс; сетка обеспечивает порядок. Шрифт должен быть без засечек и выровнен по левому краю. Конечным результатом будет ассиметричный дизайн.

Джозеф Мюллер-Брокманн, один из пионеров швейцарского стиля и автор книги «Система сеток в графическом дизайне», сказал о сетке:

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

Это жизненно важный инструмент, которым дизайнер может манипулировать в свою пользу при создании последовательных, удобных и доступных пользовательских интерфейсов.

Какими ещё способами могут дизайнеры привнести швейцарский стиль в веб-дизайн?

4 быстрых способов привнести швейцарский стиль в веб-дизайн

Создайте ясность с меньшим количеством элементов

Швейцарский стиль характеризуется минимальным набором функциональных элементов на странице. У каждого элемента есть причина и эта философия напоминает минимализм. Но почему дизайн должен быть минималистичным? Когда вы уменьшаете дизайн сайта только до нужных элементов, вы создаете ясность.

«Больше, чем инвестор. Ваш партнер.» Tev.de

На фото приведен образец минималистичного дизайна. Крупный текст с ясным сообщением сразу приковывает внимание. И мы не переключаемся с одного на другое, потому что в дизайне всего несколько цветов: белый, темно-синий и зеленый. Из-за ограниченного количества UI-элементов, легко понять смысл веб-сайта. Загроможденный дизайн, напротив, вызывает путанницу и создает напряжение.

Дизайн — это попытка донести сообщение. И если сообщение не будет услышано из-за шума конкурирующих элементов, то у пользователя останется не очень приятное впечатление.

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

По сути, ясность внушает доверие и стимулирует дальнейшее использование.

Ограничьте выбор типографики

Выбор шрифта имеет решающее значение, когда речь идёт о веб-дизайне в швейцарском стиле (также известным как интернациональный типографический стиль).

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

Если хотите привнести швейцарский стиль в ваш веб-дизайн, пришло время выбросить Times New Roman, Garamond, Caslon и отдать предпочтение шрифтам без засечек. Этот выбор связан с тем, что шрифт без засечек подходит почти везде. Его можно использовать и в технической литературе, и для чего-то элегантного, высококлассного. Шрифт получил широкое распространение из-за того, что его можно использовать как в профессиональной среде, так и в неформальных дизайнах.

«Попробуйте день коворкинга.» Deavor.co

Давайте посмотрим на сайт выше. Цель ясна: стать участником. Есть две причины, почему мы фокусируемся на ней. Первая — это размер. Шрифт крупный и сообщение ясное. Других конфликтующих сообщений нет.

Другая причина — негативное (или пустое) пространство. Его очень много. Оно позволяет веб-сайту дышать, лучше передает сообщение и дает пользователю сосредоточиться на чем-то одном.

Постройте типографическую иерархию

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

Чтобы достигнуть баланса в визуальной иерархии, нужно поработать над:

Примером такой иерархии служит первая страница газеты.

Заголовок, подзаголовок и основной текст — это способы создать иерархию. Газетный заголовок привлекает внимание (самая важная часть), подзаголовок дает дополнительную информацию (менее важно) и сам текст (наименее важно). И заголовок, и подзаголовок используются, чтобы побудить читателя прочесть текст.

Используйте фотографии, а не иллюстрации

Иллюстрация переживает бум в веб-дизайне. Компании всех видов используют их, чтобы добавить бренду шарм и индивидуальность.

Но в швейцарском стиле, всё построено на фотографии. Почему? В умах дизайнеров того времени фотография была способом представления реальности. Она более объективна, чем рисунок или иллюстрация (помните, эти парни любят объективность?)

Постер выставки «род человеческий», одной из самых значимых выставок в истории фотографии

Комбинация типографики и фотографии — центральная тема в швейцарском стиле. Они усиливают друг друга и служат средством визуальной коммуникации.

Эпилог

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

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

Сергей Монин

Я фриланствующий веб-разработчик, живу в Саратове. Провожу дни выполняя заказы на дому. Хорошо разбираюсь в PHP и JavaScript. Интересуюсь аналитикой, языком программирования R, web accessibility и другими вещами.

Источник