Web Design Critique # 27: Idea Arts
Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is Idea Arts.
Ontdek ontwerpbronnen
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 24 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over Idea Arts
Idea Arts is het persoonlijke portfolio van Goran Ilic, een grafisch ontwerper met een levenslange passie voor technologie. Zijn site toont zijn recente werk en de diensten die door zijn bedrijf worden aangeboden.
Hier is een screenshot van de homepage:
Eerste indruk
Idea Arts is voor het grootste deel een aantrekkelijke site. Er zijn hier enkele goede ideeën aan het werk die het ontwerp een heel sterke start hebben gegeven. De inhoud is onderverdeeld in duidelijk gedefinieerde secties en volgt een logische voortgang. Er zijn ook enkele aantrekkelijke grafische elementen die de aandacht van de gebruiker effectief trekken.
Er zijn echter veel mogelijkheden voor verfijning. Het ontwerp is solide genoeg dat ik niet aanraad om opnieuw te beginnen, maar verschillende aspecten zouden wat meer aandacht kunnen gebruiken om ze op peil te brengen. Hieronder zullen we er een paar bekijken.
Typografie
Het grootste probleem dat ik bij deze site zie, is de typografie. Om te beginnen zien we alleen al op de startpagina ongeveer tien verschillende variaties van lettergrootte, breedte, stijl, etc. Dit is bijna altijd een negatief kenmerk. Het is een goede vuistregel om uw lettertypen op ongeveer twee tot drie variaties per ontwerp te houden.
Bepaal welke lettertypen u kunt gebruiken voor headers, sub-headers en body copy. Maak deze vervolgens consistent in uw hele ontwerp in plaats van elke sectie te behandelen als een onafhankelijk gebied dat zijn eigen unieke kenmerken kan hebben.
Besteed ook echt wat tijd aan het bouwen van het type om er aantrekkelijk uit te zien. Dit omvat het zorgvuldig plannen van opties zoals lijnhoogte, kleur en zelfs uw lijnonderbrekingen. Deze zijn allemaal behoorlijk ruw in het onderstaande voorbeeld.
Om te beginnen contrasteert het lichtblauw niet goed met de achtergrond. Dit kan eenvoudig worden opgelost door die kleur donkerder te maken totdat deze echt loskomt van de lichte kleur erachter. Ook zou het kleinere exemplaar wat meer ademruimte kunnen gebruiken. De lijnhoogte is simpelweg te laag en maakt het lezen moeilijk, stoot dit hier een beetje op en de leesbaarheid zal enorm toenemen.
Wees echter voorzichtig, want in andere delen van de site lijkt de lijnhoogte onhandig hoog. Ik raad aan om een gratis online tool te gebruiken, zoals Typograph - Scale & Rhythm (hieronder weergegeven) om je te helpen bij het stromen van je alinea's.
Let ten slotte op uw lijnbreuken. Interessant genoeg moet je niet alleen letten op lastige onderbrekingen in de formulering, je moet ook letten op de vorm van de alinea. De bovenstaande ziet er een beetje vreemd uit en kan gemakkelijk opnieuw worden doorgestuurd naar zoiets als de onderstaande versie.
Witte ruimte
Een ander gebied van het ontwerp dat wat aanpassingen kan gebruiken, is het gebruik van witruimte. Net als bij typografie kan dit lastig zijn en is het grotendeels subjectief. Er zijn echter enkele basisprincipes die u hierbij kunnen begeleiden.
Probeer bijvoorbeeld elke keer dat u een gedistribueerde verzameling items heeft, verticaal of horizontaal, de objecten eerst visueel te groeperen en ze vervolgens gelijkmatig te verdelen. In het onderstaande voorbeeld heeft de originele versie bijvoorbeeld een ongelijkmatige afstand tussen de pictogrammen en de tekst en lopen de items die moeten worden onderscheiden elkaar een beetje tegen het lijf. Met een beetje aanpassing creëren we een veel duidelijkere grafische verklaring.
Het verschil is subtiel maar erg belangrijk. Merk op hoe gemakkelijk het is om te zien welke tekstregel bij welk pictogram hoort. Er zijn een paar andere gebieden in het ontwerp die een vergelijkbare dosis ruimtelijke analyse zouden kunnen gebruiken. De onderstaande tekst crasht bijvoorbeeld bijna tegen het einde van het insluitingsapparaat. Zorg altijd voor voldoende ruimte voor dit soort elementen.
Zoals we bij de vorige nummers hebben gezien, gaat dit beide kanten op. Het logo heeft bijvoorbeeld het gevoel dat er te veel witruimte is ingebouwd in de opening tussen de woorden.
Tweak, Tweak, Tweak
De moraal van het verhaal hier is dat zelfs als je besluit dat je een mooie pagina hebt gemaakt, de duivel in de details zit. Haast je nooit door de kleine dingen zoals typografie en spatiëring. Het kan zelfs zijn dat u meer tijd moet besteden aan het verkrijgen van de juiste informatie dan aan het uitwerken van uw oorspronkelijke visuele concept!
Het is zeker de moeite waard om uw site goed af te werken. Door consequent in deze gewoonte te stappen, zullen uw ontwerpen veel verfijnder aanvoelen en zullen ze beter bestand zijn tegen onderzoek.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
