15 webdesigntendenser at holde øje med i 2012

Hidtil har året 2011 ført til nogle fantastiske ændringer i design og internetteknologi. Webudvikling er blevet et meget glattere emne for at hoppe ind i læring, for ikke at nævne de utallige open source-biblioteker, der er nyttige til strømlinning af processen. Og alligevel ser det ud til, at det globale designfællesskab er langt fra at smide i håndklædet.

Jeg vil introducere 15 ideer, der er vokset meget hurtigt i løbet af det sidste år. Disse tendenser omfatter web- og grafikdesignteknikker, der sandsynligvis vil spille en stor rolle i 2012. Du har sikkert set et par af disse repræsenteret i mange af dine yndlingssteder online.

Heldigvis metoderne til at gennemføre disse funktioner bliver lettere at forstå og meget slankere i kode.

1. Responsive Interface Design

Den gennemsnitlige brugers oplevelse er muligvis det vigtigste aspekt at overveje, når du designer en hjemmeside. Du vil have sideelementer til at reagere hurtigt på tastatur / mus input og opføre sig som forventet. Nogle eksempler kan omfatte sideflyve-menuer, drop-down-bokse og popup-vinduer.

Herunder kendte JavaScript-biblioteker som MooTools og jQuery, er det blevet meget nemmere at animere disse funktioner og endnu mere. De fleste moderne browsere understøtter denne kode og endda graciøst nedbrydes, når scriptsne ikke er tilgængelige. I sidste ende vil du gøre brugeren opmærksom, når han interagerer med hvor som helst i designet.

Ligeledes bør du tage hensyn til formindgang og datakontrol. På mange registreringssider får du små svar, mens du arbejder gennem hvert indtastningsområde. Du kan automatisere kontrol af gyldige e-mail-adresser, duplikere brugernavne og endda dobbelttjekke adgangskodeindgange. Dette sparer tid på brugerens ende og giver en praktisk vejledning i hele tilmeldingsprocessen.

2. Touchscreen Mobile Devices

I de sidste par år er det blevet tydeligt, at smartphones får støtte blandt selv ikke-tech entusiaster. Men først siden 2011 har vi set en eksplosion af mobile websteder og mobilspecifikke skabeloner.

Populariteten af ​​iPhone og iPad-enheder sammen med Android-drevne telefoner betyder, at du vil få besøgende til at interagere fuldt ud med dine sider gennem berøringskommandoer. Dette skal blive en realistisk overvejelse med alle designmockup. Udviklingen i mobilwebdesign har vist, at opbygning af et helt separat mobiltema ofte giver de bedste resultater. På denne måde kan du holde alt det dynamiske indhold på plads på dit hovedlayout, mens du serverer en slank version af webstedet til mobilbrugere.

3. tons freebies!

Hvem kan sige, at de ærligt ikke nyder gratis downloads? Webdesignere har delet deres indhold online i årevis, men først for nylig er det blevet en meget populær trend blandt digitale kunstnere. Der har været et par lokalsamfund bygget specifikt omkring at tilbyde gratis downloads til web- og grafiske designere.

To af mine personlige favoritter er Download PSD og Designmoo, som begge opdateres ofte af topkvalitetsmedlemmer. Derudover har Hongkiat Freebies-arkivet masser af søde goodies at tjekke ud. I en hvilken som helst tid før det har bogstaveligt talt aldrig været så nemt at downloade gratis webgrænseflader, layouter, logoer, bannere og stort set enhver anden type PSD / AI-fil!

Nogle flotte downloads

Nedenfor er blot nogle få kølige freebies at tjekke ud fra tidligere i 2011. Og hvis du tror, ​​at denne liste har nogle gode filer, skal du bare vente til 2012 ruller rundt!

Mini Web UI-sæt

Dark Mini Music Player

Sliding Tags

Dark Photo Slider

Søg bokse

Log ind / Signin Formular

Login Modal Box

Rengør login formular

Prissætningstabeller

Minimal Loading Bars

Vedhæftning pop-up

4. HTML5 og CSS3 standarder

Begge disse nye designarketyper har akkumuleret et stadigt voksende efter i løbet af 2011. Semantiske webdesignere har ventet år på at kaste ud CSS-only designs, der giver afrundede hjørner og drop shadows. Derudover har W3C gjort en masse fremskridt i at skaffe støtte fra de mest populære browsere.

Jeg kan kun se gode ting til fremtiden for HTML5 / CSS3 webudvikling. Front-end designere overses ofte i dagens felt, men de tjener så stor betydning for hele sammensætningen. Prøv ikke at presse dig ind i et sæt 'label' baseret på de teknikker du kender og praktiserer dagligt. Vi tilbyder en nybegynders vejledning til HTML5 / CSS3-kodning, hvis du føler behov for at indhente.

Sticking til disse nye standarder vil også gøre udviklingen i JavaScript og jQuery bare så meget lettere. Udviklere har allerede publiceret og delet deres HTML5 / CSS3-projektkode online, og hvis tingene fortsætter, vil vi helt sikkert se meget mere af dette i næste år.

5. Bånd og bannere

Selvom denne design teknik ikke er nøjagtigt “ny” det har aldrig virkelig brækket gennem mainstream indtil for nylig. Du har sikkert set eksempler på hjørnebånd, bannernavigationsstænger og små båndmærker. Disse tendenser har sandsynligvis eksploderet på grund af den massive akkumulering af detaljerede vejledninger, som kan findes gennem Google.

Webdesignere er mere kompetente i dag med at lancere deres egne blogs for at dele information. Nu kan enkle teknikker nemt overføres mellem designere til at duplikere de mest populære effekter. Der er endda gratis PSD'er, du kan downloade for at spare dig selv.

6. Premium WordPress Temaer

Den endelige udgivelse af WordPress 3.0 omfattede en lang række ventede funktioner, såsom brugerdefinerede posttyper og unikke artikelbilleder. Men de mest dybtgående ændringer, jeg har set, kommer fra WordPress udviklingsbutikker, der specialiserer sig i premium WP temaer.

Når du har købt et sådant tema, svarer installationsprocessen til alle andre. Men det er nu muligt at inkludere brugerdefineret plug-in-funktionalitet, børnetemaer, nye adminmenuer og en hel masse andre funktioner lige indenfor temaet! WooThemes, ElegantThemes og Rocket Themes er få mærker, der skiller mig ud over resten. Deres kvalitet er upåklagelig, og jeg føler, at deres udviklere går over og ud for at oprette de bedste skabeloner og mest intuitive adminmenuer.

Gå ind i 2012 Jeg kan kun forestille mig, at WordPress bliver endnu nemmere at bruge. Det betyder, at flere højkvalitetsemner bliver frigivet, og flere fantastiske blogs bliver lanceret.

7. Online tidsskrifter

Når vi taler om WordPress-temaer, bør vi også fremhæve den hurtigt vedtagne succes af online magasiner. Disse websteder er ikke så forskellige fra enhver generisk WordPress-blog, bortset fra den generelle struktur og sidelayout. Du kan få øje på disse større mags ved den rene præsentation af deres hjemmeside og samling af forfattere, der skriver til webstedet.

Som magasiner begynder at flytte online, bliver de en kilde til indkomst for mange forfattere. Giver et emne som "webdesign" mål for en mindre niche end for eksempel spil eller økonomi. Men det faktum, at vi ser mere designmagasiner online end print, viser, hvor verden kan komme på vej i de kommende år.

8. Easy Drop Shadows

Som en facet af CSS3 er det nu lettere end nogensinde for designere at implementere en dropshadow overalt på siden. Boksekst og boks-stilelementer har fået respektive egenskaber til at gøre klare skyggeffekter.

Tekstskygnsyntaxen er meget nem at huske og følger med som bokseskygge. Med billeder nu unødvendige i at gøre disse effekter, kan webudviklere fokusere på at udvide disse grundlæggende ideer yderligere.

9. Dynamisk typografi

Skrifttyper er en stor del af kuglen, der omfatter webdesigntradition. De mest bemærkelsesværdige skrifttyper, herunder Arial, Helvetica, Georgia og Trebuchet MS har eksisteret i årevis. Selvom de fortsat tjener et dybt formål i webstandarder, er der masser af alternative muligheder for avanceret webside typografi.

Typekit for eksempel kræver kun, at et par linjer kode indgår i dit dokumenthoved. Herefter kan du angive, hvilke skrifttypenavne der skal medtages og tilføjes til din CSS. Det bedste ved denne teknik er, at det afhænger mest af JavaScript, så slutbrugeren er ikke forpligtet til at have skrifttyperne installeret.

Et andet alternativ er Google Web Fonts, som opfører sig på samme måde som Typekit. Jeg anbefaler interesserede designere at tjekke CSS3s @ font-face medie forespørgsel, da du får meget mere kreativitet. Denne kode kan bruges til at importere en .ttf eller .OHF font fil fra din webserver og inkludere det som en brugbar stilark skrifttype! Med så mange alternative systemer, der bruges til bygning af dynamiske skrifttyper, forventer jeg 2012 at holde en bølge af innovation og design talent på dette område.

10. Billedgalleri Diasshow

Med den efterfølgende popularitet af jQuery har jeg oplevet, at flere og flere billedfremvisning bliver droppet i weblayout. Gallerier er perfekte til at demonstrere et hurtigt glimt af indholdet på indersiden. Dette kan være et sæt porteføljeposter, fotografier, blogindlæg med fremhævede billeder, demo skærmbilleder osv.

Når du overvejer de mange unikke glidende og fading animationer, har det aldrig været nemmere at oprette et hurtigt lysbilledshow til din startside. Jeg er overbevist om, at 2012 vil se en uptick i disse tendenser, og ikke kun mellem designere. Online webapplikationer og softwarefirmaer har brugt diasshow som vejledninger til at vise skærmbilleder og unikke funktioner.

11. Modal popup bokse

Jeg føler, at modalbokse stadig er ret nye til internettet, da de i flere år har været i desktop-software og mobile apps. Formålet med et modalt vindue er at tilbyde boksindhold (f.eks. Brugerregistrering eller login) oven på den aktuelle side uden at læse på en ny.

Mange af open source-billedgalleriets scripts bruger en type lysbokseffekt, hvor baggrunden falder mørkere end popup-boksen. Jeg nyder virkelig denne funktion, når jeg ser det, selv om det endnu ikke er vedtaget af mange. Og selvom modalbokse er sexede og slanke, kan de også være meget vanskelige at kode og få det til at fungere korrekt.

For at få ideer til dine egne hjemmesider, skal du tjekke nogle af de mere populære sociale nyhedsdelingsgrupper. Reddit og Digg er de to første, der kommer til at tænke, da de begge har registrerings- / loginmodeller med et typisk layout. Derudover har UI-effekterne for Google+ en betydelig mængde modal funktionalitet.

12. Inspirerende lister

Samlinger af listeposter har dukket op siden de meget tidlige dage af webdesign. Da vi flyttede ind i det nye århundrede, begyndte designere at bruge HTML-ordnede og uordnede lister til husnavigationsmenuer. Men i dag kan lister bruges og bruges til meget mere.

I de fleste blog temaer finder jeg hele sidebjælken er fyldt med lister! For ikke at nævne designere, der har lavet fantastiske CSS-stilarter til lister i deres artikelindgange. Vi dækkede inspirerende listestiler i et andet indlæg tidligere i år, hvilket kan give dig mere indblik i sagen. Ser frem til 2012, jeg forventer nogle virkelig kreative eksempler, muligvis på niveau med Flowapps brugerdefinerede layout til opgaver og to-dos.

13. Genererede billedminutter

I webuniverset kan vi være enige om, at indhold er konge. Men de fleste designere vil også være enige om, at en side med tom tekst bliver kedelig rigtig hurtigt. Billeder kan tilføje det ekstra krydderi, hvis du ved, hvordan man sprøjter dem forsigtigt. En sådan metode bruger dynamiske miniaturebilleder til at give forhåndsvisninger for hver side eller artikel.

Blogs i dag fortsætter med at vedtage den fremhævede billedudvikling, så hvorfor ikke anvende genererede miniaturebilleder i dit tema også? Disse trækker ofte min opmærksomhed mod artiklen overskriften og hjælper med at opdele en side fuld af tekstforbindelser.

Som et andet eksempel giver Dribbble et samlet galleri med miniaturer for hvert designskud. I et sådant bordrækkeformat er det super nemt at få et glimt af hver miniature og rulle gennem for at finde det, du leder efter. Denne taktik har vist sig at tage fat på hele design samfundets opmærksomhed! Er, i det mindste medlemmer af Dribbble i bedste fald. Jeg kan kun forvente, at 2012 vil se yderligere anstrengelse af disse ideer ud fra sådanne eksempler fra fortiden.

14. Overordnede ikoner

Denne unikke trend semi-stammer fra populariteten af ​​Mac OS X ikon design. Som programmerere begyndte at lancere hjemmesider til deres Mac applikationer, har vi alt for ofte set de enorme størrelser, der er repræsenteret i branding. Derfor er denne tendens også blevet afhentet gennem iOS-udviklere og hviler nu komfortabelt i moderne designkultur.

Det er svært at forudsige, hvordan disse tendenser vil blive retfærdige, når vi går ind i 2012. På den ene side kan disse ikoner være klumpede og tage mere plads end nødvendigt. Men vi er ikke engang tæt på at ramme en mangel på iOS / OSX apps, og designere udfordrer stadig pixel-perfekte ikonspecifikationer. For ikke at nævne, at webdesignere nu indeholder oversized ikoner inden for næsten enhver side branding! Det er en god måde at nabo din besøgendes direkte opmærksomhed og opbygge et navn til din virksomhed.

15. Overdrevne hyperlinks

Anker links er helt sikkert inden for de fem vigtigste elementer af enhver hjemmeside. Disse har naturligvis kommet langt siden 1990'erne, og populære designtendenser er kun vokset eksponentielt. Det ser ud til at vi bevæger os ind i en æra, hvor overdrevet design har forrang.

Tjek et par af linkeksemplerne fra Patterntap for at se om nogen hopper ud og fanger dit øje. Der er så mange utrolige ideer til hyperlink design, både i standard og hover effekter. CSS3 afrundede hjørner, tekstskygger og brugerdefinerede skrifttypefamilier tilføjer endnu flere gode ideer til blandingen! Et af mine yndlingseksempler er fra SimpleBits, der bruger en kort dynamisk animation på hver af deres permalinks til blogindlæg.

Konklusion

Disse ideer er kun nogle af de mere populære trends, jeg har bemærket, at få forrang i hele 2011. Det store webdesign handler altid om fokus og holder brugerens hensigter højt prioriteret. Det er usandsynligt, at disse filosofier vil variere i 2012, men hvordan vi opbygger layouter og præsenterer data er altid i forandring. Lad os vide dine tanker eller spørgsmål i kommentarområdet.