December är här och det verkar som om vi äntligen sätter upp 2011. Det har varit ett år fyllt med nya och spännande framsidor på webben. CSS3, HTML5 och responsiv design var högst upp i de mest diskuterade ämnena. Vi markerar också övergången av de gamla vägarna. Flash, Silverlight och liknande proprietära plugins fick ett helt utfall under 2011, en som de aldrig får återhämta sig från.
För att avsluta året med en informativ retrospektiv har vi skurat på nätet på jakt efter mönster och trender som framkom eller blev allt populärare under hela 2011. Följ med när vi undersöker över femtio webbplatser i ett försök att upptäcka liknande tricks och teman. Jag garanterar att det blir svårt att läsa utan att spotta några trender som du hoppade på i dina egna projekt i år!
Top Trend: Responsive Design
Under 2010 myntade Ethan Marcotte termen Responsiv design och skrev en upplysande och övertygande artikel om den på en lista. I mitten av 2011 hade Responsive Design helt tagit bort som den hetaste nya trenden i webbdesign.
Det här är inte bara stilfad som de andra på listan, det är ett nytt tillvägagångssätt för att skapa innehåll på webben som syftar till att skapa bästa möjliga upplevelse för det maximala antalet enheter. Medan vissa designers vågar den här ideen som extra arbete, går ett allt växande antal så långt som att säga att om din webbplats inte svarar, gör du det fel.
Här på Design Shack har vi inte varit någon främling till ämnet av lyhörd design i år, här är några av de artiklar som vi har publicerat om ämnet:
- 20 Fantastiska exempel på att använda mediafrågor för Responsive Web Design
- Praktiska design överväganden för Responsive Sites
- Hur man bygger en responsiv Frankenstein Framework med mindre
Jag kunde enkelt ge dig över hundra exempel på lyhörda mönster som har skurit upp i år, men många andra har redan jobbat hårt i flera månader för att samla sådana samlingar. Mitt nuvarande favoritmottagliga designgalleri är Media Queries, som har över 200 exempel!
Responsiv design utmärker sig definitivt som de design trend 2011, men det finns några andra, mycket mindre trender som är värda att ta en titt på också. Följande representerar några som jag har märkt.
Streckade linjer
Dashed linjer fick ökad uppmärksamhet från designers 2011. Även om det ibland är rakt, är det mer typiska användningsfallet en slingrande, meanderande väg som drar din uppmärksamhet och leder den där designern vill att du ska gå.
Jag har nämnt denna trend i flera artiklar i år som ett bra sätt att uppnå likhet i ordning i en annorlunda organisk design. Det är det perfekta sättet att förvandla kaos till en lätt följbar tankegång.
Founders Fund
ja!
Boo Bebe
Quartier Vier
AskLela.org
cirklar
Jag tvekar att nämna den här helt enkelt för att jag inte är säker på att du någonsin kan hänvisa till en grundläggande form som en designtendens. Trots allt har cirklar alltid varit närvarande i alla typer av design och kommer alltid att vara.
Ändå märkte jag definitivt en ökning av användningen av cirklar som primära designelement. Det är mycket uppenbart att många av designerna nedan avsiktligt valde cirklar som kärnpunkt i deras tema och byggde upp den enkla men eleganta ideen. Resultatet är ofta ganska organiskt i naturen, men som du kan se nedan är flera av mönster fortfarande ganska strukturerade och använder cirklar ordnade i en rak linje helt enkelt som ett alternativ till den gamla gammala rektangelminiaturen.
Carnette
Lisi Design
Pistaschissning
TaosPuso Foundation
Engelska WorkshopLanguage Learning
Air Protect
Ag? Ncia iSee Interactive Group
Avkoda
Elegant design
Rakesh
Jag är ZAM
I min bubbla
Ren, sofistikerad Retro-typ
Jag börjar tänka att retro är en trend som aldrig kommer att dö. Vi ser alltid tillbaka på designstilar från svunna epoker med intresse och nostalgi. Den riktigt intressanta uppenbarelsen är dock att moderna och retro designstilar faktiskt utvecklas tillsammans.
Under årens gång involverade retrodesign och specifikt typografi en mycket grungy, bekymrad utseende som vad du förväntar dig att se på en Old Navy-t-shirt. Men som ren började minimal design ta tag i modern design, och retro design gjorde ett liknande steg i sofistikering. Dessa dagar retro typografi är stilren och ren utan störande. Skuggor är nästan alltid närvarande och helt oskarpa, många består av diagonala linjer eller något annat enkelt mönster i motsats till en fast färg.
Big Bite Creative
Beerworks
Urbanoff
Noltedesign
Ribbons
Det enskilt viktigaste designelementet 2011 måste vara det vertikala hängande bandet. Den här saken dykade upp överallt som ett snyggt integrerat sätt att hålla en logotyp, en ikon eller en del text samtidigt som den hjälper till att sticka ut ur bakgrunden.
Den typiska formen har två trekantiga punkter längst ner, men designers har experimenterat med alla slags bandmetaforer. Ett exempel nedan tar även en välbekant bandform och ger den en oväntad vridning genom att vrida den i en skjortficka.
Ändra Nation
GiveBeyond.Me
Tao gemenskapen
Red Bowl Challenge
Marisco Gallego a Domicilio
Ladda upp 2012 av PuddleDrop
DigitalSafe
Anhalter des Jahres 2011
Goatee Joe
Jopp
Söndag bästa webbplatser
HarryFord
Kök Sink Studios
Tre saker
Varje designer vet att tre är ett magiskt nummer och det var mycket tydligt i webbdesign i år. En mycket populär layoutteknik som du ser om och om igen använder tre framträdande avsnitt eller objekt för att förmedla en process, en lista med funktioner eller annat begrepp.
Jag gillar verkligen den här trenden eftersom den tvingar designer att förenkla informationen som presenteras för användaren och dela upp den i några lättmältbara bitar. Resultatet är ofta en mycket attraktiv sida som verkar både informativ och välbalanserad.
Tabspresso
Trähus
Shady Acres
Sellfy.com
Curled / Folded Paper
Fallskuggan har utvecklats. Det här designtricket använder en enkel illusion av en krökt skugga för att göra det annars platta objektet ovanför det ser ut som krökt papper. Det är en så trolig liten lögn att även när du vet vad som händer är det svårt att få dina ögon att se vad som verkligen är en rak kant. Skuggan gör din hjärna omedelbart en kurva, oavsett hur rakt du vet att den ska vara.
Det är en lätt effekt att dra av i antingen Photoshop eller till och med CSS. Här är några sidor som använder denna trend effektivt:
Literacy2030
Ändringar kvartalsvis
Greenjob
Borderless Grids
En annan ökande visuell trend är att gränser eller marginaler försvinner på ett bildruta. Historiskt sett har vi oftast inte bildat bilder i ett snyggt räckvidd men idag är det ganska populärt att helt enkelt klämma ihop dem alla tillsammans.
Jag gillar verkligen det här utseendet eftersom det ger de separata bilderna en mycket integrerad känsla. Det är ett exempel på synergi på jobbet där hela är något större än summan av delarna.
Fuzzco
Ignacio Macri
CARLOS5TO
ROA Produktion
Diagonal Design
Vår slutliga designtendens är framväxten av ganska kaotiska snygga mönster som kraftigt hävdar diagonala linjer. Förväntas att se denna design trend fortsätt till 2012. Varför? Eftersom den representerar en skarp vändning från de rena, kraftigt strukturerade, minimala mönster som har genomträngt webbdesign landskapet de senaste åren.
Ser tillbaka genom historien kan du tydligt se att designtrenderna är reaktiva. Något blir coolt eftersom det är annorlunda än normen, då blir det så populärt att det är normen. Det som var en gång upprorisk är nu vanligt, så någon kommer upp med ett svar som representerar en tydlig avgång. Till exempel uppstod den minsta krama som jag just nämnde som ett svar på den alltför galna, röriga och färgstarka designen på 1990-talet (se: Saved By the Bell). Den nuvarande diagonala trenden hakar tillbaka till dessa dagar samtidigt som den upprätthåller en attraktivt sofistikerad känsla.
Bleep-Radio
Piropixel
Kikk Festival 2011
David Kopec
Marshes Shopping Center
Wixel
Designer Gleb
Vad missade vi?
Detta representerar bara en handfull av de många populära webbdesigntrenderna under 2011. Nu är det din tur att hjälpa till. Lämna en kommentar nedan och berätta om några trender som du märkte eller ens deltagit i under året.
Vilka trender var din favorit? Vilket hatade du? Om möjligt, lämna en länk och visa oss ett exempel!