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 WPMU.org, en webbplats för WordPress-entusiaster. 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 WPMU
? WPMU.org är den främsta källan på webben för WordPress-nyheter, tips, plugins och tematikningar. Vi har flera nya inlägg varje dag av teamet hos Incsub, samma grupp bakom den äldsta (och näst största) WordPress Multisite på webben, Edublogs.org, och den största premium-plugin-och temamiljö, WPMU DEV.?
Här är en skärmdump av hemsidan:
Första intrycket
WPMU verkar vara en stor resurs för information för WordPress-utvecklare. Det finns massor av innehåll här på hemsidan, som både är en tillgång och en skuld från en designers perspektiv. Webbplatsen ser väldigt ren och väl utformad ut, men även inom den högorganiserade strukturen verkar de vara kämpande röran.
? Det finns massor av innehåll här på hemsidan, vilket är både en tillgång och en skuld från en designers perspektiv.?Webbplatsen är faktiskt mottaglig, och detta tidigt i spelet ger jag fortfarande rekvisita till alla som åtminstone försöker göra det här hoppet. Få, om någon, har dragit av en komplex responsiv design med absolut perfektion, och den här sidan är inget undantag från den här regeln. Ändå anser jag att problemen här inte borde vara för svåra att lösa.
Sammantaget har designarna skapat något bra här. Låt oss dyka närmare och se var vi kan föreslå några ändringar.
Logotypen
Den allra första som jag ser på webbplatsen är logotypen. Det är ett relativt stort föremål i övre vänstra hörnet, så dina ögon naturligt gravit mot den.
Tyvärr tycker jag att det är lite grovt runt kanterna. Konceptet är inte nödvändigtvis dåligt, men från en designers perspektiv är storleken relationerna alla avstängda. Den nuvarande logotypen är en stor bit text, som alla är ganska stora. Problemet med detta är att, snarare än att spela harmoniskt på varandra, känns varje textstycke mer som att det konkurrerar om uppmärksamhet.
"I stället för att harmoniskt spela på varandra känns varje textbit mer som att den tävlar om uppmärksamhet.?Kontrast är ett av dina mest kraftfulla verktyg som designer och du kommer att upptäcka att det hjälper dig att biffa upp en design som känns lite saknad. Med tanken om kontrast i åtanke gjorde jag ikonen större och tagline mycket mindre så det konkurrerar inte med? WPMU.? Jag släppte sedan av den fruktansvärt obekväma roterade? Org? helt och hållet för att jag tycker att det är helt onödigt.
Nu har vi en enkel tvåfärgslogotyp med en stor bit text, en liten bit text och en stor, iögonfallande ikon till vänster. Det är nu mycket mer balanserat och känns mindre rotigt.
Andra logotyper
Om vi hoppar över till andra sidan av rubriken hittar vi två andra logotyper, den här gången från tredje part.
Enligt min mening är dessa lite för stora. Återigen går vi in i den här tanken om visuell konkurrens. Som designer måste du fatta tuffa beslut om vad som är viktigast. Om du försöker göra allt stort och ta hand om dig skräp informationshierarkin.
? Om du försöker göra allt stort och låta dig skräpa informationens hierarki?Vidare är inriktningen av dessa två logotyper en smula bit av. Den oregelbundna formen på WPHonors-logotypen gör att det känns som att Google+-logotypen är för hög, även om den är nära eller till och med död på centrerad. Ibland? Visuellt? Att centrera två objekt kan leda till en mer harmonisk layout än att centrera dem själva.
I slutändan behöver detta område en fem minuters fix. Ta logotypstorlekarna något, inte dramatiskt, och stöta på Google+-logotypen några få pixlar.
Skrivbordslayout
Vi kommer snart att få svar på layouten, för nu ska vi bara fokusera på webbplatsens layout som på skrivbordet eller den bärbara datorn (den stora versionen). I grund och botten tittar vi på en tre kolumnlayout.
Till vänster har du vad som verkar vara aktuella artiklar, centret är främst upptaget av en lista med handledning och vänster innehåller en lista med populära inlägg. Konceptuellt låter det ungefär rätt, men utförandet är faktiskt inte så bra. Tänk på följande skärmdump:
Det problem som jag har med den här webbplatsen är att när jag rullar ner på sidan blir jag helt överväldigad. Det är bara så mycket innehåll här och det är alla väldigt likformigt formaterade och dimensionerade så att det blir en stor röra.
I situationer som dessa, där layouten blir rörig och rörig, gillar jag att avlägsna alla distraheringarna och fokusera rent på storleken och rymdförhållandena för objekten på sidan. För att göra detta, ritar jag innehållet tillbaka till en wireframe som så:
Tänk på kolumnerna
Nu kan vi verkligen få en känsla för vad som händer med den här sidan. En sak som jag märker omedelbart när jag tittar på sidan så här är det samma gamla problemet som vi fortsätter att springa in i med den relativa dimensioneringen av objekt som är alltför lika.
Här tror jag att detta problem spelar ut i kolonnbredden. Även om den vänstra kolumnen är den bredaste, är det inte så mycket. Det finns ingen klar? Featured? kolumnen när jag rullar ner den här sidan. Jag har ingen god känsla för vad huvudinnehållet är, istället skriker allt på mig i samma volym.
? Jag har inte en bra känsla för vad huvudinnehållet är, istället skriker allt på mig i samma volym.?För att omarbeta detta, låt oss försöka flytta den vänstra kolumnen till mitten och justera dess bredd i förhållande till de andra (bredda mittkolonnen, smala de andra). Medan vi befinner oss där, låt oss fixa några justeringsproblem och minska storleken på dessa headerlogotyper. Det tar oss till följande layout.
Som du kan se har vi nu etablerat en mycket tydligare kontaktpunkt eftersom du bläddrar ner på sidan: mittkolumnen. Det andra innehållet är sekundärt, om du vill ha det, inte för distraherande om du inte gör det.
Luftar ut layouten
Nu, trots det faktum att vi har hjälpt situationen genom att införa en klarare hierarki med information, är vi fortfarande hårt kämpade med rodnad. Jag tror helt enkelt att det finns för mycket på sidan vid en viss tidpunkt. Vi behöver inte ta bort massor av innehåll, men vi kan göra sidan mycket bättre med några minskningar och lite mer storlek tweaks.
Gå nu tillbaka och jämför det med den trådram som vi började med. Skillnaden kan verka subtil, men lita på mig, om du genomförde dessa förändringar på layouten skulle effekten vara enorm. Innehållet fotavtryck skulle vara mycket mer effektiva och rymliga med en tydligare väg för användarna att följa när de rullar ner på sidan.
responsiv layout
På det hela taget reagerar layouten ganska bra när utsikten sänks. Kolumnen Populära inlägg faller ner till botten och huvudområdet är upptaget av de andra två kolumnerna. Det rymliga förhållandet här verkar perfekt, mycket bättre än vad vi såg tidigare.
Tyvärr, under allt detta är rubriken full av problem. Mest anmärkningsvärt är hur dåligt navigeringen svarar mot en minskning i bredd. Vid ett tillfälle har den en besvärlig paus i två linjer.
Det här är lite irriterande ur estetisk synvinkel, men när du än går, smalare saker faller sönder. Rubriken blir en stor, tom lucka med en ful, ostylad lista över länkar som floats till vänster.
När du har tittat på webbplatsen i ett smalt fönster och sedan återgår till full storlek återgår inte rubriken till sin ursprungliga layout men blir alldeles konstig med extra blankutrymme. Jag vet att det här är ett fransanvändningsfall (endast nerd-utvecklare ändrar storleken för att se resultaten), men det är fortfarande en indikation på ett problem med layouten.
Det är inte lätt direkt 'Responsive
Bottom line: Responsive layout är ett knepigt, litet djur. Hats off till utvecklarna här för att ge det ett skott alls. Det sägs att det finns uppenbarligen några problem som behöver åtgärdas.
Navigationen är det viktigaste området som har problem, det kan vara till hjälp att ta en titt på vårt genomgång av att bygga en lyhörd navigationsmeny.
Sammanfattning
WPMU är en snygg webbplats. Även om det är lite generiskt representerar det ett starkt försök att organisera och presentera massor av intressant innehåll. De flesta designers skulle kämpa med den här uppgiften, och jag tror att dessa killar har gjort ett jobbigt jobb.
Med detta sagt är områdena ovan de som jag tror verkligen behöver adressera. Mitt råd utgör en fullständig omprövning av layouten, men så länge du har byggt webbplatsen på ett starkt och flexibelt nät, bör det inte motsvara att detta innehåll motsvarar att starta över. Om du inte använder ett starkt och anpassningsbart underliggande nätverkssystem, föreslår jag att du börjar!
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.