Inhoudsopgave:
- Meer afbeeldingen en illustraties
- Horizontaal scrollen
- Verticaal scrollen
- Vaste headers
- Creatieve navigatie
- Storytelling
- Navigeren binnen één pagina
- Afwijken van Flash
- HTML5, CSS3 en JavaScript
- Responsive Web Design
Video: Really Good UX Examples - Design Tool Tuesday, Ep18 2024
Door Adobe Edge Animate te gebruiken, kunt u alle ontwerptrends maken die hier worden vermeld. De webontwerptrends die hier worden gepresenteerd, vertegenwoordigen grotendeels niet alleen nieuwe coderingstechnieken, maar ook nieuwe manieren waarop uw publiek op boeiende manieren met uw site kan communiceren. Wanneer je de aandacht van je publiek trekt en ze geïntrigeerd raakt in je webontwerp, ben je goed op weg om dat publiek te behouden.
Meer afbeeldingen en illustraties
Ben je moe en verveeld om naar een tekstwand te kijken? Zijn al die kleine afbeeldingen en pictogrammen er een beetje gedateerd uit gaan zien? Maakt een egale achtergrondkleur je gaap? Als je je zo voelt, is de kans groot dat je publiek hetzelfde voelt.
Door meer afbeeldingen en illustraties aan uw site toe te voegen, kunt u uw webontwerp aanzienlijk verbeteren. Voeg een subtiele achtergrond toe in plaats van een witte, grijze of zwarte achtergrond om uw site er actueler uit te laten zien.
U kunt eenvoudig afbeeldingen importeren voor gebruik met uw Animate-compositie en hoe u ermee kunt werken. Ontdek hoe u afbeeldingen op de achtergrond gebruikt en het verschil tussen het gebruik van een div-tag en een img-tag voor de afbeeldingen. U kunt lay-outpresets voor uw afbeeldingen instellen.
Horizontaal scrollen
Het maken van webontwerpen met horizontaal scrollen kan wat moed kosten - het is zelden gedaan - maar dat betekent nog niet dat dit niet eerder is gedaan en met veel effect. Een eenvoudige zoekopdracht op het web naar "geweldige horizontale websites" zal u niet teleurgesteld laten. U zult veel geweldige voorbeelden vinden van kunstsites, galerijen en creatieve sites die horizontaal scrollen gebruiken voor een geweldig effect.
Hoewel dit type navigatie nog relatief nieuw is, kun je door een site op deze manier te maken aan de kop van het pack komen qua modieus webontwerp.
Verticaal scrollen
Het tegenovergestelde van horizontaal scrollen is verticaal scrollen. Verticaal scrollen is al jaren een populaire trend in het webontwerp, het afgelopen jaar of twee is het overdreven sterk overdreven.
Veel sites gebruiken een oneindige verticale scroll-techniek die het publiek op de pagina houdt. Deze eindeloze presentatiestijl is ontworpen om de aandacht van het publiek te houden op een continue zoektocht naar meer inhoud.
Vaste headers
Als u besluit een geanimeerde webpagina te maken met behulp van de oneindige verticale scroll-methode, dan wilt u misschien overwegen om een vaste header aan uw site toe te voegen. Een vaste koptekst is een navigatiemenu dat bovenaan de pagina staat en het blijft zichtbaar terwijl uw doelgroep de pagina afrolt.
Met deze functie kan uw doelgroep snel navigeren van de plaats naar een ander gedeelte van uw site - en altijd weten waar ze zich bevinden.
Een vaste koptekst is een gemak dat uw publiek kan waarderen, omdat ze niet helemaal terug hoeven te scrollen naar de bovenkant van de pagina om het menu te vinden. Functies die het gebruikersgemak in gedachten houden, zullen uw publiek ook voor langere tijd op uw site houden.
Creatieve navigatie
Creatief werken met uw navigatie is netjes complementair aan het gebruik van meer illustraties en afbeeldingen in uw webontwerpen. Gebruik afbeeldingen in plaats van een standaardtekstmenu om een koppeling aan te duiden. Nadat uw gebruikers hebben geleerd dat ze op afbeeldingen kunnen klikken om door uw site te gaan, zullen ze zich meer op hun gemak voelen bij het zoeken naar koppelingen op ongebruikelijke plaatsen op uw site.
Dit soort interactie biedt de mogelijkheid om paaseieren binnen uw site te maken. Een paasei vertegenwoordigt in deze context schijnbaar verborgen inhoud die uw publiek kan verrassen en prikkelen wanneer zij erover struikelen.
Een goede manier om uw doelgroep te laten zien dat een afbeelding of een pictogram een koppeling is, is het kenmerk Cursor te gebruiken in Animate. Wanneer uw publiek de muisaanwijzer over een gekoppelde afbeelding leidt, kan de cursor van een aanwijzer in een hand veranderen, wat een link aangeeft.
Storytelling
Iedereen houdt van een boeiend verhaal. Dus, waarom zou u geen site of animatie ontwerpen die uw publiek een boeiend verhaal vertelt? In plaats van een eenvoudige restaurantwebsite te maken met alleen afbeeldingen van het eten en beschrijvingen van ingrediënten, waarom zou u dan geen fantasierijk achtergrondverhaal creëren?
Voeg niet alleen je beste gerechten toe als lokaal biologisch, boerderij-op-de-grond, duurzame goedheid, maar voeg ook een verhaal toe over het paar dat zich heeft verloofd tussen het hoofdgerecht en het dessert? Je kunt een animatie toevoegen van een ring die in een champagneglas valt, compleet met stijgende bubbels.
sitebezoekers zijn mogelijk op uw restaurantsite op zoek naar een goede maaltijd, maar blijven hier om meer te weten te komen over wat er aan de andere tafels gebeurt. Storytelling website-animaties verbeteren niet alleen de presentatie, ze kunnen ook aansluiten bij de levenservaringen van bezoekers.
Navigeren binnen één pagina
Websites met één pagina - ooit bekend als brochuresites - komen weer terug. Door uw publiek op één pagina te houden die op verschillende pagina's kan lijken, kunt u profiteren van de trend van bladeren.
In plaats van rond te klikken op verschillende pagina's in een poging iets te vinden, kan uw doelgroep in plaats daarvan door uw site scrollen terwijl ze door uw inhoud bladeren. Links die als afbeeldingen fungeren, kunnen uw publiek ook helpen rechtstreeks naar specifieke plaatsen op de site te gaan wanneer ze weten wat ze willen - terwijl ze nog steeds iemand aanspreken die terloops zoekt.
Door een site te maken die in dit gedeelte wordt beschreven, maakt u echt gebruik van een paar actuele webontwerptrends: scrollen naar informatie, meer afbeeldingen gebruiken en creatieve navigatie implementeren …
Afwijken van Flash
Adobe Flash was ooit de golf van de toekomst, maar die golf is op het strand neergestort en er komt een nieuwe golf aan.Waar Flash de belangrijkste tool was voor het maken van animaties en websites, is de hoogtijdagen van die tool aangebroken.
Adobe Edge Animate is misschien niet helemaal klaar om Flash volledig te vervangen, maar het is op weg om precies dat te bereiken. Je kunt Flash immers niet bekijken op i-apparaten zoals iPhones en iPads, en wie wil er content maken die op sommige van de meest populaire mobiele apparaten in de buurt wordt weergegeven?
HTML5, CSS3 en JavaScript
De wereld van webontwerp en coderingstechnieken is voortdurend in ontwikkeling. De grote trend in code is HTML5 en CSS3, die alleen maar meer en meer ingebakken zullen raken in de web-o-sphere. Google Chrome leidt de aanklacht en implementeert de nieuwste standaarden - naast Firefox en Safari.
Dan is er Internet Explorer - momenteel een beetje laat op het feest - maar Microsoft maakt grote vorderingen bij het bijwerken van hun browser om gelijke tred te houden.
Zorg ervoor dat uw animatie niet verbroken wordt weergegeven in oudere versies van Internet Explorer door het Down-Level Stage en de verschillende webpublicatieopties te gebruiken die Edge Animate aanbiedt. In deze optiek kan het gebruik van Adobe Edge Animate als een webontwerptrend zelf worden beschouwd!
Responsive Web Design
Responsive web design (RWD) is tegenwoordig de nieuwste rage. Het concept achter RWD is om een site te ontwerpen voor gebruik op een willekeurig aantal apparaten, van desktopmonitoren tot tablets tot telefoons. Hoewel webontwerpers kunnen worden opgesplitst om een mobiele site apart van een desktopsite te maken, of om een enkele site te maken die kan reageren op de grootte van de browser, is de trend naar het responsieve camp.
De reden hiervoor is vrij eenvoudig: door een responsieve site te maken hoeft u niet twee verschillende sites bij te werken. RWD-punten creëren in de richting van de toekomst; de meer geavanceerde coderingstechnieken en -hulpmiddelen worden, hoe beter ze zullen werken met RWD. Beschouw het als een extra manier waarop Adobe Edge Animate je in de voorhoede van trends in webdesign plaatst.