15 Web Design Trends å se opp for i 2012

Hittil året 2011 har ført til noen fantastiske endringer i design og internett teknologi. Webutvikling har blitt et mye jevnere emne for å hoppe inn i læring, for ikke å nevne de utallige åpen kildebibliotekene som er nyttige for å effektivisere prosessen. Og likevel synes det globale design fellesskapet er langt fra å kaste i håndkleet.

Jeg vil introdusere 15 ideer som har vokst veldig raskt det siste året. Disse trendene omfatter web- og grafikkdesignteknikker som sannsynligvis vil spille en stor rolle i 2012. Du har sikkert sett noen av disse representert gjennom mange av favorittnettene dine online.

Heldigvis er metodene for å implementere disse funksjonene blitt enklere å forstå og mye slankere i kode.

1. Responsive Interface Design

Gjennomsnittlig brukeropplevelse er muligens det viktigste aspektet å vurdere når du designer et nettsted. Du vil at sideelementer skal reagere raskt på tastatur / musinngang og oppfører seg som forventet. Noen eksempler kan inkludere sideutvidelsesmenyer, rullegardiner og popup-vinduer.

Inkludert kjente JavaScript-biblioteker som MooTools og jQuery, har det blitt mye lettere å animere disse funksjonene og enda mer. De fleste moderne nettlesere støtter denne koden og endrer seg grasiøst når skriptene ikke er tilgjengelige. Til syvende og sist vil du gjøre brukeren komfortabel når han samhandler med hvor som helst i designet.

På samme måte bør du ta hensyn til skjemainngang og datakontroll. På mange registreringssidene får du små svar når du arbeider gjennom hvert inntastingsområde. Du kan automatisere å sjekke for gyldige e-postadresser, duplisere brukernavn, og til og med dobbelkjekke passordinnganger. Dette sparer tid på brukerens slutt og gir en nyttig guide gjennom hele registreringsprosessen.

2. Touchscreen Mobile Devices

I de siste par årene har det blitt klart at smarttelefoner får støtte blant selv ikke-teknologiske entusiaster. Men først siden 2011 har vi sett en eksplosjon av mobile nettsteder og mobilspesifikke maler.

Populariteten til iPhone og iPad-enheter sammen med Android-drevne telefoner betyr at du vil få besøkende til å interagere fullt ut med sidene dine gjennom berøringskommandoer. Dette må bli en realistisk vurdering med alle designmockup. Trender i mobilnettdesign har vist at bygging av et helt eget mobiltema ofte gir de beste resultatene. På denne måten kan du holde alt det dynamiske innholdet på plass på hovedoppsettet ditt mens du serverer en slank versjon av nettstedet til mobilbrukere.

3. Ton Freebies!

Hvem kan si at de ærlig ikke nyter gratis nedlastinger? Webdesignere har delt innholdet deres online i mange år, men bare nylig har dette blitt en svært populær trend blant digitale kunstnere. Det har vært noen få samfunn bygget spesielt rundt å tilby gratis nedlastinger for web- og grafiske designere.

To av mine personlige favoritter er Download PSD og Designmoo, som begge oppdateres ofte av toppkvalitetsmedlemmer. I tillegg har Hongkiat Freebies-arkivet mange søte godbiter å sjekke ut. I en hvilken som helst tid før det har bokstavelig talt aldri vært så enkelt å laste ned gratis webgrensesnitt, layouter, logoer, bannere og praktisk talt alle andre typer PSD / AI-filer!

Noen fine nedlastinger

Nedenfor er bare noen få kule freebies å sjekke ut fra tidligere i 2011. Og hvis du tror denne listen har noen flotte filer, bare vent til 2012 ruller rundt!

Mini Web UI Set

Dark Mini Music Player

Sliding Tags

Mørk Photo Slider

Søkebokser

Logg inn / Signin Form

Logg inn Modal Box

Rengjør innloggingsskjema

Prisbord

Minimallastbarer

Vedlegg Pop-up

4. HTML5 og CSS3 standarder

Begge disse nye designarktypene har akkumulert et stadig voksende følge gjennom 2011. Semantiske webdesignere har ventet år å kutte ut CSS-bare design som gir avrundede hjørner og slippe skygger. I tillegg har W3C gjort mye fremgang i å skaffe støtte fra de mest populære nettleserne.

Jeg kan bare se gode ting for fremtiden for HTML5 / CSS3 webutvikling. Front-end designere overses ofte i dagens felt, men de tjener så stor betydning for hele sammensetningsprosessen. Prøv å ikke presse deg inn i et sett 'label' basert på teknikker du kjenner og trener daglig. Vi tilbyr en nybegynners veiledning for HTML5 / CSS3-koding hvis du føler behov for å ta opp.

Å holde fast i disse nye standardene vil også gjøre det enklere å utvikle i JavaScript og jQuery. Utviklere har allerede publisert og distribuert deres HTML5 / CSS3 prosjektkode online, og hvis ting fortsetter, vil vi helt sikkert legge merke til at mye mer av dette går inn i neste år.

5. Bånd og bannere

Selv om denne designteknikken ikke er nøyaktig “ny” det brøt aldri virkelig gjennom mainstream før bare nylig. Du har sikkert sett eksempler på hjørnebånd, bannernavigasjonsstenger og små båndskilt. Disse trendene har sannsynligvis eksplodert på grunn av den massive akkumuleringen av detaljerte opplæringsprogrammer som kan bli funnet gjennom Google.

Webdesignere er mer kompetente i disse dager med å lansere egne blogger for å dele informasjon. Nå kan enkle teknikker enkelt overføres mellom designere for å duplisere de mest populære effektene. Det er til og med gratis PSDer du kan laste ned for å spare deg for innsatsen.

6. Premium WordPress Temaer

Den endelige utgivelsen av WordPress 3.0 inneholdt en rekke lang ventede funksjoner som tilpassede innleggstyper og unike artikkelbilder. Likevel er de dypeste endringene jeg har sett kommer fra WordPress-utviklingsbutikker som spesialiserer seg på premium WP-temaer.

Etter at du har kjøpt et slikt tema, er installasjonsprosessen ligner alle andre. Likevel er det nå mulig å inkludere tilpasset plugin-funksjonalitet, barnemner, nye adminmenyer og en hel rekke andre funksjoner rett fra temaet! WooThemes, ElegantThemes og Rocket Themes er få merker som skiller meg ut over alt. Kvaliteten deres er upåklagelig, og jeg føler at utviklerne går over og over for å lage de beste maler og mest intuitive adminmenyer.

Gå inn i 2012 Jeg kan bare forestille meg at WordPress blir enda enklere å bruke. Dette betyr at flere høykvalitets temaer skal løses, og flere fantastiske blogger skal lanseres.

7. Online Magazines

Når vi snakker om WordPress-temaer, bør vi også ta opp raskt vedtatt suksess av nettblade. Disse nettstedene er ikke så forskjellige fra noen generell WordPress-blogg bortsett fra den generelle strukturen og sidelayout. Du kan få øye på disse større mags ved den rene presentasjonen av hjemmesiden deres, og samling av forfattere som skriver for nettstedet.

Som blader begynner å flytte på nettet, blir de en inntektskilde for mange forfattere. Gitt et emne som "webdesign" retter seg mot en mindre nisje enn å si, spill eller økonomi. Men det faktum at vi ser flere designmagasiner på nettet enn utskrift, viser hvor verden kan være på vei i årene som kommer.

8. Easy Drop Shadows

Som en fasett av CSS3 er det nå enklere enn noensinne for designere å implementere en dråpeskygge hvor som helst på siden. Elementer i boks og element i boks-stil har fått respektive egenskaper for å gjøre skarpe effekter.

Tekstskyggesyntaxen er veldig lett å huske og følger med som bokseskygge. Med bilder som nå er unødvendige for å gi disse effektene, kan webutviklere fokusere på å utvide disse grunnleggende ideene ytterligere.

9. Dynamisk typografi

Skrifter er en stor del av sfæren som omfatter webdesigntradisjon. De mest bemerkelsesverdige skrifttyper, inkludert Arial, Helvetica, Georgia og Trebuchet MS har eksistert i mange år nå. Selv om de fortsetter å tjene en dyp hensikt i webstandarder, er det mange alternativer for avansert webside typografi.

Typekit for eksempel krever bare at et par kodelinjer skal inkluderes i dokumenthodet. Etter dette kan du angi hvilke skriftnavn som skal inkluderes og legge dem til i CSS. Den beste delen av denne teknikken er at den mest bruker JavaScript, så sluttbrukeren er ikke pålagt å ha skrifttypene installert.

Et annet alternativ er Google Web Fonts som oppfører seg på samme måte som Typekit. Jeg anbefaler interesserte designere å sjekke ut CSS3s @ font-face media spørring, da du får mye mer kreativitet. Denne koden kan brukes til å importere en .tTF eller .OTF font fil fra din webserver og inkludere det som en brukbar stilark skrift! Med så mange alternative systemer som brukes til å bygge dynamiske skrifttyper, forventer jeg at 2012 skal holde en oversikt over innovasjon og design talent på dette området.

10. Bildegalleri Lysbildefremvisninger

Med den etterfølgende populariteten til jQuery har jeg oppdaget at flere og flere bildeserier blir falt i weboppsett. Gallerier er perfekte for å demonstrere et raskt innblikk i innholdet på innsidene. Dette kan være et sett med porteføljeoppføringer, fotografier, blogginnlegg med kjente bilder, demo skjermbilder, etc..

Når du ser på de mange unike skyve- og fading-animasjonene, har det aldri vært enklere å lage en rask lysbildefremvisning for hjemmesiden din. Jeg er sikker på at 2012 vil se en uptick i disse trendene, og ikke bare mellom designere. Online webapplikasjoner og programvarefirmaer har brukt lysbildefremvisninger som veilede opplæringsprogrammer for å vise skjermbilder og unike funksjoner.

11. Modal Popup Boxes

Jeg føler at modalbokser fremdeles er ganske nye til Internett, vurderer at de har vist seg i stasjonær programvare og mobilapper i mange år. Formålet med et modalvindu er å tilby boksinnhold (som brukerregistrering eller pålogging) på toppen av gjeldende side uten å laste inn på en ny.

Mange av open source-bildegalleribransjene bruker en type lysboksseffekt der bakgrunnen blir mørkere enn popup-boksen. Jeg liker virkelig denne funksjonen når jeg ser den, selv om den ennå ikke har blitt vedtatt av mange. Og selv om modale bokser er sexy og slanke, kan de også være svært vanskelig å kode og bli ordentlig.

For å få ideer til dine egne nettsteder, sjekk ut noen av de mest populære sosiale nyhetsdelingene. Reddit og Digg er de to første som kommer til å tenke da de begge har register / loggmoduler med et typisk layout. I tillegg har UI-effektene for Google+ en betydelig mengde modal funksjonalitet.

12. Inspirerende lister

Samlinger av listeposter har dukket opp siden de aller første dagene med webdesign. Når vi flyttet inn i det nye århundre, begynte designere å bruke HTML-ordrerte og uordnede lister til husnavigasjonsmenyer. Men i dag kan lister brukes og brukes til mye mer.

I de fleste bloggens temaer finner jeg at hele sidelinjen er lastet med lister! For ikke å nevne designere som har laget fantastiske CSS-stiler for lister i deres artikkeloppføringer. Vi dekket inspirerende listestiler i et annet innlegg tidligere i år, noe som kan gi deg litt mer innsikt i saken. Ser frem til 2012, jeg forventer noen virkelig kreative eksempler, muligens på nivå med Flowapps tilpassede layout for oppgaver og til-dos.

13. Genererte bildeminiatyrer

I webuniverset kan vi være enige om at innholdet er konge. Men de fleste designere vil også være enige om at en side med blank tekst blir kjedelig ekte raskt. Bilder kan legge til det ekstra krydderet hvis du vet hvordan du skal sprute dem forsiktig. En slik metode bruker dynamiske miniatyrer for å gi forhåndsvisninger for hver side eller artikkel.

Blogger i dag fortsetter å vedta den kjente bildetrenden, så hvorfor ikke bruke genererte miniatyrer i temaet ditt også? Disse trekker ofte min oppmerksomhet mot artikkelen overskriften og bidrar til å bryte opp en side full av tekstkoblinger.

Som et annet eksempel gir Dribbble et helt galleri med miniatyrbilder for hvert designbilde. I en slik tabell i rak layout er det super lett å få et glimt av hver miniatyrbilde og bla gjennom for å finne det du leter etter. Denne taktikken har vist seg å få tak i hele designmiljøets oppmerksomhet! Er, i det minste medlemmene av Dribbble i beste fall. Jeg kan bare forvente at 2012 vil se ytterligere anstrengelse av disse ideene som bygger på slike eksempler fra fortiden.

14. Overdimensjonerte ikoner

Denne unike trenden semi-kommer fra populariteten til Mac OS X-ikondesign. Som programmerere begynte å lansere nettsteder for deres Mac-applikasjoner har vi altfor ofte sett de enorme størrelsene som er representert i branding. Følgelig har denne trenden også blitt hentet gjennom iOS-utviklere og hviler nå komfortabelt innenfor moderne designkultur.

Det er vanskelig å forutsi hvordan disse trendene vil bli rettferdige når vi går inn i 2012. På den ene siden kan disse ikonene være klumpete og ta opp mer plass enn nødvendig. Likevel er vi ikke engang nær å treffe en mangel på IOS / OSX-apper, og designere utfordrer fortsatt piksel-perfekte ikonspesifikasjoner. For ikke å nevne at webdesignere er nå inkludert overdimensjonerte ikoner innen omtrent hvilken som helst side branding! Det er en god måte å elske din besøkendes direkte oppmerksomhet og bygge et navn for din bedrift.

15. Overdrivne hyperlinks

Ankerforbindelser er sikkert innenfor de fem viktigste elementene på et hvilket som helst nettsted. Disse har åpenbart kommet langt siden 1990-tallet, og populære designtrender har kun vokst eksponentielt. Det ser ut til at vi beveger oss inn i en epoke hvor overdreven design har forrang.

Ta en titt på noen av koblingseksemplene fra Patterntap for å se om noen hopper ut og fanger øyet. Det er så mange utrolige ideer for hyperkobling, både i standard og hover-effekter. CSS3 avrundede hjørner, tekstskygger og tilpassede fontfamilier legger til enda flere gode ideer i blandingen! Et av mine favoritteksempler er fra SimpleBits, som bruker en kort dynamisk animasjon på hver av deres permalinks for blogginnlegg.

Konklusjon

Disse ideene er bare noen av de mer populære trenderne jeg har lagt merke til, å få prioritet gjennom hele 2011. Flott webdesign handler alltid om fokus og holder brukerens intensjoner som topp prioritet. Det er usannsynlig at disse filosofiene vil variere i 2012, men hvordan vi lager oppsett og presentere data er alltid i endring. Gi oss beskjed om dine tanker eller spørsmål i kommentarområdet.