Visuele inhoud Richting Wat je moet weten
De visuele richting van inhoud is een minder vaak besproken, maar cruciaal aspect van hoogconverterend webontwerp. Elke bezoeker "haalt een nieuwe site op bij het laden van de eerste pagina - of ze het bewust doen of niet.
Esthetiek speelt wel een rol, maar het gaat meer om het algemene gevoel van het ontwerp. Dit gevoel kan worden beïnvloed door witruimte, typografie, symmetrie, maar meestal relaties tussen pagina-elementen.
Ontwerpers willen bezoekers blijf op de pagina en blijf scrollen door hun aandacht te trekken en hen geïnteresseerd te houden in de site. Ontwerpprincipes moeten altijd scherp zijn op functie voor formulier. Dit betekent dat het ontwerp zou moeten de inhoud aanvullen, niet induwen als een bijzaak.
In deze post wil ik u graag enkele tips geven over hoe u dit kunt doen verbeter uw lay-outs en visuele contentstromen op uw site.
Focus op de compositie
Elk stukje van een website bouwt op de algemene lay-out. Deze algemene lay-out creëert een compositie die de regels van de Gestalt-theorie volgt die dat stelt het geheel is altijd groter dan de som der delen.
Individuele delen van een pagina komen samen bij een geheel vormen. Ontwerpelementen moeten bouwen zwaartekracht over de inhoud; alles op de pagina zou moeten leiden bezoekers op een natuurlijke manier verder naar beneden tot ze de onderkant van de pagina bereiken.
Dit is de reden waarom relaties tussen verschillende delen van de inhoud (visuals, tekst, knoppen, etc.) zo belangrijk zijn om te ontwerpen.
Je doel zou moeten zijn mensen aanmoedigen om vanuit hun eigen neiging door de site te bladeren. Het is makkelijker gezegd dan gedaan, maar je kunt er veel van leren echte voorbeelden bestuderen.
De startpagina voor Monkop is een geweldig voorbeeld van visuele hiërarchie met zowel tekst als beeldmateriaal. Er wordt veel ruimte tussen elementen gebruikt en de typografie vormt een aanvulling op de vectorillustraties van het merk.
Terwijl je scrolt, zul je merken rechte horizontale paginablokken gedeeld door kleuren, randen en afbeeldingen. Deze zijn gebouwd met ontwerp patronen in gedachten bied consistentie aan op de hele pagina.
Naar de bodem, zul je een vinden twee kolommen splitsen met afbeeldingen aan de ene kant, tekst aan de andere kant. De afbeeldingen ook zijden wisselen in een patroon van rechts-links-rechts-links. Dit vestigt de aandacht, en breekt de monotonie uit van de typische pagina terwijl je nog steeds bent een natuurlijke stroom behouden in de inhoud.
EEN vergelijkbare ontwerpesthetiek is te vinden op de website van Picjumbo, een landingspagina voor een foto-add-on voor gebruikers van Photoshop en Sketch.
De startpagina legt de nadruk op het logo en de voorbeeldvideo. Terwijl u scrolt, ziet u aangepaste animaties die op de hele pagina worden verplaatst. Deze animatie echt vangt de aandacht, en krijgt de kijker geïnteresseerd om te blijven scrollen.
Over het algemeen voelt de pagina aan Open en makkelijk te bladeren. De inhoud is verdeeld in horizontale blokken met heldere typografie en duidelijke pictogrammen.
Overweeg de manier waarop verschillende pagina-elementen balans samen, de ruimte tussen elementen, contrast tussen kleuren en verschillende vormen. Al deze dingen spelen een rol in de algehele compositie. Elke site trekt natuurlijk een bepaald gewicht op de inhoud.
Er is geen absoluut antwoord omdat het voor elke site anders is. Bijvoorbeeld, Sommige navigatielinks zien er beter uit als ze groot en te groot zijn. Anderen passen beter wanneer ze zijn klein met hoofdletters.
Ik stel voor dat je andere websites in je niche bestudeert. Analyseer echt hoe ze zijn samengesteld. Probeer zelfs om lay-outs opnieuw te bouwen om te zien welke elementen het ontwerp uiteindelijk samen laten komen..
Type ontwerp is belangrijk
De manier waarop u uw typografie ontwerpt invloed op de richting van de inhoud op uw site. Dit heeft te maken met typehiërarchie en de ontwerpstijlen van verschillende pagina-elementen zoals alinea's, koppen, lijsten met opsommingen, aanhalingstekens en speciale lay-outelementen zoals kolommen of tabellen.
visuals kan ook de lay-out beïnvloeden, dus het is een goed idee om inhoud te ontwerpen met een natuurlijke progressie. Schrijf inhoud op een manier die stroomt naar beneden op de pagina, en houdt mensen aan het lezen door elke paragraaf.
De grootste tool die je tot je beschikking hebt is jouw oog voor ontwerp. Leer de verschillen in typografische elementen herkennen en hoe ze zich verhouden tot andere pagina-elementen. Maak relaties tussen paginasecties om inhoudsgebieden te onderscheiden.
Sommige dingen die u zou kunnen overwegen:
- Lettergrootte
- Lettertype familie
- Kleurcontrast
- Relaties tussen paginasecties
- Lijnhoogte en paragraafmarges
- Letterafstand en hoofdletters / kleine letters
Bekijk bijvoorbeeld de startpagina van Campagnemonitor. De bovenste navigatielinks gebruiken alle hoofdletters met kleine letters. Andere headers op de pagina volg ditzelfde ontwerp met alle doppen welke creëert een gevoel van uniformiteit.
Andere grotere headers op de site zijn veel prominenter, en ze springen echt van de pagina af. Alleen al door naar een typisch headerontwerp te kijken, zou het gemakkelijk moeten zijn Merk het verschil op tussen een header en de gepaarde body-kopie.
De typografische ontwerpstijlen in Campagnemonitor zijn uitstekend, en zij meng op natuurlijke wijze in de lay-out. Er is oefening voor nodig om een resultaat als dit te bereiken, maar hoe meer je probeert, hoe makkelijker het zal zijn.
Om een beetje meer te leren, raad ik de volgende links ten zeerste aan:
- Ontwerpuitgangspunten: visueel gewicht en richting
- Werken met visueel gewicht in uw ontwerpen
- 19 factoren die van invloed zijn op compositionele balans
Leidende inhoud
Begrijp dat verschillende soorten websites hebben verschillende methoden voor het begeleiden van bezoekers door de site. Landingspagina's willen bijvoorbeeld bezoekers begeleiden weetjes, kleine pictogrammen, screenshots, en getuigenissen.
Andere sites zoals blogs brengen meestal niet meteen mensen naar de startpagina. De meeste mensen landen op een artikelpagina, dus blogpost lay-outs zijn bedoeld om markeer de kop, en mensen tekenen verder in de inhoud. Hier komt copywriting van hoge kwaliteit aan bod, omdat u wilt dat lezers elk woord horen hangen.
Sociale netwerken en web-apps nodig hebben hoogwaardige gebruikerservaring, dus dat is een iets ander onderwerp, maar bedenk hoe de Facebook-feed is ontworpen moedig scrollen en gebruikersinteractie aan.
De ontwerpmethoden die u gebruikt om mensen door de site te laten bladeren zullen dat doen veranderen na verloop van tijd. Maar over het algemeen is uw doel om gids bezoekers met een visuele inhoudsrichting.
Laten we een kijkje nemen naar a bestemmingspagina en een blog ontwerp om de verschillen te herkennen.
Cactus is een statische site-generator voor OS X. Hun startpagina volgt nauwgezet de ontwerpstijl van Apple - veel witruimte en dunne schreefloze lettertypen.
Inhoud is georganiseerd in kolommen, blokken en stukjes tekst met eenvoudige afbeeldingen. Deze zelfde esthetiek is gemeenschappelijk met Apple-producten, dus Mac-gebruikers zullen genieten van deze ontwerpstijl.
Informatie over het product - inclusief functies en instellingen - staat op de startpagina. De pagina zelf moedigt scrollen aan via unieke inhoud, basispictogrammen en een afwisselend kolompatroon van links / rechts-inhoudsblokken.
Het doel hier is om informatie aan te bieden bestaande gebruikers, en om te verkopen nieuwe gebruikers het idee van Cactus.
Vergelijk dat ontwerp nu met de startpagina voor The Next Web. De inhoud is veel meer sporadisch op een startpagina van een blog, omdat die er is veel verschillende berichtthema's.
Rechthoeken creëren een rastersysteem dat inkapselt meerdere berichten in één lay-out. Het doel is hier om laat gebruikers lezen van inhoud op de site. Het maakt niet uit of bezoekers iets downloaden, maar het maakt wel uit of ze dat doen blijf rondhangen om iets te lezen.
De manier om mensen te laten lezen is met mooie foto's en pakkende koppen. TNW doet het uitstekend, en hun lay-out is gebouwd om mensen te laten browsen met gerelateerde berichtminiaturen in het zijbalk- en na-inhoudgebied.
Het begeleiden van bezoekers aan een bepaalde actie is anders op elke site. Maar je kunt veel leren door te onderzoeken wat andere succesvolle sites doen en te leren kopiëren.
Vertrouw op je ogen
Individuele ontwerpeigenschappen kunnen analytisch worden uitgelegd, maar de implementatie verandert voor elke site. Een hero-afbeelding met de link "Verder scrollen" doet niet hetzelfde op alle websites.
Leren ontwerpen is heel erg een visueel proces. Je oog voor design is het belangrijkste aspect. Je moet dingen goed bekijken om dit te identificeren visuele hiërarchie. Als je het op andere websites kunt zien, kun je het repliceren op je eigen sites.
Het beste advies dat ik heb, is om vertrouw gewoon je ogen. Maak een lijst met uw favoriete websites en besteed 5 minuten aan het doorbladeren van elke website. Noteer uw favoriete elementen op de pagina en hoe deze van invloed zijn op het ontwerp. Dit zal je helpen internaliseer deze concepten vanuit een UI / UX-perspectief, in plaats van het perspectief van een gebruiker.
Wees ook niet bang om dingen te proberen! Niemand heeft goed kunnen ontwerpen net door artikelen over design te lezen. Ja, ze helpen - ze kunnen echt veel helpen. Maar jij nodig hebben naar maak nieuwe dingen om te leren wat werken en wat niet.
Train uw oog door website-indelingen die u leuk vindt te bestuderen en ze opnieuw te maken. Na verloop van tijd bouw je een patroonbibliotheek op waardoor het ontwerpen van nieuwe sites veel gemakkelijker wordt.
Afsluiten
Hopelijk helpen deze tips u op weg en geven ze u een routekaart die u moet volgen. Het is niet eenvoudig om een webontwerper te worden, maar de wereld heeft wel talent nodig en het is nog nooit zo eenvoudig geweest om jezelf deze fundamentele concepten te leren.
Studie de beste voorbeelden van websites met pagina-elementen die u leuk vindt. Trein je oog om relaties te herkennen, en je zult snel zijn ontwikkelen de vaardigheden die nodig zijn om kopiëren die relaties in je eigen werk.
