Share
Schoon. Een term die vaak wordt gebruikt om een websiteontwerp te beschrijven, maar wat betekent dit? Hoe definieer je het? Ik ben er vrij zeker van dat dit niet betekent dat de witruimte witter is dan wit of dat al het stof onder het voetstuk is geborsteld ... Laten we eens een kijkje nemen.
Ontwerpers overrompelen overal met bewondering bij het zien van een webontwerp en roepen "het is mooi, het is zo schoon!". Er is een ontelbaar aantal webdesign-round-ups gewijd aan 'schoon' ontwerp en het is een term die vrij vaak in de webontwerpgemeenschap wordt gegooid. Het is gemakkelijk om een goed voorbeeld van een strak ontwerp te vinden, omdat het een bepaald gevoel van professionaliteit en kwaliteit bevordert. Wat echter niet vaak wordt besproken, zijn de onderliggende principes en factoren die samen dit 'schone' uiterlijk creëren en dat is precies wat dit artikel beoogt te doen.
Voordat we beginnen, laten we duidelijk zijn over één ding - schoon ontwerp is geen minimaal ontwerp.
Sommige mensen kunnen de twee verwarren en het kan gemakkelijk zijn om dat te doen. Hoewel er enkele overeenkomsten en overlappingen zijn tussen ontwerpprincipes tussen beide, ben ik van mening dat er belangrijke verschillen zijn.
Minimalistisch ontwerp heeft de neiging zich te concentreren op het verwijderen van overtollige en niet-essentiële elementen om de inhoud en kernboodschap van de site centraal te stellen. Elk element moet een gerechtvaardigd doel hebben. Minimalistisch ontwerp van nature moet zeer bruikbaar en functioneel zijn, omdat er geen afleiding mag zijn om te concurreren met de informatie die de site probeert te communiceren.
In plaats van te vragen wat er kan worden verwijderd, zou je moeten vragen hoe het kan zijn verfijnd.
Ja, schoon ontwerp moet bruikbaar zijn en ja, het doel van de site moet duidelijk zijn. Er is echter rekening gehouden met puur esthetische elementen en creatieve flair bij het ontwerpen van een 'schone' site. In plaats van te vragen wat kan worden verwijderd (in het geval van minimalistisch ontwerp), zou je moeten vragen hoe het kan zijn verfijnd.
Als er één woord zou zijn dat ik zou gebruiken om 'schoon' ontwerp te definiëren, dan is het verfijning. Elk afzonderlijk element zou er uit moeten zien als het hoort en het ontwerp als geheel ten goede komen en aanvullen. Het totale ontwerp moet worden gebalanceerd om de informatie te laten stromen en gemakkelijk in te nemen zijn.
Voordat het tot het definitieve ontwerp komt, moet elk element nauwkeurig worden onderzocht. De ontwerper moet een moment nemen om het doel van elk element te overwegen en te beslissen of het het beste is dat het mogelijk is en of het duidelijker gemaakt kan worden.
O.K, dus nu we een algemeen begrip hebben van 'schoon' ontwerp, laten we eens kijken naar de verschillende bijdragende factoren aan deze stijl.
Een aandacht voor detail is essentieel bij het produceren van een schoon website-ontwerp. Echt geweldig, schoon ontwerp is afhankelijk van pixel-perfecte uitvoering van vele subtiele ontwerpelementen. Ogenschijnlijk kleine details zoals grenzen, hoogtepunten, schaduwen, texturen en vele andere moeten allemaal zorgvuldig worden overwogen.
Laten we als voorbeeld eens kijken naar het hoofdkenmerkgedeelte van het Studeo Wordpress-thema, ontworpen door Orman Clark. Orman is algemeen bekend om (en uiterst succesvol in) het produceren van schone, gebruiksvriendelijke Wordpress-thema's.
Waar sommige themaontwerpen eenvoudig een grote, gewaagde afbeeldingschuifregelaar kunnen implementeren, is het functiegebied van Studeo een toevluchtsoord voor delicate ontwerpdetails. Let op de subtiele textuur die op de afbeelding wordt gelegd, de ene pixel-highlight en de bijna onmisbare lichtgrijze rand onderaan. Al deze details kunnen onbetekenend lijken en kunnen zelfs door sommigen worden opgemerkt, maar samen creëren ze het gevoel van kwaliteit en verfijning.
Precisie is de sleutel bij het kiezen om op een dergelijke manier te ontwerpen. Een ding dat een schoon siteontwerp kan vernietigen, is de gevreesde halve pixel. Halve pixels kunnen voorkomen in Photoshop wanneer de lijnen en randen van vormen niet precies op de pixel staan. Wanneer dit gebeurt, worden de randen van een vorm wazig. Zoals je in de afbeelding hieronder kunt zien, zien de vierkanten aan de rechterkant er enigszins wazig uit.
Een manier om dit te voorkomen bij het ontwerpen in Photoshop is door de optie 'Snap to Pixels' te selecteren. Wanneer deze optie is geselecteerd, zijn al uw vormranden prachtig helder en schoon.
Het spreekt vanzelf dat een strak ontwerp op geen enkele manier rommelig lijkt. Veel elementen die samengekrompen zijn, geven echter het uiterlijk van een rommelige en rommelige website. Niet wat we willen. Dit is waar ruimte wordt geboden.
Whitespace, marges, padding en line-height spelen allemaal een cruciale rol bij het realiseren van een strak website-ontwerp. Door elementen van een website voldoende ruimte te geven, zorgen ze ervoor dat ze lijken te passen in en passen in het totale ontwerp. Een voldoende grote afstand geeft ook een luchtig en elegant gevoel aan een website.
Naast het feit dat u ervoor zorgt dat uw elementen goed gespatieerd zijn, is het ook noodzakelijk dat u consistent bent met de waarden die u kiest. Probeer de waarden voor marge en opvulling te herhalen wanneer dat kan en waar dit verstandig is. Rastersystemen zoals 960.gs zijn ongelooflijk nuttige hulpmiddelen bij het ontwerpen van websites op deze manier (meer hierover in een oogwenk).
Bekijk de volgende twee afbeeldingen om het volledige effect te zien dat voldoende afstand heeft op het ontwerp van een website. De eerste afbeelding is een voorbeeld van een blogpost met minimale en inconsistente hoeveelheden ruimte tussen elementen.
Nu is hier hetzelfde voorbeeld van een blogpost met royale hoeveelheden ruimte.
Het verschil dat het kan maken is behoorlijk groot. Het tweede ontwerp ziet er veel evenwichtiger en schoon uit nu alle elementen veel meer ademruimte en ruimte hebben om zich uit te strekken.
Zoals met de meeste dingen in het leven, is het echter mogelijk om te veel van het goede te hebben. Te veel afstand kan ervoor zorgen dat elementen verloren lijken te gaan en van elkaar worden losgekoppeld. Als gevolg hiervan kan de samenhang en stroom van een website worden doorbroken.
Een van de beste hulpmiddelen die u kunt gebruiken om u te helpen bij het maken van een 'schoon' websiteontwerp, is een rastersysteem. We hebben al uitgelegd hoe ze zeer nuttig kunnen zijn in termen van afstand, maar ze zijn ook van onschatbare waarde om ervoor te zorgen dat je uitlijning perfect is.
Net als spaties kan uitlijning een groot verschil maken voor het uiterlijk van een website. Correcte en ononderbroken uitlijning zorgt voor strakke lijnen over de lengte en breedte van het ontwerp van uw site. Gladde en ononderbroken lijnen zijn visueel aantrekkelijk en kunnen het oog verder langs de pagina leiden.
Het oog is erg gevoelig voor veranderingen in uitlijning en het is in staat om kleine veranderingen en inconsistenties te detecteren. Het is daarom belangrijk dat u niet alleen pixel-perfect bent bij het maken van uw ontwerpmodellen, maar ook dat deze precisie niet verloren gaat in de ontwikkelingsfase die volgt.
Idealiter zouden grote tekstblokken (in de meeste gevallen) links uitgelijnd moeten blijven. Links uitgelijnde tekst produceert een ononderbroken lijn en creëert gemakkelijk te onderscheiden kolommen met informatie. Centraal uitgelijnde tekst daarentegen creëert een ongelijke rand aan beide zijden en kan moeilijk te lezen zijn in grote kolommen. Sla de centrale uitlijning op voor korte tekstregels.
Als een uitstekend voorbeeld van uitlijning, wil je misschien Design Without Frontiers bekijken. De ontwerper heeft niet alleen uitzonderlijk gebruik gemaakt van uitlijning, ze hebben het ook overduidelijk gemaakt van hun intenties door de Photoshop-richtlijnen te simuleren die door de website lopen.
Met de komst van @ font-face en vele typediensten is typografie in webdesign nog nooit zo groot geweest, en aangezien de overgrote meerderheid van de informatie op het web tekst is, is het niet verbazingwekkend waarom. We gaan hier niet in op de fijne kneepjes van de typografie, want er zijn veel geweldige bronnen, maar we zullen een aantal manieren bekijken waarop het een belangrijke rol kan spelen.
Ten eerste is het gebruik van typografie een effectieve manier om een zeer sterke visuele hiërarchie tot stand te brengen. Als je ooit de grondbeginselen van webontwerp hebt bestudeerd, besef je dat hiërarchie nogal een groot probleem is. Het gebruik van typografie om uw hiërarchie vast te stellen, is een zeer elegante en schone methode om dit te doen. Gewoon door de grootte of het gewicht van uw tekst te veranderen, kunt u de gebruiker rond uw site leiden en het belang van verschillende elementen communiceren. U hoeft geen glanzende pijlen of luide badges te gebruiken om te benadrukken wat u wilt dat de gebruiker ziet.
Ten tweede, net zoals bepaalde kleuren harmonieus werken en elkaar aanvullen, hetzelfde geldt voor lettertypen. Er zijn veel suggesties en richtlijnen voor het koppelen en werken met meerdere lettertypen, maar voor een schoon ontwerp is het het beste om het eenvoudig te houden.
Het selecteren van twee lettertypen is over het algemeen een veilige optie, omdat te veel verschillende lettertypen een ontwerp kunnen bemoeilijken. Kiezen voor een moediger of meer decoratief lettertype voor uw koppen en een veiliger, beter leesbaar type voor uw lichaamstekst kunnen zelden misstaan. Het combineren van een schreefloos en een schreefloos lettertype kan goed werken en wordt veel toegepast.
Er zijn veel artikelen en tutorials over kleurentheorie en hoe deze van toepassing is op webdesign. Er zijn ook veel nuttige bronnen om u te helpen bij het selecteren van een geschikt kleurenpalet. Als het gaat om een schoon ontwerp, zijn er enkele basisrichtlijnen.
De overgrote meerderheid van schone websites kiest om een aantal redenen voor een licht, neutraal en beperkt kleurenpalet.
Wit, grijs en lichte kleuren zijn eenvoudig en ingetogen, waardoor elke inhoud de aandacht van de gebruiker kan krijgen. Dit is ideaal vanuit het oogpunt van bruikbaarheid en voor diegenen die willen dat hun werk centraal staat, zoals ontwerpers en fotografen. Kleine spatten van kleur worden vaak gebruikt om bepaalde elementen zoals logo's, navigatie en koppen te accentueren om een visuele hiërarchie tot stand te brengen.
Sterke kleuren, vooral als er veel worden gebruikt, kunnen een strak ontwerp te ingewikkeld maken en de aandacht van de gebruiker afleiden. Kleur roept bepaalde emoties en reacties op en te veel kleuren kunnen meerdere en tegenstrijdige gevoelens opwekken. Het laatste wat we willen is dat een gebruiker zich verward voelt bij het bekijken van onze website.
Dit wil niet zeggen dat een schoon ontwerp niet kleurrijk kan zijn, omdat er altijd uitzonderingen zijn op de regel en er veel voorbeelden zijn van een schoon ontwerp waarbij kleur effectief wordt gebruikt. Er zijn ook algemene richtlijnen als u kleur wilt of moet gebruiken in uw strakke ontwerpen.
Kies voor enkele, effen kleuren in plaats van verlopen in uw ontwerp. Stevige kleurblokken creëren duidelijke, ononderbroken lijnen en helpen verschillende secties van een ontwerp te onderscheiden. Verlopen, patronen en texturen kunnen storend werken en de leesbaarheid van tekst verminderen. Als u besluit hellingen en texturen te gebruiken, moet u het subtiel en subtiel houden.
Weten wat er nodig is om een schoon ontwerp te maken en hoe deze ontwerpstijl moet worden geïmplementeerd, kan van onschatbare waarde zijn voor een webontwerper. Een strak design communiceert een gevoel van verfijning en verfijning, precies waar veel klanten en wijzelf mee geassocieerd willen worden. Hopelijk kunt u iets wegnemen van dit artikel en enkele van deze methoden toepassen in een van uw toekomstige projecten.
Zijn er nog andere kenmerken van een schoon ontwerp die u hebt opgemerkt? Of ken je een bijzonder goede demonstratie van schoon ontwerp? Laat het ons weten in de comments.
Accentsconagua