Statens webbdesigntendenser 2011 års utgåva

2010 har varit ett otroligt glatt år för webbdesigners. Mobil har slagit ihop den vanliga Webtypografi har nått nya nivåer av sofistikering; Nya kodningstekniker har väsentligt förbättrat vår förmåga att bli kreativ med design (utan att äventyra stabiliteten). Sammantaget har det varit ett år som rör sig snabbt, till och med av webens standard, så låt oss gräva till vår första årliga post som täcker tillståndet för webbdesign som 2010 blir till 2011.


Foldets död

Den traditionella "vikten" (den imaginära raden på en skärm som anger vilket innehåll som är synligt innan en tittare behöver rulla) blev vagt, obetydlig och nästan irrelevant 2010.

Varför? Eftersom den traditionella "skärmen" som människor ser på webben genom har blivit en explosion av olika ... kan vi inte längre förvänta oss att surfare på något sätt ligger nära en 19-tums bildskärm med en upplösning någonstans mellan 1024x768 och 1280x700. alla former och storlekar, från iPhones (och mindre telefoner) till 60 "HDTV. Det är inte bara upplösning som kan variera vildt men; själva skärmens bildförhållande (även på samma enhet som iPhone) kan ändras med handleden. Visst, webbdesigners kommer alltid att rekommenderas att hålla de viktigaste meddelandena på en webbplats nära toppen, men med så många nya sätt att webbsurfare kan se på webben, finns det inte längre en definierad höjd för var innehållet måste vara över.

Vi diskuterar detta ämne i mycket mer detalj denna månad, så prenumerera (det är gratis) för att hålla dig uppdaterad :)


Mobila webbplatser

Webbplatser har utformats för mobila scenarier sedan starten av mobila enheter ... men 2010 har sett ett stort tryck mot hela undersidor som är utformade speciellt för att ses på små handdatorer. Du kan tacka iPhone för att starta den här trenden, men vågen av "mobiler" -platser sprider sig som ett bränder ... och kommer på samma gång nästa år, jag är säker på att du kommer att vara svårt att hitta en stor utgivningsplats utan en mobil sällskapssite.

Vad som är snyggt om mobila skärmar är att det tvingar konstruktörer att bli kreativa med en relativt liten mängd fastigheter. Att lyckas i den mobila miljön är inte svårt om du håller några regler i åtanke: Meddelanden måste förmedlas snabbare och med mer effektivitet; Länkar måste utformas för en pekskärmsmiljö. och texten måste bli läsbar (eller åtminstone effektivt zoombar). Här är några exempel på mobila webbplatser:

Du kan läsa mer om mobildesign på vår systersida: Mobile.tutsplus.com!

SubTrend: Tabletified Sites

Precis som 2010 såg en explosion av mobila webbdesigner, kan det förväntas att eftersom konsumenterna hämtar tabletter oftare kommer stora webbplatser att följa med att skapa webbplatser (och appar) som är utformade speciellt för ett medelstort pekskärmsmiljö.


En typografisk explosion

Okej, jag antar att du kunde göra påståendet att "typografi kommer att explodera" varje år ... men 2010 har sett några stora förändringar i den bakomliggande tekniken som faktiskt gör denna påstående legitim. För det första är den enorma tillväxten av teckensnittsutbytesteknik under det senaste året och massanvändningen av "teckensnitt som tjänster" där tredjepartsföretag värd typsnitt (och licenser) som konstruktörer kan använda i levande utvecklingsmiljöer. Du kan också säga att designers blir mycket djärvare med typogrpahy också ... med fler och fler mönster som kommer ut på senare tid som suddar linjen mellan print-4design och webbdesign.

Du kan läsa mer om detta hur du navigerar över det stora utbudet av dessa fantastiska nya typografi lösningar här. Låt oss kolla in några exempel (vissa använder typsnitt ersättning, andra använder andra metoder):

SubTrend: Inspirerande webbsidor för design

Det här var allt raseri 2009-2010, men "utskriftsrevolutionen" är levande och bra på nätet, och fler och fler webbplatser är utformade för att efterlikna stora tryckmönster, som tidskrifter, affischer, flyger och mer.


Desktop Application UI Influence

Om jag var en betting man tillbaka 2009 skulle jag ha lagt alla mina pengar i apps ... iPhone apps, Android apps, Apple apps, PC apps, webbapps ... mjukvaran miljön verkar ha gått helt bärsärkat under det senaste året eller två . All denna spänningen över att skapa applikationer har dyktat in i webbdesign stil-lexikonet på ett intressant sätt: var när webben såg ut, liksom en webbplats, kan det i dag ofta se ut som en applikation. Allt från modala fönster, sammanhangsmenyer, OS-inspirerade knappar och mer kommer in i webbdesignmiljön på nya och spännande sätt ... slutresultatet: webbplatser som känns mer användarvänliga och naturliga.


Grid Intensive Layouts

Grid layouter är inte nya 2010 (eller till och med 1980), men webbdesigners börjar bryta sig bort från traditionella webblayouter (sidhuvud, innehållskolumn, sidofält, sidfot) till förmån för mer unika, nätdrivna layouter. Det som började med 960.gs-rörelsen har snabbt spridits till rutnätverk som faktiskt kan anpassa sig till skärmens upplösning.


Massiva bilder

Här är en annan trend som har hänt för mer än bara förra året. Massiva bilder var en gång tabu för webbdesigners, men tack vare bättre bildoptimering, snabbare internetanslutning och smartare inlämningsmetoder kan konstruktörer få mycket på vissa webbplatser genom att trycka bildstorleken till max.

Mer än bara "stora bilder" börjar vi se mer trender mot webbplatser som använder stora illustrativa (och fotografiska) bakgrunder som är en del av den faktiska erfarenheten eftersom de bara är extra konstverk.


Immersive Script Integration (jQuery Sliders, etc.)

Kodade plugins brukade vara en eftertanke i de flesta webbdesigner ... du skulle avsluta en mockup, ersätt sedan en bild med en reglage om du kunde hitta ett bra plugin för det. Nuförtiden kan hela mönster baseras på skript och plugins som gör mer än "lägg till något" till en design ... de kan definiera hela webbplatsens erfarenhet.

Här är bara några exempel på webbplatser som inte bara lägger till skriptinteraktivitet, de gör det till grund för webbplatsen:

Du kan läsa mycket mer om jQuery och andra scriptintegrationstrycker på vår systersida: Net.tutsplus.com!


CSS3 Träffar Mainstream

Om jag hade en dime för varje CSS3 artikel såg jag 2010, skulle jag simma i en pool av dem. Medan CSS3-antagandet fortfarande är ett litet sätt (här är en praktisk länk för att se vilka webbläsare som har antagit vilka delar av CSS3), har designersna inte tvekade att börja använda några av de fantastiska nya funktionerna. Allt från rundade hörn, boxskuggor, glödseffekter, CSS3-animering, @ font-face och mer har börjat dyka upp i mönster överallt. Här är bara några exempel:

Du kan läsa mycket mer om CSS3-tricks på vår systersida: Net.tutsplus.com!


Textur, Textur, Textur

Texturer är inte nya, men som varje år passerar ser vi att det integreras på nya och intressanta sätt. 2010 såg mycket av "subtil noise" -texturen, men mer än någonting börjar vi gå in i en stilfas där fler mönster börjar känna sig "berörbara". Det betyder inte nödvändigtvis att stora, filtunga texturer används ... istället ser vi mer subtila, väl utformade texturer som upprepas naturligt.


Infographic Driven Designs

Jag har alltid varit ett stort fan av infographics, så det är trevligt att vi börjar se dem integreras i webbdesign som mer än bara bilagor. Jag tror att det finns en hel del möjligheter till nya och spännande sätt att infografisk webbplatsintegration, så håll ett öga på dessa mönster under 2011.


Sidor med en enda sida


3D-miljöer

Det här är mer en nyhet än en trend ... 3D-baserade webbplatser är roliga att använda, men är inte helt tillgängliga från vissa webbläsare och enheter. Det sägs att det finns några roliga nya saker som händer i vägen för tredimensionella miljöer, så de är värda att kolla in, även om du inte kommer att se dem på din iPhone när som helst snart)


Social Media Convergence

Den sista trenden som jag kommer att nämna är inte en som kräver mycket i vägen för skärmdumpar ... främst för att skiftet är mer strategi än substans. Medan denna trend har hänt i åratal förefaller det som om saker och ting kommer att gå till huvudet just nu ... och ödet för framtiden för internet kommer att beslutas.

Vad jag pratar om är "social media konvergens", eller snarare mönstret av varumärken och företag som fokuserar sina ansträngningar på sociala medier webbplatser (i stället för sina egna oberoende webbplatser). Istället för enskilda domäner börjar vi se fler och fler företag att flytta till strategier som antingen är baserade på webbplatser som Facebook eller i alla fall integrerar sociala funktioner på ett sätt som är 100% beroende av sociala medier.

... istället för ett internet som består av miljontals olika och unika webbplatser kan vi sluta med en handfull "mega-webbplatser" som alla (enskilda och företagssammanslutna) helt enkelt har en sida på ...

Detta är meningsfullt för ett antal företag; det är mycket lättare att få folk att upptäcka och besöka din Facebook- eller Twitter-sida än det är att få dem att snubbla på (pun intended!) din egen domän (dvs: myownawesomewebsite.com/me). Vinnarna av denna trend är naturligtvis de stora sociala medierna som samlar upp mer och mer trafik. Förlorarna? Tja, om den här trenden fortsätter, kan förlorarna mycket väl vara den som inte hoppa på vagnen ... så istället för ett internet som består av miljontals olika och unika platser, kunde vi hamna med en handfull "mega-webbplatser" att alla (individer och företag lika) bara har en sida på.


Låt diskussionen börja!

Okej, så jag har just slagit toppen av isberget för alla de fantastiska trenderna som händer 2010, och jag är den första som erkänner att jag är säker på att jag saknat något. Skicka in dina kommentarer, tankar, trender och allt annat i kommentarfältet och jag tar några riktigt bra kommentarer med när det är dags att redigera det här inlägget senare!

Glad 2011!