The State of Web Design Trends 2012 års utgave

Som Ferris Bueller berømte sa "Livet beveger seg ganske fort, hvis du ikke stopper og ser deg rundt en gang i mellom, kan du savne det". La oss være oppmerksom på hans visumråd og ta et øyeblikk å se på noen webdesigntrender vi opplevde i 2011.

Internett er et stadig skiftende dyr, fullt av feil og ufullkommenhet og eksperimentering. - Dan Cederholm

Responsivt webdesign

Responsive Web Design blir litt som en strålende, men likevel overspilt sang. Det ser ut til at alle har hatt sitt ord, og Ethan Marcots agenda har aldri sett sunnere ut. Det er god grunn til dette skjønt; Konseptet er enkelt, motivene er logiske, teknologien er rett frem og resultatene er svært tilfredsstillende.

2011 så en eksplosjon i antall nettsteder bygget opp responsivt, og skjønnheten i det er at vi alle er involvert i å utvikle prosessen. Det er fortsatt i sin ungdom, designere og utviklere støtter nye tilnærminger hele tiden, og vi er langt unna å nekte ned noen virkelige best practices. Skal vi først designe for store skjermer og bruke medieforespørsler til grasiøst nedgradering av våre design for mobil? Eller skal vi designe for mobil først, gradvis forbedre for bedre enheter? Paul Irish sparket av en interessant tråd over på GitHub hvis du vil dykke inn i diskusjonen.

En ting som RWD har lyst på er fokus på innhold. Bortsett fra alle andre faktorer, er innholdet på et gitt nettsted det som er viktig; kjøtt-og-to-veggen må være leselig, tilgjengelig og klar på hvilken som helst enhet. Designere tar sikkert dette om bord, slik det fremgår av mange av 2011s nye nettsteder.

Når alt er sagt og gjort skjønt, selv om du er litt lei av å se enda flere RWD-opplæringsprogrammer og artikler som kutter opp, hold deg innstilt. 2012 kommer til å se store utviklinger i måten vi alle nærmer seg.

Grid Systems

Partner i kriminalitet til det responsive oppsettet er nettverket. 2011 har sett faste grid rammer gjør fleksible forbedringer, for ikke å nevne utseendet til enda flere verktøy for å hjelpe oss ut. Alle de følgende rammeverkene, verktøyene og støttelinjene er tilpasset dagens behov og gir flytbarhet. De fleste av disse nettstedene viser også stor responsiv design, som 1: 1 miniatyrbildene nedenfor viser:


typografi

Tydeligvis er typografi ikke en disiplin som har oppstått i 2011, men det er et område med webdesign som fortsetter å vokse og letter mer enn noensinne av webfonter og -tjenester.

To bemerkelsesverdige aspekter av typografi er estetikken (webfonter tillater designere å hengi seg) og den voksende forståelsen som er skrevet, eksisterer først og fremst for å bli lest. Fonter trenger ikke å være mikroskopiske for å virke elegante, og vekten på innholdet først skaper oss mot en web full av stor og vakker type.


Teknologi Pushing Art

2011 har sett store fremskritt i forhold til nettleseregenskaper (og versjonsnumre!) Selv Microsoft innrømmet nylig at automatiske oppdateringer for Internet Explorer trolig er en god ide. Alt dette betyr at webdesignere har flere leker å spille med i form av HTML og CSS, som forståelig nok fører til kreativitet som følge av teknologi. Den "fordi jeg kan" tilnærming, hvis du vil.


Rulling, vertikale fortellinger

Jeg kan ikke tenke på en bedre tittel for denne biten, beklager. Så hva snakker jeg om? Vertikal rulling.

Det er en daglig oppgave for webdesignere å spille ned viklingenes betydning. Foldet er umulig å definere, hva med overflod av enheter og resolusjoner i disse dager, så innhold "å være over det", bør ikke være en kundes nummer én prioritet i en designløsning.

Vi tar imot vertikal rulling. Stigningen av mobile enheter har påminnet folk om at de kan bla og der er relevant innhold under de første par piksler av en nettside. Noen designere har tatt dette til neste nivå og gjort rulling til en grunnleggende del av surfingopplevelsen.

En tilnærming er i subtile parallaxeffekter.

Merk: Bildene under åpenbart gjør ikke nettsteder rettferdighet - gå og sjekk dem ut (og få musen hjulet klar ...)

Da er det ideen om at noe innhold kan rulle opp til et punkt. 2011 så stor bruk av denne effekten; holde sosiale ikoner, handlekurver, menylinjer, samtaler til handling etc. vedvarende i lys av:

Så hvordan oppnås dette? Ofte en kombinasjon av jQuery og CSS posisjonering. Her er bare to ressurser for å hjelpe deg ut:

Noen nettsteder har tatt konseptet enda lenger, animerende elementer og ringe hendelser når visse vertikale punkter på siden er nådd:

Og så er det eksempler som tar å bla ned en nettside til en helt ny dimensjon (virkelig, sjekk denne ut) ...


Som det er 1983

Diagonal er vanskelig, det spiller ikke sammen med dagens grid-baserte omgivelser, men av en eller annen grunn har skrå linjer spratt opp over alt i løpet av 2011. Det er som et tilbakeslag til en tid, selv før vanlig Internett, og du 'll finne andre visuelle påminnelser av den tiden også; merkelige fargekombinasjoner, lyseffekter, beige og bronse. Merkelig.

Jeg kan ikke hjelpe, men bli minnet om gamle magasinannonser med sine abstrakte diagonale linjer, vise serifs, stort hår, Joan Collins og perler. Det er en titt som er merkelig tiltalende ...


Modulære grensesnitt

Nærmer layouter på en modulær måte er igjen noe favorisert av Responsive Web Design. Managing områder av et design i modulære biter gjør at væske reposisjonerer og adskiller innholdet tydelig. Du kan hevde at økningen av modulære grensesnitt er ned til påvirkning av apps. I økende grad finner vi oss publisere (og få tilgang til) webinnhold via eksterne apper som Facebook og Twitter; linjene er uskarphet mellom stasjonære skjermer og håndholdte enheter.


Ta tak i denne fantastiske psd fra den nyeste Twitter-brukergrensesnittet fra Smashing Magazine!

Themeforest

Jeg spurte Themeforest review maestro Ivor hva han hadde sett på Envatos første markedsplass i løpet av det siste året. Han observert et par trending aspekter:

  • Porteføljeoppsettet dominerer fortsatt markedet.
  • Responsive Web Design og Mobile-fokuserte nettsteder er varme.
  • Minimal design har vært konsistent gjennom året.

2011 var året med minimal design i ThemeForest - Ivor Padilla

Du trenger ikke å se dypt inn i Themeforest-arkivene for å se hva han mener enten ...


Over til deg

Det er ingen måte jeg dekker alle viktige utviklingen i webdesignet i 2011, så legg inn dine kommentarer! Hvilke trender slo deg i 2011? Hvor står vi for øyeblikket, og hvor tror du ting går?