De website trends voor 2015

PDF versie | Print Versie | Html Versie Auteur: koko
Gezien: 319 | Aantal woorden: 2544 | Datum: Tue, 15 Sep 2015 | 0 commentaar

Terwijl ik zat te denken over websites trends in 2015 vroeg ik mij af wat is er allemaal in opkomst is in deze huidige snelle internet wereld. Een wereld waar nieuwe ontwikkelingen zijn intrede doet op het gebied van website design. U zult verbaasd zijn wat voor soort ontwikkelingen zich voor doen.

Hieronder geef ik u enkele ontwikkelingen die zich voor doen op website gebied.

 

1. MAAK HET GROTER

De twee smaken van deze web design trend kan als "Cinematic" en "Book Cover" worden bestempeld. De eerste is geïnspireerd door films en tv-advertenties, terwijl het tweede verbetert het klassieke concept van het gedrukte boek en catalogus covers.

De redenen voor deze trend zijn zowel visueel en pragmatisch. Je bent in staat om gebruikers zodra ze op uw site komen is het makkelijker om de code te geven maximale impact, dus het werkt goed op mobiele telefoons en desktop monitors (dezelfde lay-out blijft ongewijzigd, ondanks het apparaat formaat display).

Full screen beelden in vogue vorig jaar, maar met groeiende toegang tot beelden van hoge kwaliteit en snellere technologie zien we websites die nemen deze "Book Cover" lay-outs naar het volgende level.

De "Cinematic" trend is gebaseerd op volledig scherm (of bijna fullscreen) video met een paar woorden en / of elementen overlay op de top van het.

Nu is de trend is het snel oppakken. Alleen vorig jaar is Paypal bijgewerkt met zijn homepage met een fullscreen video achtergrond - een mijlpaal beweging die heeft geholpen om dit concept in de mainstream.

 

2. DE MULTIMEDIA ERVARING

De multimedia concept is zeer gedateerd. Het woord zelf is zo gebruikt en misbruikt dat het bijna haar betekenis heeft verloren. Toch zijn legers van ontwerpers en programmeurs voortdurend vechten om steeds boeiende multimedia-ervaringen te creëren.

Een tijdje terug, Flash was het platform voor deze experimenten. Momenteel is het de HTML5 element dat uiteindelijk zal toestaan om bijna elke visuele effect op de website te maken.

Een ander opmerkelijk voorbeeld van een interface gebouwd met HTML Canvas is community gedreven DNA project van Brooklyn gebaseerde op muzikant Jonathan Dagan (aka J. Viewz). Openen met een sterk visuele achtergrond video, J. Viewz vertelt ons hoe hij van plan is om zijn nieuwe muzikale album op te bouwen door middel van zijn persoonlijke experimenten (die gebruikers kunnen downloaden) en andere collaborateurs 'geüploade video's, muziek en feedback.

Boven de website van de rivier is nog een fantastisch voorbeeld niet alleen vanwege de apt visuele metafoor, maar ook de presentatie. Het tempo van de animatie en het onvermogen om bijna scrollen dwingt de gebruiker om een adem te nemen en aan te passen aan de pagina tijdlijn.

Tijdens het ontwerpen van interfaces gebruiken we meestal alles om gebruikers in staat te doen. Deze website laat zien dat het uitschakelen van gebruikers voor een bepaalde tijd kan zorgen voor een betere ervaring.

 

3. HET PARALAX EFFECT

Parallax is geëvolueerd in vele verschillende mutaties die één ding gemeen hebben: ontwerpers gebruiken pagina scrollen of bewegingen van de muis om elementen of eigenschappen van de pagina te animeren. Als je goed kijkt, is het merendeel van de websites tentoongesteld in dit artikel gebruiken deze logica. Hier zijn een aantal extra voorbeelden. Scroll gebeurtenissen met de hand getekende animatie.

Het is makkelijk om creatief gebruik van een oude CSS sprite techniek Mint Design Company te waarderen. Het resultaat is een boeiende en unieke kijk op een zo anders eenvoudige website maken van het bedrijf.

 

 

 

 

4. ANIMATIE SPROOKJESBOEK

In een dergelijke pagina, vergelijkbaar met het eerste voorbeeld, een animatie start wanneer een gebruiker een bepaald schuifpositie bereikt. Vaak is het slechts een paar elementen die schuiven in de pagina of gebruik een fade-in-effect te verschijnen.

De Boldking product pagina maakt gebruik van lichtgewicht SVG en Java Script om een visuele metafoor beschrijft de manier waarop hun product werkt presenteren. Niet alleen is het idee en animatie verbazingwekkend, maar even opmerkelijk is dat deze binnen 1, 5 MB totale pagina gewicht werd bereikt. Soms een enkele JS bibliotheek heeft deze omvang. Een van de animaties zelfs interactief.

Colin en Dewi's bruiloft website is een simpele maar effectieve manier om de gebruiker gericht, terwijl het lezen van een verhaal te houden. U worden met een fragment van het verhaal tegelijk. Om naar het volgende deel te zien moet je scrollen. Het klinkt als generieke scroll functionaliteit, maar 3D CSS-animatie evenals de ondergedoken en onthullende tekstfragmenten maakt het verhaal veel aantrekkelijker.

Dit effect wordt gebruikt om de illusie van een 3-dimensionale ruimte en werkt goed wanneer passen in het visuele verhaal van de pagina, zoals Habitat Web (boven) of Archéologie de la Grande Guerre.

Wanneer het smaakvol gebruikt wordt kan dit effect indrukwekkend resultaat hebben hoewel we voorspellen dat het waarschijnlijk niet te vaak wordt. Als het zeer populair is het kan net zo gemakkelijk worden gezien als kaasachtige en vervelend.

 

5. PLAT DESIGN

Gedurende de laatste drie jaar, platte ontwerp is de "koning" vele malen geprezen. Het is nog steeds doet het geweldig en gaat om te verblijven voor goed - vooral in kleinere elementen zoals pictogrammen, menu's en illustraties.

Niet alleen deze elementen zien er goed uit (veel beter dan de glanzende web 2. 0 iconen die samen bijna elke website een paar jaar geleden), maar ze zijn gemakkelijk schaalbaar en beheersbaar, dankzij pictogram lettertype technologie. icomoon. io is een voorbeeld van een online dienst waarmee iedereen om hun eigen pictogram lettertypen eenvoudig gratis.

Opvallend is echter dat platte ontwerp is niet altijd zo plat. Ontwerpers nemen vaak subtiele gradiënten, texturen en foto's naar de "wow" effect te bereiken. Naar onze mening, het beste deel van het platte ontwerp is niet de vlakheid van de inkt, maar hoe het opent ons tot creatieve visuele metaforen.

In plaats van te imiteren objecten met skeuomorphic technieken (waar een blocnote icoon ziet eruit als echte leven notepad gemaakt van papier en gebonden in leer), plat ontwerp probeert het idee van een notitieblok te brengen door middel van een synthetische, pakkende en leuke visuele die goed werkt in verschillende afmetingen.

Wij voorspellen dat deze trend meer collage-achtige zal worden en mengen met andere visuele stijlen, vergelijkbaar met de HábitatWeb website eerder in dit artikel gekenmerkt.

 

6. NOOIT MEER BOXEN

Webdesigners willen altijd graag laten zien dat ze kunnen denken buiten de doos. Men zou deze trend noemen "Teken een doos en bewijzen dat je kunt breken. " Een rechthoek scherm is het frame voor elke web design (voor zover wij het weten hebben we niet nog ronde monitors). Elk HTML-element van de pagina is een rechthoek ook.

Maar ontwerpers zoals de meeste mensen worden niet graag beperkt. Er zijn 3 verschillende strategieën om te bewijzen dat u geen slaaf van de rechthoek bent en alle 3 lijken te zijn op de stijging.

De ultieme manier van tartende een rechthoek is het plaatsen van de gebruiker in een oneindige ruimte waar scrollen betekent vliegen, in plaats van, nou... scrollen.

Zwitserse luchtvaartmaatschappijen daag je begrip van website navigatie. Surfen op hun pagina kunt u voelen hoe conventionele ons begrip van document de ruimte is. Hier, in plaats van scrollen naar boven of beneden, ontwijken we onze weg tussen de wolken.

 

 

7. TEGELS

Aan de andere kant als je comfortabel met rechthoeken bent dan is er ook een leuke manier om uw inhoud te structureren door middel van het creëren van tegels. Om wat voor reden tegels in web design te verkopen beter dan de Windows 8 Metro-interface. Tegels werken goed in responsieve lay-outs en, tegelijkertijd, blijft een leuke manier om te vormen indrukwekkende lay-outs.

Als het vasthouden aan tegels wordt te saai, kan de lay-out verder worden geduwd met onregelmatige zigzag randen, waardoor objecten of de tekst over de rand te brengen.

 

8. NAVIGATIE WIDGETS

Experimenteren met navigatie is webdesigners favoriete speeltuin voor vele jaren. "Spelen" met navigatie piekte toen websites louter werden ontworpen in Flash. De daling van de Flash bracht ons stiller menu's, zonder animatie of excentrieke interactiviteit.

Maar de navigatie is weer in opkomst mede dankzij de nieuwe web design mogelijkheden en de groeiende inefficiëntie van de bestaande navigatie-modellen in het gebruik van meerdere apparaten. Dit is gemakkelijker gemaakt dankzij het ruime gebruik van Java Script door de constante evolutie van Java (via kaders en plugins) en de meer consistente interpretatie van de moderne CSS in alle belangrijke browsers.

Hier zijn een paar voorbeelden van navigatie-experimenten en trends. Sommige van deze ideeën zijn al op grote schaal gebruikt, terwijl anderen het duwen van de envelop in de richting van een nieuw soort van "moderne" web design.

Een Sticky Menu is een soort van een menu dat blijft vastgelijmd aan de top of rand van het scherm, terwijl u scrollen. Leuk of niet, is steeds een standaard voor één-pagers.

Soms is het gecombineerd met een scrollspy script toont een widget nauwkeurig uw positie op de pagina. Het is handig, vooral met lange hiërarchische menu's.

Google maps, met name street view, inspireerde de auteur van Oh Deer Games navigatie lijkt op een wandeling door Google Street View te creëren. De tijd zal leren of dit een trend wordt. Zeker dit is niet de enige pagina verkennen ofwel Street View-stijl van de navigatie of de axonometrische "fly over" uitzicht wat in gaming beter bekend is

 

9. INTERGRATIE GOOGLEMAPS

We merken dit als een trend, niet alleen omdat het stijgt al geruime tijd (en we zien het bijna overal), maar ook dat het meer en meer visueel interessant dankzij de goed gebruikt aanpassingsopties die Google biedt.

De meest interessante website maken volgt deze trend bouwen hun functionele en visuele idee rond een kaart concept. En zeker gebruiken ze aangepaste Google maps aangepast aan de pagina kijk en voel.

 

10. MASHUP INTERFACE

De aanhoudende liefde voor één-pagers brengt uitdagingen die kunnen worden opgelost in creatief, gebruiksvriendelijk en visueel aantrekkelijke manier. De uitdaging is om een heleboel informatie en functionaliteit op één pagina. Het moet een schone moderne uitstraling hebben en gemakkelijk te navigeren.

Een lay-out bestaat uit vele "lagen" die zich aanpassen aan de gevraagde functionaliteit of inhoud: De oplossing kan iets zijn wat we een mashup-interface noemen. Eigenlijk is het niet een nieuw concept op alle desktop applicaties maar het is niet erg populair tot nu toe in de reguliere internet. Onlangs is het gebruik van dergelijke interfaces in opkomst en worden steeds meer verfijnd en functioneel.

Necotrans website lijkt te weinig inhoud boven en met een bijzondere zin in overlay op een full-screen foto te hebben. Maar de kleine rechtse menu geeft toegang tot alle essentiële functionaliteit binnen hetzelfde scherm gebied om gebruikers een site search widget (met resultaten verschijnen terwijl je typt), aangepaste Google map, nieuws widget en het contactformulier.

 

 

 

 

11. MINIMALISEREN

De klassieke KISS-principe ("Keep It Simple, Stupid" of "Keep It Short and Simple") is gebruikt in het leger, het bedrijfsleven en de overheid sinds de jaren '60. Maar zelfs al zou je hard werken om uw ontwerpen te vereenvoudigen dan is er waarschijnlijk enige ruimte voor om dit proces nog verder te duwen.

Het restaurant Maemo vertelt zijn verhaal met onweerstaanbare kracht met behulp van de eenvoudigste taal is het mogelijk en dan wordt de bezoeker geconfronteerd met een enkele oproep tot actie ("Boek een tafel"), en de naam van het restaurant.

Scrollen brengt een paar foto's in een informele lay-out met horizontale en verticale uitlijning is moeilijk te vinden. De thema's van de foto's lijken ook casual. Toch op dit pagina biedt een intense sensuele ervaring. Ascetische vorm benadrukt de kwaliteit van de foto's, terwijl de minimalisme maakt je en je leest de paar zinnen en dan verzorgd je ze zorgvuldig te delen.

 

12. WERELDWIJD WACHTEN

In de jaren '90 toen waren de 56k modems de belangrijkste manier om toegang te krijgen tot het internet, de "WWW" afkorting gebruikt om gekscherend worden vertaald naar "World Wide Wait". Snelle snelheid van het netwerk heeft ons bijna vergeten dat.

Als nooit tevoren, zijn hogere snelheden waardoor we websites die ondenkbaar zou zijn geweest slechts een korte tijd geleden te creëren - zoals het gebruik van HD-video voor een website achtergrond. Maar elke stap naar voren komt op een prijs en, in dit geval, de prijs is de tijd. Met name de laadtijd.

Daarom kunnen we een grote comeback van visueel aantrekkelijke preloaders zien. Niet zo boeiend als ze gebruikt worden in de Flash dagen toen ze omgezet in spelletjes, maar nog steeds kunstwerken in hun eigen recht.

 

13. ONTWERPER AUTOMATION

Een pakkende voorstelling gepresenteerd door "eclectische ontwerpers" dat sommige buzz onlangs - Dit artikel is niet compleet zonder het nemen van een moment om "The Grid" te vermelden. Het is een poging om de ontwerper en de coder met Artificial Intelligence vervangen. Zal webdesigners overbodig zijn? Het is nog te bezien.

Het is niet mogelijk om dit systeem nog te testen, dus is het moeilijk om de bruikbaarheid te beoordelen. Hun website lijkt de enige demonstratie van macht. Over het algemeen goed presteert in de meeste resoluties, maar pogingen om kunstmatige kunst te maken lijkt het teken van de tijden. Zo is The Painting Fool creatieve software nog niet uitgewist schilderijen van kunstgalerijen.

 

CONCLUSIE

Deze 13 web design trends zijn stijgend in populariteit in het afgelopen jaar en zullen waarschijnlijk sterk van invloed zijn op de manier waarop websites worden gemaakt in 2015. Echter als we dit jaar samen te vatten in één zin de belangrijkste ding om na te denken over wanneer ontwerpen van een website zou zijn "Content First".

Die mantra is altijd zo geweest. Maar tegenwoordig een steeds esthetische nadruk op web design kan veel van de fouten die in de pre-design fasen onthullen concept, navigatie stroom planning, wire-framing, copy-schrijven, enz. Als je horizon met nieuwe technieken verbreed dan zijn de zorgen die u vergeet niet de basis.



Over de Auteur

Negeso realiseert uw webdesign, website, webshop, portal, CMS, SEO, tekst en app

 

Gerelateerde artikelen


- deel dit artikel met anderen


Beoordeling: Nog niet beoordeeld

Commentaar

Geen commentaar geplaatst.

Commentaar toevoegen

Jouw naam:


Jouw email:


Commentaar

Type de code over die je hieronder ziet (beveiliging tegen Spam en geautomatiseerde aanmeldingen)

Visual CAPTCHA


Artikel Kenwoorden



Top Auteurs

gerardkempers
[194 geplaatste Artikelen] feed
Posterwinkel
[123 geplaatste Artikelen] feed
sannevermeulen
[100 geplaatste Artikelen] feed
Niels78
[82 geplaatste Artikelen] feed
LoraineQuel
[76 geplaatste Artikelen] feed
Relatiegeschenken Gullegever.nl
[75 geplaatste Artikelen] feed
Sjoerd de Groen
[73 geplaatste Artikelen] feed
RBOnline
[72 geplaatste Artikelen] feed
bvvught
[62 geplaatste Artikelen] feed
JennyL
[59 geplaatste Artikelen] feed


artikelpost logo