Van grote bedrijven tot beginnende bloggers, we vertrouwen allemaal op een fatsoenlijk uitziende website. Tegenwoordig zou zelfs de minst technisch onderlegde Luddite geen vertrouwen hebben in een site die eruitziet als een middelmatige GeoCities pagina (vraag het je grootouders). Presentatie is online enorm belangrijk. Het kan UX maken of breken, klanten verleiden en een unieke merkuitstraling creëren. Daarom kijken we in dit artikel naar de meest innovatieve voorbeelden van webdesign die dit jaar de ronde doen.

Hoewel de visuele kwaliteit van deze ontwerpen subjectief kan lijken, is het doel van dit artikel niet om je te overtuigen of dit de best uitziende technieken zijn. Het zijn a) trends die het vermelden waard zijn en b) nuttig om een cruciaal punt te illustreren: hoe je deze technieken kunt gebruiken om de functionaliteit te verbeteren. Daarom zal het belangrijkste commentaar in dit artikel gaan over de functie van deze elementen in plaats van het uiterlijk.

We kijken vooral naar visuele componenten die waarde toevoegen aan je site, vooral multimediatechnieken. Hopelijk kan de gemiddelde lezer deze ook toepassen in zijn eigen marketingactiviteiten. Of je nu een freelance webdesigner bent of voor een gevestigd bedrijf werkt, we hopen je op zijn minst wat stof tot nadenken te geven of ideeën die je kunt meenemen naar een professionele ontwerper.

Technologisch minimalisme is uit

Technologiebedrijven hebben het minimalisme gebruikt als een gemakkelijk steno voor hun merklogo's en webdesign. Echter, zoals uit onderzoek blijktDit raakt snel uit de mode. De gemiddelde consument vindt minimalisme in logo's contraproductief omdat het het doel van het bedrijf verdoezelt. Een abstracte vorm vertelt ons niets over wat het bedrijf aanbiedt of ons probeert te verkopen.

In de loop der tijd hebben we steeds meer minimalisme gezien in de logo's van grote techbedrijven, van Twitter tot Instagram. Theoretisch is dit een natuurlijke uitbreiding van de alomtegenwoordigheid van veel van deze bedrijven in ons dagelijks leven. We zijn er zo vertrouwd mee geraakt dat alleen al de contouren van hun logo's herkenbaar zijn. Het is een krachtige zet om af te leiden dat je logo zo in het geheugen van mensen is gegrift dat je het kunt vereenvoudigen tot de kale componenten.

Minimalisme kan echter ook fout gaan. A slecht voorbeeld hiervan is Google's recente reeks herontwerpen voor de G-suite in Gmail:

De reden dat de nieuwe ontwerpen niet zo goed werken is dat ze het nut verwerpen ten gunste van branding. Als ontwerpers waren ze meer bezig met het universeel maken van het kleurenschema en het minimaliseren van de vormen dan met het behouden van de symbolische betekenis die de iconen vroeger hadden.

Retro elementen webdesign

"Het oude is nieuw", zoals het oude gezegde luidt (als je dat nog nooit hebt gehoord, bewijst het vooral mijn punt). Webdesign is niet vies van de diep gezonken klauwen van nostalgie of nostalgische ontwerpen die opnieuw worden geïnterpreteerd met moderne lenzen. Momenteel is er een hele generatie digitaal oorspronkelijke bewoners die goede herinneringen hebben aan retro-tech en het "vintage internet".

De website voor Team3D is in dit opzicht heel bijzonder. Het bevat een smorgasbord van old-school designsmaken: heldere 80's kleurenschema's, cyber-grids, old-school GUI-componenten rechtsboven, felroze graffiti en grote, lompe, roze interfaceknoppen. Zonder opdringerig te zijn, zijn ze erin geslaagd om een behoorlijke hoeveelheid animatie op de pagina te zetten, wat nog meer smaak toevoegt aan de retrostijl.

Hoewel de website van Team3D helemaal retro is, kan het voor sommige mensen een beetje in-your-face zijn. Er zijn echter subtielere manieren om het aan te pakken, zoals ons volgende voorbeeld:

Fietsen Gladiator heeft een mooie front-end die opent met een achtergrondanimatie van mensen die aan een tafel eten. De truc is dat de camera in het kwadraat op de fles wijn staat, die het bedrijf levert. Scroll daaronder en de retro website lay-out begint: de pagina heeft een fade als een versleten ansichtkaart, de eerste foto en video hebben die gedempte Polaroid look en de lettertypes hebben een old-school afschuining met rustgevende kleuren.

Hoewel het eenvoudiger is dan het vorige voorbeeld, voelt het nooit leeg aan door kleine details zoals de kronkellijn in het middelste gedeelte. De transparantie van het lettertype laat de foto's ook ademen en elke kleur past bij de stemming. Dit bewijst dat je niet alles uit de kast hoeft te halen om een identiteit te creëren. Soms is minder meer.

Beide sites roepen gevoelens op van oude herinneringen of klassieke esthetiek terwijl er een moderne draai aan wordt gegeven. Er zijn talloze ontwerpstijlen om uit te kiezen, maar het is belangrijk dat het klassiek aanvoelt zonder gedateerd te zijn.

3D-webontwerp en -animatie

Elke professionele websiteontwerper kan een goed uitgewerkt diepte-effect waarderen. Het kan lastig zijn om een 3D website layout te ontwerpen, maar het voegt veel visuele flair toe. Het kan ook op een nuttige manier gebruik maken van de ruimte, waarbij objecten met diepte uit elkaar kunnen worden gezet, zodat er ruimte overblijft voor meer verticale en horizontale informatie.

De Museum van Vervelende Ervaringen is juist daarom fantastisch:

Deze humoristische ZenDesk website fungeert als een digitale rondleiding door een museum waarin de vele ergernissen van het internet worden getoond. Het gebruikt het effect om de kijker te boeien, als een browsergame. Life in Vogue doet iets soortgelijks met zijn paginadraaimechanisme, waarbij het van het omslaan van een pagina vloeiend overgaat in het betreden van een lift. Het is erg boeiend en een geweldige manier om de kijker door de website te leiden.

Hoewel niet alle 3D-effecten zo openlijk hoeven te zijn. Sommige kunnen flitsend zijn zonder er helemaal in op te gaan, maar bieden wel iets verleidelijks voor de zintuigen.

Mix & Match multimedia met horizontaal en verticaal scrollen

Elk bedrijf maakt gebruik van multimediafuncties op websites, waarbij vaak 3 of 4 soorten media op één pagina. Dergelijke functies kunnen er echter voor zorgen dat alles onoverzichtelijk aanvoelt als ontwerpers niet voorzichtig te werk gaan. Er zijn manieren om dit natuurlijker te maken door alternatieve scrolformaten te gebruiken en het niet alleen verticaal te houden.

Een van de technieken in webdesign voor multimedia die steeds bekender wordt, is horizontaal scrollen. Hoewel het al lang bestaat, neemt het de laatste jaren een steeds grotere vlucht, met behoorlijk wat goede voorbeelden. De belangrijkste reden hiervoor is waarschijnlijk dat het de navigatie via de telefoon verbetert. Met horizontale elementen gemengd met verticale kun je de ruimte optimaliseren, vooral als je veel categorieën aan de gebruiker wilt overbrengen.

Een ander voorbeeld van Life in Vogue (serieus, dit is een goede website) komt in hun Ansichtkaart secties:

De pagina gaat vrij gemakkelijk over van verticale tekst naar horizontale afbeeldingenscrolling. Dit bespaart pagina ruimte en laat gebruikers gemakkelijk navigeren door de diashow carrousel. Het is een boeiend alternatief voor constant lager scrollen en het is zeker beter dan de afbeeldingen verspreid over het artikel te zetten. Het past ook bij het kinetische karakter van de rest van de site.

Het helpt om alle onderdelen van de lay-out van een website te gronden met hun eigen specifieke motieven die bij hun doel passen. Ze hoeven ook niet op dezelfde pagina te staan. Als de ene pagina verticaal scrollt en de andere horizontaal, kan dat elke pagina zijn eigen identiteit geven. De ene kan meer het gevoel hebben van een diavoorstelling, terwijl de andere kan lezen als een standaard webpagina.

UI/UX-ontwerper Ben Hamilton's De persoonlijke pagina doet dit heel goed en belichaamt zijn eigenzinnige gevoel voor design zodat potentiële klanten het kunnen zien:

Zijn casestudy speelt zich af als een carrousel terwijl de hoofdpagina verticaal is. Het past bij het doel van de website, namelijk pronken met zijn ontwerpkunsten. Het maakt ook mooi gebruik van het websiteraster, waarbij één frame statisch blijft (zijn contactgegevens), terwijl andere frames bewegen. Sidenote: bonuspunten voor het toevoegen van een optie om de contrastmodus in te schakelen.

AR Webdesign

Nu we het toch over multimediafuncties hebben: het ontwerpen van AR-websites heeft veel onbenutte mogelijkheden. Het is nu misschien nog een beetje gimmicky, maar ik denk dat het een toekomst heeft als het op de juiste manier wordt toegepast. Het is een van de nieuwe technieken op het gebied van webdesign, dus het potentieel is moeilijk in te schatten.

Door QR-codes te integreren die de gebruiker kan scannen, krijgen ze toegang tot delen van de website met meer diepgaande functies:

Andere bedrijven, zoals winkels, hebben deze functie gebruikt om visualisatietechnieken voor hun diensten te maken:

https://youtu.be/UudV1VdFtuQ

IKEA's app kun je je voorstellen hoe hun product er bij jou thuis uit zou zien. Elk product op hun website met de specifieke 3D-modellen is op deze manier toegankelijk. Het biedt een nieuwe manier om producten te verkopen en te bouwen. klant zekerheid. QR-codes en visualisaties zorgen ook voor unieke vormen van CTA's (call to action).

Parallax scrollen

Parallax scrollen voegt een duizelingwekkend scala aan beweging toe aan je webpagina's. Het kan een van de beste webdesigntechnieken zijn om bewegende visuele informatie op een geanimeerde, ontvouwende manier te presenteren. Het werkt met de beweging van de cursor waardoor de site veel boeiender wordt naarmate de gebruiker er doorheen beweegt.

STEEZY Studio heeft een fantasierijke accordeonstijl uitklappende parallax lay-out voor hun hoofdpagina:

De kleuren veranderen met de beweging van het scherm en de afbeeldingen eronder breiden zich uit om de kijker te begroeten. Het geeft een flow aan de informatie die wordt gepresenteerd. Internetgebruikers zijn een afgemat stelletje die nauwelijks informatie op het scherm verwerken terwijl ze door een site scannen, maar dergelijke technieken bieden een oplossing. Dit trekt de aandacht van de gebruiker optimaal en maakt gebruik van ruimte en lineaire beweging om bepaalde aspecten te benadrukken.

Het kan een belangrijk hulpmiddel zijn bij scrollytellingdie al deze elementen combineert om de lezer een meeslepend verhaal te vertellen. Dit kan een merkverhaal zijn zoals dat van Life in Vogue of een meer individueel verhaal zoals de pagina van Ben Hamilton eerder.

Aangepaste cursors en muisovergangen

Aangepaste cursors hebben vaak een precair evenwicht. Als ze slecht worden uitgevoerd, kunnen ze een ergernis zijn die geen praktisch doel dient behalve opzichtig zijn. Maar zelfs de eenvoudigere cursors kunnen hun voordelen hebben, vooral als ze de gebruiker door de website helpen.

Een goed, maar vreemd voorbeeld is Fontsmithdie de cursor semi-transparant maken zodat de lezer door de verschillende lettertypes op de website kan bewegen, voorgesteld als blokken. De cursor versluiert de blokken niet en de kleur van de markering past goed bij de achtergrond. Het helpt de kijker om zich te concentreren op de lettertypes die ze markeren, waarvan sommige heel subtiele verschillen kunnen hebben.

Volledige bundel en Gemaakt in Haus.com hebben ook creatieve mouse-over effecten die pure eye candy zijn. De eerste maakt gebruik van kinetische, game-achtige, tweekleurige driehoeken die vallen en afstoten als reactie op de muis, terwijl de tweede een subtieler, caleidoscopisch lavalamp-effect heeft dat met je cursor meebeweegt. Beide voegen een klein beetje wow-factor toe aan de website en benadrukken de creativiteit van deze bedrijven.

Minnimheeft ook een muiseffect waarbij vinylachtige patronen volgen en zich vermengen met andere soortgelijke vormen als je je cursor versleept. Deze helpen om de contacten en platforms op hun contactpagina te benadrukken, wat een onderdeel van een website is waar mensen zelden aandacht aan besteden. Het helpt de kijker de details te onthouden die op andere sites vaak alledaags lijken.

Het dient als subtiele maar goede marketing. Het enige dat ontbreekt is dat ik het gevoel heb dat die foto's directe hyperlinks naar hun sociale pagina's en contacten mogelijk hadden kunnen maken.

Conclusie

Zo zie je maar. Deze voorbeelden maken duidelijk dat webdesign een kunst op zich is, maar er is een voorbehoud bij het denken in esthetische termen. Websiteontwikkeling en -ontwerp moeten in de eerste plaats functioneel zijn (d.w.z. het primaire doel van professioneel webdesign is het dienen van een functie). Dit geldt of u nu een beginner bent en gebruik maakt van WordPress thema's of zelfs als je een echte ontwerper bent.

Hopelijk laten deze gevallen van webdesign en -ontwikkeling zien dat je prachtige afbeeldingen kunt integreren die een doel dienen en de bezoeker leiden naar een ander doel. publiek op een samenhangende manier door je webpagina. Het zijn niet zomaar mooie webpagina's, het is functionele kunst die bedoeld is om volledig responsief te zijn. Als je hier iets uit kunt afleiden, dan is het wel om gelijke delen "visueel" en gelijke delen "ontwerp" te gebruiken om de gebruikerservaring te optimaliseren.

Als je geïnteresseerd bent in onze website ontwikkeling en webdesigndiensten, laat het ons weten.

Afgezien van de uitgelichte afbeelding, Alle afbeeldingscredits gaan naar de respectievelijke websites.