15 webbdesigntrender att se upp för 2012

Hittills har år 2011 kommit över några fantastiska förändringar i design och internetteknik. Webbutveckling har blivit ett mycket mjukare ämne för att hoppa in i lärandet, för att inte tala om de otaliga open source-bibliotek som är användbara för att effektivisera processen. Och ändå verkar det globala designgemenskapen långt ifrån att kasta i handduken.

Jag vill presentera 15 idéer som har växt mycket snabbt under det gångna året. Dessa trender omfattar webb- och grafikdesigntekniker som sannolikt kommer att spela en stor roll för att gå in i 2012. Du har nog sett några av dessa representerade i många av dina favoritplatser online.

Tack och lov är metoderna för att genomföra dessa funktioner lättare att förstå och mycket smalare i koden.

1. Responsive Interface Design

Den genomsnittliga användarens erfarenhet är möjligen den viktigaste aspekten att tänka på vid utformningen av en webbplats. Du vill att sidelementen ska reagera snabbt på tangentbord / musingång och uppträda som förväntat. Några exempel kan inkludera sidoflystningsmenyer, rullgardinsmenyer och popup-fönster.

Inklusive kända JavaScript-bibliotek som MooTools och jQuery har det blivit mycket lättare att animera dessa funktioner och ännu mer. De flesta moderna webbläsare stöder denna kod och graderar även graciöst när skript inte är tillgängliga. I slutändan vill du få användaren att känna sig bekväm när man interagerar med var som helst i designen.

På samma sätt bör du beakta formulärinsats och datakontroll. På många registreringssidor får du små svar när du arbetar via varje inmatningsområde. Du kan automatisera kontrollen av giltiga e-postadresser, duplicera användarnamn och till och med dubbelkontrollera lösenordsinmatningar. Detta sparar tid på användarens slut och ger en praktisk guide under hela registreringsprocessen.

2. Pekskärms mobila enheter

Under de senaste åren har det blivit uppenbart att smartphones får stöd bland även icke-tekniska entusiaster. Men först 2011 har vi sett en explosion av mobila webbplatser och mobilspecifika mallar.

Populariteten hos iPhone och iPad-enheter tillsammans med Android-telefoner innebär att du kommer att få besökare att interagera fullt ut med dina sidor genom att använda kommandon. Detta måste bli ett realistiskt övervägande med varje designmockup. Trender i mobil webbdesign har visat att byggandet av ett helt separat mobiltema ger ofta de bästa resultaten. På så sätt kan du hålla allt dynamiskt innehåll på plats i din huvudlayout medan du serverar en slimmad version av webbplatsen till mobilanvändare.

3. Ton Freebies!

Vem kan säga att de ärligt talar inte om gratis nedladdningar? Webbdesigners har delat innehållet på nätet i många år, men det har nyligen blivit en mycket populär trend bland digitala artister. Det har funnits några samhällen som byggdes specifikt kring att erbjuda gratis nedladdningar för webb- och grafiska designers.

Två av mina personliga favoriter är Download PSD och Designmoo, som båda uppdateras ofta av medlemmar av högsta kvalitet. Dessutom har Hongkiat Freebies arkiv massor av söta godsaker att kolla in. I någon tid innan det bokstavligen aldrig varit så enkelt att ladda ner gratis webbgränssnitt, layouter, logotyper, banners och praktiskt taget alla andra typer av PSD / AI-filer!

Några snygga nedladdningar

Nedan är bara några fina freebies att checka ut från tidigare 2011. Och om du tror att denna lista har några bra filer, vänta bara tills 2012 rullar runt!

Mini Web UI-uppsättning

Dark Mini Music Player

Glida Tags

Dark Photo Slider

Sökrutor

Logga in / Signin Form

Logga in Modal Box

Rengör loggningsformuläret

Prissättningstabeller

Minimallaststänger

Bifogad popup-fil

4. HTML5 och CSS3 standarder

Båda dessa nya designarketyper har ackumulerat ett ständigt växande efter hela 2011. Semantiska webbdesigners har väntat på år för att churn out CSS-only mönster som ger avrundade hörn och faller skuggor. Dessutom har W3C gjort en hel del framsteg i att skaffa stöd från de mest populära webbläsarna.

Jag kan bara se bra saker för framtiden för HTML5 / CSS3 webbutveckling. Front-end-designers är ofta förbisedda i dagens fält, men de tjänar så stor vikt för hela sammansättningsprocessen. Försök att inte klämma in dig själv i någon uppsättning "etikett" baserat på de tekniker du känner och övar dagligen. Vi erbjuder en nybörjarens vägledande guide till HTML5 / CSS3-kodning om du känner behovet av att komma ikapp.

Att hålla fast vid dessa nya standarder kommer också att göra att utvecklas i JavaScript och jQuery bara så mycket lättare. Utvecklare har redan publicerat och delat deras HTML5 / CSS3-projektkod online, och om det fortsätter kommer vi säkert att märka mycket mer av detta till nästa år.

5. Band och banderoller

Även om denna designteknik inte är exakt “ny” det bröt aldrig riktigt igenom vanliga fram till nyligen. Du har nog sett exempel på hörnband, bannernavigationsstänger och små band märken. Dessa trender har sannolikt exploderat på grund av den massiva ackumuleringen av detaljerade handledning som kan hittas via Google.

Webbdesigners är mer kompetenta idag för att starta egna bloggar för att dela information. Nu kan enkla tekniker enkelt överföras mellan designers för att kopiera de mest populära effekterna. Det finns även gratis PSD-filer du kan ladda ner för att spara dig själv.

6. Premium WordPress-teman

Den slutliga versionen av WordPress 3.0 inkluderade en mängd långlängda funktioner som anpassade inläggstyper och unika artikelbilder. Ändå kommer de djupaste förändringarna jag har sett från WordPress utvecklingsbutiker som specialiserat sig på premium WP-teman.

När du köper ett sådant tema är installationsprocessen liknande alla andra. Men det är nu möjligt att inkludera anpassad plugin-funktionalitet, barnteman, nya adminmenyer och en hel massa andra funktioner direkt från temat! WooThemes, ElegantThemes och Rocket Themes är få märken som står ut för mig framför allt resten. Deras kvalitet är oklanderlig och jag känner att deras utvecklare går över och över för att skapa de bästa mallarna och de mest intuitiva adminmenyerna.

Gå till 2012 Jag kan bara föreställa mig att WordPress blir ännu enklare att använda. Det innebär att fler högkvalitativa teman ska släppas och fler fantastiska bloggar ska lanseras.

7. Online Magazines

När vi talar om WordPress-teman borde vi också ta fram den snabbt antagna framgången för online-tidningar. Dessa webbplatser är inte så annorlunda från alla generiska WordPress-bloggar bortsett från den allmänna strukturen och sidlayouten. Du kan upptäcka dessa större mags genom den rena presentationen av deras hemsida och samling av författare som skriver för webbplatsen.

Som tidningar börjar flytta på nätet kommer de att bli en inkomstkälla för många författare. Beviljas ett ämne som "webbdesign" riktar sig till en mindre nisch än, säger spel eller ekonomi. Men det faktum att vi ser mer designtidskrifter på nätet än utskrift, visar att världen kan vara på väg under de kommande åren.

8. Easy Drop Shadows

Som en fasett av CSS3 är det nu enklare än någonsin för designers att implementera en droppskugga någonstans på sidan. Boxtext och box-stilelement har fått respektive egenskaper för att göra tydliga skuggeffekter.

Textskuggsyntaxen är mycket lätt att memorera och följer med som boxskugga. Med bilder som nu är onödiga för att göra dessa effekter kan webbutvecklare fokusera på att utöka dessa grundläggande idéer ytterligare.

9. Dynamisk typografi

Teckensnitt är en stor del av sfären som omfattar webbdesigntradition. De mest anmärkningsvärda typsnitt som Arial, Helvetica, Georgia och Trebuchet MS har funnits i flera år. Även om de fortsätter att tjäna ett djupt syfte i webbstandarder, finns det gott om alternativa alternativ för avancerad webbsida typografi.

Typekit till exempel kräver bara att ett par rader kod ska ingå i ditt dokumenthuvud. Därefter kan du ange vilka typsnitt som ska inkluderas och lägga till dem i din CSS. Det bästa med denna teknik är att det förlitar sig mest på JavaScript, så slutanvändaren behöver inte ha teckensnitt installerade.

Ett annat alternativ är Google Web Fonts som fungerar på liknande sätt som Typekit. Jag rekommenderar intresserade designers att kolla in CSS3s @ font-face-mediafråga, eftersom du får mycket mer kreativitet. Denna kod kan användas för att importera en .ttf eller .otf typsnitt fil från din webbserver och inkludera det som en användbar typsnitt typsnitt! Med så många alternativa system som används för att bygga dynamiska teckensnitt förväntar jag mig 2012 att hålla en överskott av innovations- och designtalanger på detta område.

10. Bildgalleri Bildspel

Med den efterföljande populariteten hos jQuery har jag upptäckt att fler och fler bildspelsshow släppts i webblayouter. Gallerier är perfekta för att visa en snabb glimt av innehållet på innehållet på innehållet. Det här kan vara en uppsättning portföljen poster, fotografier, blogginlägg med featured bilder, demo skärmdumpar, etc..

När du tänker på de många unika glidande och blekna animationerna har det aldrig varit lättare att konstruera ett snabbt bildspel för din hemsida. Jag är övertygad om att 2012 kommer att se en uppgång i dessa trender och inte bara mellan designers. Online webbapplikationer och mjukvaruföretag har använt bildspel som guidade handledning för att visa skärmdumpar och unika funktioner.

11. Modala popuplådor

Jag känner att de modala lådorna fortfarande är ganska nya på Internet, eftersom de har förekommit i skrivbordsprogram och mobilappar i många år. Syftet med ett modalfönster är att erbjuda boxinnehåll (till exempel användarregistrering eller inloggning) ovanpå den aktuella sidan utan att ladda in på en ny.

Många av open source-bildgallerierna använder en typ av ljusboksseffekt där bakgrunden blir mörkare än popup-rutan. Jag gillar verkligen den här funktionen när jag ser den, även om den ännu inte har antagits av många. Och även om modalboxar är sexiga och slanka, kan de också vara mycket svåra att koda och fungera ordentligt.

För att få idéer till dina egna webbplatser kolla in några av de mer populära sociala nyhetsdelarna. Reddit och Digg är de första två som kommer att komma ihåg eftersom de båda har registret / inloggning modala lådor med en typisk layout. Dessutom ger användargränssnittets effekter för Google+ en stor mängd modalfunktionalitet.

12. Inspirerande listor

Samlingar av listobjekt har dykt upp sedan de allra första dagarna av webbdesign. När vi flyttade in i det nya århundradet började designers använda HTML-beställda och oordnade listor till husnavigationsmenyer. Men nuförtiden kan och används listor för mycket mer.

I de flesta bloggens temaer finner jag att hela sidofältet är laddat med listor! För att inte tala om designers som har skapat fantastiska CSS-stilar för listor i deras artikelposter. Vi omfattade inspirerande liststilar i ett annat inlägg tidigare i år, vilket kan ge dig lite mer insikt i frågan. Ser fram emot 2012 förväntar jag mig några riktigt kreativa exempel, möjligen i nivå med Flowapps anpassade layout för uppgifter och till-dos.

13. Genererade bildminor

I webbuniverset kan vi hålla med om att innehållet är kung. Men de flesta designers kommer också överens om att en sida med tom text blir tråkig riktigt snabbt. Bilder kan lägga till extra krydda om du vet hur man sprinklar dem försiktigt. En sådan metod använder dynamiska miniatyrer för att ge förhandsgranskningar för varje sida eller artikel.

Bloggar idag fortsätter att anta den presenterade bildutvecklingen, varför varför inte använda genererade miniatyrer i ditt tema också? Dessa drar ofta min uppmärksamhet mot artikelrubriken och hjälper till att bryta upp en sida full av textlänkar.

Som ett annat exempel tillhandahåller Dribbble ett helt galleri med miniatyrbilder för varje designskott. I en sådan tabell i radstil är det super lätt att få en glimt av varje miniatyr och bläddra igenom för att hitta det du letar efter. Denna taktik har visat sig fånga uppmärksamheten hos hela designgemenskapen! Er, åtminstone medlemmarna av Dribbble i bästa fall. Jag kan bara förvänta mig att 2012 kommer att se ytterligare ansträngningar av dessa idéer som bygger på sådana exempel från det förflutna.

14. Överdimensionerade ikoner

Denna unika trend semi-härrör från populariteten av Mac OS X ikon design. Som programmerare började starta webbplatser för sina Mac-applikationer har vi alltför ofta sett de enorma storlekarna representerade i branding. Följaktligen har denna trend tagits upp genom iOS-utvecklare och ligger nu bekvämt i modern designkultur.

Det är svårt att förutse hur dessa trender blir rättvisa när vi flyttar in 2012. Å ena sidan kan dessa ikoner vara klumpiga och ta upp mer utrymme än nödvändigt. Ändå är vi inte ens nära att träffa en brist på iOS / OSX-appar och designers kollar fortfarande ut pixel-perfekta ikonspecifikationer. För att inte tala om att webbdesigners nu innehåller överdimensionerade ikoner inom nästan vilken sida branding! Det är ett bra sätt att följa din besökares direkta uppmärksamhet och skapa ett namn för ditt företag.

15. Överdrivna hyperlänkar

Ankarlänkar är säkerligen inom de fem viktigaste elementen på en webbplats. Dessa har uppenbarligen kommit långt sedan 1990-talet och populära designtrender har bara växit exponentiellt. Det verkar som om vi flyttar in i en era där överdriven design har företräde.

Kolla in några av länksexemplen från Patterntap för att se om någon hoppar ut och fångar ditt öga. Det finns så många otroliga idéer för hyperlänkdesign, både i standard- och svävareffekter. CSS3 rundade hörn, textskuggor och anpassade typfamiljer lägger till ännu fler bra idéer i mixen! Ett av mina favoritexemplar är från SimpleBits som använder en kort dynamisk animering på var och en av sina permalinkar för blogginmatning.

Slutsats

Dessa idéer är bara några av de mer populära trenderna som jag har märkt att få företräde under 2011. Stor webbdesign handlar alltid om fokus och håller användarnas avsikter som högsta prioritet. Det är osannolikt att dessa filosofier skiljer sig från och med 2012, men hur vi bygger layouter och presenterar data är alltid i förändring. Låt oss veta dina tankar eller frågor i kommentarfältet.