„Typografia szwajcarska nie dotyczy tylko siatki. Chodzi o prostotę, o klarowność informacji i o strukturę pomagającą konsumentowi zrozumieć, co się dzieje. To nie jest forma sztuki, to dyscyplina, to projektowanie produktu.” [1] – Dalton Maag
Styl szwajcarski, nazywany również Szkołą Szwajcarską lub Międzynarodowym Stylem Typograficznym [2], jest stylem w projektowaniu, wywodzącym się ze sposobu projektowania mającego swój początek w latach 20. XX wieku. Choć jego korzenie wywodzą się z Niderlandów, Niemiec i Rosji (nie jest trudno odnaleźć w nim wizualnych wpływów De Stijl, konstruktywizmu czy Bauhausu [3]), to jego potencjał i jakość doceniono dopiero w Szwajcarii w latach 50. tegoż wieku. Stąd również wywodzi się jego nazwa [4].
Mimo upływu niemal wieku, Szkoła Szwajcarska ma wpływ na całkiem współczesnych twórców oraz projektantów nowoczesnych witryn internetowych. Projekty grafików tworzących w poprzednim wieku w stylu szwajcarskim, jak i współczesne strony WWW, mają wiele wspólnego – przede wszystkim należy zwrócić uwagę na uniwersalność, użyteczność i funkcjonalność. W obu króluje wykorzystywanie bezszeryfowych krojów pisma, stosowanie uproszczonych palet kolorów oraz praca z ustaloną dla projektu siatką, tak zwanym gridem, mającą zachować w projekcie spójność oraz rytm [5].
Wywodzący się z „politycznych” De Stijl, konstruktywizmu czy Bauhausu, Szkoła Szwajcarska faworyzowała obiektywizm, prostotę i niewidzialność autora. Było to często powodem krytyki tego ruchu, która oskarża Szkołę Szwajcarską o powtarzalność nie dostrzegając jednocześnie jej uniwersalnej, ponadczasowej czytelności [6].
TYPOGRAFIA
Nie trudno zgadnąć, że preferowanym przez twórców stylu szwajcarskiego krojem pisma, był ten bezszeryfowy. Styl dziś często stosowany w publikacjach odczytywanych na ekranach komputerów, charakteryzujący się największą czytelnością. Czołowym przykładem takiego kroju pisma jest sięgający XIX wieku, stworzony przez Ferdinanda Theinhardta Akzidenz-Grotesk (Rys. 1.) będący głównym krojem pisma stosowanym w Swiss Design [7].
Rys. 1. Krój pisma Akzidenz-Grotesk
Źródło: H. Berthold Typefoundry, Akzidenz-Grotesk,
W tym samym czasie Haas Type Foundry z Bazylei przeprojektowali Schelter Grotesk, który następnie przekształcił się w Neue Haas Grotesk. Po przejęciu firmy przez odlewnię Stempel we Frankfurcie, niemieckiej firmy współpracującej z firmą Lynotype, chciano podkreślić szwajcarski charakter popularnemu i rozwijanemu krojowi pisma i nadano mu starożytną nazwę Szwajcarii „Helvetica” [8]. Helvetica szybko stała się marką kojarzoną ze Szwajcarskim Stylem Typografii, a jej kojarzący się z subtelną elegancją charakter był pożądany przez wiele korporacji, m. in. Microsoft, BMW, Toyota, Harley-Davidson i wiele innych [9]. Krój pisma był i jest dalej na tyle popularny, że pojawiają się głosy, że wybór Helvetici jest „lenistwem” [10].
Wykorzystanie przez Swiss Design takich, a nie innych krojów pisma wynikało z wiary, że przekaz jest najważniejszy, a skomplikowane, szeryfowe kroje pisma mogłyby go zakłócić. Często trzymano się jednego kroju pisma, a nawet jego grubości. Hierarchię informacji nadawano natomiast zmieniając wielkość napisu lub kolor. [11] Wielkość tekstu sprawdziło się również jako rozwiązanie graficzne nadające pracy ciekawy wizualnie charakter.
Rys. 2. Przykład witryny stosującej prostą typografię, inspirowaną stylem szwajcarskim.
Źródło: Muzeum Sztuki Współczesnej, https://artmuseum.pl/
Projektanci witryn internetowych często sięgają po podobne rozwiązania typograficzne. Proste i nieskomplikowane kroje pisma są uważane za idealny wybór w projektowaniu czytelnych projektów z uwzględnieniem dostępności, czyli WCAG, gdzie „informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w dostępny dla nich sposób” [12] w szczególności chodzi o osoby niedowidzące czy starsze. Przykładem strony, która spełnia zasady dostępności, oraz której treść jest zaprezentowana bezszeryfowymi, czytelnymi krojami pisma jest strona Muzeum Sztuki Współczesnej (Rys. 2.). Zastosowano w niej prostą typografię, wyróżnienia uzyskano odmianą pogrubioną kroju pisma oraz wersalikami.
Po styl typograficzny propagowany przez Swiss Design często sięgają również projektanci stron portfolio dla architektów. Jednym z doskonałych przykładów jest koncepcja graficzna witryny Shitf Architects zaprezentowana na rys. 3. Zastosowanie wersalików oraz wyraźnych, bezszeryfowych krojów pisma podkreśla monumentalny charakter pracowni i obszaru, w którym działają.
Rys. 3. Przykład portfolio pracowni architektonicznej inspirowanej stylem szwajcarskim.
Źródło: Liam Le Roux, Shift Architects, https://www.behance.net/gallery/96862619/Shift-Architects
SIATKI
Typografia charakteryzująca Swiss Design przejrzysta i uporządkowana. Jej twórcy rezygnowali z niepotrzebnych elementów na rzecz eleganckiej prostoty. By osiągnąć pożądany, minimalistyczny efekt, trzeba posiłkować się precyzyjnym systemem siatek, których czołowym twórcą był Josef Müller-Brockmann [13]. W swojej książce Grid systems in graphic design: a visual communication manual for graphic designers, typographers and three dimensional designers dokładnie opisał potrzebę korzystania z siatki i sposób jej budowania, dzięki której projektant mógł zachować czystość formy, wydobyć esencję z treści, zachować obiektywność, zracjonalizować kreatywność i proces produkcji, zintegrować elementy koloru, formy i materiału oraz architekturę treści w przestrzeni zadrukowywane strony [14].
W siatce chodzi przede wszystkim o to, by podzielić przestrzeń strony na jakąś liczbę pionowych i poziomych przestrzeni oraz ustalić precyzyjnie odstępy między nimi. Dla przykładu stronę można podzielić na równe cztery kwadraty w pięciu pionach, tak jak na poniższym przykładzie (Rys. 4). Tworzy to przestrzeń projektową, w której następnie umieszcza się treści.
Rys. 4. Przykład podziału strony na siatki.
Źrodło: J. Müller-Brockmann, Grid systems in graphic design: a visual communication manual for graphic designers, typographers and three dimensional designers, Niggli Verlag, Salenstein 2016, s. 80.
Rys. 5. Przykład systemu siatek zaproponowany przez projektantów witryn w 2007 roku.
Źródło: K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Projektanci stron WWW dość szybko zaczęli zauważać, że projekty witryn również potrzebują usystematyzowania i sposobu na „okiełznanie” niekiedy bardzo skomplikowanej ich zawartości oraz sporej ilości jej kontentu. W 2007 Khoi Vinh oraz Mark Boulton opracowali system siatek dla witryn WWW (rys. 5.), stosowany po dziś dzień. Ich dokument Grids Are Good (Right?), stał się podręcznikiem projektantów, którzy dążyli do idealnego rozmieszczenia treści w witrynach, chcąc zachować w nich rytm, spójność i porządek [15]. Twórcy systemu siatek dla WWW wyraźnie zaznaczają, że ich inspiracją jest styl szwajcarski i jego zachowawczość w rozmieszczaniu treści (rys. 6.).
Rys. 6. Fragment dokumentu opisującego siatki dla WWW, gdzie inspiracją do jego powstania jest m.in. J. Muller-Brockmann.
Źródło: K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Przykładem zastosowania klasycznych siatek może być szata graficzna z rys. 7. Widać tu siatkę kolumnową składającą się z 6 kolumn, między nimi jest 5 szczelin (nazywane po ang. gaps), które tworzą odstępy, przez co twórca może skutecznie i równo rozmieścić elementy witryny. Siatka też wyznacza projektowi marginesy z prawej i lewej strony.
Rys. 7. Przykład witryny z zastosowaniem klasycznej siatki 6-kolumnowej.
Źródło: Gertjan Melgers, Spaces Brand & Website Re-Design, https://www.behance.net/gallery/5500039/Spaces-Brand-Website-Re-Design
Przyjęto, że używanie siatek w witrynach internetowych jest standardem i pozwala ono dążyć do skutecznego i profesjonalnego projektowania. Aktualnie twórcy podchodzą do ich zastosowania w indywidualny sposób, co obrazuje przykład z rys. 8., zachowując jednak założenia opisane przez Vinha i Boultona.
Rys. 8. Przykład witryny z zastosowaniem siatki skonstruowanej z autorskimi założeniami jej twórcy.
Źródło: Mike | Creative Mints, Arca Bureau / Web site design, https://dribbble.com/shots/5900983-Arca-Bureau-Web-site-design/attachments/1269568
PODSUMOWANIE
Niezwykłym jest obserwowanie jak myśl przyświecająca twórcom typografii oraz szkół projektowania niemal sto lat temu pozostały aktualne. Wyczerpujące rozważania Josefa
Müllera-Brockmanna w Grid systems in graphic design: a visual communication manual for
graphic designers, typographers and three dimensional designers odnajdujące się w dzisiejszym projektowaniu stron internetowych, potwierdzają ponadczasowość dokonań Szkoły Szwajcarskiej. Opracowana w połowie XX wieku tradycja projektowania na siatce idealnie
sprawdziła się we współczesnym, cyfrowym projektowaniu, dając ogromne możliwości
kreacji przy jednoczesnym przestrzeganiu ściśle ustrukturyzowanych zasad. Stosując je
zyskujemy efektowne wizualnie projekty o harmonijnej równowadze funkcjonalności i estetyki.
Kamil Mirkowicz
Akademia WIT w Warszawie
Grafika okładki wpisu: Die Zeitung, 1958, Autor: Emil Ruder, Źródło: https://swissgrid.posterhouse.org/
[1] L. Benyon, Is This the Answer to Helvetica, a.k.a. the “Lazy” Design Choice?, 23 listopada 2016, http://eyeondesign.aiga.org/its-time-for-the-swiss-style-of-typography-to-bow-out/
[3] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca 2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[4] D. Terror, Lessons From Swiss Style Graphic Design, 17 lipca 2009, Smashing Magazine, https://www.smashingmagazine.com/2009/07/lessons-from-swiss-style-graphic-design/
[5] A. Tulibacka, Szkoła szwajcarska (Swiss Style) i jej wykorzystanie w projektowaniu stron, 28 kwietnia 2016,
grafmag, https://grafmag.pl/artykuly/szkola-szwajcarska-swiss-style-i-jej-wykorzystanie-w-projektowaniu-stron
[6] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca
2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[8] S. Cantavalle, The history and evolution of the font Helvetica, 22 stycznia 2021 https://www.pixartprinting.co.uk/blog/history-font-helvetica/
[10] L. Benyon, Is This the Answer to Helvetica, a.k.a. the “Lazy” Design Choice?, 23 listopada 2016, http://eyeondesign.aiga.org/its-time-for-the-swiss-style-of-typography-to-bow-out/
[11] A. Tulibacka, Szkoła szwajcarska (Swiss Style) i jej wykorzystanie w projektowaniu stron, 28 kwietnia 2016, grafmag, https://grafmag.pl/artykuly/szkola-szwajcarska-swiss-style-i-jej-wykorzystanie-w-projektowaniu-stron
[12] Fundacja Widzialni, Czcionki, https://wcag20.widzialni.org/czcionki,m,mg,162
[13] S. Bradley, Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design, 22 lipca 2013, Smashing Magazine, https://vanseodesign.com/web-design/swiss-design/
[14] J. Müller-Brockmann, Grid systems in graphic design: a visual communication manual for graphic designers, typographers and three dimensional designers, Niggli Verlag, Salenstein 2016, s. 10.
[15] K. Vinh, M. Boulton, Grids Are Good (Right?), Subtraction.com, http://www.thegridsystem.org/pdf/grids_are_good.pdf
Comments