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 Okay Geek, en fantastisk gadget och tech blog.
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 Okay Geek
Tidigare känd som? T3ch H3lp ?, Okay Geek är en omtänkt teknikblogg som strävar efter att ge geeky ursprungliga innehåll för personer som har en passion för tech. Vi har byggt Okay Geek från grunden med Squarespace och våra egna anpassade verktyg. Vi vill att Okay Geek ska vara en snabb, väl utformad och lättanvänd webbplats och vi tror att vi har gjort det väldigt bra.
Här är en skärmdump av hemsidan:
Initial Impression
Du vet, jag har skrivit nästan sextio av dessa kritik. Först var det ganska lätt, jag fick massor av inlägg som var bra, men hade några soliga områden som behövde förbättras. Senare har försenare inte gjort det så lätt på mig. Okej, Geek är en av dessa webbplatser.
Det är ganska lätt att kritisera en ful webbplats, men den här är underbar. Trots att du är lite på mall-y-sidan, så långt som tech bloggar går, är det definitivt en av de mer attraktiva jag har sett på ett tag. Jag menar, har du sett Gizmodo på sistone? Men jag sticker ut?
Bottom line, Okay Geek är en snygg webbplats med innehåll som jag verkligen tycker är intressant. Efter att ha läst den här recensionen, var noga med att sluta på webbplatsen för att kolla in den.
Med tanke på att du inte har mycket i vägen för negativa kommentarer, låt oss ta en titt på några saker jag tycker om Okay Geek.
Massor av Whitespace
Whitespace är ett svårt djur att klara sig ordentligt på. Många designers verkar vara rädda för det och klämma allt på sidan extremt nära varandra. Andra faller i fällan med att alltid använda en förinställd rännbredd i en CSS-ram och analyserar aldrig riktigt huruvida objekten verkligen behöver mer utrymme att andas.
Whitespace är något som du borde analysera per design, det finns ingen magisk formel som fungerar bäst för varje sida. Okej, Geek har verkligen öppnat den traditionella Envato-liknande blogglayouten och gav varje kolumn massor av utrymme. Resultatet är en fin, luftig känsla som ger varje enskild bit den betoning som det behöver stå ut från resten av innehållet.
En liten anteckning, den rutan till höger i bilden ovan är bara en tad för hög. Bumpa ner några pixlar så att den stämmer överens med den vänstra kolumnen.
Adaptiv Whitespace
Kanske ännu viktigare är det faktum att whitespace reagerar riktigt bra på olika webbläsarfönster i olika storlekar. Eftersom fönstret blir mindre eller större gör layouten mindre anpassningar som klämmer in layouten till ett mindre utrymme samtidigt som allt är fint och läsbart.
Förslag: Mediafrågor
Ett förslag om att du kommer att se mig börja göra mycket är att inkorporera mediafrågor så att webbplatsen ser bättre ut vid några förinställda generiska storlekar. Okej, Geek har redan en enastående mobilwebbplats för smartphones, men mediasökningar och anpassade format kan hjälpa till att strama designen för de mellanliggande, tablettformatlayouterna.
En smidig rubrik
Jag är en sucker för en snygg huvud. För platser som dessa tjänar de verkligen som omslaget som du bedömer boken av. Här är rubriken fin och stor, behåller de nödvändiga sök- och navigeringsobjekten där du kan förvänta dig att de är och har tre storartade artikelbilder med trevliga animerade svängareffekter.
Att placera dessa funktioner direkt i huvudet är ett bra sätt att suga användare direkt. Jag vet att jag knappast kan motstå ett klick om jag ser en berättelse om The Legend of Zelda!
Nice Post Previews
En annan sak som jag verkligen gillar är den allmänna utformningen av postförhandsvisningarna. De är snygga och stora med mycket teaserinnehåll. Jag älskar särskilt de enorma bilderna, som verkligen ritar dig in (även om jag tror att webbplatsen kanske tar en prestationsfrekvens för dem).
Jag kan säga att en hel del tanke och ansträngning gick in på att göra den här webbplatsen så stor som den gör. Det finns många små handen som går långt, som det faktum att när du svävar över en postförhandsgranskning visas den minsta droppskugghuvudseffekten. En riktigt fin touch!
Förslag: Textjustering och Spara-knapp
Jag har två små bekymmer om detta område. Först är stycktexten längst ner för långt till vänster. Det borde ha samma marginaler som det andra innehållet i lådan, men det verkar bryta ut ur dessa och komma obehagligt nära kanten.
Jag älskar också Instapaper integrationen här från hemsidan. Mitt enda problem med det är att det verkligen inte går att berätta att spara knappen är en länk till Instapaper. ?Spara detta? är lite vag och inte nödvändigtvis en term som vi är bekanta med i ett bloggförhållande. Kanske en? Spara till Instapaper? knappen skulle vara mer lämplig.
En användbar sidofält
Den allmänna tvåkolonnayouten av Okay Geek är ganska populär, men den högra kolumnen övergår vanligtvis med skräp och värdelös skräp som ingen vill titta på. Men jag hittade Okay Geek sidofältet för att vara ganska intressant. Att göra den extra milen för att faktiskt skapa relevant material för detta avsnitt hjälper verkligen att rättfärdiga området till dina användare istället för att helt enkelt göra det till en reklamfångst-allt. Detta hjälper också faktiskt att få dina annonsörer några synpunkter!
Allvarligt socialt
Ok, Geek sparar ingen ansträngning för att försöka få dig att dela innehållet med dina vänner.Denna satsning kan enkelt komma som över-the-top, särskilt med alla de olika sociala länkarna och knapparna spridda över hela webbplatsen.
Men varje litet socialt område är anpassat för att passa rätt in i bloggtemat så resultatet är långt ifrån rotigt. Bloggar lever och dör av sociala medier så solida integreringar är ett måste!
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.