Internett har endret seg mye i løpet av det siste tiåret, og samtidig har det ikke endret seg i det hele tatt. Hvis vi ser tilbake 10 år, finner vi at nettet hadde et veldig vanlig oppsettmønster på jobb over store deler av nettstedene. Dette go-to-mønsteret besto av et overskrift, bunntekst, sidebar og innholdsområde. Det var forventet layout for nettet. Samtidig har vi oppstått av Macromedia Flash som ga veien til en epoke med alternative layouter. Layouts som ikke klarte å holde seg til denne strenge formelen. Og selvfølgelig med implosjonen av Flash, ble denne tilnærmingen svakt litt ... Jeg sier litt fordi det er tilbake med hevn.
Hvis du undersøker en av de mange populære galleriene som viser dagens webdesign, vil du uten tvil legge merke til at den grunnleggende strukturen for nettsider er alt annet enn fast. Den kan bøye seg og bytte til omtrent alt det trenger å være. Dette, etter min mening, er en av de beste bivirkningene som responsivt webdesign har produsert. Den nye normen som den var, er at det ikke synes å være noen fast formel i det hele tatt.
Alt dette sa vi kan observere flere høyt nivå trender i layout design som representerer det jeg anser for å være uvanlige layouter. Uvanlig fordi de ikke følger en streng formel, eller forhåndsdefinert system. Men de er trender ved at jeg kan gi dusinvis, om ikke hundrevis av eksempler som fyller på hver av disse kategoriene.
Det du finner her er en interessant blanding av trender og uvanlige layouter som forhåpentligvis vil inspirere deg til å vurdere de grunnleggende strukturene du bruker til webdesign. La oss dykke inn og ta en titt ...
I denne kategorien finner vi et utvalg av nettsteder som alle deler skjermen ved hjelp av en vertikal deling. Det er kanskje mange grunner til å gjøre dette, og i å kartlegge mange eksempler av denne typen har jeg funnet to hovedårsaker.
Den første er at til tider kan et design virkelig ha to hovedelementer av like stor betydning. En felles tilnærming til webdesign er å rangere ting i rekkefølge av betydning. Denne betydningen er da reflektert i hierarkiet og strukturen i designet. Men hva om du faktisk har to ting å fremme? Denne tilnærmingen gir deg mulighet til å gi dem både fremhevelse og tillate brukeren å raskt velge mellom dem.
Den andre grunnen jeg har funnet for denne tilnærmingen er at noen ganger må du formidle en viktig dualitet. Vurder åtte og fire nettsider for eksempel. Her ønsker de å formidle det faktum at deres kjernestyrker er deres digitale røtter og deres talentfulle medarbeidere. Denne sammenkoblingen er hva som definerer dem. Split-skjermen er en fin måte å presentere dette på. Og jeg elsker spesielt hvordan ampersand forener de to sidene.
Et av hovedelementene som brukes i webdesign, inneholder elementer: bokser, rammer, former og containere av alle typer som brukes til å dele innholdet på en side fra hverandre. Tenk på en stereotyp header der elementene er pent innlemmet og atskilt fra innholdet. En vanlig trend er nå å fjerne alt dette ekstra krom.
Dette er en minimalistisk tilnærming, men det går et skritt videre og har noen interessante vendinger underveis.
I dette eksemplet har de eliminert forestillingen om en topptekst og bunntekst alle sammen. Det føles mer som en interaktiv kiosk i stedet. Hierarkiet av innhold skjer hovedsakelig gjennom en venstre til høyre organisasjon, noe som gjør layoutet veldig intuitivt. Og krom for å skille navigering fra innhold er bare ikke nødvendig. I stedet skinner de vakre produktene gjennom.
Her finner vi at innholdet er sterkt understreket ved å fjerne noen følelse av en overskrift eller bunntekst. I stedet for å lese en overskrift først leser du navnet på selskapet og en klar uttalelse om hva de gjør (og hvor de gjør det). Etterfulgt av hovednavigasjonen. Hvilken fin måte å vektlegge merkevaren på før du får folk til å navigere. Det gir en elegant flyt. Interessant når du ruller, får du en overskrift og et snev av krom. Et vakkert og effektivt layout som bruker mønsteret på en inspirerende måte.
Neste opp har vi layouter bygget på modulære eller rutenettige strukturer. I disse designene er hver modul ment å bøye basert på skjermstørrelsen. Dette er ikke akkurat en ny tilnærming, men innføringen av responsivt webdesign har gjort det enda mer nyttig. Dette hint på typen tilpassbare layouter man kan lage med plugins som Masonry.
Dette eksemplet demonstrerer perfekt ideen. Designet er fullstendig responsivt. Når skjermstørrelsen endres, tilpasser hver modul og størrelser for å passe plass. Ved å dele rommet jevnt er det lettere å få designet til å tilpasse seg. Og de får bonuspoeng for å introdusere et element (ved større skjermstørrelser) som bryter de stive hindringene mellom modulene.
Dette eksemplet er en ganske intens versjon av mønsteret. Det omfatter selvfølgelig den modulære tilnærmingen, noe som gjør at de enkelt kan skifte innhold inn og ut etter behov. Men det er et viktig designelement på jobben her, som det forrige eksemplet manglet. Modulens størrelse varierer for å gjenspeile rekkefølgen av betydning og dens plass i hierarkiet. En risiko for denne modulære tilnærmingen er å gjøre alt i samme størrelse, noe som betyr at du ikke legger vekt på noe. I motsetning, dette eksempelet gir tydelig betydning for det primære elementet.
Til slutt har vi nettsteder som bruker en tilnærming der designet tilpasser seg å fylle skjermen helt. Dette er en del av responsiv design ved at den tilpasser seg skjermstørrelsen. Men i denne nisje tilpasser designene seg på en slik måte at de fullstendig fyller skjermen og ikke produserer rullefelt. Denne mangelen på rulling betyr at innholdet må være ekstremt fokusert og innholdshierarkiet klart fastslått. Jeg finner fokus og klarhet på disse områdene å være forfriskende.
Mens jeg har dissekert hver av disse trendene her isolert, er virkeligheten at de representerer byggeklosser. Og disse byggeblokkene kan monteres på mange forskjellige måter. Faktisk kunne mange av prøvene presentert her flyttes til mange av kategoriene vi har diskutert. Mangfoldet av layout på den moderne nettsiden, og det faktum at de er brukbare, gjør nettet til et spennende medium å jobbe med.