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 Snowden Industries.
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 Snowden Industries
? Vi är ett team av proffs, var och en med en unik specialiserad kompetensuppsättning. Vi älskar vad vi gör och tycker om att hjälpa våra kunder att manövrera genom den kreativa processen att översätta befintliga offline-affärsinitiativ till imponerande online-upplevelser. Vi planerar, utformar, kodar, bygger och kritiserar våra projekt dygnet runt. Vi projekterar hantera med BaseCamp, fakturera med FreshBooks och kommunicera via flera online-budbärare som Skype, AIM och Yahoo Chat. Vi är också alltid tillgängliga via telefon och email för att hjälpa dig genom ditt projekt.?
Här är en skärmdump av hemsidan:
Initial Impression
Min första reaktion på den här webbplatsen är enkel: det är fantastiskt. Det är attraktivt, färgstarkt, dynamiskt, engagerande, välorganiserat; Jag kunde gå vidare och vidare. Allvarlig applåder till folk på Snowden, de har gjort ett stellärt jobb.
Att kritisera en webbplats så här är alltid svår eftersom det bara är så bra gjort. Istället för att plocka ut alla saker som gick fel, låt oss diskutera vad som gick rätt. Längs vägen ser vi om vi kan hitta några områden som kan använda förbättringar.
CRAP: Akronym till domaredesigner
Designförfattaren Robin Williams (inte skådespelaren) för länge sedan lade fram fyra grundläggande designprinciper som jag inte bara använder som en guide till mina egna mönster utan också som en standard för att döma andra mönster. Dessa principer är kontrast, upprepning, anpassning och närhet, kärleksfullt refererad till i designgemenskapen som? CRAP.?
För att se varför denna design fungerar så bra, låt oss se hur det hänger i alla dessa områden. Som läsare ger detta dig mycket viktig inblick i hur du kan använda dessa principer i ditt eget arbete.
Kontrast
Jag skulle säga att kontrast är en av de starkaste sakerna som driver denna design. Det är anledningen till att sidan verkligen tar tag i din uppmärksamhet och håller på det när du rullar ner sidan. Här är några exempel:
Lägg märke till hur enkelt färgpaletten är här. Det här är en bra sak om design som jag tror att många människor saknar. En av de bästa tipsen jag kan ge dig: om du inte är bra med färgscheman, håll det enkelt dumt! Det finns en klassisk strategi på jobbet här som vi ser på otaliga webbplatser. Först valdes två snygga kontrasterande färger, i detta fall svartvitt. Det blir helt enkelt inte mer grundläggande och kontrasterande.
Därefter införs en tredje färg, vanligtvis en ljus pop i form av en orange, röd eller grön och används flera gånger på hela sidan för att rikta uppmärksamheten på specifika punkter. Den tredje färgen används mycket sparsamt och griper dig verkligen varje gång du ser den. Snowden använde en fin orange för att uppnå detta.
Som en helt off topic tangent, märka att webbplatsen inte ser ut som en halloween design. För ofta hör jag konstruktörer som ger tanklösa råd för att undvika semesterkombinationer som röd och grön (jul) eller apelsin och svart (Halloween) eftersom tittare omedelbart kommer att associera din design med de semestern. Det finns en viss sanning i varningen, men om du använder en av färgerna skarpt som Snowden gjorde med apelsin, kan du enkelt undvika detta. Om du är en skicklig formgivare, borde du kunna göra tittarna bara om jul när du vill att de ska.
Upprepning
Medan vi är föremål för färg, tjänar den apelsinpulver också som en stark repetitionspunkt på hela sidan. Som jag nämnde ovan, var som helst du ser oransje, försöker konstruktören att rikta uppmärksamheten på något viktigt.
En annan avsiktlig repetitionspunkt är genom användning av cirklar och kraftigt avrundade hörn. Hela sidan kan vi se cirklar som används som designutdrag. Återigen använder de samma grundläggande element för att skapa en stark och konsekvent estetisk känsla.
Plocka upp det rundade temat drivs organisationen på webbplatsen av dessa stora arcerade sektioner. Om vi tar bort innehållet är det lätt att se upprepningen här.
Inriktning
Anpassning är en mycket grundläggande men extremt viktig aspekt av din design. Den här webbplatsen har en ganska komplicerad layout men bågarna gör det lite mer komplicerat än det verkligen är. Avrundad karaktär av sektionerna ger layoutet en nästan organisk illusion, men om du avlägsnar den visuella designen bort kan du se trådramen nedan är ett solidt nät.
Det här exemplet hjälper verkligen att skingra myten att wireframes låser dig in i designstrukturer som är så styva att de dödar kreativ frihet. Denna webbplats är maxed out på kreativa visuella överklagande och ändå är den underliggande strukturen ganska enkel och tråkig!
Anslutning
Principen om närhet är sådan att om det är gjort rätt borde du aldrig märka det. Sätt dig annorlunda, du kommer aldrig att uppmärksamma det faktum att de saker som hör hemma är tillsammans, du kommer bara att uppmärksamma problemen, när något är okej eller svårt att hitta.
Av denna anledning verkar närhet självklart och enkelt, men i sanning är det en stötpunkt för många designers. Som vi redan har nämnt flera gånger, finns strukturen på den här sidan av bågar av vitt och svart. Detta skapade fina lilla krokar där konstruktören kunde lägga fram tydliga visuella kluster av information.
Gör inte misstaget att tänka på att layouten ska vara helt oberoende av estetisk design. Den här sidan visar tydligt de två som arbetar nära varandra och ger ett kraftfullt verktyg för att genomföra närhet.
Slutsats
Det finns ingen magisk formel som du kan följa varje gång för en lyckad design, men enligt principerna ovan kommer du att komma nära dig. Designern bakom Snowden har tydligt ett starkt grepp om grundläggande designteori och hur man skapar en sida som både är framgångsrik och framgångsrik.
Du kanske har märkt att jag fortfarande inte har givit någon konstruktiv feedback, och för att vara ärlig, är jag inte säker på vad jag ska säga. Det är en solid design som jag själv skulle vara extremt stolt över att producera. Den enda sak som buggar mig är användningen av Cufon typsnitt ersättning. Den använda teckensnittet är en ganska enkel sans-serif och jag är inte säker på att Cufon är värt användbarhetssättet. Ett liknande utseende skulle sannolikt kunna uppnås med Helvetica Neue och några säkrare fallbacks. Vidare ger @ font-face ett vänligare alternativ, även om vissa föredrar den visuella återgivningen av Cufon. Hur som helst är det en liten sak med den här webbplatsen och är helt öppen för debatt.
Se sig om
Innan du går, stanna vid sidan och kolla dig. Lägg märke till hur de tog samma solida principer och kombinerade dem med nya layouter och idéer på andra sidor på hela webbplatsen.
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.