Webdesigntrend: Flytande grids
by Anders-Meyer on April 11, 2010

I det siste har eg lagt merke til stadig fleire designshowcaser og bloggar som benyttar seg av eit flytande grid av små boksar som på dynamisk vis fyller skjermen med innhald. Dette var iallefall ei webdesigntrend i 2009 og er nok det enda, men ikkje like “ny”. På disse tider for eit år sidan var denne trenden nevnt som “unusual layouts” i nokre større webdesignmagasin. Tanken var å publisere dette innlegget i fjor, men bloggpausen vart lengre enn planlagt. Men no sjølv om det ikkje er “siste nytt” benyttar eg dette utkastet til å “sparke” meg i gong med blogginga igjen! Dog med ei litt endra førstesetning (sjå over).

Joshua Davis er ikkje kjent for å være ein følgjar og ( dette utan å ha håndfastbevis ) det er ikkje urimeleg å tenkje at han var ein av dei som starta denne trenden.
Dette formatet egner seg best dersom du skal vise bilder og ikkje ha hovedfokuset på tekst. Det er ein fin måte å sleppe å måtte skrive mykje tekst for å fylle opp “spalteplass” mellom visuellearbeid. Dei variantane som har minst tekst har statisk størrelse på høgda til boksane sine, medan dei med litt meir tekst stort sett har dynamisk høgde på boksane sine. Dette skaper to ganske ulike uttrykk inanfor same trend, dei heilt statiske rutenetta mot dei meir organiske og rotete rutenetta.
Farger
Det går stort sett i et monotone fargekart på disse sidene. Dei fleste er grå med kvite boksar, sjølvsagt med nokre unntak.
Den mørke bakgrunnen med lyse innholdsboksargjer at kjem godt fram frå bakgrunnen. Sjå eksempelet her korleis innholdet kjem mot deg på den lyse(over) og forsvinn på denne mindre utbredte mørke varianten (under).
Det minnar om noko…

Kan det være oppslagstavla det minnar om? Tumblr-temaet "PhotoBoard" gir utan tvil assosiasjonar til oppslagstavler i kork.
I tillegg til oppslagstavler trur eg det er inspirert av det stadig tilbakevendande trendikonet: Polaroid. Dette bildeformatet med ei kvit ramme rundt bileta med ekstra stor ramme nedst for å kunne holde i og beskrive biletet skulle vel være eit velegna format på nettet også.
Nokre dømer på Flytande grid layout webdesign:
Norske eksempler
Sidan dette er ein norsk webdesignblogg har eg spora opp nokre eksempler innen webdesign frå Norge også, her er to som er merka med grid fra Webdesignmagasinet.
I kommentarene til Sommerseth Design på Webedesignmagasinet ble det nevnt en annet norsk eksempel på grid layout:

Arngren har jo nokre fellestrekk med trenden, men må trekke den litt for mangel på noen basisregler for design som de andre eksemplene også benytter seg av.
Tar like godt med Norges beste webdesign 2009 (i følge leserne til Webdesignmagasinet) som også er basert på flytande grid layout. Det er jo passande at dette som heilt klart var ei trend i 2009 også fekk sin plass i historiebøkene:
“Stjel stilen”
Tenkte å avslutta i god “trendartikkelstil” med å ei oppfordring om å prøve trenden sjølv. Ønsker du å teste det ut kjapt på WordPress? Grid-A-Licious er eit bra wordpress-tema å teste ut.
Kom gjerne med innspel og tankar om denne trenden, har du også nokre tankar om kvifor og korleis trenden oppsto? Skriv ein kommentar i felta under.
Og eg set pris på å få litt deleglede sidan dette er første bloggpost på lenge, om du vil dele ligg det eit knippe deleikoner nedst.











13 comments
Så hyggelig å se at du poster igjen! Keep up the good work!
Og bra liste med flytende grid sider
by Mia on April 12, 2010 at 7:25 am. #
Takk! Har en målsetning om 1 post i måneden no, 1 i veka blei for tøft førte til skrivestopp..
by Anders-Meyer Eldøy on April 12, 2010 at 7:48 am. #
Det er sant, og man burde bare blogge om man har noe å blogge om! Det er mitt motto!
by Mia on April 12, 2010 at 10:58 am. #
Fin post! Spent på nye poster som kommer i fremtiden
by Christian on April 12, 2010 at 11:07 am. #
Flott innlegg, forbinder fireisland.no med kvalitetsposter
by Bjørn Endre on April 12, 2010 at 1:27 pm. #
Jeg har sett et par av disse grid/boks som også tar i bruk horisontal scrolling. Dette synes jeg fungerer serdeles godt på iPhone/Android/iPad da man kommer til neste nyhet med et flick.
Er fremdeles litt skeptisk til horisontal scrolling på maskinen, men med Magic Mouse føles det bedre enn tidligere.
by Kenneth Nordahl on April 12, 2010 at 2:45 pm. #
[...] Om du er lei av faste oppsett og klar for meir flytande føde innanfor temaet vil eg anbefale deg å besøkje bloggen til Anders-Meyer Eldøy. Han har nett har publisert ein artikkel som tek for seg flytande grids. [...]
by Strukturert til fingerspissane! › the unborn chikken on April 15, 2010 at 9:10 pm. #
Liten tro på grid-design “til punkt og prikke” – men stilen kan brukes i vanlig design. Arngren er vel unntaket?
by Gunnar Andreassen on August 26, 2010 at 6:20 am. #
Hei,
kom over bloggen din idag og har lest noen av postene dine, liker bloggen din hittil
Likte også denne posten, men jeg må si at jeg synes at flytande grids er litt rotete. Syntes ikke at det var så mange av de eksemplene du har funnet frem her som var så veldig ryddig.
by Stein Ove Helset on May 7, 2011 at 7:46 am. #
Her var det mye spennende og inspirerende
by Kristin on June 22, 2011 at 2:15 am. #
Takk, det er alltid en glede å lese dine bloggposter! Håper du finner masse å skrive om. Enjoy!
by W3Spor on October 6, 2011 at 12:35 am. #
Takk for et inspirerende blogginnlegg ! =)
by River on November 2, 2011 at 5:00 pm. #
Takk for godt blogginlegg, og takk for at du tar deg tid til å dele, ikke enkelt i en travel hverdag!
Jeg lurer på om flytende grid er en effektiv måte å organisere innhold på. De rette linjene gir god støtte for øynene og sturkturen gir et seriøst inntrykk? Vi bruker det her: http://www.w3spor.no/referanser og er veldig fornøyde
by W3Spor on January 3, 2012 at 1:26 am. #