Zermatt Multi-concept Agency Teema: Tapaustutkimus – Qode Interactive

Tietoja projektista

Zermatt on monikonseptinen toimistoteema, joka on saanut inspiraationsa brutalistisen muotoilun raakuudesta ja sveitsiläiselle tyylille tyypillisestä yksinkertaisuudesta. Sen selkeä visuaalinen identiteetti ja vahva luonne kehittyivät yhdistämällä molempien tyylien perusperiaatteet nykyaikaisiin suunnittelusuuntauksiin.

Palkinnot:

Paras käyttöliittymäsuunnittelu – CSSDA

Paras UX-suunnittelu – CSSDA

Paras innovaatio – CSSDA

Erityiset kiitokset – CSSDA (Lopputuomarin pisteet 8.08)

Lähestyminen

Olemme aina pyrkineet ylittämään yleiset web-suunnittelukäytännöt ja luomaan uusia trendejä. Jokainen uusi projekti tarjoaa luovillemme mahdollisuuden haastaa kekseliäisyyttään ja kokeilla erilaisia ​​tyylejä ja tekniikoita. Joten kun tuli aika luoda uusi monikonseptiteema, päätimme luoda hieman omalaatuisen projektin, joka välttelee hienovaraista, hiottua visuaalista identiteettiä. Sen sijaan olimme kiinnostuneita suunnittelemaan raa’an, rohkean, mutta silti houkuttelevan ulkoasun, joka soveltuu digitoimistoihin, arkkitehtuuristudioihin, museoihin, gallerioihin ja aikakauslehtiin.

Molemmat tyylit ovat tunnettuja taipumuksestaan ​​toiminnallisuutta ja raskaasta typografian käytöstä. Ne keskittyvät luettavuuteen ja riisuttuihin, puhtaisiin malleihin, joissa ei ole tarpeettomia koristeita. Mutta vaikka nämä kaksi tyyliä olisivat kuinka karkeita tahansa, ne eivät suinkaan ole proosaa. Itse asiassa ne tarjoavat paljon tilaa kokeilulle, mikä johtaa esteettisesti miellyttävien ja jännittävien mallien luomiseen. Pidimme nämä periaatteet täydellisesti projektiimme sopivina ja käytimme niitä ohjeina Zermattille, autenttiselle usean konseptin toimistoteemalle, joka personoi ja juhlii brutalismin ja sveitsiläisen tyylin tunnusmerkkejä.

Muotoilu

Matemaattisen ruudukon ja sans-serif-typografian käyttö on yksi sveitsiläisen tyylin ilmeisimmistä ominaisuuksista, ja jälkimmäistä käytetään voimakkaasti myös brutalistisissa teoksissa. Siitä hetkestä lähtien, kun aloitimme Zermattin ensimmäisten moodboardien kehittämisen, päätimme, että juuri näiden kahden elementin tulee olla teeman suunnittelun pääkappaleita.

Läpi historian ruudukkoa on aina käytetty stimuloimaan käyttäjien sisällön ymmärtämistä. Jo ensimmäiset käsikirjoitukset ja kirjat luottivat ruudukkojärjestelmään, joka järjesti sanat tavalla, joka teki niistä helpompia lukea. Nykyään ruudukkoa käytetään kaikissa mediamuodoissa – kaikkialla, missä on valokuvia ja tekstejä, on myös ruudukkojärjestelmä. Painetussa, digitaalisessa ja erityisesti interaktiivisessa suunnittelussa ruudukkoviivat toimivat jonkinlaisena projektin selkärankana. Käytämme niitä hierarkian saavuttamiseen, paremman asettelurakenteen luomiseen ja sisällön järjestämiseen sijoittamalla se riveihin ja sarakkeisiin. Mutta vaaka- ja pystysuorat ruudukkoviivat tekevät enemmän kuin vain erottavat sisällön. Itse asiassa Zermattin kaikkialla läsnä oleva ruudukkojärjestelmä luo yhteyden sivuelementtien välille riippumatta siitä, kuinka erilaisia ​​tai erillisiä ne ovat. Se myös yhdistää kaikki teeman asettelut visuaalisesti yhtenäiseksi kokonaisuudeksi ja antaa niille johdonmukaisuuden tunteen. Lisäksi ruudukkojärjestelmä varmistaa, että kaikki osiot kiinnittävät yhtä paljon katsojien huomiota ja kannustavat sujuvampaan visuaaliseen kommunikaatioon tarkkailijan kanssa.

Mitä tulee typografiaan, pidimme tiukasti kiinni ajatuksesta, että vähemmän on enemmän, ja puolustimme sveitsiläistä tyyliä, jonka mukaan fonttien, yhtenä suunnittelun peruselementeistä, tulee olla yksinkertaisia, jotta ne voivat viestiä katsojien kanssa selkeästi. Tiesimme, että jos haluamme varmistaa hyvän luettavuuden Zermattissa, sans serif -kirjasintyyppi olisi paras valintamme. Kokeilimme erilaisia ​​kirjasimia ja päädyimme lopulta Googlen DM Sans -kirjasimen käyttöön – puhdasta, helposti luettavaa sans serif -tyyppiä, jota päädyimme soveltamaan koko teeman ajan. Valitsimme sen hyväksi paitsi sen yksinkertaisuuden vuoksi, myös sen hienovaraisen geometrisen luonteen vuoksi, joka täydentää Zermattin jokseenkin vankkaa luonnetta.

Halusimme varmistaa typografisen hierarkian useimmissa asetteluissa, ja onnistuimme saavuttamaan sen käyttämällä asianmukaisia ​​kirjasinkokoja otsikoissa ja leipätekstissä sekä valitsimme yhtenäisen tasaisen tekstin tasauksen vasemmalle ja repaleelle oikealle – toinen sveitsiläisten tunnistettavissa oleva piirre. Tyyli. Vaikka pidimme kirjainten koon ja painon melko kesyinä useimmilla sivuilla, teimme teeman satunnaisesti suurilla otsikoilla tyypilliseen brutalistiseen tyyliin, kuten Studio Minimal -asettelusta näkyy. Yläosassa on valtava otsikko, joka vie suuren osan ruudusta ja vangitsee välittömästi ja itsekkäästi katsojien jakamattoman huomion. Toinen elementti, jolla halusimme leikkiä, olivat numerot. Arkkitehtuuristudio -sivulla on ehkä hieman yllättävän jättimäisiä ja paksuja numeroita, jotka törmäävät koon suhteen ympäröivän sisällön kanssa. Ne yllättävät ja kiihottavat katsojan ja lisäävät entisestään teeman brutalistista vetovoimaa.

Fonttivärien osalta maalasimme kirjaimet pääosin mustavalkoisina ja käytimme ei-aktiivisissa linkeissä vaaleanharmaata sävyä. Kun käyttäjät pitävät hiiren osoittimen niiden päällä, linkit luopuvat lepotilasta ja muuttuvat joko valkoisiksi tai mustiksi. Yleensä yritimme olla menemättä yli laidan ja kokeilla liikaa väriyhdistelmiä. Taustavärien osalta luotimme myös enimmäkseen mustaan ​​ja valkoiseen. Emme kuitenkaan voineet luopua harmaasta täälläkään, sillä se on betonin väri, jota käytetään laajalti brutalistisessa arkkitehtuurissa. Sisältö on maalattu pääosin alkeellisilla sävyillä, ja silloin tällöin roiskeita neonvihreää, joka on suosittu brutalistien keskuudessa. Emme kuitenkaan halunneet sokeasti seurata brutalistisia värejä koskevia ideoita, joten pippuroimme teemaa lämpimillä väreillä, jolloin sisällöstä tuli viehättävämpi ja helpompi kuluttaa.

Zermattin typografian ja sen väripaletin tarkoituksellinen yleinen yksinkertaisuus antoi meille mahdollisuuden mennä hieman villimpään visuaalisen raa’uuden ja abstraktisuuden kanssa. Lisäsimme asetteluihin animoituja ja vääristyneitä pyöreitä muotoja, geometrisia elementtejä sekä muotoja, joissa on aaltoilevia linjoja ja abstrakteja kuvioita – kaikki arkipäivää brutalismin ja sveitsiläisen tyylin teoksissa. Käytimme kuvien sijaan enimmäkseen valokuvia ja esitimme kuvat julisteina, mikä loi teemaan aikakauslehtimäisen tunnelman, mikä on toinen sveitsiläisen tyylin erehtymätön piirre. Toisaalta Zermattin kuvista huokuu lähes yksinomaan raakaa brutalistista tunnelmaa. Tämä näkyy valokuvissa, joissa esitellään brutalistisen arkkitehtuurin karua kauneutta, mutta myös nailoniin käärittyjä esineitä kuvaavissa kuvissa (esim. Animated Projects -sivulla) sekä muovipussia muistuttavalla taustalla varustetuissa asetteluissa, kuten Personal Presentation -sivulla.

Animaatiot

Mitä tulee Zermattin animaatioihin, emme halunneet häiritä teeman yleistä yksinkertaisuutta ja toimivuutta. Pitimme tehosteet melko hienovaraisina, täydentäen Zermattin brutalistista henkeä ja rohkaisemalla katsojaa keskittymään sisältöön koko ajan.

Lähes kaikilla sivuilla muotoilimme kursorin ympyräksi, brutalistien suosiman muodon, mutta herätimme sen eloon leikkisillä mikrovuorovaikutuksilla. Kun se on asetettu klikattavien elementtien päälle, ympyrä kasvaa ja sen sisään ilmestyy tekstiä, joka kertoo käyttäjille, että he voivat olla vuorovaikutuksessa sisällön kanssa jollakin tavalla – joko napsauttamalla sitä tai vetämällä sitä hiirellä. Joissakin osissa kohdistin on nuolen muotoinen, joka osoittaa suuntaan, johon katsojien tulisi mennä, jos he haluavat tutkia enemmän Zermattin sisältöä.

Ja vaikka animaatiot ovat enimmäkseen huomaamattomia, kudoimme sisään muutamia yllättäviä tehosteita siellä täällä, aivan kuten voisi odottaa näkevän brutalistista verkkosivustoa. Typografisen värimonotonisuuden rikkomiseksi herätimme erityisen suuria nimikkeitä henkiin kevyellä analogisella liikkeellä. Voit huomata tämän Zermattin aloitussivun yläosassa, jossa teksti näyttää aaltoilevalta ja ympäröivien kirjainten hitaus on rinnakkain. Ja konferenssissa ja Henkilökohtainen esitys ulkoasuja, menimme hieman villimmin esiteltyjen tehosteiden kanssa. Ensimmäisessä koristesimme toisen kahdesta valtavasta kirjaimesta neonvärisillä, salamanomaisilla animoiduilla viivoilla, jotka herättivät typografian eloon. Jälkimmäinen sivu puolestaan ​​on esimerkki tarttuvan rullaavan animoidun gradientin käytöstä, joka täydentää asettelun ryppyistä taustaa ja värähteleviä kuvia.

Zermattin hover-animaatiot vahvistavat entisestään teeman lehden tunnelmaa. Siirtämällä kohdistinta joidenkin kuvien päälle, näkyviin tulee printtisuunnittelulle tyypillisiä tehosteita, kuten sininen ja punainen kaksisävy ja holografiset tehosteet. Tasapainotimme myös joidenkin asettelujen yksinkertaisuutta varmistamalla, että raakuus ja sveitsiläinen tyyli näkyvät leijuessa. Tämä on erityisen ilmeistä Interactive Showcase -sivulla, jossa erilaisia ​​kuvia sekä geometrisia ja abstrakteja muotoja näkyy kuvaportissa, kun viet hiiren osoittimen linkin päällä. Näiden hienovaraisten ja kiehtovien tehosteiden yhdistelmä vahvistaa Zermattin vaihtoehtoista vetovoimaa ja vahvistaa brutalismin ja teeman keskiössä olevan sveitsiläisen tyylin magneettista ja kaikkialla esiintyvää synergiaa.

Loppusanat

Zermatt on raaka, vahva, terävä, geometrinen ja lämmin, klassinen mutta moderni – kaikki samaan aikaan. Loimme sen ainutlaatuisen luonteen haastamalla brutalismin ja sveitsiläisen tyylin periaatteet, kokeilemalla niitä ja sijoittamalla ne nykyaikaiseen ympäristöön. Näin loimme ympäristön, jossa ruudukkosuunnittelu, brutalismin uhkaava luonne, puhdas toimivuus ja houkutteleva visuaalinen persoonallisuus yhdistyvät esteettisesti ja temaattisesti yhtenäiseksi kokonaisuudeksi.