Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens webbplats är Cutest Paw, ett världsomspännande djurfotogalleri. Låt oss hoppa in och se vad vi tycker!
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.
Om Cutest Paw
Den här webbplatsen tar definitivt priset för våra mest? Awwww? inducerande webbplats kritik någonsin. Denna webbplats är bokstavligen ingenting annat än en oändlig ström av bilder av söta och roliga djur. Hur kan vi bära för att titta på en sådan sak och fortfarande kunna erbjuda konstruktiv feedback utan att bli distraherad av sovande valpar? Lyckligtvis är vi 100% dedikerade till att hjälpa annonsmaterialen att förbättra sina webbdesignskurvor. Håll tillbaka valpar, vi har ett jobb att göra.
Här är en skärmdump av hemsidan:
Första intrycket
När jag utvärderar en design går jag bortom estetik och frågar vad syftet med biten är och huruvida den färdiga konstruktionen uppfyller målet. Målet här för en användare är enkelt: att visa mycket och massor av bilder. Den sötaste tassplatsen verkar som att den tjänar sitt syfte ganska bra. Layouten är optimerad för maximal användning av utrymmet och slösar inte bort för många pixlar på icke-kritiskt överflödigt ögonsocker.
Liksom förra veckans designkritik kommer den här att vara ganska kortfattad. The Cutest Paw-webbplatsen är väldigt enkel så det finns inte mycket att kritisera. Men som alltid har jag lite feedback som jag tror kommer att hjälpa designern att förbättra webbplatsen. Låt oss hoppa in och komma igång.
Layout
Den här webbplatsen är ett utmärkt exempel på användbarheten av jQuery Masonry, en fantastisk layout plugin som verkligen gör annars omöjliga layouter en vind att installera. Skönheten i Masonry är att den avstår från CSS-beteendet som skapar en horisontell layout innan du distribuerar innehållet vertikalt. Istället skapar det en fin, stram vertikal stapel, som liknar hur tegelstenar läggs.
Resultatet i detta fall är ett otroligt tätt galler av bilder som, som jag nämnde ovan, verkligen maximerar antalet foton som kan ses i ett litet utrymme. Webbplatsen använder också en oändlig rullningsteknik som fortsätter att ladda innehållet när du flyttar ner på sidan.
Kombinationen av Masonry-stillayouter och oändlig rullning gjordes nyligen ganska populär av Pinterest, som du inte kan låta bli att tänka på när du använder den här webbplatsen. Kombinationen av dessa två tekniker möjliggör en oförglömlig enkel webbläsning. I jämförelse kräver pagination så mycket ansträngning på användarens sida. Här bläddrar du bara och rullar tills du har sett allt som finns att se eller bestämma för att gå vidare till något annat.
Sidebar
Eftersom innehållet fortsätter att rulla för evigt, blir det nödvändigt att ha en något fast navigering. Pinterest använder en stapel längst upp på deras hemsida, Cutest Paw går sin egen väg och implementerar ett fördröjande sidofält som snabbt hämtar när du flyttar ner på sidan. Det här är ganska effektivt, men jag måste erkänna att animationen, som är något charmig först, blir snabbt störande och lite irriterande.
Sidofältet är snyggt utformat och tydligt organiserat, ur användbarhetsperspektiv (animering åt sidan) det är ganska bra gjort. Det är trevligt att se en? Back to Top? knappen implementerad här, så snart jag började rulla jag genast letade efter en av dessa och lätt hittade den. Det kan dock vara mer effektivt som en form av överlappning längst upp eller längst ner på höger sida av fotostacken, vilket skulle placera det där användarens uppmärksamhet är sannolikt att fokusera och minska behovet av att jaga efter det.
Tema
Den övergripande estetiken på sidan är värd att diskutera, det kan faktiskt vara en av de mest framträdande punkterna att överväga. Å ena sidan är sidan attraktiv. Den svarta bakgrunden är snygg, elegant och hjälper bilderna att verkligen sticka ut. Å andra sidan, bakgrunden och även de adjektiv som jag just använt verkar vara fel på denna webbplats.
Ord som? Söt? och? fuzzy? är hur folk skulle beskriva innehållet, men webbplatsens visuella tema är en svart grungestruktur. Dessa två begrepp verkar som polära motsatser och skapar en slags visuell dissonans. Som jag redan sagt är jag en stor förespråkare för att använda design inte bara som ögonsocker utan för att förstärka ett syfte och ett meddelande. Designen av din sida ger en personlighet och när du får den personligheten fel, minskar projektet och framgången med projektet. Juxtapositionen av begrepp i denna design är mycket som att se en 300 pund läderklädd, tatueradäckad biker undervisning i en förskoleklass, de två verkar helt enkelt oskadda med varandra.
Designern har naglat layouten, vilket är ärligt ofta den svåraste delen på en sajt som denna. Nu är det dags att helt omskapa utseendet på webbplatsen samtidigt som kärnstrukturen bibehålls. Börja med ett vänligare färgschema och / eller använd en mycket mindre kantig konsistens. Kanske något som förmedlar en mjuk känsla (utan att vara ful och ostlik). Kolla in subtila mönster för några bra resurser.
Logotyp
Logotypen visas på föregående skärmdump. Det är självklart mycket lämpligt för webbplatsen, tassan är en direktrelaterbar symbol. Som en logotyp har det dock en stor fel i att den är så generisk. Det är en cirkel med en tass i den, kanske den allra första 99 av 100 icke-designers skulle komma med instruktionen att skapa en tasslogo.
Problemet med detta är att du inte kan äga det egentligen.Om du ser tillräckligt hårt, kan du säkert hitta något liknande för många företag och webbplatser. Du kanske inte försöker bygga ett globalt varumärke, men hela logotypen har fortfarande något som ger ett ansikte till ditt varumärke (dock liten) och gör det identifierbart. Det här är inte högt på listan över prioriteringar, men i längden skulle jag rekommendera att utforska något lite mer unikt.
Skicka in sidan
Som jag nämnde i början av den här artikeln är den här webbplatsen ganska enkel så vi kommer snart att pakka upp det här. Det sista jag vill diskutera är den sida där användarna kan gå för att skicka in sina egna foton:
Problemet som jag har med den här sidan är den typ av Inception-effekt som händer. Du har en skärmdump av en webbsida som kastas in i en webbsida som ser väldigt ut. Det lutas så det sticker ut lite, men det är fortfarande en oroande kombination. Problemet här är att bakgrunden på sidan och bilden är väsentligen densamma, så bilden är inte riktigt sönderdelad på något väsentligt sätt. Jag rekommenderar att du kanske tittar på en strokeffekt och beskär den bildrutan med en ännu större zoomning. Som en enkel väg ut kan du bara sätta ett stort sött djur här som på något sätt förmedlar tanken att dela, ladda upp etc.
Slutsats
För att sammanfatta, här är en snabb checklista över mina tankar om designen.
Bra
- Layout: Det här är en perfekt användning för jQuery Masonry
- Oändlig bläddring: gör surfning enkel
- Enkel men effektiv navigering
Behöver arbete
- Allmänna estetiska: För mörk och grungy
- Logo: för generisk
- Anmälningssida: skärmdumpen fungerar inte
Din tur!
Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.