De staat van webdesigntrends de jaarlijkse editie van 2011

2010 was een ongelooflijk groen jaar voor webontwerpers. Mobiel heeft de mainstream geraakt; Webtypografie heeft nieuwe niveaus van verfijning bereikt; Nieuwe coderingstechnieken hebben ons vermogen om creatief te worden met design sterk verbeterd (zonder de stabiliteit in gevaar te brengen). Al met al is het een jaar geweest dat snel werd bewogen, zelfs volgens de normen van het web, dus laten we ingaan op onze eerste jaarlijkse post over de staat van webdesign in 2010 wordt 2011.


De dood van de vouw

De traditionele "vouw" (de denkbeeldige regel op een scherm die aangeeft welke inhoud zichtbaar is voordat een kijker moet scrollen) werd vaag, onbelangrijk en bijna irrelevant in 2010.

Waarom? Omdat het traditionele "scherm" waar mensen het internet doorzien een enorme variëteit heeft ondergaan, kunnen we niet langer verwachten dat websurfers op iets dichtbij een 19 "-monitor zitten met een resolutie ergens tussen 1024x768 en 1280x700. alle vormen en maten, van iPhones (en kleinere telefoons) tot 60 "HDTV's. Het is niet alleen een resolutie die enorm kan variëren; de beeldverhouding van een scherm (zelfs op hetzelfde apparaat als de iPhone) kan veranderen met één beweging van de pols. Natuurlijk krijgen webontwerpers altijd het advies om de belangrijkste berichten van een site bovenaan te houden, maar met zoveel nieuwe manieren waarop websurfers het web kunnen bekijken, is er geen gedefinieerde hoogte meer waar inhoud boven moet staan.

We zullen deze maand meer in detail over dit onderwerp praten, dus abonneer je (het is gratis) om op de hoogte te blijven :)


Mobiele sites

Sites zijn ontworpen voor mobiele scenario's sinds het ontstaan ​​van mobiele apparaten ... maar in 2010 is er een enorme duw in de richting van hele subsites die speciaal zijn ontworpen om te worden bekeken op kleine, draagbare schermen. Je kunt de iPhone bedanken voor het starten van deze trend, maar de golf van "gepulificeerde" sites verspreidt zich als een lopend vuurtje ... en volgend jaar kom je er hetzelfde uit, ik weet zeker dat je het moeilijk zult vinden om een ​​belangrijke publicatiesite zonder een mobiele begeleidende site.

Het mooie van mobiele schermen is dat het ontwerpers dwingt creatief te worden met een relatief kleine hoeveelheid onroerend goed. Slagen in de mobiele omgeving is niet moeilijk als u een paar regels in gedachten houdt: berichten moeten sneller en met meer efficiëntie worden overgebracht; Links moeten worden ontworpen voor een touchscreen-omgeving; en tekst moet leesbaar worden (of op zijn minst effectief inzoomen). Hier zijn slechts enkele voorbeelden van mobiele sites:

U kunt VEEL meer lezen over mobiel ontwerp op onze zustersite: Mobile.tutsplus.com!

SubTrend: Tabletified Sites

Net zoals in 2010 een explosie van mobiele siteontwerpen is te verwachten, zullen consumenten naarmate tablets vaker worden opgehaald, belangrijke websites volgen door sites (en apps) te ontwikkelen die speciaal zijn ontworpen voor een middelgrote touchscreenomgeving..


Een typografische explosie

Oké, ik denk dat je elk jaar opnieuw zou kunnen beweren dat "typografie zal ontploffen" ... maar 2010 heeft een paar grote veranderingen in de onderliggende technologie ondergaan die deze claim legitiem maken. Vooral de enorme groei van de font-vervangingstechnologie in het afgelopen jaar en de massale acceptatie van "fonts as services" waar externe bedrijven lettertypen (en licenties) hosten die ontwerpers in live ontwikkelingsomgevingen kunnen gebruiken. Je zou ook kunnen zeggen dat ontwerpers ook steeds gewaagder worden met typogrpahy ... met steeds meer nieuwe ontwerpen die de grens tussen print-4design en webdesign vervagen.

Je kunt hier meer lezen over het navigeren door de grote verscheidenheid van deze geweldige nieuwe typografieoplossingen. Laten we enkele voorbeelden bekijken (sommige gebruiken lettertype-vervanging, andere gebruiken andere methoden):

SubTrend: Print Design Inspired Sites

Dit was allemaal rage in 2009 - 2010, maar de 'printrevolutie' is springlevend en er worden steeds meer sites ontworpen om fantastische printontwerpen na te bootsen, zoals tijdschriften, posters, flyers en meer.


UI-invloed op de bureaubladtoepassing

Als ik in 2009 een gokfan was, zou ik al mijn geld in apps gestopt hebben ... iPhone-apps, Android-apps, Apple-apps, pc-apps, web-apps ... de software-omgeving lijkt het afgelopen jaar of twee compleet gek te zijn geworden . Al deze opwinding over het maken van applicaties is op een interessante manier in het webontwerpstijl-lexicon terechtgekomen: waar eens het web er uitzag, nou, zoals een website, kan het tegenwoordig vaak meer op een applicatie lijken. Alles van modale vensters, contextmenu's, OS-geïnspireerde knoppen en meer worden op nieuwe en opwindende manieren in de webontwerpomgeving gebracht ... het eindresultaat: sites die gebruiksvriendelijker en natuurlijker aanvoelen.


Grid Intensieve lay-outs

Rasterlay-outs zijn niet nieuw in 2010 (of zelfs 1980), maar webontwerpers beginnen zich los te maken van traditionele weblay-outs (koptekst, inhoudskolom, zijbalk, voettekst) ten gunste van meer unieke, gridgestuurde lay-outs. Wat begon met de beweging van de 960.gs heeft zich snel verspreid naar grid-systemen die zich daadwerkelijk kunnen aanpassen aan de schermresolutie van de kijker.


Massieve afbeeldingen

Hier is nog een trend die zich voor meer heeft voorgedaan dan alleen dit afgelopen jaar. Enorme afbeeldingen waren ooit een taboe voor webontwerpers, maar dankzij betere beeldoptimalisatie, snellere internetverbindingen en slimmere laadmethoden, kunnen ontwerpers op sommige sites veel bereiken door beeldformaten maximaal te duwen.

Meer dan alleen 'grote afbeeldingen', we beginnen meer trending te zien naar sites die enorme illustratieve (en fotografische) achtergronden gebruiken die deel uitmaken van de daadwerkelijke ervaring, omdat ze gewoon extra illustraties zijn.


Immersive Script Integration (jQuery Sliders, etc.)

Gecodeerde plug-ins waren bij de meeste webontwerpen een bijzaak ... je zou een mock-up voltooien en vervolgens een afbeelding vervangen door een schuifregelaar als je er een goede plug-in voor kon vinden. Tegenwoordig kunnen hele ontwerpen worden gebaseerd op scripts en plug-ins die meer doen dan "iets toevoegen" aan een ontwerp ... ze kunnen de hele website-ervaring definiëren.

Hier zijn slechts een paar voorbeelden van sites die niet alleen script-interactiviteit toevoegen, ze maken het de basis van de site:

Je kunt veel meer lezen over jQuery en andere scriptintegratietrucs op onze zustersite: Net.tutsplus.com!


CSS3 raakt de mainstream

Als ik een dubbeltje zou hebben voor elk CSS3-artikel dat ik in 2010 zag, zou ik in een poel van hen zwemmen. Hoewel CSS3-massaconsumptie nog steeds een klein eindje weg is (hier is een handige link om te zien welke browsers welke delen van CSS3 hebben gebruikt), hebben ontwerpers niet geaarzeld om enkele van de fantastische nieuwe functies te gaan gebruiken. Alles van afgeronde hoeken, doosschaduwen, gloedeffecten, CSS3-animatie, @ font-face en meer zijn overal in de wereld opduiken. hier zijn slechts een handvol voorbeelden:

Je kunt veel meer lezen over CSS3-tricks op onze zustersite: Net.tutsplus.com!


Textuur, textuur, textuur

Texturen zijn niet nieuw, maar naarmate elk jaar verstrijkt, zien we dat het wordt geïntegreerd in nieuwe en interessante manieren. In 2010 zagen we veel van de "subtiele ruis" -textuur, maar bovenal beginnen we een stijlfase in te gaan waarin meer ontwerpen "aanraakbaar" beginnen te worden. Dit betekent niet noodzakelijk dat grote, bestand-zware texturen worden gebruikt ... in plaats daarvan zien we meer subtiele, goed ontworpen texturen die natuurlijk herhalen.


Infographic driven ontwerpen

Ik ben altijd al een grote fan geweest van infographics, dus het is goed dat we ze beginnen te integreren in webontwerpen als meer dan alleen bijlagen. Ik denk dat er veel gelegenheid is voor nieuwe en opwindende manieren van infographic site-integratie, dus houd deze ontwerpen in 2011 in de gaten.


Enkele pagina-sites


3D-omgevingen

Dit is meer een nieuwigheid dan een trend ... 3D-gebaseerde sites zijn leuk om te gebruiken, maar zijn niet helemaal toegankelijk vanuit sommige browsers en apparaten. Dat gezegd hebbende, er gebeuren leuke nieuwe dingen op het gebied van driedimensionale omgevingen, dus het is de moeite waard om ze te bekijken, zelfs als je ze binnenkort niet op je iPhone zult zien;)


Social Media Convergentie

De laatste trend die ik ga noemen, is niet één die veel schermopnames vereist ... vooral omdat de shift meer is strategie dan inhoud. Hoewel deze trend zich al jarenlang voltrekt, lijkt het er op dit moment op aan te komen ... en het lot van de toekomst van het internet zal beslist worden.

Waar ik het over heb, is "convergentie van sociale media", of liever gezegd, het patroon van merken en bedrijven die hun inspanningen richten op sociale-mediasites (in plaats van hun eigen onafhankelijke sites). In plaats van individuele domeinen, zien we dat steeds meer bedrijven overstappen op strategieën die zijn gebaseerd op sites zoals Facebook, of die op zijn minst sociale functies integreren op een manier die 100% afhankelijk is van de sociale-mediasites.

... in plaats van een internet dat is samengesteld uit miljoenen verschillende en unieke sites, kunnen we eindigen met een handvol 'mega-sites' die iedereen (zowel particulieren als bedrijven) eenvoudigweg een pagina heeft over ...

Dit is logisch voor een aantal bedrijven; het is een stuk eenvoudiger om mensen te laten ontdekken en uw Facebook- of Twitter-pagina te bezoeken dan om ze te laten struikelen (pun intended!) uw eigen domein (dat wil zeggen: myownawesomewebsite.com/me). De winnaars van deze trend zijn natuurlijk de grote sociale mediasites die steeds meer verkeer verzamelen. De verliezers? Nou, als deze trend zich voortzet, kunnen de verliezers heel goed iedereen zijn die niet op de bandwagon springt ... dus in plaats van een internet dat is samengesteld uit miljoenen verschillende en unieke sites, kunnen we eindigen met een handvol "mega-sites" dat iedereen (zowel particulieren als bedrijven) gewoon een pagina heeft.


Laat de discussie beginnen!

Oké, dus ik heb net het topje van de ijsberg geraakt voor alle geweldige trends in 2010 en ik zal de eerste zijn om toe te geven dat ik zeker weet dat ik iets heb gemist. Plaats uw opmerkingen, gedachten, trends en al het andere in de opmerkingensectie en ik zal echt geweldige opmerkingen maken als het tijd is om dit bericht later te bewerken op!

Happy 2011!