Statens webbdesignsteg 2012 års utgåva

Som Ferris Bueller berömd sade "Livet rör sig ganska snabbt, om du inte slutar och tittar omkring en gång i taget, kan du sakna det". Låt oss beakta hans visningsråd och ta en stund att titta på några webbdesigntrender som vi bevittnade 2011.

Webben är ett ständigt föränderligt djur, fullt av brister och ofullkomlighet och experiment. - Dan Cederholm

Responsive Web Design

Responsive Web Design blir lite som en lysande, men överspelad sång. Det verkar som om alla har haft sitt ord och Ethan Marcots dagordning har aldrig blivit friskare. Det finns dock god anledning till detta. Konceptet är enkelt, motiven är logiska, tekniken är rakt framåt och resultaten är extremt tillfredsställande.

2011 såg en explosion i antalet webbplatser byggda på ett responsivt sätt och skönheten i det är att vi alla är inblandade i att utveckla processen. Det är fortfarande i sin ungdom, designers och utvecklare konsekverar nya tillvägagångssätt hela tiden, och vi är långt ifrån att spika ner några riktiga bästa metoder. Ska vi först designa för stora skärmar och använda mediafrågor för att graciöst försämra våra mönster för mobil? Eller ska vi designa för mobil först, gradvis förbättra för mer skickliga enheter? Paul Irish sparkade av en intressant tråd över på GitHub om du skulle vilja dyka upp i diskussionen.

En sak som RWD har lysit på är fokus på innehåll. Bortsett från alla andra faktorer är innehållet på vilken webbplats som helst viktigt. kött-och-två-veggen måste vara läsbar, tillgänglig och klar på vilken enhet som helst. Designers tar verkligen det här ombord, vilket framgår av många av 2011s framväxande webbplatser.

När allt är sagt och gjort, även om du är lite trött på att se ännu fler RWD-tutorials och artiklar som skar upp, håll dig stillad. 2012 kommer att se stora utvecklingar i hur vi alla närmar oss det.

Grid Systems

Partner i brottslighet till den lyhörda layouten är rutnätet. 2011 har sett fasta gridramar gör flexibla förbättringar, för att inte tala om utseendet på ännu fler verktyg för att hjälpa oss. Alla följande ramar, verktyg och guider tillgodoser dagens behov och erbjuder flytbarhet. De flesta av dessa webbplatser visar också stor responsiv design, eftersom 1: 1-miniatyrerna nedan visar:


Typografi

Naturligtvis är typografi inte en disciplin som uppstått under 2011, men det är ett område med webbdesign som fortsätter att växa och underlättas mer än någonsin av webbfonter och -tjänster.

Två anmärkningsvärda aspekter av typografi är estetiken (webbfonter tillåter designers att hylla sig) och den växande förståelsen som typ existerar främst för att läsas. Teckensnitt behöver inte vara mikroskopiska för att uppträda chique, och tonvikten på innehållet först driver oss mot en web full av stor och vacker typ.


Teknisk tryckteknik

2011 har sett stora framsteg när det gäller webbläsarfunktioner (och versionsnummer!) Även Microsoft erkände nyligen att automatiska uppdateringar för Internet Explorer är en bra idé. Allt detta innebär att webbdesigners har fler leksaker att spela med i termer av HTML och CSS, vilket förståeligt leder till kreativitet som ett resultat av tekniken. Den "för att jag kan" närma sig, om du vill.


Rullning, vertikala berättelser

Jag kan inte tänka på en bättre titel för denna bit, ledsen. Så vad pratar jag om? Vertikal rullning.

Det är en daglig uppgift för webbdesigners att spela ner vikten av vikten. Fallen är omöjlig att definiera, vad med överflöd av enheter och resolutioner idag, så nöjda med att vara över det, borde inte vara en kunds nummer ett prioritet i en designlösning.

Vi omfamnar vertikal rullning. Ökningen av mobila enheter har påmint folk att de kan rulla och där är relevant innehåll under de första pixlarna på en webbsida. Vissa designers har tagit detta till nästa nivå och gjort scrolling en grundläggande del av surfupplevelsen.

Ett tillvägagångssätt är i subtila parallaxeffekter.

Notera: Bilderna nedan gör uppenbarligen inte webbplatsernas rättvisa - gå och kolla in dem (och få din mushjul redo ...)

Då är det tanken att något innehåll kan bläddra till en viss punkt. 2011 såg stor användning av denna effekt; hålla sociala ikoner, kundvagnar, menyrader, samtal till handling etc. ihållande i sikte:

Så hur uppnås detta? Ofta en kombination av jQuery och CSS positionering. Här är bara två resurser för att hjälpa dig:

Vissa webbplatser har tagit konceptet ännu längre, animerande element och ringande händelser när vissa vertikala punkter på sidan uppnås:

Och då finns det exempel som rullar ner en webbsida till en helt ny dimension (verkligen, kolla in den här) ...


Gilla det är 1983

Diagonal är obekvämt, det spelar inte ihop med dagens nätbaserade omgivningar, men av en eller annan anledning har snedställda linjer dykt upp överallt under 2011. Det är som en återgång till en tid, även innan det vanliga internetet, och du Jag hittar andra visuella påminnelser av den tiden också; udda färgkombinationer, ljuseffekter, beige och brons. Konstig.

Jag kan inte låta bli att påminna om gamla tidskriftsannonser med sina abstrakta diagonala linjer, visa serifs, stort hår, Joan Collins och pärlor. Det är en titt som är märkligt tilltalande ...


Modulära gränssnitt

Närmar sig layouter på ett modulärt sätt är det någonting som gynnas av Responsive Web Design. Hantera områden av en design i modulära bitar gör att vätskan omplaceras och separerar innehållet tydligt. Man kan argumentera för att uppkomsten av modulära gränssnitt ligger på påverkan av appar. Alltmer befinner vi oss själva att publicera (och komma åt) webbinnehåll via externa applikationer som Facebook och Twitter; Linjerna suddas mellan skrivbordsskärmar och handhållna enheter.


Ta tag i den här fantastiska psd av den senaste Twitter-användargränssnittet från Smashing Magazine!

Themeforest

Jag frågade Themeforest review maestro Ivor vad han hade sett på Envatos nummer ett marknadsplats under det senaste året. Han observerade ett par trending aspekter:

  • Portföljlayouten dominerar fortfarande marknaden.
  • Responsiva webbdesign och mobilfokuserade webbplatser är heta.
  • Minimal design har varit konsekvent under hela året.

2011 var året för minimal design i ThemeForest - Ivor Padilla

Du behöver inte se djupt in i Themeforest-arkiven för att se vad han menar heller ...


Över till dig

Det finns inget sätt jag täckte varje betydande utveckling i webbdesignen 2011, så lägg in med dina kommentarer! Vilka trender slog du i 2011? Var står vi för tillfället, och var tror du att saker går?