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 Adminizio.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi debiterar $ 24 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att ta en titt på din webbplats! Du kan läsa mer här.
Om Adminizio
? Adminizio är en uppsättning av universella XHTML / CSS mallar som kan användas som användargränssnitt för ett innehållshanteringssystem, e-butik, intranät och andra on-line applikationer. Adminizio är avsedd för alla smarta programmerare och webbdesigners, som vill göra jobbet enklare.?
Här är ett skott på hemsidan:
Första intrycken
I ett ögonblick gillar jag verkligen utformningen av den här sidan. Designern följde starkt till rena, företagsledare med några få känsla av visuell känsla.
Det är definitivt en ganska typisk design som inte bryter mot formar, men som ofta är fallet för webbplatser som dessa, behöver man helt enkelt inte skapa något drastiskt revolutionerande. Enkel och bekant kan vara en stötande fras till vissa designers, men verkliga företag vill ofta bara det.
Layouten
Jag tycker ofta om att förenkla en visuell layout till dess grundläggande former så att jag verkligen kan få en känsla för de rumsliga och storleksrelationerna utan att bli distraherad av bilderna. Här är ett grundläggande försök med den här sidan:
Härifrån kan vi se att layouten för det mesta är ganska stark och väl genomförd. Jag stöter dock på några små potentiella problem som jag skulle vilja överväga att ta itu med.
Den första av dessa illustreras nedan. Den fångade mellanrummet mellan kanten av huvudinnehållslådan och den vertikala behållaren är ganska liten (cirka 13 pixlar) jämfört med det allmänna avståndet som ses hela resten av konstruktionen. Detta gör att detta område känns lite klaustrofobiskt. Intressant nog, skulle det vara bra enligt min mening att ta designen rätt till kanten, men att föra det så nära kanten utan att följa igenom gör det bara lite besvärligt.
Den här nästa är en mycket mindre fråga men fortfarande mycket märkbar och var en av de första sakerna som fångade mig. Lägg märke till hur avståndet på högra sidan av stycket verkar för tungt; Kanten stämmer inte upp med den rena linjen som skapats av objekten ovanför och under den.
Normalt skulle jag inte vara orolig för att nära spegla utrymmet på varje sida av en ragged stycke, men utformningen av sidan är så strikt motiverad att detta bara känns som en onödig överträdelse. Att sträcka ut denna punkt lite borde inte vara för svårt. Faktum är att jag spelade med lite i Safari märkte att blocket flyter mycket trevligare om du släpper eller ökar storleken på den här texten med 10%.
Det slutliga layoutproblemet jag upptäcker är linjen om kompatibiliteten mellan webbläsarens mall. Här har konstruktören upprättat två starka kolumner innehåll som håller sig till ett strikt visuellt block. Men då kommer den här linjen och bryter layouten genom att sträcka sig in i den andra kolumnen.
Mitt förslag är att helt enkelt ändra storlek på den här raden eller bryta den i två linjer så att den inte behöver bryta kolumnernas nuvarande layout.
Nitpicking?
Dessa layoutproblem kan verka små, men för mig förmedlar de ett dåligt meddelande om hur sidan konstruerades. De får det att känna att sidan designades av en person och sedan fylldes med innehåll av en annan som inte helt förstod layouten. Detta kommunicerar omedelbart intrycket av en modifierad prefab-mall (intressant eftersom det är exakt vad webbplatsen säljer). Mallar är bra, men bryta etablerade layouter kan och bör undvikas.
Nedladdningslänk
En sak som ständigt tog mitt öga i denna design var pilen längst ned till höger på sidan. Ena handen är det bra, men jag tror att det här är ett dåligt genomförande av en bra avsikt.
Ordet? Nedladdning? är så långt ifrån pilen att de nästan inte verkar anslutna. Vidare är pilens bild inte en länk för att ladda ner något. Jag märkte att när jag undersökte designen såg jag under den pilen för att se vad den pekade mot! Grafiken riktar faktiskt min uppmärksamhet, men de gör det i intet, vilket kan få den oönskade effekten att få användare att känna att de är färdiga med sidan.
Jag föreslår att du placerar pilen bredvid ordet? Ladda ner? så att meddelandet förstärks av grafiken och vice versa. Du kan också överväga att göra pilen, ordet? Ladda ner? eller båda en länk. Ett uppmaning till handling är en helig sak i marknadsföring och på webben gör handlingsordet ofta den logiska platsen för en användare att klicka på. Så om en användare vill ladda ner något, kommer de sannolikt att klicka på ordet? Ladda ner? (även om namnet på objektet de laddar ner är också en stark handling, speciellt för användare som söker efter sidan som letar efter den). Kanske bara förlänga länken så att den täcker? Ladda ner gratis administratörsmall.?
Åh, och fixa definitivt stavningen på ordet? Mall !?
Saker görs bra
Poängen ovan är bland de enda problem som jag ser med designen. Sammantaget är det ett nästan perfekt utförande som kräver mycket få förändringar. Jag skulle vilja avsluta kritiken genom att diskutera de starka områdena i den design som vi kan lära av.
Först upp är den visuella hierarkin. Hemsidan använder grafik och färg sparsamt för att uppmärksamma några viktiga platser. Detta sätt användaren läser denna sida är faktiskt en noggrant konstruerad bana som skapats av konstruktören.Eftersom denna sida säljer en produkt är produkten den främsta höjdpunkten och de främsta punkterna är skärmdumpar av mallarna.
Som en visuell stark punkt älskar jag användningen av spektret nära toppen. Detta ger en lysande grafik som verkligen tar tag i din uppmärksamhet. Se vår artikel om 25 Briljanta användningar av färgglada spektrum i webbdesign för fler exempel på denna teknik.
En annan stor aspekt om den här grafiken är det som upprepades smakfullt hela resten av webbplatsen. Designern huggades av och återanvändde den övre delen av den rundade rutan och placerade den på andra sidor för kontinuitet. Som jag nämnde i vår senaste designkritik är repetition ett kraftfullt verktyg (speciellt för branding) när det hanterades ordentligt och det här är ett perfekt exempel.
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.