Share
Afstemming is een van die dingen die hand in hand gaat bij het werken met grid-systemen. Het onderwerp van afstemming is niet alleen een kwestie van kiezen of je tekst of afbeeldingen links of rechts van een ontwerp wilt uitlijnen (hoewel die beslissingen er natuurlijk nog steeds toe doen), in plaats daarvan gebruiken we afstemming om onze ontwerpen te verbeteren. Een juiste uitlijning in uw ontwerpen maakt ze visueel aantrekkelijker en maakt het ook gemakkelijker voor gebruikers om over een pagina te scannen, onbewust ook voor een rustigere leeservaring.
Alle elementen in je ontwerp moeten op een of andere manier worden uitgelijnd, of dit nu gewoon tekst op je pagina is, afbeeldingen gemengd in de tekst (of zelfs kop- of heldafbeeldingen), video's, knoppen en call-to-actions, links (in de tekst of in modules zoals een navigatiegedeelte) of andere elementen die u mogelijk heeft.
Grids zullen u een eind helpen bij het oplossen van uitlijningsproblemen of beslissingen in uw ontwerp, maar waar wij ons op moeten concentreren, is hoe de verschillende elementen, groepen elementen of bepaalde modules in uw ontwerp samenwerken. Ik heb vanaf het begin het belang benadrukt van een samenhangende gebruikerservaring en het goed afstemmen van de juiste dingen is een van die echt belangrijke dingen die kunnen bijdragen aan het verbeteren van een ervaring voor de gebruiker.
Afstemming stelt ons ook in staat om bewuste beslissingen te nemen over waar elementen worden geplaatst en hoe ze met elkaar omgaan. Het creëren van goede afstemming overbrugt de visuele kloof tussen elk element in uw ontwerp, en helpt ons om relaties te creëren tussen de elementen die we hebben. Anders hebben we een ontwerp met overal tekstblokken en afbeeldingen, die weinig betekenis hebben zonder structuur.
Zoals in de vorige rasterartikelen is uitgelegd, lijkt het erop dat veel mensen een hekel hebben aan rasters omdat ze deze beperken; dat ze vaak alle kansen op creativiteit binnen een ontwerp verbrijzelen.
Dit is volkomen begrijpelijk. Grids zijn een hoop kolommen en rijen die ons in essentie helpen bij het maken van blokken; CSS legt over het algemeen element uit in een doosrangschikking. Het kan echter moeilijk zijn om een geschikt moment te herkennen om ons netwerk te verlaten.
Niet alles op het ontwerp van uw website moet op één lijn liggen. Soms kan dit, afhankelijk van je ontwerp of de manier waarop je werkt, de creativiteit onderdrukken. Denk in plaats daarvan na over hoe je kunt mengen jouw uitlijningen. Op deze manier zorg je er nog steeds voor dat er een patroon is voor elk element of elke module op je website, maar door de uitlijningen te combineren zorg je ervoor dat je nog steeds iets van visueel belang creëert dat ervoor zorgt dat je gebruikers de website blijven verkennen.
Het mengen van uitlijningen betekent ook dat je een beetje meer kunt spelen met lay-outs en rasters - in plaats van een 6-kolommen raster te gebruiken, waarom introduceer je dan niet nog een raster waarmee je een overlay kunt maken - zoals een 4-kolom raster.
Een voorbeeld van een rasteroverlay: zes kolommen met vier kolomlay-outs als overlay. Ingebouwde Gridset-app. Terwijl u dan niet strikt van uw raster breekt, introduceert u in plaats daarvan een nieuw raster waarmee u kunt werken, met nog meer uitlijnings- en lay-outopties in uw ontwerpen.
Het combineren van uitlijningen betekent niet alleen dat je nieuwe roosters, kolommen of extra's in je structuur introduceert. Gebruik in plaats daarvan uw huidige raster om te mixen welke elementen op welke kolommen zijn uitgelijnd. U kunt bijvoorbeeld uw headerelementen laten uitlijnen naar de randen van de eerste en de laatste kolom - maar u kunt dan besluiten om uw hoofdtekst uit te lijnen met de eerste en de voorlaatste kolom. Het mooie is dat een raster u een bijna eindeloze hoeveelheid uitlijningsopties biedt, zelfs met zoiets klein als een 4-6 kolomraster.
Het mengen van uitlijningen is een manier om uw gebruikers geïnteresseerd en alert te houden tijdens het browsen op een website. In plaats van elementen vergelijkbaar te houden, introduceert het een ander niveau van focus op de elementen van je ontwerp, hoe onbewust dat ook is.
De belangrijkste uitlijningsopties die u voor uw tekst hebt, lijken sterk op de beschikbare opties in CSS: links, rechts, gecentreerd of gerechtvaardigd. Eigenlijk heel duidelijk; als je links je tekst hebt uitgelijnd dan zal deze naar links afdrijven, als je je tekst rechts uitlijnt zal deze naar rechts neigen.
In plaats daarvan, is wat u wilt bedenken hoe geschikt deze uitlijningen zijn voor uw tekst en hoe ze in uw ontwerp zitten. Kleine hoeveelheden tekst kunnen bijvoorbeeld goed werken in een gecentreerde uitlijning, hoewel dit verwarrend en moeilijker te lezen is op grotere stukken tekst. Op dezelfde manier kan het bij kopteksten goed werken in uw ontwerp om ze centraal uit te lijnen, hoewel dit afhangt van de grootte van de tekst en waar deze wordt geplaatst. Een centraal uitgelijnde kop werkt bijvoorbeeld mogelijk niet goed wanneer deze een groot stuk tekst bevat dat direct links uitgelijnd is.
U moet ook nadenken over de culturen die mogelijk worden blootgesteld aan uw ontwerp en website. In sommige culturen lees je van rechts naar links, maar in de westerse culturen is het van links naar rechts en van boven naar beneden.
.inhoud richting: rtl; text-align: right;
Vanwege de Westerse cultuur van lezen van links naar rechts, zal het waarschijnlijk moeilijk zijn om een grote hoeveelheid tekst rechts uitgelijnd te hebben. Gebruik in plaats daarvan die uitlijningen die moeilijker te lezen zijn in zeer kleine hoeveelheden, in meer een ontwerpfunctie zoals in een voettekst voor adres- of contactgegevens, of in een kop met een lijst met navigatielinks.
Het uitlijnen van afbeeldingen kan moeilijk zijn, omdat de uitlijning die u voor elke afbeelding moet gebruiken, relatief is aan de grootte van de afbeelding. Kleinere afbeeldingen zijn natuurlijk gemakkelijker in uw inhoud te plaatsen op een manier die de inhoud niet verstoort, terwijl grotere afbeeldingen de leesstroom meer verstoren en daarom moeilijker in uw inhoud te plaatsen zijn.
Je hebt twee opties; plaats uw afbeeldingen buiten de inhoudsstroom (bijvoorbeeld tussen alinea's of aan het begin of einde van uw inhoud), of u kunt een manier bedenken om uw afbeeldingen in uw raster te plaatsen.
De eerste optie is vrij eenvoudig te implementeren. Zonder de tekststroom te verstoren, kunt u afbeeldingen plaatsen op de volledige breedte of een aangepaste breedte en centreren binnen het gebied waarin de tekst zich normaal bevindt. Dit is eenvoudig genoeg en ziet er nog steeds goed uit, terwijl het goed werkt wanneer we een website schalen als het is responsief.
De tweede optie kan wat gecompliceerder worden, afhankelijk van hoe u besluit de afbeeldingen in uw inhoud te plaatsen. Je hebt verschillende opties. Je kunt eerst de afbeeldingen perfect (links of rechts) laten uitlijnen met je tekst, of je kunt de afbeeldingen enigszins voorbij de rand van de inhoud laten uitkomen.
Op deze manier kunnen uw afbeeldingen één volledige kolombreedte in de inhoud worden geplaatst, met de inhoud rond de afbeelding. Dit verstoort de leesstroom niet zozeer als wanneer de afbeelding volledig in het inhoudsgebied is geplaatst, maar het voegt ook interesse toe aan uw ontwerp - omdat u een ander uitlijngebied voor uw elementen creëert dat uw ontwerp visueel frisser zal houden en aantrekkelijker.
Het uitlijnen van achtergrondafbeeldingen is een van die kleine lastige dingen - en nogmaals, het is allemaal gerelateerd aan je ontwerp en onderwerp, evenals de grootte van de achtergrondafbeelding zelf.
Net als bij de tekstuitlijningen, kan de uitlijning van uw achtergrondafbeeldingen zeer goed overeenkomen met uw CSS-regels; vast, absoluut, naar boven of naar beneden, naar links of naar rechts? Echt, dit is afhankelijk van je ontwerp en hoe de achtergrond daarop aansluit. Als uw ontwerp een patroon heeft, bedenk dan hoe dat patroon overeenkomt met uw elementen - u wilt ervoor zorgen dat het goed aansluit op uw elementen, anders kan het het hele ontwerp volledig weggooien.
Denk ook na over hoe het eruit ziet als je een grote achtergrondafbeelding hebt en hoe dat in je ontwerp past. Als ze groot en nogal een grote focus hebben, bedenk dan misschien hoe je andere elementen en modules bij dat ontwerp passen. Kan uw hoofdtekst bijvoorbeeld worden uitgelijnd met de randen van het ontwerp? Het gaat erom te vragen hoe uw afbeeldingen werken met de andere delen van uw ontwerp en hoe u ermee kunt werken om uw ontwerp mooier te maken en veel beter samen te werken.
Wanneer ik een elementengroep beschrijf, denk ik dat het heel anders is dan wat ik zou beschrijven als een module.
Als je denkt in termen van modules-zowel bij het ontwerpen als bij het ontwikkelen van het website-ontwerp, ik beschouw ze als een groep elementen, gerelateerd aan elkaar, die dicht bij elkaar staan. Voorbeelden van modules voor mij zijn een groep links, een hero-afbeelding en een overlappende tekst of header; alles dat gegroepeerd kan worden, is een herhaalbaar patroon of een zelfstandige module.
Echter, een elementgroep is een groep elementen in je ontwerp, welke niet nodig moeten dicht bij elkaar zijn. Een elementengroep kan bijvoorbeeld zowel uw headeritems (bijvoorbeeld logo- en navigatielinks) als uw voettekstitems zijn (misschien een andere reeks links, naast een copyrightvermelding). Dit zijn elementgroepen en u kunt deze elementgroepen vervolgens in uw ontwerp uitlijnen. Hoewel de koptekst en de voettekst mogelijk niet op dezelfde schermruimte zichtbaar zijn als elkaar, zorgen deze subtiele toepassingen van uitlijning voor een sterker, meer visueel aantrekkelijk en veel consistenter ontwerp.
Andere voorbeelden van elementgroepen zijn eenvoudigweg zowel de tekst als de afbeeldingen van uw hoofdkopie op een pagina, of kunnen zelfs zo eenvoudig zijn als één set navigatielinks of -elementen. In een meer complexe navigatie kunt u bijvoorbeeld de hoofdtekstkoppelingen hebben, maar ook een kleinere "subtitel" naar de koppeling. Bovendien hebt u mogelijk een pictogram boven of onder de linktekst. Hoewel dit allemaal individuele bits zijn en die drie bits één link vormen, kunnen al deze afzonderlijke links een complexe navigatiemodule vormen, maar kunnen ze ook als een elementengroep worden samengesteld, die u vervolgens kunt afstemmen op andere groepen in het ontwerp..
Nu weet u alles over uitlijning in uw ontwerpen (en met uw rasters). Ik wil dat u naar uw ontwerpen gaat kijken en bekijkt hoe alle elementen op één lijn liggen. Probeer verschillende elementen, elementgroepen te groeperen en bekijk de tekst en afbeeldingen in uw ontwerpen.
Kijk wat u kunt doen om een beter ontwerp te maken door elk element in uw ontwerp op de juiste manier uit te lijnen. Gebruik het rastersysteem van je laatste opdracht om alle elementen in je ontwerp op één lijn te brengen met de tips in de post van vandaag.
Accentsconagua