Webontwerptrends voor 2010
Puristen zullen zeggen dat geweldig ontwerp tijdloos is. Ja, in een ideale wereld zouden we trends moeten negeren.
Pragmatisch gezien is er echter veel waarde in het monitoren en integreren van designtrends, vooral met betrekking tot websites.
Laten we eerlijk zijn: het web verandert in een snel tempo. Anders dan in andere media, worden designtrends op het web niet alleen bepaald door esthetiek.
Technologie verandert, die de mogelijkheden van het medium drastisch kan veranderen.
In 2010 zien we dat ontwerpers de grenzen van webontwerp blijven verleggen en de volgende duidelijke trends instellen ...
Print ontwerp
Printontwerp is altijd een bron van inspiratie geweest voor het web. Webdesign bestaat nu al lang genoeg om een sterke kern van ontwerpers te cultiveren die nog nooit in print hebben gewerkt. Als gevolg hiervan zien we meer inspiratie uit drukwerk, omdat deze ontwerpers verder kijken dan het web.
Serif-lettertypen
Een van de belangrijkste kwesties van typografie is leesbaarheid. Drukkers hebben altijd de voorkeur gegeven aan serif-lettertypen, omdat de randen de zichtbaarheid verbeteren en lettervormen gemakkelijker te herkennen zijn.
Sans-serif-lettertypen zijn over het algemeen beschouwd als gemakkelijker te lezen op het scherm. Maar met meer gebruikers die met een hoge resolutie browsen en de verbeteringen in de technologie voor het verzachten van lettertypen zijn serif-lettertypen zeer leesbaar geworden voor hoofdtekst.
Big Headings
Ontwerpers van gedrukte werken hebben grote koppen gebruikt om de aandacht al eeuwenlang te trekken. Drukwerk moest een grote impact hebben als het überhaupt zou worden gelezen. Als je een saaie brochure op een bureau zag zitten, zou je dan de moeite nemen om hem op te halen? Waarschijnlijk niet.
Deze trend begon in 2009 en is alleen maar in populariteit toegenomen. Het is bewezen dat grote koppen de aandacht trekken en duidelijk communiceren.
Meerdere kolommen lay-outs
Ontwerpers moeten werken binnen de beperkingen van hun medium. In tegenstelling tot het web biedt afdrukken geen optie om te scrollen, omdat het gebonden is aan de afmetingen van het papier. Als u meerdere kolommen gebruikt, kunt u meer inhoud in dezelfde ruimte plaatsen.
Nu, met hogere schermresoluties en de komst van rasterlay-outs, passen meer ontwerpers deze methode aan op het web om websites gebruiksvriendelijker te maken en meer inhoud te bieden.
Grote afbeelding
Een foto zegt meer dan duizend woorden. Hoewel het even kan duren voordat een foto dezelfde impact heeft op het internet als in druk (met een veel hogere resolutie), heeft de invoering van breedbandtoegang grote foto's meer haalbaar gemaakt.
We zien dat meer websites grote, krachtige afbeeldingen gebruiken om gebruikers naar binnen te halen en een meeslepende ervaring te creëren.
Diagrammen en Infographics
Drukkers hebben al jaren grafische afbeeldingen gebruikt om complexe informatie over te brengen. Dit wordt het meest gezien in tijdschriften en jaarverslagen.
Afbeeldingen kunnen complexe relaties en verhoudingen communiceren op een manier die te moeilijk is om met platte tekst te doen. Infographics hebben de neiging om een eenvoudige maar visueel rijke uitstraling te hebben, en meer ontwerpers adopteren infographics of imiteren de stijl in hun ontwerpen.
Eenvoud
Antoine de Saint-Exupery zei ooit: "Perfectie wordt niet bereikt als er niets meer aan toe te voegen is, maar als er niets meer over is om mee te nemen." De voordelen van eenvoud in design zijn talrijk.
De wet van Hick vertelt ons dat de tijd die nodig is om een beslissing te nemen met elke optie toeneemt. Bovendien vertelt de signaal-tot-geluid theorie ons dat alles wat niet bijdraagt aan het bericht of de functie van een website (het signaal) in de weg zit en het ontwerp minder effectief maakt (de ruis).
Simpele ontwerpen zijn gemakkelijker te gebruiken en te begrijpen en zorgen voor meer duidelijkheid bij het communiceren van berichten.
Minimalistisch en rasterontwerp
Minimalisme is krachtig maar moeilijk te beheersen. Het bevat niets anders dan de essentie. Al het andere is verwijderd, wat resulteert in een maximale impact van de elementen die aanwezig zijn.
Minimalistische ontwerpen vereisen een sterk rastersysteem om effectief te zijn. Natuurlijk hebben ze veel witte ruimte, dus zonder dat raster zou een minimalistisch ontwerp losgekoppeld en slordig aanvoelen. Het raster geeft het organisatie en structuur.
Lay-outs van één pagina
Er zijn verschillende manieren om te vereenvoudigen. Een lay-out van één pagina vertoont twee van deze manieren: verbergen en verwijderen.
Effectieve lay-outs van één pagina verbergen alle elementen die geen prioriteit hebben. Als een gebruiker een van die elementen wil zien, kunnen ze klikken om het te ontdekken. Dit is veel effectiever dan alles zichtbaar te laten, wat de pagina ingewikkeld en overweldigend zou maken.
Evenzo maakt het principe achter lay-outs van één pagina extra pagina's overbodig. Met de beschikbaarheid van krachtige JavaScript-bibliotheken en snellere verbindingen hebben veel websites nu weinig behoefte aan meerdere pagina's. Ontwerpers kunnen eenvoudig informatie op één pagina plaatsen, zonder de gebruiker lastig te vallen met een hiërarchie.
Massieve witte ruimte
In de begintijd van webontwerp hadden we niet veel schermruimte om mee te werken en dus vertoonden we niet veel witte ruimte. Als je ooit hebt geprobeerd een website te ontwerpen voor een resolutie van 640 × 480, weet je precies waar ik het over heb.
Nu we hogere resoluties hebben en de mogelijkheid hebben om elementen te verbergen en te onthullen met JavaScript, is het gebruik van witte ruimte veel eenvoudiger.
Witte ruimte is cruciaal voor een goed ontwerp. Het geeft het oog een plek om te rusten. Het verbetert natuurlijk de kwaliteit van een ontwerp. En het laat zien welke elementen door nabijheid in verband staan met elkaar.
Typografische lay-outs
Waar we vroeger beperkt waren tot een paar geselecteerde 'webveilige lettertypen' met zeer weinig controle over hoe ze werden weergegeven, hebben we nu een breed scala aan hulpmiddelen om onze typografie te verrijken.
Webontwerpers hebben lang genoten van het gebruik van het type als een subtiel hulpmiddel om berichten over te brengen. Met toenemende controle en mogelijkheden zien we dat meer ontwerpers zich concentreren op typografie als het primaire ontwerpelement.
CSS3-technieken
Weet u niet zeker of u al gebruik kunt maken van CSS3? Denk nog eens na. Webpioniers zoals Andy Clarke en Jeremy Keith hebben lang gepredikt over "progressieve verbetering" in webdesign.
Progressieve verbetering gaat over het ontwerpen van websites zodat ze bruikbaar zijn in oudere browsers, terwijl ze worden "uitgebreid" voor gebruikers die zich inzetten voor de nieuwste technologie.
Met ontwerpen in dit kamp kun je gebruikmaken van CSS3-eigenschappen zoals afgeronde hoeken, randachtergronden en tekst- en doosschaduwen. Gebruikers in moderne browsers zullen de mooiere versie zien, en die op oudere technologie ( hoest | IE6 | hoest ) zullen de basisversie zien.
CSS3-animatie
Animatie op internet heeft vele fasen doorgemaakt. Aanvankelijk konden we alleen animeren met GIF-afbeeldingsbestanden. Daarna waren we vrijwel beperkt tot Flash. Nu kunnen we kiezen uit Flash, Silverlight, GIF, JavaScript en zelfs CSS3. Subtiele animaties kunnen memorabel zijn en CSS3 maakt het licht en gemakkelijk.
Afgeronde hoeken
De Web 2.0-stijl van 2005 en 2006 maakte afgeronde hoeken populair, tot het punt dat ze irritant waren. In die tijd was het moeilijk om ze te maken. Er was geen vaste manier om echt afgeronde hoeken te maken. In plaats daarvan werden ze gesimuleerd met CSS, JavaScript-hacks en afbeeldingsbestanden.
Met CSS3 kunnen we nu afgeronde hoeken rechtstreeks in de browser genereren, waardoor ze niet alleen eenvoudiger te maken zijn, maar ook veel efficiënter, omdat de gebruiker geen extra afbeeldingen of JavaScript-bestanden hoeft te downloaden.
Ontwerpers maken in 2010 steeds meer gebruik van deze nieuwe browsercapaciteit.
Vak en tekstschaduwen
Het gebruik van schaduwen om een gevoel van diepte te creëren is al sinds de vroegste dagen van het web gedaan (en soms overdreven). Maar het was niet altijd praktisch. Om schaduwen aan tekst toe te voegen, moest u afbeeldingen gebruiken, waardoor de laadtijd toenam en het onderhoud moeilijker werd. Kistschaduwen vereisten verschillende afbeeldingen en CSS-trucs zoals 'schuifdeuren'.
CSS3 heeft zeer aanpasbare schaduwmogelijkheden, die een breed scala aan creatieve effecten mogelijk maken, waaronder niet alleen slagschaduwen maar ook innerlijke schaduwen. Creatieve ontwerpers hebben deze CSS3-effecten al gebruikt om zowel reliëfdruk als ingeprente effecten te simuleren.
RGBa en dekking
Jarenlang was het werken met transparantie en transparantie op het web bijna onmogelijk. U had drie keuzes: simuleer transparantie met behulp van platte afbeeldingen, werk met PNG's incompatibiliteit met andere browsers of worstelen met CSS's basale transparantie-selectors en filters.
CSS3 biedt ontwerpers een veel betere consistentie en vrijheid bij het gebruik van dekking met de eigenschap RGBa. Hoewel u op talloze manieren kunt profiteren van transparantie, is een gebied dat vooral heeft geholpen complexe achtergronden bedekt met semi-transparante kleuren. Eerder was dit effect onpraktisch of onmogelijk om te maken zonder gebruik te maken van complexe PNG-afbeeldingen.
Mobiel-compatibel ontwerp
Het mobiele web heeft miljoenen gebruikers de mogelijkheid gegeven hun bankrekening te controleren terwijl ze in de rij staan te wachten, de nieuwste scores op de metro te bekijken en hun Twitter-status bij te werken tijdens het rijden. (Welke daarvan is een gevaarlijke gewoonte?) En het mobiele internet blijft snel groeien.
We zijn tot het punt gekomen dat elk bedrijf moet overwegen of zijn website onderweg zal worden gebruikt en, zo ja, hoe. Innovatieve bedrijven hebben al zwaar geïnvesteerd in nuttige en gebruiksvriendelijke mobiele versies van hun websites.
creativiteit
De explosieve groei van het gebruik van sociale media is het bewijs dat mensen verbinding willen maken en dingen willen delen waar ze gepassioneerd over zijn.
Op het gebied van ontwerpen hebben we een grote groei gezien in het delen en browsen van andermans werk. Als ontwerpers worden we nu gebombardeerd door de creativiteit van iedereen. Dit verhoogt niet alleen de kwaliteit van het ontwerp, maar stimuleert ook het delen van ideeën, wat bijdraagt aan een cultuur van creativiteit en innovatie.
Schone illustraties
Als je op mij lijkt, ben je opgegroeid met het bekijken van Disney-films, en bewonderde je alle moeite die is gegaan met het maken van elk animatieframe. We zijn ver voorbij de dagen dat illustratie werd gedaan in inkt en markeringen en deze evolutie in gereedschappen heeft geleid tot enkele zeer creatieve benaderingen van ontwerpen.
Veel ontwerpers leren dat soepele, schone, heldere illustraties een onderscheidend gevoel creëren dat niet kan worden gerepliceerd door fotografie of eenvoudige illustraties. Het resultaat is een breed scala aan professioneel geïllustreerde ontwerpen die boeiend en uitnodigend zijn.
Gestructureerde achtergronden
Gestructureerde achtergronden zijn niets nieuws op internet. Maar deze techniek heeft de afgelopen maanden een interessante variatie gezien. Ik noem het "microstructuren" die op de achtergrond subtiele, nauwelijks waarneembare texturen zijn.
thumbnails
Je zou kunnen zeggen: "Miniaturen zijn er al sinds het begin van het web. Hoe is dit een trend? "Toegegeven, ze zijn altijd al gebruikt, maar alleen heel eenvoudig. U zou een miniatuur hebben waarop u zou kunnen klikken om een grotere afbeelding te krijgen. Het deed zijn werk maar was saai.
In de afgelopen paar maanden begonnen ontwerpers te vragen: "Hoe kunnen miniaturen spannender worden?" Dit heeft geleid tot een opleving van miniaturen die zowel slim als bruikbaar zijn.
Waterverf
Naarmate het web evolueert, zien we dat meer ontwerpers worden geïnspireerd door verschillende bronnen en media. Geen wonder dat de beeldende kunst tot deze bronnen behoren.
Een van de stijlen die naar voren is gekomen, is de simulatie van aquarellen. De zachte, elegante look van deze stijl is apart en rustgevend.
Handschrift
Handgeschreven en scriptlettertypen worden het meest misbruikt. Om deze reden blijven veel ontwerpers vrij van beide typen, hetzij uit walging of vanwege de angst om amateuristisch te kijken. Maar de laatste tijd hebben veel ontwerpers ontdekt dat, wanneer ze op de juiste manier worden gebruikt, de handgeschreven stijl een gevoel van vakmanschap en planning uitstraalt. Gebruikt in de juiste context, het is een krachtige manier om te communiceren.
Sociale media
Nu mensen meer tijd op Facebook doorbrengen dan Google, is het geen wonder dat ontwerpers op zoek zijn naar innovatieve manieren om sociale media te integreren op hun websites.
Sommige ontwerpers zijn zo ver gegaan dat ze hun inhoud op sociale medianetwerken publiceren en vervolgens hun websites gebruiken om deze te verzamelen.
Het is veilig om te zeggen dat naarmate 2010 vordert, we meer ontwerpers zullen zien die creatieve manieren vinden om sociale media te integreren op hun websites om gebruikers beter te betrekken.
Vaste elementen
Nu ondersteunen browsers de position: fixed element, we zien slimmer gebruik ervan.
Er zijn tal van situaties waarin een vast element (zoals aanhoudende navigatie) de bedrijfsdoelstellingen van de eigenaar kan dienen en de website bruikbaarder kan maken.
Vaste elementen zijn memorabel en verbeteren de gebruikerservaring. Ze hebben talloze creatieve toepassingen en we zullen blijven zien dat ontwerpers er gebruik van maken.
Deze gastpost is een samenwerking tussen de goede mensen bij Web Hosting Search en ontwerper en ontwikkelaar Ross Johnson. Bekijk Web Hosting Zoek naar de juiste web hosting en 3point7designs voor meer webdesign, awesomeness door Ross
Welke van deze trends volg je het meest? Wat zijn enkele andere opkomende trends?