Web Design Critique # 11: Scott Block
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 het persoonlijke portfolio van Scott Block, een webdesigner uit Maryland.
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 Scott
'Ik woon in Columbia Maryland, op slechts een klein eindje rijden van zowel Baltimore als de hoofdstad van het land. Toen ik twaalf was, combineerde ik mijn passie voor de Baltimore Ravens met mijn groeiende interesse in technologie en begon ik sites over de Ravens te maken. Sindsdien heb ik mijn vaardigheden ijverig verfijnd en maak ik nu websites voor verschillende individuen en organisaties. Ik ben nu bekwaam in het combineren van html met css, javascript, php en ajax, om mooie, functionele websites te maken. "
Hier is de startpagina van de site:
Hoewel er hier zeker een potentieel is, zijn er tal van dingen die ik op deze pagina zou oplossen. Laten we ze een voor een bekijken.
Kleurenschema
De kleuren die op de site van Scott worden gebruikt, creëren een redelijk mooi palet wanneer ze individueel zijn uitgekleed, zoals hieronder te zien is.
Ik ben echter niet gek op de verdeling van de kleuren. Ze lijken willekeurig geïmplementeerd op plekken op de pagina, simpelweg omwille van variatie in plaats van dat ze met doel en logica worden toegepast. Denk na over elke kleurkeuze die u maakt en hoe deze aansluit bij de rest van de inhoud op de pagina.
Logo
Door de positie linksboven op de site is dit logo het eerste dat gebruikers zien wanneer ze het podium bezoeken. U wilt van deze gelegenheid gebruik maken om een sterke eerste indruk te maken. Helaas denk ik dat dit logo tekort schiet.
Ik kan zien hoe blokvormen in de letters worden verwerkt, vermoedelijk om te binden aan de achternaam van de ontwerper, maar het werkt gewoon niet. De SB is redelijk slecht leesbaar en voelt wat gedateerd aan.
Navigatie en koptekst als geheel
Het navigatiegebied is vrij eenvoudig, alleen wat tekst met horizontale verdelers en een onderstreping om de huidige pagina aan te geven. Ik ben er helemaal voor om de navigatie eenvoudig te houden, dus ik denk dat dit gebied goed is gedaan.
Wanneer u de muisaanwijzer op een link in de navigatie plaatst, verschijnt er een pictogram onder het Scott Block-logo. Dit is een leuk effect dat ik nog nooit zo heb gezien (met het zweefeffect zo ver weg van de link).
Wanneer u het koptekstgebied als geheel inneemt, zijn er een paar opvallende problemen die adressering zouden kunnen gebruiken. Zoals ik hierboven al zei, is het pictogram-zweefeffect netjes, maar het veroorzaakt enkele problemen. Wanneer u niet over een link in de navigatie zweeft, is er een grote lege plek naast de koptekstkopie waardoor u zich afvraagt waarom deze nergens op is uitgelijnd.
Een mogelijke manier om dit te helpen is door een pictogram toe te passen op de standaardstatus die verandert in een ander pictogram wanneer u de muisaanwijzer op een link plaatst en terugkeert naar het oorspronkelijke pictogram wanneer de zweeftekst eindigt. Helaas, wanneer het pictogram zweefeffect aanwezig is, creëren het logo en het pictogram een onhandige verticale stapel.
Over het geheel genomen zou de negatieve ruimte op dit gebied een volledige herstructurering kunnen gebruiken. Afgezien van het probleem met het ontbrekende pictogram, neemt het hoofdlogo gewoon te veel verticale ruimte in beslag en creëert het vreemde hiaten.
Uitgelicht gebied
Ik hou van herhaling in een ontwerp en ik kan zien hoe de hoeken in deze sectie die van het logo weerspiegelen, maar aangezien het niet echt werkt in het logo, is hetzelfde hier van toepassing. De schuine aard van de koppen voelt een beetje vreemd aan, evenals het kriskras patroon dat door de kleuren hier wordt gecreëerd.
Onbewust willen je hersenen de twee items met dezelfde kleur met elkaar verbinden, maar hier zijn de twee gebieden niet gerelateerd.
Verder zijn er een aantal zweefeffecten op dit gebied die geen doel hebben. Wanneer u de muisaanwijzer op een sectie plaatst, wordt er een slagschaduw gemaakt. Het web heeft ons geleerd dergelijke activiteiten te herkennen als een indicatie dat waar we over zweven een klikbaar gebied is. Op deze gebieden kan echter niet worden geklikt, waardoor ze het gevoel krijgen alsof ze alleen maar verwarring bij de gebruiker veroorzaken.
Voettekst
De voettekst is vrij eenvoudig, maar nogmaals, we zien dat het nogal wat verfijning kan gebruiken.
Allereerst zit de knop op een lastige plek. Wees bij het ontwerpen altijd op uw hoede om alleen dingen in gaten te steken, alleen omdat u ruimte heeft. Een sterke linkse uitlijning wordt hier tot stand gebracht door de tekst, maar vervolgens verpest door de plaatsing van de knop.
Verder is de animatie van de muisaanwijzer een beetje te veel. Hier wordt een afbeeldingssprite gebruikt en er is een animatie tussen de twee knopstatussen waarin je een deel van de afbeelding kunt zien uitschuiven terwijl het andere naar binnen schuift. Het is niet gemakkelijk om te zien wat er eerst gebeurt en het is daarom een beetje verontrustend.
Algemene aanbevelingen
Ik heb hierboven nogal wat harde kritieken gepresenteerd en ik denk dat het het beste is om te proberen alles bij elkaar te brengen. Hier zijn mijn suggesties:
Om te beginnen, herontwerpen het logo naar iets moderner en horizontaal. Breng vervolgens helemaal links op de pagina een uitlijning naar links tot stand. Lijn het navigatiegebied en het kopieblok eronder uit aan de linkerkant van de pagina en verplaats het nieuwe logo misschien naar rechts.
Varieer de grootte van de tekst op de pagina om duidelijke koppen en ondersteunende kopieën te maken. Alles is momenteel erg groot. Onthoud: als je alles speciaal maakt, is niets speciaal.
Gooi de huidige vormen weg in de aanbevolen sectie en de gigantische lijst met opsommingstekens (neem je services ergens anders op). Creëer een enkel groot uitgelicht projectvoorbeeld dat zich helemaal over het inhoudsgebied uitstrekt.
Werk ten slotte de voettekst opnieuw zodat de linker uitlijning hierboven wordt gerespecteerd. Met andere woorden, haal die knop uit de rechterhoek.
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.
Geïnteresseerd om uw eigen site te laten bekritiseren? Meer informatie vind je hier.
