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 Optimering-World.com, hem för Optimized Cable Company.
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 Optimized Cable Company
Varje kabel som säljs på Optimized Cable Company är garanterad för livet. Om din kabel någonsin misslyckas, returnera den bara till oss för ett problemfritt byte. Vi är stolta över att erbjuda högkvalitativa kablar till mycket rimliga priser. Betala inte för dina kablar på varuhusen. Beställ från oss och dra nytta av vår kostnadsfria fraktsändning. Vi nickel-n-dime dig inte. Det pris du ser är det pris du betalar.
Här är en del av hemsidan:
Initial Impression
Det finns några bra idéer på jobbet här, men i stort sett speglar designen mycket nära någonting som skulle ha varit ganska vanligt runt tio år sedan. Webdesigntrender är något som uppmärksammar när du bestämmer dig för att designa en webbplats. Inte så att du kan ripoff andras idéer, men så att du ser till att din slutprodukt känns modern och relevant.
Som designare är det för lätt för oss att fastna i det sätt som vi närmar oss ett projekt. Den negativa effekten av detta är att världen förändras medan vi blir samma. Att ha en webbplats som känns föråldrad är särskilt farlig för nätbutiker eftersom den direkt kan relatera till lägre försäljning. Besökare slutar och är plötsligt osäker på om platsen är en säker plats att spendera pengar på. Är detta ett legitimt företag som skyddar mina kreditkortsuppgifter? Eller är deras webbplatsskydd föråldrad? I det här fallet kan jag gå vidare till Best Buy oavsett kostnad och kvalitet för produkterna bara på grund av att webbplatsen känns säkrare.
Visserligen är det svårt att precisera vad som skiljer en modern design från en föråldrad en så idag kommer vi att kamma igenom och se om vi kan identifiera vilka aspekter som direkt påverkar våra visningar om tidsperioden.
Rubrik
Det första som fångar vår uppmärksamhet här är logotypen. Det är ett starkt glättat element som känns som det är från den tidiga web 2.0-perioden. Glans kan fortfarande fungera i många webbdesigner om det görs ordentligt, men här känns det här elementet inte på plats. Nästan inget annat på sidan matchar det här utseendet, inklusive texten på logotypen, vilket känns mer som något från en vintagebilannons (mer tidsförvirring).
Därefter flyttar vi till den gula gradienten. Denna färg bryter verkligen mot resten av webbplatsens ordning. Marknadsförare så här eftersom det sticker ut men ur ett designperspektiv känns det bara fel. Färger som kompletterar kan sticka ut och uppmärksamma utan att kollidera. Vidare, även utan hänsyn till resten av webbplatsen, är den gula gradienten en annan sak som inte speglar nuvarande trender.
För att se vad jag menar, låt oss jämföra leveransbannern på webbplatsen ovan till samma element på häftklubbens webbplats.
Vi kan lära oss mycket av det här. För det första är layouten mycket rymligare och rymlig, allt är inte proppat i så tätt. Vi ser också några starka vänsterjusteringar på plats, i motsats till relativt svaga centruminriktningar. Observera att nyckeln här är subtil. Det finns gradienter och till och med en konsistens som skapats av tunna linjer, som vi ser på den optimerade webbplatsen. På Staples-webbplatsen är dessa element dock mycket dämpade. Både gradienterna och linjerna är lätta att missa om du inte uppmärksammar, vilket innebär att de lägger till estetiken utan att vara distraherande.
Färger och texturer
När vi flyttar ner på sidan kan vi se mer av den här idén att färgerna och texturerna spelar en stor roll i intrycket av en tidsperiod. I skärmdumpen nedan ser vi detta i spel tillsammans med stark användning av hårda hörn med enstaka pixel svarta slag som gränsar till dem. Detta skapar en boxig känsla som påminner mig om något arbete som jag gjorde för en klient en gång i ett CMS kallat Plone.
Låt oss jämföra detta med några av de behandlingar som vi ser i ett liknande område på en större konkurrents webbplats. Skärmbilden nedan visar sidofältet från Radio Shack hemsida. Detta företag är inte exakt en perfekt bild av moderna affärsmetoder, men de försöker hålla sin webbplats snygg och relevant.
Foton och text
Tillsammans med de grafiska elementen på sidan måste du också se hur du strukturerar dina bildbehandlingar. Bilden nedan har verkligen inget bra område med solid färg för att placera text, så texten fick en obekväm spökad skuggbehandling för att hjälpa den att sticka ut.
Ibland har du ett foto som verkligen inte fungerar med text. Snarare än att försöka hålla de två ihop när det helt enkelt inte fungerar, överväga en alternativ rutt. Vi har en hel artikel som ägnas åt att designa med foton som delar några fantastiska tricks för hur man kombinerar text och fotografi på ett attraktivt och läsbart sätt.
Text och logotyper
Den sista delen av den här sidan som jag vill adressera visas i bilden nedan. Här har vi en hel del logotyper, varav några är förmodligen nödvändiga men jag är definitivt inte övertygad om att de alla måste vara där. Ackreditering från BBB är bra, men behöver jag verkligen veta att webbplatsen använder US Postal Service? Det är ganska mycket givet att om jag köper en produkt på nätet kommer den att skickas till mig på något sätt och de flesta av oss tar US Postal Service för att betyda? Vanligt gammalt mail ?.
Vidare kan kreditkortslogotyperna troligtvis flyttas till betalningssidan. De flesta konsumenter som är tillräckligt bekväma för att göra ett inköp på nätet kommer att anta att du tar stora kreditkort.
Slutligen, vad som kommer nästa är ett stort block av enhetlig text. Det finns inga rubriker, ikoner, differentierade textbehandlingar (bortsett från länkar) eller andra knep som används för att bryta upp det och göra det mer läsbart. I ett ögonblick vet jag inte ens vad den här textstycket handlar om så varför skulle jag ta flera minuter att läsa den?
I webbdesign kan du helt enkelt inte förvänta dig besökare att ta itu med en bit av ren text så här. En av hundra besökare kan faktiskt gå igenom första stycket, men det är optimistiskt. Betyder det att du inte kan ha mycket text på en webbsida? Absolut inte. Du måste bara lära dig att bryta upp det i meningsfulla och hanterbara bitar som snabbt kan bläddras för relevant information.
Designersna på MailChimp är stjärniga på detta och jag hänvisar alltid till deras arbete när de diskuterar detta ämne. Deras nyligen utformade redesign tacklar har en sidor som är fulla av text, men kolla hur de hanterade det:
Starka rubriker, korta block av text och bilder som hintar på innehållet används alla här för att göra allt detta innehåll lätt smältbart.
rekommendationer
För att ta med den här webbplatsen till 2011, rekommenderar jag att designerna tar en hård titt på andra webbplatser, både i deras fält och ut (vårt Design Gallery skapades exakt för detta ändamål). Undersök mer om vad som sätter moderna platser bortsett från trender och taktik som ses på den optimerade webbplatsen.
Du kan till och med överväga att köpa ett butikstema från ThemeForest för att få en bra start på en bra design. Temaet nedan löper bara $ 15 och ser bra ut!
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.