Webdesignkritikk nr. 11: Scott Block
Hver uke tar vi en titt på en ny webside og analyserer designet. Vi vil påpeke både områdene som er gjort godt, så vel som de som kan bruke litt arbeid. Til slutt avslutter vi med å be deg om å gi dine egne tilbakemeldinger.
Dagens side er den personlige porteføljen til Scott Block, en webdesigner fra Maryland.
Hvis du ønsker å sende inn nettstedet ditt for å bli vist i en fremtidig designkritikk, tar det bare noen få minutter. Vi belaster $ 24 for kritikk av designen din - betydelig mindre enn du betaler for en konsulent for å se på nettstedet ditt! Du kan finne ut mer her.
Om Scott
“Jeg bor i Columbia Maryland, bare en kort kjøretur fra både Baltimore og landets hovedstad. Da jeg var tolv år kombinerte jeg min lidenskap for Baltimore Ravens med min økende interesse for teknologi og begynte å lage nettsteder om Ravens. Siden den gang har jeg flittig foredlet ferdighetene mine, og lager nå nettsteder for forskjellige individer og organisasjoner. Jeg er nå dyktig i å kombinere html med css, javascript, php og ajax, for å lage vakre, funksjonelle nettsteder. ”
Her er nettstedets hjemmeside:
Selv om det definitivt er noe potensiale her, er det mange ting jeg vil fikse på denne siden. La oss se på dem en etter en.
Fargevalg
Fargene som brukes på Scotts side, skaper en ganske fin palett når de strippes ut individuelt, som det er vist nedenfor.
Imidlertid er jeg ikke gal på fordelingen av fargene. De virker implementert tilfeldig på steder på siden bare for variasjonens skyld i stedet for å brukes med formål og logikk. Tenk på hvert fargevalg du tar, og hvordan det binder seg til resten av innholdet på siden.
logo
Plasseringen øverst til venstre på siden gjør denne logoen til det første brukerne ser når de besøker scenen. Du vil benytte anledningen til å gjøre et sterkt førsteinntrykk. Dessverre føler jeg at denne logoen kommer til kort.
Jeg kan se hvordan blokkformer blir jobbet inn i bokstavene, antagelig for å binde seg inn i designerens etternavn, men det fungerer bare ikke. SB har ganske dårlig lesbarhet og føles litt datert.
Navigasjon og topptekst som helhet
Navigeringsområdet er ganske enkelt, bare tekst med horisontale skillelinjer og en understrek for å indikere den aktuelle siden. Jeg er alt for å holde navigasjonen enkel, så jeg synes dette området er godt gjort.
Når du holder musepekeren over en kobling i navigasjonen, dukker det opp et ikon under Scott Block-logoen. Dette er en fin effekt som jeg aldri helt har sett utført som denne (med sveveeffekten så langt borte fra lenken).
Når du tar inn topptekstområdet som helhet, er det noen få bemerkelsesverdige problemer som kan bruke adressering. Som jeg sa ovenfor, er ikonens sveveeffekt ryddig, men den forårsaker noen problemer. Når du ikke svever over en lenke i navigasjonen, er det et stort tomt sted ved siden av overskriftskopien som får deg til å lure på hvorfor den ikke stemmer overens med noe.
En mulig måte å hjelpe dette på er å bruke et ikon til standardtilstanden som endres til et annet ikon når du holder musepekeren over en kobling og går tilbake til det originale ikonet når sveveren blir avsluttet. Dessverre, når ikon-sveveeffekten er til stede, skaper logoen og ikonet en vanskelig loddrett stabel.
Totalt sett kan det negative rommet i dette området bruke en fullstendig omstrukturering. Utover problemet med det manglende ikonet, tar hovedlogoen bare for mye loddrett plass og skaper rare hull.
Utvalgt område
Jeg liker repetisjon i et design, og jeg kan se hvordan vinklene i dette avsnittet speiler logoen, men siden det ikke egentlig fungerer i logoen, gjelder det samme her. Overskriftenes skrå natur føles litt merkelig så vel som på kryss og tvers mønster skapt av fargene her.
Ubevisst ønsker hjernen din å koble de to elementene som er i samme farge, men her er de to områdene ikke relatert.
Videre er det en rekke sveveeffekter på dette området som ikke tjener noe formål. Når du holder musepekeren over et avsnitt, opprettes en dråpeskygge. Internett har lært oss å gjenkjenne slik aktivitet som en indikasjon på at det vi svever over er et klikkbart område. Imidlertid kan disse områdene ikke klikkes, og får dem til å føles som om de bare skaper forvirring for brukeren.
bunntekst
Bunnteksten er ganske enkel, men igjen ser vi at den kan bruke ganske mye raffinering.
For det første er knappen på et vanskelig sted. Når du designer, må du alltid være på vakt mot å bare stikke ting i hull bare fordi du har plass. Her etableres en sterk venstreorientering av teksten, men ødelegges deretter av plassering av knappen.
Videre er animasjonen av knappeleven litt for mye. Her brukes en bildesprite, og det er en animasjon mellom de to knappestatene der du kan se den ene delen av bildet gli ut som den andre glir i. Det er ikke lett å fortelle hva som skjer først, og det er derfor litt forvirrende.
Generelle anbefalinger
Jeg presenterte ganske mange harde kritikker ovenfor, og jeg føler det ville være best å prøve å knytte det hele sammen. Her er forslagene mine:
For å starte, redesign logoen til noe mer moderne og horisontalt. Opprett deretter en hard venstrejustering helt ned på siden. Line opp navigeringsområdet og kopiblokken under det til venstre på siden og flytt kanskje den nye logoen til høyre.
Varier størrelsen på teksten på siden for å lage klare overskrifter og støttekopi. Alt er for øyeblikket veldig stort. Husk: når du gjør alt spesielt, er ingenting spesielt.
Kast ut de gjeldende figurene i den omhandlede delen og den gigantiske punktlisten (integrer tjenestene dine et annet sted). Lag et stort prosjektbilde med store funksjoner som strekker seg hele innholdsområdet.
Endelig, omarbeider bunnteksten slik at venstre justering over blir respektert. Med andre ord, få den knappen ut av høyre hjørne.
Din tur!
Nå som du har lest kommentarene mine, kan du slå inn og hjelpe ved å gi designeren noen flere råd. Gi oss beskjed om hva du synes er flott med designet og hva du synes kan være sterkere. Som alltid ber vi deg også om å respektere nettstedets designer og tilby klare konstruktive råd uten alle vanskelige fornærmelser.
Er du interessert i å ha kritisert ditt eget nettsted? Du kan finne ut mer her.
