Nettdesignkritikk nr. 40: FanExtra
Velkommen til vår 40. designkritikk! Hver uke tar vi en titt på en ny webside og analyserer designet. Vi vil påpeke begge områdene som er gjort godt i tillegg til de som kan bruke litt arbeid. Til slutt avslutter vi med å be deg om å gi dine egne tilbakemeldinger.
Dagens nettsted er FanExtra, et fantastisk ressursside for designere.
Utforsk Envato Elements
Hvis du ønsker å sende inn nettstedet ditt for å bli vist i en fremtidig designkritikk, tar det bare noen få minutter. Vi belaster $ 34 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 FanExtra
”Dette startet med en lang sommer for over to år siden, og en lidenskap for design. Etter å ha hatt glede av noen av Photoshop-opplæringene som ble lagt ut på den tiden bestemte jeg meg for å skrive noen av mine egne. Jeg satte opp en blogg for formålet (PSDFAN.com) og begynte å bruke den som mitt kreative utløp. Jeg ønsket å tilby mer for vårt voksende samfunn, og kunne utvikle PSDFAN til noe større. Ideen til FanExtra ble snart født! FanExtra-nettverket er et sted for designere fra hele verden å komme sammen og utforske ideene og kreativiteten. Du kan delta i diskusjonene på forumene våre, eller virkelig lære deg gjennom vårt FanExtra-medlemskapsprogram. "
Her er et skjermbilde av hjemmesiden:
Første inntrykk
FanExtra er en av de mest interessante sakene for en designkritikk som vi har hatt ennå. Årsaken til dette er at det faktisk er en veldig attraktiv side, men en som jeg vil anbefale er nesten fullstendig omtenkt.
Hver seksjon på siden, fra logoen til miniatyrbildene, ser bra ut. Når du tar inn siden som helhet, er det imidlertid noen ekte problemer med flyten i hver seksjon i tillegg til det største problemet, som er klarheten i kommunikasjonen av den primære meldingen.
Dette problemet er ganske vanlig og oppstår på grunn av et veldig skittent ord i webdesign: antagelse. Her er designeren sannsynligvis nær prosjektet, og har derfor naturlig nok problemer med å se at en besøkende kanskje ikke forstår hva som skjer. Antagelsen er at en besøkende som finner denne siden, vil vite hva “FanExtra” er, noe som absolutt ikke er noe som bør antas her.
Kommunikasjonen
Når du lander på en webside, analyserer du instinktivt overskriftsområdet på samme måte som du ville analysert menytavlen på en gatekjøkkenrestaurant. Mulige spørsmål inkluderer: Hvor er jeg? Hva koster det? Hva vil de gi meg for pengene mine? Serverer de Coke eller Pepsi-produkter? OK, kanskje det siste spørsmålet ikke gjelder her.
Poenget mitt er at når du ser på overskriften til dette nettstedet, er det ikke tilstrekkelig å adressere alle disse viktige spørsmålene:
Vi ser hva nettstedet heter (FanExtra) sammen med et stort felt for en slags registrering. Vil dette bety at jeg er påmeldt nettverket? Så er dette en gratis tjeneste? Til høyre ser vi noe som antyder “tutorials”, som får oss på rett spor, etterfulgt av ord som “teksturer” og “vektorer”, som representerer ganske spesifikk sjargong.
Hvis jeg er designer, har jeg nok på dette tidspunktet funnet ut hva som foregår i en viss grad, men er det virkelig målet her? Skal den besøkende måtte finne ledetråder og bruke dem til å tolke hva nettstedet er?
Mysteriet er avslørt
Når vi kommer til midten av nettstedet, avsløres mysteriet:
Nå kan vi se at FanExtra er "et nettverk av fantastiske tutorials nettsteder" som tilbyr medlemskap for $ 9 per måned. Dette er det viktigste kommunikasjonsstykket på siden, og likevel er det gjemt bort halvveis på siden. Dette skal være det første brukeren ser.
Jeg tror faktisk denne meldingen kan bli enda tydeligere. Uttrykket "fantastiske tutorials nettsteder" er fremdeles ganske vagt hvis du tenker på det fra en utenforstående. Noe som "kjempefine opplæringssider for kreative fagpersoner" ville virkelig ta denne uttalelsen mye lenger. Med en gang har du festet målgruppen rett på nesen, slik at når jeg finner denne siden, ser jeg en hyggelig varm hilsen som informerer meg om at dette nettstedet er spesielt for mennesker som meg.
Visual Contrast vs. Visual Clutter
Et annet problem jeg ser med meldingen, er hvordan det er strukturert fra et visuelt synspunkt. La oss se på den primære kommunikasjonen slik den for tiden er:
Her ser vi en bunke med tre linjer, som hver bruker forskjellig fargetekst og små varianter av samme skrift både når det gjelder dristighet og størrelse. Jeg kan og har skrevet hele artikler om kontrast i design, men hva det koker ned til er best sagt i et råd fra designforfatter Robin Williams, "ikke vær en wimp." Med dette mener hun at for å bruke kontrast effektivt, må elementene virkelig skille seg fra hverandre på en stor måte, ellers blir resultatet ganske enkelt visuell rot.
Sjekk hvordan et annet populært medlemskapsprogram for design, Think Vitamin, strukturerer den primære meldingen på siden deres.
Her ser vi enorm, massivt overdreven kontrast mellom overskriften og underhodet. Resultatet er vakker og tydelig kommunikasjon som leser perfekt. Folk som surfer på siden les overskriften nesten ved et uhell, og hvis de er interessert videre, kan de ta seg tid til å lese underhodet.
Funksjonene
Siden avsluttes med et massivt sett med kulepunkter som løper ned på venstre side. Dette er en ganske vanskelig plassering og gir et ubehagelig gap på høyre side.
Den raske løsningen for dette er ganske enkelt å dele opp kulepunktene i to separate stabler:
Dette er til syvende og sist et båndhjelpemiddel, og jeg tror siden faktisk kunne brukt noen større operasjoner. Vi tar opp dette kort i neste avsnitt.
Mine “store bilder” -anbefalinger
Ærlig talt, jeg tror ikke det ubrutte oppsettet med dobbel kolonne fungerer for dette nettstedet. Den er for stiv og forstyrrer faktisk den naturlige flyten av kommunikasjon i stedet for å legge til rette for det, som er målet med en strukturert layout.
Min anbefaling er å kaste dette oppsettet fullstendig. Først grøft den stive doble kolonnestrukturen. Deretter flytter du den primære kommunikasjonen til toppen av siden. Lag en stor "kjennetegnet" -boks som spenner over hele sidebredden og fremhever noe av innholdet du deretter fordeler senere (140+ filer, 40 vektorer osv.). Forsikre deg om at overskriften bruker sterk kontrast, krystallklar frasering og målretting, og høyst to farger som ser bra sammen.
Til slutt, etter at du har laget dette fantastiske toppområdet som perfekt spikrer hva nettstedet er, hvem det er for og det grunnleggende om hva det inkluderer, kan du fokusere på å organisere den andre informasjonen din under, muligens i to eller tre kolonneformater.
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å respektere nettstedets designer og tilby klare konstruktive råd ugyldige for harde fornærmelser.
