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 DEV, en marknadsplats för WordPress-teman och plugins. Låt oss hoppa in och se vad vi tycker!
Skicka in din webbplats!
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 DEV
? WPMU har de bästa pluggarna WordPress, Multisite och BuddyPress och teman på webben. Prisvinnande, älskad av 145.436 medlemmar, sparkar den sedan 2004. Det är den enda platsen du kommer att hitta bra Multisite-teman, det berömda 133-temapaketet, fantastiska nätverkshemsidor och 100% BuddyPress-kompatibilitet.?
Här är en skärmdump av en sektion på hemsidan:
Första intrycket
? WPMU DEV är en vacker webbplats med en lyhörd layout och massor av bra lilla detaljer som räcker för att göra det här designerns leende.?Förra året tog vi en titt på en annan webbplats i samma nätverk / familj: WPMU.org. Den webbplatsen kände sig lite slät. Det såg anständigt, men väldigt mycket som någonting ur en generisk mall. Vidare behövde layouten arbete och vissa aspekter av estetiken, som logotypen, var lite borta.
Efter kritiken omarbetade de hårt arbetande personerna på WPMU helt den webbplatsen, som innehöll många av de förslag som jag gjorde i kritiken. Resultatet är en underbar ny blogg som tar upp alla problem som jag hade med den gamla. Layouten är fantastisk (perfekt lyhörd för start), estetiken är vacker och anpassad, även logotypen har omformats för att känna sig modernare. De uppte verkligen sitt spel och knackade version två ut ur parken.
När de bad mig att ta en titt på WPMU DEV visste jag så snart jag såg det att dessa killar handlade om att göra bra design en topprioritet nu. Som den nya WPMU.org är WPMU DEV en vacker webbplats med en responsiv layout och massor av bra lilla detaljer som räcker för att göra detta designerslil. Låt oss hoppa i se vad som gör det så fantastiskt.
Rubrik
Vi börjar överst och flytta ner på sidan. När du laddar in på sidan, är det grafiken som fyller din skärm:
Jag älskar att det första jag ser är ett stort foto av en attraktiv och vänlig person. Det har inte det alltför poserade och formella stock photo feel, men i stället verkar mer äkta och trovärdigt avslappnad. Höger bredvid kvinnans bild är ett positivt kundcitat, vilket medför kontext till kvinnans foto.
Strax utanför fladdermusen har de slagit på några av mina favoritaktik: leende ansikten och riktiga klient beröm. Denna webbplats, och därmed WPMU DEV, verkar vänlig, tillförlitlig och pålitlig för mig som besökare, och jag har bara varit här i några sekunder!
Allt detta är säkerhetskopierat med ett solidt handlande: lära sig mer. Vid denna tidpunkt är det troligen precis vad jag vill göra. Den här länken tar dig till en annan, lika fantastisk sida, för nu håller vi fast vid den här och rullar lite.
Navigering
Innan vi går vidare till nästa avsnitt, låt oss prata om sidstrukturen lite. För det mesta är detta en enda sidsajt. Länkarna i navigeringsfältet tar dig inte till separata sidor utan hoppa dig till olika delar av samma sida. Med tanke på navigeringsfältet är det faktiskt en riktigt slick bit av utvecklings- och designarbete:
Initialt visas navigeringen direkt under kvinnans foto från det sista avsnittet. Men när du rullar ner på sidan klamrar den faktiskt till toppen av ditt visningsport. Som det gör så kommer en logotyp och texten minskar dess storlek i en vätsketransition. Det här är den typ av saker som jag verkligen geek ut över, så navigationen får två tummar upp från mig.
Det här är inte bara ögonsjuka, men vad navigeringsfältet gör är att anpassa sig till var det används. Överst på sidan finns det redan mycket varumärke, så logotypen behövs inte. När du rullar ner menar logotypen för att påminna dig var du är och fungerar som en snabb länk för att hoppa överst på sidan. Extremt funktionell. Extremt attraktiv. Det är en vinn, vinna.
Pluginsektion
Härifrån hoppa du enkelt från en sektion till nästa när du bläddrar ner på sidan. Varje sektion är unik och snygg i sin egen rätt, medan du kopplar in i den större designestetiken som styr hela sidan. Här är den första delen:
Som du kan se, vänder de här andra delarna om det färgschema som vi såg i rubriken (mörk bakgrund, ljushöjdpunkter), vilket ger en del riktigt bra användning av både kontrast och repetition. När du svävar över en av ikonerna i detta område blir grafens rubrik och jämn delar ljusgult, vilket än en gång använder kontrastbrunn.
Jag älskar hur dessa ikoner ser ut. De är inte samma uppsättning minimala ikoner som du ser i tusen olika iterationer över hälften av webbplatser på webben. De känner sig mycket mer anpassade och har lite personlighet för dem.
Medlemskap Slider
Därefter kommer vi att hoppa ner några avsnitt och titta på en riktigt snygg bit av användargränssnitt som hjälper dig att bestämma en medlemsplan.
Här har vi en fin stor skjutreglage som sträcker sig hela vägen över skärmen. När du flyttar skjutreglaget från en månad till tre månader och sedan till tolv uppdateras priset längst ner tillsammans med dina besparingar. Det är en bra punkt av interaktion som har förmågan att öka engagemanget. Det fungerar också verkligen smidigt, så att du kan dra i reglaget eller helt enkelt klicka på var som helst för att uppdatera priset. Oavsett var du släpper skjutreglaget hoppar den över till närmaste stopppunkt.
utvecklare
Den sista delen av den här sidan som jag vill titta på visar bilder av personalen och stödja devs / designers för WPMU. I ett ögonblick ser det ganska unremarkable ut. Bara ett raster med miniatyrbilder, eller hur?
Det visar sig att dessa killar gjorde även det här avsnittet fantastiskt. När du svävar över en bild ser du ett litet överlägg som visar personens namn och position. Flytta markören bort och överlägget glider ut. Den snygga delen är dock att den glider in / ut i vilken riktning markören är på väg. Det betyder att om du glider markören bort från ett foto och till en annan, ser det ut att överlägget följer dig. Det är en stor illusion som jag var tvungen att leka med för en solid trettio sekunder innan jag gick vidare.
responsiv layout
Innan vi avslutar är det definitivt värt att notera att webbplatsen är fullt mottaglig. Nedan kan du titta på skrivbordet, tabletten och mobilversionerna:
Lägg märke till hur väl utformningen anpassar sig till enheten som visar den. När du flyttar ner hålls kärnbudskapet, men icke-väsentliga extramaterial skrotas till fördel för layout effektivitet.
Bra jobbat!
Var alltid uppmärksam på de hinder som du placerar mellan dina användare och en omvandling.?
Såvitt jag är bekymrad, är den här webbplatsen toppklassig. Designen är perfekt, layouten lyhörd och meddelandeplaatsen på. Jag kan snabbt berätta vad WMPU DEV handlar om och har redo informationskällor för eventuella frågor som jag har.
Jag tittade länge och försökte hitta något att klaga på och uppriktigt sagt, det finns nästan ingenting. Den enda sak som berör mig är den ansträngning som krävs för att faktiskt anmäla sig. Det finns inget? Registrera dig nu? knappen var som helst på hemsidan. När jag klickar på? Läs mer? knappen, jag är taggen till planerna och prissidan. Den här sidan är attraktiv, men jag måste rulla i miles innan jag kommer till botten där jag äntligen kan välja en plan och fortsätta.
Var alltid uppmärksam på de hinder som du placerar mellan dina användare och en omvandling. Om jag kommer till den här webbplatsen med avsikt att anmäla mig är jag din bästa besökare och du vill göra dang säker på att jag har en enkel, tydlig väg att ge dig mina pengar.
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.