Web Design Critique # 30: Gray Ang
Welkom bij onze 30e ontwerpkritiek! 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 Gray Ang, het persoonlijke portfolio van een webdesigner in Maleisië.
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 Gray Ang
“Mijn naam is Gray en ik ben een webdesigner en front-end developer gevestigd in Kuala Lumpur, Maleisië. Ik onderzoek, plan, ontwerp en codeer websites. Ik ben goede vrienden met Photoshop en HTML / CSS / jQuery en ik maak klanten, gebruikers en machines blij. ”
Hier is een screenshot van de homepage:
Zoals u kunt zien, is de site gebouwd op een kleurrijke spectrumachtergrond met een tagwolk met verminderde dekking die zaken bevat als "webdesign" en "CSS3". Wat je niet uit de schermafbeelding haalt, is dat de achtergrond ook een geanimeerd element heeft. Er zijn verschillende wazige cirkels die achter de inhoud zweven en dartelen. Klik op een van de onderstaande schermafbeeldingen om langs de site te gaan en deze in actie te zien.
Deze site is eigenlijk vrij klein en eenvoudig, dus we zullen elk van de pagina's bekijken en analyseren hoe de esthetiek de gebruikerservaring beïnvloedt.
Huis
Ik waardeer absoluut het werk dat in de esthetiek van de site is gestoken. De omgeving is heel mooi. Het probleem met het maken van zo'n complexe achtergrond is echter dat je er uiteindelijk inhoud bovenop moet plaatsen, en dit kan een heel moeilijke taak zijn.
De grote, vervaagde woorden op de achtergrond verminderen de leesbaarheid van de tekst op de homepage. De hoofdparagraaf is zeker niet onmogelijk om te lezen, maar het ontwerp is behoorlijk druk op het gebied van de tekst, waardoor gebruikers wat harder moeten werken dan normaal.
Verder verdwijnt het rood dat wordt gebruikt als zweefkleur en accentuering op de achtergrond. Dit is begrijpelijk omdat het simpelweg niet eenvoudig is om een kleur te vinden die goed contrasteert met een veelkleurige achtergrond. Je wilt echter nog steeds visuele dissonantie vermijden.
De eenvoudigste oplossing voor al deze problemen, en inderdaad de meeste die we vandaag zullen bespreken, is misschien om gewoon een enigszins transparante zwarte achtergrond achter alle inhoud te plaatsen. Hierdoor krijgt de inhoud meer houvast en kan de ontwerper de huidige achtergrond behouden.
U kunt ook overwegen om een soort afbeelding voor de koptekst aan deze pagina toe te voegen. Ik vond het erg leuk hoe de foto op de "Over" -pagina eruit sprong en ik denk dat dat idee hier kan worden gedupliceerd.
Over
Hier zien we een andere pagina die best aantrekkelijk is, maar toch lijdt aan dezelfde problemen die hierboven zijn genoemd. Ik hou echter wel van de interessante lay-out die hier aan het werk is. De navigatie blijft vast terwijl de andere inhoud scrolt en de pagina is opgesplitst in duidelijk gescheiden en mooi gerangschikte kolommen.
De Over-pagina splitst zich op in drie afzonderlijke subpagina's: inleiding, hervatten en "dingen die ik doe". Hierdoor kan de ontwerper nogal wat inhoud inpassen terwijl de primaire navigatie supereenvoudig blijft.
Werken
De "Works" -pagina is een geweldig ogend arrangement van miniaturen en tekst die op hun beurt leiden naar speciale projectpagina's zoals hieronder weergegeven. De miniaturen hebben een mooie dikke randbehandeling waardoor ze zich onderscheiden van de achtergrond en het citaat linksboven is groot en vet genoeg om leesbaar te zijn.
Ik vind de juiste uitlijning van het grote citaat echter een beetje ongemakkelijk. Alles op de pagina heeft een sterke links-uitlijning, en hoewel het vaak effectief is om opzettelijk een regel als deze te overtreden, denk ik niet dat het hier werkt. De algemene vorm van de alinea is onregelmatig, waardoor het behoorlijk moeilijk is om te lezen met de juiste uitlijning.
Contact
De laatste pagina van de site is de "Contact" -pagina. Dit bevat een paar alinea's tekst en een eenvoudig maar stijlvol contactformulier. Het eerste dat me hier opviel, was dat het citaat bovenaan de pagina een beetje vreemd aanvoelt. U kunt proberen het links uit te lijnen, onafhankelijk van de aanhalingstekens, zodat de "T" in "De" en de "m" in "mijlen" een harde lijn vormen. Dit zou de linker uitlijning een beetje sterker moeten maken dan nu het geval is.
Verder zijn de velden in het formulier zo transparant dat ze bijna onzichtbaar zijn. Nogmaals, dit ziet er misschien leuk uit, maar de bruikbaarheid lijdt. Onthoud dat de esthetiek van een pagina één hoofddoel heeft: de inhoud op een aantrekkelijke manier benadrukken. Uw ontwerp moet de bruikbaarheid vergroten en niet opofferen in naam van de stijl.
Wanneer u op een veld klikt om te beginnen met typen, neemt de dekking toe en wordt deze veel duidelijker. Ik zou willen voorstellen om deze dekking op de standaardstatus in te stellen en deze nog verder te vergroten wanneer deze is geselecteerd.
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.
