Share
Lang geleden, aan het begin van deze serie, hebben we veel gesproken over inhoud en het belang van content in elk ontwerp. Het is iets dat duidelijk moet worden bekeken en gesorteerd voordat u een project start, maar u krijgt pas de echte resultaten van dit werk te zien zodra u begint met het ontwerpen.
Wanneer we aan het begin van het proces met inhoud werken, moeten we proberen een structuur te vinden die werkt voor de inhoud. Denk ook terug aan de schets- en wireframing-fasen van het proces. Hier keken we naar de ideeën die we hadden om onze inhoud op een manier te presenteren die goed werkte en een goede hiërarchie had. Nu willen we die inhoudhiërarchie zichtbaar en zichtbaar maken via onze ontwerpen.
Op de startpagina van Fusion Ads wordt inhoud gebruikt om de gebruiker kennis te laten maken met het product, terwijl het product ook in actie wordt weergegeven. Dus hoe doen we dat? Eerst moeten we beslissen wat in onze inhoud relevant is voor onze gebruikers en waarom - we moeten in staat zijn om de beslissingen die we maken te rechtvaardigen. We moeten ook kijken naar wat de focus moet zijn in onze inhoud, het stukje informatie waar onze gebruikers echt aandacht aan willen besteden. Vervolgens moeten we dit vertalen naar een meer visuele vorm.
We doen dit door de inhoud op een manier op te stellen die betrekking heeft op onze oorspronkelijke gewenste inhoudsstructuur. Dit gaat niet alleen over kopjes en alinea's, we moeten meer nadenken over hoe de inhoud leest als deze eenmaal op de pagina staat, en de nadruk die op alle verschillende elementen moet worden gelegd. Zodra we wat basisinhoud hebben, kunnen we verschillende hulpmiddelen en hulpmiddelen gaan gebruiken om onze aandacht te richten op het maken van bepaalde delen die sterker moeten worden benadrukt en meer opvallen.
Onderaan de startpagina van Fusion Ads staat een veelgestelde vraag waarin alle informatie evenwichtig en gemakkelijk te lezen is, wat super belangrijk is voor dat soort inhoud. De grootte kan zowel betrekking hebben op de grootte van de afzonderlijke stukjes inhoud die u in uw ontwerp hebt, als op andere elementen, zoals afbeeldingen, en hoe deze tegen elkaar spelen. Gebruik bijvoorbeeld de grootte om de aandacht te vestigen op de hoofdrubrieken. Door er zeker van te zijn dat ze misschien groter zijn dan de hoofdinhoud, blijkt dat ze van een ander niveau van belang zijn en dat de gebruiker moet letten op.
De grootte is ook goed voor het opdelen van de inhoud van je pagina in kleinere delen en het benadrukken van kleine delen van inhoud die belangrijk zijn. Je kunt ook de grootte gebruiken om de nadruk te leggen weg van bepaalde elementen of stukjes content die je minder opvalt of die niet zo belangrijk zijn als de rest. Dit sluit ook sterk aan op contrast - het creëren van een meer visuele inhoudshiërarchie die behoorlijk contrasteert, draagt bij aan de visuele impact in uw ontwerp.
Lettertypegewichten en -stijlen slim gebruiken is een geweldige manier om subtielere nadruk toe te voegen aan delen van uw inhoud die kunnen worden verspreid en verspreid met de rest van de belangrijkste inhoud die u heeft. Het gebruik van lettertypegewichten die zwaarder zijn dan de rest van uw inhoud (zoals een vetgedrukte versie van een lettertype in uw ontwerp) of in een andere letterstijl (zoals cursief) kan geweldig zijn om de nadruk te leggen op kleine stukjes inhoud die u misschien willen trekken en een beetje meer erkenning geven, zonder de rest van het ontwerp te overheersen.
Gebruik ook lettertypegewichten en -stijlen om impact en sterke nadruk op uw ontwerpen te krijgen. Als de ontwerpstijl het bijvoorbeeld toestaat, kan het gebruik van een 'licht' gewicht van een lettertype (dat vaak veel dunner is dan standaard lettertype gewichten) goed werken om impact toe te voegen aan grote koppen, zoals het voorbeeld dat u hieronder kunt zien.
Hoewel veel van de A List Apart-artikelen extreem content-zwaar zijn, slagen ze er toch in om die inhoud op een echt evenwichtige, verteerbare manier weer te geven. Het gebruik van verschillende lettergroottes en stijlen helpt hierbij. Variërende kleuren zijn een ander effectief waarmee u inhoud in uw ontwerpen kunt verdelen en weergeven. Dit betekent niet dat je overal spetterende kleuren gebruikt, maar gebruik deze subtiel om focus toe te voegen aan delen van je ontwerp, door inhoudsgebieden te blokkeren of te gebruiken in je inhoud om de nadruk te leggen op tekst waarvoor het nodig is.
Hoe u uw inhoud positioneert, heeft een grote impact op hoe uw gebruikers het ervaren. Zorgen dat u naar uw rastersysteem werkt en uw inhoud goed afstemt, is erg belangrijk. Afstemming zorgt ook voor orde in uw ontwerp, helpt om het verhaal van uw website te vertellen en uw gebruikers te begeleiden tijdens een reis door uw website.
Kleur, uitlijning en rasters spelen een grote rol in het webdesign van The Verge. Er is veel inhoud om naar te kijken, maar met behulp van kleur kunnen ze het gemakkelijker maken om te focussen op welke modules of stukjes tekst van elkaar verschillen. Kijken naar hoe dicht of ver uit elkaar gelegen elementen in je ontwerp op een afstand staan, is essentieel voor het opbouwen van een visuele inhoudshiërarchie die impact heeft en zinvol is. Als elementen die verwant zijn te ver uit elkaar staan, zal dit de stroom voor de gebruiker bij het lezen van de pagina doorbreken. Hetzelfde kan echter worden gezegd voor elementen die veel te dicht bij elkaar zijn geplaatst. Dingen die te krap zijn, zullen moeilijk te begrijpen zijn in termen van wat het meeste belang heeft of de meeste nadruk zou moeten hebben. Als gebruiker zal het moeilijk zijn om te begrijpen hoe je je weg kunt vinden.
Gridset gebruikt veel witruimte op zijn homepage - samen met verschillende tekststijlen en bijbehorende afbeeldingen - om belangrijke functies en voorbeelden te markeren. Nu weet u van verschillende manieren waarop u zichtbaar gewicht of nadruk op bepaalde elementen kunt toevoegen, ik wil dat u het in uw eigen ontwerp in de praktijk brengt. Probeer een van de hierboven weergegeven technieken te integreren om meer van een visuele inhoudshiërarchie aan uw ontwerp toe te voegen.
Accentsconagua