15 Trends in webdesign om op te letten in 2012

Tot nu toe heeft het jaar 2011 een aantal verbazingwekkende veranderingen in ontwerp en internettechnologie opgeleverd. Webontwikkeling is een veel vloeiender onderwerp geworden om in het leren te springen, om nog maar te zwijgen over de talloze open source-bibliotheken die nuttig zijn bij het stroomlijnen van het proces. En toch lijkt het erop dat de wereldwijde ontwerpgemeenschap allesbehalve de handdoek in de ring gooit.

Ik wil 15 ideeën introduceren die het afgelopen jaar zeer snel gegroeid zijn. Deze trends omvatten web- en grafische ontwerptechnieken die waarschijnlijk een grote rol zullen spelen in de loop van 2012. Je hebt waarschijnlijk een aantal hiervan al op veel van je favoriete sites online gezien.

Gelukkig worden de methoden om deze functies te implementeren steeds begrijpelijker en veel slanker in code.

1. Responsive Interface Design

De ervaring van de gemiddelde gebruiker is mogelijk het belangrijkste aspect bij het ontwerpen van een website. U wilt dat pagina-elementen snel reageren op toetsenbord / muisinvoer en zich gedragen zoals verwacht. Sommige voorbeelden kunnen zij-fly-out-menu's, vervolgkeuzelijsten en pop-upvensters omvatten.

Met inbegrip van beroemde JavaScript-bibliotheken zoals MooTools en jQuery, is het veel gemakkelijker geworden om deze functies en zelfs meer te animeren. De meeste hedendaagse browsers ondersteunen deze code en worden zelfs gracieus verslechterd als de scripts niet beschikbaar zijn. Uiteindelijk wilt u dat de gebruiker zich op zijn gemak voelt bij interactie met om het even waar in het ontwerp.

Evenzo moet u rekening houden met invoer van formulieren en gegevens. Op veel registratiepagina's ontvangt u kleine antwoorden terwijl u door elk invoergebied werkt. U kunt de controle automatiseren op geldige e-mailadressen, dubbele gebruikersnamen en zelfs de wachtwoordinvoer controleren. Dit spaart tijd aan het eind van de gebruiker en biedt een handige gids tijdens het aanmeldproces.

2. Touchscreen mobiele apparaten

In de afgelopen paar jaar is het duidelijk geworden dat smartphones ondersteuning krijgen bij zelfs niet-technische enthousiasten. Maar pas sinds 2011 hebben we een explosie van mobiele sites en mobielspecifieke sjablonen gezien.

De populariteit van iPhone- en iPad-apparaten samen met Android-telefoons betekent dat bezoekers volledig contact hebben met uw pagina's via aanraakopdrachten. Dit moet een realistische overweging worden bij elk ontwerpmodel. Trends in mobiel webdesign hebben aangetoond dat het bouwen van een volledig apart mobiel thema vaak de beste resultaten oplevert. Op deze manier kunt u alle dynamische inhoud op uw hoofdlay-out houden terwijl u een afgeslankte versie van de site naar mobiele gebruikers serveert.

3. Tonnen freebies!

Wie kan zeggen dat ze eerlijk gezegd niet genieten van gratis downloads? Webontwerpers delen hun content al jaren online, maar pas sinds kort is dit een zeer populaire trend geworden onder digitale artiesten. Er zijn een paar community's gebouwd speciaal rond het aanbieden van gratis downloads voor web- en grafische ontwerpers.

Twee van mijn persoonlijke favorieten zijn Download PSD en Designmoo, die beide regelmatig worden bijgewerkt door leden van topkwaliteit. Daarnaast heeft het archief van Hongkiat Freebies genoeg zoete spulletjes om uit te checken. In elk tijdperk daarvoor was het letterlijk nog nooit zo eenvoudig om gratis webinterfaces, lay-outs, logo's, banners en vrijwel elk ander type PSD / AI-bestand te downloaden!

Enkele nette downloads

Hieronder staan ​​enkele coole freebies om eerder in 2011 uit te checken. En als je denkt dat deze lijst geweldige bestanden bevat, wacht je gewoon tot 2012 rondrent.!

Mini Web UI Set

Dark Mini Music Player

Glijdende tags

Donkere fotoschuifregelaar

Zoekvakken

Inloggen / aanmeldingsformulier

Login Modal Box

Schoon aanmeldingsformulier

Prijzen tabellen

Minimale laadstaven

Bijlage Pop-up

4. HTML5 & CSS3-normen

Beide nieuwe ontwerparchetypen hebben in 2011 een steeds groter wordende opvolging gekregen. Semantische webontwerpers wachten al jaren op het ontwerpen van CSS-ontwerpen die afgeronde hoeken en slagschaduwen renderen. Daarnaast heeft de W3C veel vooruitgang geboekt bij het vergaren van ondersteuning van de meest populaire browsers.

Ik zie alleen maar goede dingen voor de toekomst van HTML5 / CSS3-webontwikkeling. Front-endontwerpers worden vaak over het hoofd gezien in het veld van vandaag, maar ze zijn van zo groot belang voor het hele compositieproces. Probeer jezelf niet in een set 'label' te persen op basis van de technieken die je dagelijks kent en beoefent. We bieden een handleiding voor beginners voor HTML5 / CSS3-codering als u de behoefte voelt om deze bij te houden.

Vasthouden aan deze nieuwe standaarden maakt het ontwikkelen van JavaScript en jQuery net zo veel gemakkelijker. Ontwikkelaars hebben hun HTML5 / CSS3-projectcode al online gepubliceerd en gedeeld, en als de zaken aanhouden, zullen we daar volgend jaar heel wat meer van merken.

5. Linten en banners

Hoewel deze ontwerptechniek niet precies is “nieuwe” het heeft tot voor kort nooit echt de mainstream doorbroken. U hebt waarschijnlijk voorbeelden gezien van hoeklinten, bannernavigatiebalken en kleine lintbadges. Deze trends zijn waarschijnlijk geëxplodeerd vanwege de enorme verzameling gedetailleerde tutorials die via Google te vinden zijn.

Webontwerpers zijn tegenwoordig bekwamer in het lanceren van hun eigen blogs om informatie te delen. Nu kunnen eenvoudige technieken eenvoudig tussen ontwerpers worden doorgegeven om de populairste effecten te dupliceren. Er zijn zelfs gratis PSD's die je kunt downloaden om jezelf de moeite te besparen.

6. Premium WordPress-thema's

De laatste versie van WordPress 3.0 bevatte een groot aantal langverwachte functies, zoals aangepaste berichttypen en unieke artikelafbeeldingen. Maar de meest ingrijpende veranderingen die ik heb gezien zijn afkomstig van WordPress ontwikkelingswinkels die gespecialiseerd zijn in premium WP-thema's.

Nadat u een dergelijk thema hebt gekocht, is het installatieproces vergelijkbaar met elk ander thema. Toch is het nu mogelijk om binnen het thema een aangepaste plug-in functionaliteit, kindthema's, nieuwe beheerdersmenu's en een hele reeks andere functies op te nemen! WooThemes, ElegantThemes en Rocket-thema's zijn een paar merken die boven alles uitspringen. Hun kwaliteit is onberispelijk en ik vind dat hun ontwikkelaars er alles aan doen om de beste sjablonen en meest intuïtieve beheerdersmenu's te maken.

Naar 2012 gaan Ik kan me alleen voorstellen dat WordPress nog eenvoudiger in gebruik zal zijn. Dit betekent dat er meer hoogwaardige thema's worden uitgebracht en dat er nog meer geweldige blogs worden uitgebracht.

7. Online-tijdschriften

Sprekend over WordPress-thema's moeten we ook het snel aangenomen succes van online magazines naar voren brengen. Deze websites zijn niet zo verschillend van een generieke WordPress-blog, afgezien van de algemene structuur en de pagina-indeling. Je kunt deze grotere mags herkennen aan de presentatie van hun startpagina en een verzameling auteurs die schrijven voor de site.

Naarmate tijdschriften online komen, zullen ze voor vele schrijvers een bron van inkomsten worden. Toegegeven een onderwerp als 'webdesign' richt zich op een kleinere niche dan bijvoorbeeld gaming of economie. Maar het feit dat we meer designmagazines online dan print zien, laat zien waar de wereld de komende jaren misschien naartoe gaat.

8. Eenvoudig slagschaduwen

Als een facet van CSS3 is het nu eenvoudiger dan ooit voor ontwerpers om overal op de pagina een slagschaduw te implementeren. Box-tekst en box-achtige elementen hebben respectieve eigenschappen gekregen om duidelijke schaduweffecten weer te geven.

De syntaxis van de tekst-schaduw is heel gemakkelijk te onthouden en volgt als doosschaduw. Nu afbeeldingen niet meer nodig zijn om deze effecten weer te geven, kunnen webontwikkelaars zich richten op het verder uitbreiden van deze basisideeën.

9. Dynamische typografie

Lettertypen vormen een groot deel van de sfeer die de webontwerptraditie omvat. De meest opvallende lettertypen, waaronder Arial, Helvetica, Georgia en Trebuchet MS bestaan ​​al jaren. Hoewel ze een diepgaand doel blijven dienen in webstandaarden, zijn er tal van alternatieve opties voor geavanceerde webpagina-typografie.

Typekit vereist bijvoorbeeld slechts een paar coderegels die in uw documentkop moeten worden opgenomen. Hierna kunt u opgeven welke lettertype-namen moeten worden opgenomen en deze toevoegen aan uw CSS. Het beste deel van deze techniek is dat deze voornamelijk op JavaScript is gebaseerd, dus de eindgebruiker hoeft de lettertypen niet te hebben geïnstalleerd.

Een ander alternatief is Google Web Fonts die zich op dezelfde manier als Typekit gedraagt. Ik raad geïnteresseerde ontwerpers aan om CSS3's @ font-face mediaquery te bekijken, omdat je veel meer creativiteit krijgt. Deze code kan worden gebruikt om een ​​te importeren .ttf of .OTF lettertypebestand van uw webserver en voeg het toe als een bruikbaar stylesheet-lettertype! Met zoveel alternatieve systemen voor het bouwen van dynamische lettertypen verwacht ik dat 2012 een golf van innovatie- en ontwerptalenten op dit gebied zal bevatten.

10. Afbeeldingengalerij Slideshows

Met de daaropvolgende populariteit van jQuery heb ik steeds meer beelddia's in weblay-outs laten vallen. Galerijen zijn perfect om snel een glimp van de inhoud van de binnenpagina te laten zien. Dit kan een reeks portfolio-items zijn, foto's, blogposts met aanbevolen afbeeldingen, demo-screenshots, enz.

Als je kijkt naar de vele unieke glijdende en vervagende animaties, was het nog nooit zo eenvoudig om een ​​snelle diavoorstelling voor je startpagina te maken. Ik ben ervan overtuigd dat 2012 een opleving in deze trends zal zien, en niet alleen tussen ontwerpers. Online webapplicaties en softwarebedrijven hebben diavoorstellingen gebruikt als begeleide zelfstudies om schermafbeeldingen en unieke functies weer te geven.

11. Modale Popup-boxen

Ik vind dat modale boxen nog steeds vrij nieuw zijn voor het internet, aangezien ze al jaren in desktop-software en mobiele apps verschijnen. Het doel van een modaal venster is om vakinhoud (zoals gebruikersregistratie of inloggen) bovenop de huidige pagina aan te bieden zonder deze op een nieuwe te laden.

Veel van de opensource-galerij-scripts gebruiken een type lightbox-effect waarbij de achtergrond donkerder wordt dan het pop-upvenster. Ik geniet echt van deze functie wanneer ik het zie, hoewel het nog door veel mensen moet worden overgenomen. En hoewel modale dozen sexy en slank zijn, kunnen ze ook erg moeilijk zijn om te coderen en correct te laten werken.

Om ideeën voor uw eigen websites op te doen, bekijkt u enkele van de meer populaire sociale nieuwsuitwisselingsgemeenschappen. Reddit en Digg zijn de eerste twee die in me opkomen omdat ze allebei zijn voorzien van modal-vakken voor registratie / aanmelding met een typische lay-out. Daarnaast bieden de UI-effecten voor Google+ een aanzienlijke hoeveelheid modale functionaliteit.

12. Inspirerende lijsten

Verzamelingen van lijstitems zijn verschenen sinds de allereerste dagen van webontwerp. Toen we naar de nieuwe eeuw gingen, begonnen ontwerpers HTML-bestelde en ongeordende lijsten te gebruiken om navigatiemenu's te huisvesten. Maar tegenwoordig kunnen en worden lijsten voor veel meer gebruikt.

In de meeste van de blogthema's vind ik de hele zijbalk met lijsten! Om maar te zwijgen van ontwerpers die geweldige CSS-stijlen hebben gemaakt voor lijsten in hun artikelvermeldingen. We hebben eerder dit jaar inspirerende lijststijlen besproken in een andere post die je misschien wat meer inzicht geven in de kwestie. Vooruitblikkend naar 2012 verwacht ik een aantal echt creatieve voorbeelden, mogelijk op een lijn met de aangepaste lay-out van Flowapp voor taken en taken.

13. Generated Image Thumbnails

In het webuniversum kunnen we het erover eens zijn dat inhoud koning is. Maar de meeste ontwerpers zullen het er ook over eens zijn dat een pagina met lege tekst echt snel saai wordt. Afbeeldingen kunnen dat extra pitje toevoegen als je weet hoe je ze zachtjes kunt strooien. Een dergelijke methode is het gebruik van dynamische miniaturen om voorbeelden voor elke pagina of elk artikel te bieden.

Blogs van vandaag blijven de populaire afbeeldingstrend behouden, dus waarom zou u ook geen gegenereerde thumbnails toepassen op uw thema? Deze trekken vaak mijn aandacht naar de kop van het artikel en helpen een pagina vol tekstlinks te doorbreken.

Als een ander voorbeeld biedt Dribbble een hele galerijlijst met miniaturen voor elke ontwerpfoto. In zo'n tabelrij-achtige lay-out is het super eenvoudig om een ​​glimp van elke miniatuur te vangen en door te bladeren om te vinden wat je zoekt. Deze tactiek heeft bewezen de aandacht te trekken van de hele designgemeenschap! Eh, op zijn minst de leden van Dribbble. Ik kan alleen maar verwachten dat 2012 een verdere inspanning zal leveren voor deze ideeën, voortbouwend op voorbeelden uit het verleden.

14. Extra grote pictogrammen

Deze unieke trend komt voort uit de populariteit van Mac OS X-pictogramontwerpen. Toen programmeurs websites voor hun Mac-applicaties lanceerden, hebben we al te vaak de enorme formaten in branding gezien. Deze trend is dan ook opgepikt door iOS-ontwikkelaars en ligt nu comfortabel in de moderne ontwerpcultuur.

Het is moeilijk om te voorspellen hoe deze trends zullen kloppen als we 2012 ingaan. Aan de ene kant kunnen deze pictogrammen onoverzichtelijk zijn en meer ruimte innemen dan nodig is. Toch zijn we niet eens in de buurt van een tekort aan iOS / OSX-apps en ontwerpen ontwerpers nog steeds pixel-perfecte pictogramspecificaties. Om nog maar te zwijgen over het feit dat webontwerpers nu ook buitenmaatse pictogrammen opnemen in bijna elke paginabenaming! Het is een goede manier om de aandacht van uw bezoeker te trekken en een naam voor uw bedrijf op te bouwen.

15. Overdreven hyperlinks

Ankerlinks behoren zeker tot de top vijf van de belangrijkste elementen van elke website. Deze hebben duidelijk een lange weg afgelegd sinds de jaren 1990 en populaire designtrends zijn alleen maar exponentieel gegroeid. Het lijkt erop dat we ons in een tijdperk begeven waar overdreven ontwerp voorop staat.

Bekijk enkele van de koppelingsvoorbeelden van Patterntap om te zien of er een knaller uit springt en je in het oog springt. Er zijn zoveel ongelooflijke ideeën voor hyperlinkontwerp, zowel in standaard- als hovereffecten. CSS3 afgeronde hoeken, tekstschaduwen en aangepaste lettertypefamilies voegen nog meer geweldige ideeën toe aan de mix! Een van mijn favoriete voorbeelden is van SimpleBits, die een korte dynamische animatie gebruikt op elk van hun permallinks voor blogberichten.

Conclusie

Deze ideeën zijn slechts enkele van de meer populaire trends die in de loop van 2011 steeds belangrijker worden. Fantastisch webdesign gaat altijd over focus en het houden van gebruikersintenties als topprioriteit. Het is onwaarschijnlijk dat deze filosofieën verschillen naar 2012, maar hoe we lay-outs en presentatiegegevens bouwen, is altijd in verandering. Laat ons uw gedachten of vragen weten in het opmerkingendiscussiegedeelte.