4 manieren om rijkere webervaringen te creëren
Het web is enorm geëvolueerd van een eenvoudige documentrepository en we hebben nu browsers die in staat zijn tot rijke visuele interacties op zowel desktop als mobiel.
Omdat ik het in dit artikel graag zou willen hebben over waar het web heen gaat, hebben veel van de functies die ik zal behandelen mogelijk beperkte ondersteuning, dus het is belangrijk om bronnen zoals caniuse.com met een krachtige lijst met functies en diagrammen die specificeren waar deze worden ondersteund.
Laten we een duik nemen in de vier manieren waarop u uw site UX kunt verbeteren:
1. CSS
CSS is de stijltaal voor onze documenten, we denken hier meestal eenvoudig over, bijvoorbeeld aan het veranderen van lettertype of kleur, maar het wordt steeds krachtiger met functies zoals transformaties en animaties. We krijgen ook nieuwe functies om het nog krachtiger te maken.
Als u Vector Maskers hebt gebruikt in hulpmiddelen zoals Photoshop, zou u bekend moeten zijn met het idee erachter CSS-clippaden. Met deze functie kunt u een vorm in CSS definiëren die de transparante en ondoorzichtige delen van uw HTML-inhoud definieert. Deze werken geweldig met CSS-overgangen voor het verbergen en onthullen van UI-elementen. Op dezelfde manier banen CSS-maskers hun weg naar het web, waarmee u de transparante delen van uw inhoud kunt definiëren met behulp van een afbeelding. Hiermee kunt u transparantie beter gebruiken in uw ontwerpen voor visuele interesse of texturen.
2. SVG
De meeste afbeeldingen die we vandaag op het web vinden, zijn rasterafbeeldingen, opgebouwd uit pixels. Dit betekent dat als we ze schalen of ze bekijken op apparaten met een hogere resolutie ze worden gepixeld.
Vectorafbeeldingen zijn geweldig omdat ze zijn opgebouwd uit geometrische primitieven die hun scherpe randen op elke grootte behouden.
SVG is het vectorformaat voor internet. We kunnen het gebruiken om afbeeldingen weer te geven en zelfs de eigenschappen ervan met CSS te manipuleren en animeren. Waar SVG echt krachtig wordt, is wanneer we het combineren met scripting. breuk is een JavaScript-bibliotheek die het gemakkelijk maakt om SVG-inhoud te manipuleren en te animeren. Het is gericht op moderne browsers, dus het ondersteunt de nieuwste SVG-functies zoals groepen en clippaden. Snap is open source op GitHub en we hebben het zelfs gebruikt om een rijke geanimeerde banneradvertentie te maken, je kunt er meer over lezen inmijn blog.
En hier is een voorbeeld van een ad we deden SVG gebruiken.
3. 2D Canvas
2D Canvas is een andere krachtige functie van het web dat is geoptimaliseerd voor het tekenen van vormen en afbeeldingen. Het biedt een JavaScript-API die u granulaire controle over uw canvaselement geeft. Het geeft je ook de vrijheid om andere vormen van media, zoals video, te integreren, waardoor het potentieel ontstaat voor rijke interactieve knoppen die videobeelden afspelen, pauzeren of scrubben. 2D Canvas ondersteunt nu mengmodi, waarmee u de kleuren van lagen op visueel interessante manieren kunt mixen, waarover u meer kunt lezen hier.
We beginnen ook ondersteuning te krijgen voor alfavideo waarmee we video beter kunnen integreren in onze inhoud. Een leuk voorbeeld van alpha video is in OK Go's muziekvideo 'WTF' .
OK Go staat bekend om uitgebreide videoclips, en in deze specifieke video ze shot choreografie voor een groen scherm. Daarna ging het gebruik van nabewerking door met het weergeven van de beelden bovenop zichzelf, waardoor een koel echo-effect werd gecreëerd waar de transparantie was. We kunnen dit effect reproduceren met 2D Canvas, maar we kunnen nog een stap verder gaan en het interactief maken met functies zoals doekmengmodi om in realtime nieuwe visuele effecten te creëren.
4. WebGL
WebGL biedt een low-level API voor het tekenen van hardwareversnelde 2D- en 3D-afbeeldingen. Het potentieel is hier console-achtige games, zoals Grand Theft Auto 5 die rechtstreeks in uw browser worden uitgevoerd. Zoals je je kunt voorstellen wordt WebGL enigszins gecompliceerd, gelukkig houden open-sourcebibliotheken dat wel leuk Three.js zorg voor een geweldig instappunt met geweldige voorbeelden om je op weg te helpen.
GitHub is een geweldige bron voor de open-sourcecommunity geworden. Je kunt Three.js en Snap on GitHub vinden, evenals andere geweldige bibliotheken die het gemakkelijker maken om fantastisch werk op het web te doen. Ik zet vaak ook experimenten en hulpmiddelen op GitHub, zoals een camera spline tool Vroeger maakte ik camerapaden voor Three.js om door 3D-werelden te vliegen.
Zoals we kunnen zien, wordt het web steeds diverser en krachtiger, het is een opwindende tijd om een webontwikkelaar te zijn. De verscheidenheid aan technologieën en bronnen waartoe we toegang hebben groeit voortdurend en het is leuk om de rijke ervaringen te zien die mensen met hen creëren.