I min tidligere artikkel presenterte jeg en kort kunsthistorie og hvordan prinsipper fra det kan gjelde for den moderne handel med webdesign.

Her fortsetter jeg temaet, men fokuserer på moderne designbevegelser (hovedsakelig 20. århundre) som har leksjoner for å lære oss og inspirasjon å tilby.

Utfordringen med moderne design er at det er dusinvis av bevegelser, og de overlapper hverandre i et sammenbrudd.

Ting er ikke lenger like enkle som en århundres ren renessanse eller barokk periode. For å holde det overkommelig, har jeg valgt noen få bevegelser for å se gjennom her.

Kunst og håndverk bevegelse

Vi starter vår reise med Kunst og håndverk bevegelse , som begynte rundt 1860 og blomstret til rundt 1910. Bevegelsen vektla håndverk og enkelhet og var følsom overfor de faktiske materialene som brukes til å skape arbeidet.

I utgangspunktet var bevegelsen et direkte svar på den moderne maskinalderen, og den utfordret den i stil og dekorasjon. Med fokus på enkelhet, funksjonalitet og håndverk, tilbyr kunst og håndverk bevegelsen mange ting som den moderne designeren kan trekke på.

Gitt, tegning prinsipper fra en bevegelse som var fundamentalt imot moderne maskineri og å bruke dem på webutvikling gir et åpenbart problem. Men la oss se hva vi kommer opp med.

Opptatt av hensikt og teknologisk enkelhet, var designere av perioden sterkt stolt på ornament og mønstre, mens de fortsatt deltar i total kvalitet og stil. Disse elementene var så grunnleggende at en bok fra denne perioden var viet til dem, Grammatikkens Ornament .

Ornament, mønstre og raffinement

Denne siden fra The Gothic Nature , som skrevet av Kelmscott Press, viser omhyggelig håndverk og et estetisk som er fundamentalt motsetning til masseproduksjon. Hvordan kan vi bruke dette til webdesign? Spranget er ganske vanskelig, men jeg tror vi har en vinner her:

Til tross for at et nettsted, på sitt mest grunnleggende nivå, representerer en omfavnelse av teknologi, er dette nettstedet en fantastisk bro mellom Arts and Crafts-stilen og Internett.

For det første har den en bemerkelsesverdig håndlagd følelse. Bakgrunnen var mest sannsynlig håndlaget, før den ble konvertert til digitalt vektorformat. Nettstedet gjenspeiler gjerne emnet (dvs. brevpress), som i seg selv har en direkte forbindelse til håndverk. Mest av alt, mangler grafikk eller dekorasjon, i tillegg til dens raffinement, gjør det virkelig passe stilen.

Et annet interessant, men veldig annerledes eksempel er Zaarly , som pakker en tydelig visuell slag. Nettstedet kombinerer moderne funksjonalitet med en håndverksrettet stil. Den hånddefinerte illustrasjonen og den naturlige fargepaletten forbinder dette designet med håndgripelige håndverk. På mange måter avviger designeren dette designet fra de kalde, sterile teknologiene som brukes til å lage den, i stedet for en personlig, naturlig følelse.

Nettstedet absolutt avstår ikke fra moderne verktøy, men med sin Facebook, Twitter og Google Maps-integrasjon. Faktisk ville den vakre designen være ubrukelig uten sin moderne applikasjon og relevans.

La oss vurdere effekten av denne stilen. Man kan anta at det var tilfeldig bestemt på. Jeg vil foreslå at det ble nøye beregnet. Det representerer en radikalt annen tilnærming enn den til Craigslist , en konkurrent av Zaarly's. Ved å gjøre nettsiden personlig og mindre "digital", har designerne forsøkt å appellere til mennesker på et helt annet nivå. Utformingen tjener et svært bestemt formål med produktet, som er helt i tråd med idealer fra kunst og håndverkbevegelsen.

Art Nouveau

Art Nouveau-bevegelsen var populær rett rundt 1900 og er mest kjent for sin innflytelse på tidenes arkitektur. Stilfanget blomster- og planteelementer, med stiliserte flytende linjer. Denne kombinasjonen av elementer gjør kunst fra denne perioden relativt enkelt å identifisere.

Den vakre plakaten Maude Adams som Joan of Arc by Alfons Mucha belyser alle kjerneprinsippene i jugendstil. Klart synlig er blomstermønstre og flytende linjer. Maleriets stil er fremhevet av teknikken som brukes til å lage den, uten å distrahere fra det absolutt vakre resultatet. Det er som en kombinasjon av de realistiske og dekorative elementene til andre mer stiliserte bevegelser ( impresjonisme , for eksempel).

Jeg kunne ikke ha snublet på et bedre eksempel på jugendstilelementer i moderne design enn idesign S nettsted. De flytende elementene på toppen er den mest åpenbare referansen til denne perioden. Kast i de andre elementene, inkludert hane, sykkel og hånd, og du har en veldig klar hyllest til tidlig på 1900-tallet.

Mens forbindelsen til jugendstil er klar, er de moderne detaljene det som gjør nettstedet virkelig fremragende. Først er de enkle animasjonene øverst på siden. Små elementer som disse går langt for å bringe siden til livs.

Bauhaus

Bauhaus var en tysk skole som sprang fra 1919 til 1933. Det hadde stor innflytelse på moderne design og nesten alle former for kunst som fulgte, særlig kommersiell kunst.

Som de fleste bevegelser gjør, møter Bauhaus-stilen sterk med sine forgjengere. Fraværende er utsmykningen og dekorasjonen av kunst og håndverk og jugendstil. I stedet er det sammenslåing av design og funksjon, som på mange måter var fødsel av ekte minimalisme. Forsøket på å harmonisere funksjon og design er bemerkelsesverdig likt brukeropplevelsesinnsatsen til webdesign fellesskapet i dag.

De Barcelona Chair ovenfor ble designet av Mies van der Rohe , en av direktørene i Bauhaus. Den enkle stolen fanger perfekt den estetiske. Det er strømlinjeformet og utrolig stilig og likevel helt designet for å utføre sin funksjon, som er årsakene til at den fortsatt brukes i dag, 80 år på.

Finne minimalistiske nettsteder er bemerkelsesverdig enkelt , men å finne de som også omfavner Bauhaus-stilen er litt vanskeligere. Identity Design gjør det effektivt. Nettstedet omfatter tydelig minimalisme, men går dypere.

Funksjon og design

I samsvar med Bauhaus-stilen har Identity Design et minimalistisk nettsted og har sørget for at det fungerer svært godt. Overskriften på siden viser enkel merkevarebygging, "ID". Derfra har vi en enkel, klar menylinje; brukeren vet umiddelbart hvordan man navigerer på nettstedet. Det følger konvensjoner mens de fungerer vakkert.

En annen funksjon av Bauhaus er bruken av sans-serif skrifttyper. Tross alt kan et skrifttype utføre sin funksjon perfekt uten alle de ekstra serifs , ører og armer ! For ikke å nevne, sans-serif skrifttyper kan være bemerkelsesverdig vakker i sin egen rett.

Til slutt, legg merke til hvor nøye fargen er brukt. I Bauhaus-stilen er sterke fargekombinasjoner nesten ikke-eksisterende. Identity Design bruker farge for å skille mellom lenker, men ellers brukes farge bare for den subtile av dekorasjonen.

Internasjonal typografisk stil

Også kjent som den sveitsiske stilen, oppsto den internasjonale typografiske stilen i Sveits på 1950-tallet. På overflaten er det den funksjonelle og minimalistiske stilen til Bauhaus. Når du graver dypere, finner du et fokus på typografi, geometrisk design og rutenett.

Noen av de største navnene i grafisk design dukket opp fra denne bevegelsen: Paul Rand , Max Miedinger . Miedinger og Eduard Hoffmann opprettet Helvetica skrifttype, som noen av dere kanskje har hørt om.


(Bilde: Joe Kral )

Eksemplet over fra Neue Grafik magasin eksemplifiserer den internasjonale typografiske stilen. Legg merke til nesten fullstendig avhengighet av typografi, sterk tilslutning til et rutenett og den venstrejusterte teksten.

Focus Lab Nettsted er ikke 100% i den internasjonale stilen, men på en måte gjør dette det til et enda bedre eksempel. Tross alt er slike sammenligninger ment å demonstrere hvordan disse ideene fra moderne kunst kan tilpasses dagens behov og estetikk.

Klart synlig på Focus Labs nettsted er raffinert typografi som et stilistisk element. Typen kommuniserer ikke bare informasjon: det er det primære designelementet på siden (selv om det ikke er helt Helvetica).

Også nettet er kritisk for effektiviteten av siden. Og mens kanskje en subtilere detalj, er hele teksten venstrejustert, veldig i tråd med stilen. Nettstedet er et fantastisk eksempel på moderne webdesign og viser at vi kan utnytte enhver stil som passer til våre behov.

Pop Art

Pop Art kom også ut av 1950-tallet. Den stammer fra Storbritannia og fant veien til USA. Andy Warhol er kanskje den mest kjente fortaleren.

Igjen ser vi en kunstbevegelse utfordrende tradisjon. Pop Art inneholder daglige gjenstander som tegneserier, kjendisfotografier, husholdningsartikler og til og med reklame.

En av de tidligste eksemplene på Pop Art er denne collagen av Richard Hamilton , med tittelen Bare hva er det som gjør dagens hjem så forskjellige, så tiltalende? Denne sammenslåingen av ulike elementer fra 1950-tallet var en slående, kanskje sjokkerende demonstrasjon av denne stilen.

Å finne nettsteder som bruker Pop Art-stilen er vanskelig, men de eksisterer. En er Mixbits.com :

Kanskje den største forskjellen mellom dette og Pop Art-stilen er at Mixbits.com faktisk er ment å bli brukt, ikke bare sett. Men grensesnittet har bæreelementer av stilen. Hva har Pop Art som mål å oppnå annet enn å forandre vårt perspektiv på hvilken kunst er? Mixbits.com grensesnitt utfordrer våre forventninger til hva en webapp skal se ut. Og det fungerer briljant.

Vi kjenner ikke inspirasjonen bak Pelican Hotel S nettsted, men visuals her synes å fremkalle Richard Hamiltons collage. Kommersielle hensyn holder designeren fra å legge sammen hverdagsartikler som Hamilton gjorde, men det er noe collage-lignende om måten denne siden er satt sammen.

Punk

Ikke alle ville vurdere 1970-tallet punk rock scene en milepæl i moderne kunst og design. Men dens innflytelse er vidtgående og heller vedvarende. For ikke å nevne, danner det en fin kontrast til minimalismen i Bauhaus.

Noen av hovedtrekkene er collage, grusomme visualer, sjokkerende innhold og sterke lyse farger som lysrør lyserød og gul. En av de mest minneverdige produktene er dette albumet cover for Sexpistoler 'single Gud redd dronningen :

Denne albumkunst utgjør perfekt punkrock-æraen: sjokkerende grafikk, collage og lav produksjonsverdi. La oss vurdere et par webdesigner for å se hvordan denne stilen lever på.

Heldigvis overlater mange av designerne som adopterer denne estetikken, ikke prinsippene om brukervennlighet i prosessen. Ta de to eksemplene vist ovenfor, Serge Seidlitz S nettsted og den mer kommersielle tilnærmingen til Puma Talk . Gitt, ingen av disse nettstedene er bokstavelig talt "punk rock". Ingen av dem er støtende i det minste og har heller ikke en lo-fi-følelse. Likevel er nettstedene forankret i stilen, selv om de blir tungt modernisert.

Rancid er truer til punk rock-ånden. Nettstedet for dette nåværende semi-punk-bandet mangler offensiveness, men det har sikkert lo-fi hacked-sammen følelsen. Og det passer godt til bandet.

Hvis du tenker på å vedta denne stilen, bør du vurdere effekten på publikum. Puma Talk, for eksempel, utnytter en pseudo-punk-stil for å koble til et ungt publikum, selv om brukerne ikke ville være gamle nok til å ha opplevd punkbevegelsen førstehånds. Ikke la stilen diktere prosjektet. I stedet utnytte moderne teknikker og tilnærminger, og sørg for at nettstedet ditt er aktuelt for nåværende publikum.

Konklusjon

Å forsøke å unravel de utallige kunstbevegelsene som har skjedd i de siste 100 årene, ville være oppsiktsvekkende. Med globaliseringen av kommunikasjon har stilene blitt sammenflettet til å være overveldende. Men dette er ikke en leksjon i kunsthistorie. Snarere var mitt mål å kaste lys over opprinnelsen til noen av stilene vi bruker på nettet i dag.

Dagens webdesignere utnytter ideer som er tiår, om ikke århundrer, gamle. De sanne innovatørene i en hvilken som helst periode er i stand til å utnytte fortidens ideer, tilpasse seg moderne behov og skape nye tilnærminger som former fremtidige generasjoner av designere.

Jeg håper denne korte introduksjonen til ulike kunstbevegelser demonstrerer kraften til å se til fortiden. Kreativitet blir aldri hemmet ved å vurdere hva andre har gjort. Tvert imot: Å forstå leksjonene andre har lært hjelper oss til å tilpasse deres ideer til nye stilarter.

Ser du noen andre stilarter fra det 20. århundre representert fremtredende på dagens nettsider?