Web Design Critique # 71: Cutest Paw
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 Cutest Paw, een wereldwijde fotogalerij voor dieren. Laten we erin springen en zien wat we denken!
Verken Envato Elements
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We brengen $ 49 in rekening 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 de schattigste poot
Deze site neemt absoluut de prijs in ontvangst voor onze meest "awwww" inducerende site-kritiek ooit. Deze site is letterlijk niets anders dan een eindeloze stroom foto's van schattige en grappige dieren. Hoe kunnen we het verdragen om naar zoiets te kijken en toch constructieve feedback kunnen geven zonder afgeleid te worden door slapende puppy's? Gelukkig zijn we 100% toegewijd aan het helpen van creatieven om hun webdesign-karbonades te verbeteren. Blijf puppy's achter, we hebben werk te doen.
Hier is een screenshot van de homepage:
Eerste indruk
Telkens wanneer ik een ontwerp evalueer, ga ik verder dan esthetiek en vraag ik wat het doel van het stuk is en of het voltooide ontwerp al dan niet aan dat doel voldoet. Het doel hier voor een gebruiker is simpel: heel veel foto's bekijken. De Cutest Paw-site lijkt behoorlijk goed zijn doel te dienen. De lay-out is geoptimaliseerd voor maximaal gebruik van de ruimte en verspilt niet te veel pixels aan niet-kritische overtollige eye candy.
Net als de ontwerpkritiek van vorige week, zal deze vrij kort zijn. De Cutest Paw-website is heel eenvoudig, dus er valt niet veel te bekritiseren. Zoals altijd heb ik echter wat feedback waarvan ik denk dat het de ontwerper zal helpen de site te verbeteren. Laten we erin springen en aan de slag gaan.
Indeling
Deze site is een goed voorbeeld van het nut van jQuery Masonry, een geweldige lay-out-plug-in die het anders onmogelijk maakt om lay-outs in een handomdraai in te stellen. Het mooie van vrijmetselarij is dat het het CSS-gedrag dat een horizontale lay-out opzet, verlaat voordat de inhoud verticaal wordt verspreid. In plaats daarvan creëert het een mooie, strakke verticale stapel, vergelijkbaar met hoe bakstenen worden gelegd.
Het resultaat in dit geval is een ongelooflijk strak raster van afbeeldingen dat, zoals ik hierboven al zei, het aantal foto's dat in een kleine ruimte kan worden bekeken echt maximaliseert. De site maakt ook gebruik van een oneindige scrolltechniek die inhoud blijft laden terwijl u naar beneden op de pagina gaat.
De combinatie van lay-outs in metselwerkstijl en oneindig scrollen is onlangs behoorlijk populair geworden door Pinterest, waar je niet aan kunt denken wanneer je deze site gebruikt. De combinatie van deze twee technieken zorgt voor een ongekend surfgemak. Ter vergelijking: paginering vereist zoveel inspanning van de kant van de gebruiker. Hier scrol je gewoon en scrol je totdat je alles hebt gezien wat je kunt zien of besluit om verder te gaan met iets anders.
Zijbalk
Omdat de inhoud voor altijd blijft scrollen, is het nodig om een enigszins vaste navigatie te hebben. Pinterest gebruikt een balk bovenaan hun site, Cutest Paw gaat zijn eigen weg en implementeert een achterblijvende zijbalk die snel inhaalt als je naar beneden beweegt. Dit is behoorlijk effectief, maar ik moet toegeven dat de animatie, die in het begin enigszins charmant is, snel afleidend en enigszins irritant wordt.
De zijbalk is mooi ontworpen en duidelijk georganiseerd, vanuit het oogpunt van bruikbaarheid (animatie terzijde) is het redelijk goed gedaan. Het is leuk om te zien dat hier een knop "Terug naar boven" is geïmplementeerd, zodra ik begon te scrollen, zocht ik er onmiddellijk naar en vond deze gemakkelijk. Het kan echter effectiever zijn als een soort tussenstop op de boven- of onderkant van de rechterkant van de fotostapel, dit zou het plaatsen waar de aandacht van de gebruiker waarschijnlijk wordt gefocust en de noodzaak om erop te jagen verminderen.
Thema
De algehele esthetiek van de pagina is het waard om te bespreken, het kan zelfs een van de meest prominente punten zijn om te overwegen. Aan de ene kant is de pagina aantrekkelijk. De zwarte achtergrond is strak, stijlvol en helpt de foto's echt op te vallen. Aan de andere kant lijken de achtergrond en zelfs die bijvoeglijke naamwoorden die ik zojuist heb gebruikt helemaal verkeerd voor deze website.
Woorden als "schattig" en "fuzzy" zijn hoe mensen de inhoud zouden omschrijven, en toch is het visuele thema van de site een zwarte grungetextuur. Deze twee concepten lijken tegenpolen en creëren een soort visuele dissonantie. Zoals ik al zei, ben ik een groot voorstander van het gebruik van design, niet alleen als eye candy, maar om een doel en een boodschap te versterken. Het ontwerp van uw pagina geeft een persoonlijkheid weer en wanneer u die persoonlijkheid verkeerd hebt, vermindert dit de impact en het succes van het project. Het naast elkaar plaatsen van concepten in dit ontwerp lijkt veel op het zien van een met leer beklede, met tatoeage bedekte fietser van 300 pond die een voorschoolse les geeft, de twee lijken gewoon op gespannen voet met elkaar te staan.
De ontwerper heeft de lay-out genageld, wat eerlijk gezegd vaak het lastigste deel van een site als deze is. Nu is het tijd om het uiterlijk van de site volledig opnieuw te ontwerpen met behoud van de kernstructuur. Begin met een vriendelijker kleurenschema en / of gebruik een veel minder edgy textuur. Misschien iets dat een zacht gevoel geeft (zonder lelijk en kaasachtig te zijn). Bekijk Subtiele patronen voor een aantal geweldige bronnen.
Logo
Het logo wordt weergegeven in de vorige schermafbeelding. Het is duidelijk heel geschikt voor de site, de poot is een direct herkenbaar symbool. Als logo heeft het echter een grote fout in het feit dat het zo generiek is. Het is een cirkel met een poot erin, misschien wel het allereerste dat 99 van de 100 niet-ontwerpers zou verzinnen, gezien de instructie om een pootlogo te maken.
Het probleem hiermee is dat je het niet echt kunt bezitten. Als je goed genoeg kijkt, kun je waarschijnlijk voor veel bedrijven en websites iets soortgelijks vinden. U wilt misschien niet een wereldwijd merk opbouwen, maar het hele punt van een logo is nog steeds iets te hebben dat uw merk (hoe klein ook) een gezicht geeft en het identificeerbaar maakt. Dit staat niet hoog op de lijst met prioriteiten, maar op de lange termijn zou ik aanraden om iets uniekers te verkennen.
Pagina verzenden
Zoals ik aan het begin van dit artikel al zei, is deze site vrij eenvoudig, dus we zullen dit binnenkort afronden. Het laatste dat ik wil bespreken, is de pagina waar gebruikers naartoe kunnen gaan om hun eigen foto's in te dienen:
Het probleem dat ik met deze pagina heb, is het soort Inception-effect dat plaatsvindt. Je hebt een screenshot van een webpagina die in een webpagina is gegooid en die er erg op lijkt. Het is gekanteld, dus het valt een beetje op, maar het is nog steeds een verontrustende combinatie. Het probleem hier is dat de achtergrond van de pagina en de afbeelding in wezen hetzelfde zijn, dus de afbeelding wordt niet echt op een significante manier apart gezet. Ik raad aan om misschien naar een lijneffect te kijken en dat beeldraster bij te snijden met een nog meer ingezoomde weergave. Als een gemakkelijke uitweg zou je hier gewoon een groot, schattig dier kunnen plaatsen dat op de een of andere manier het idee overbrengt van delen, uploaden, enz.
Gevolgtrekking
Samenvattend, hier is een korte checklist van mijn gedachten over het ontwerp.
Goed
- Lay-out: dit is een perfect gebruik voor jQuery-metselwerk
- Oneindig scrollen: maakt browsen moeiteloos
- Eenvoudige maar effectieve navigatie
Heeft werk nodig
- Algemene esthetiek: te donker en grungy
- Logo: te algemeen
- Inschrijfpagina: de schermafbeelding werkt niet
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.
