Design Shack började som ett enkelt CSS-galleri med väldesignade webbplatser som fångade mig. Tusentals mönster har lämnats under de senaste åren, och var och en har övervägts noggrant för inkludering. Det sorgliga faktum är att endast cirka 5% av inlagorna sticker ut från publiken.
Detta kan bero på ett antal faktorer; webbplatsen fick inte grunderna rätt, hade inte något anmärkningsvärt att visa, eller (ibland) lades ner av innehållet. Den här guiden kommer att leda dig igenom hur man ser till att du har en stor chans att inkludera, så att alla fallgropar så ofta slog in av designers. Vid varje steg tar vi en titt på ett bra exempel, och en som inte är så bra.
Nail the Basics
Det är vanligt att se en sida faller ner vid den första hindringen, och spikar inte grunderna för en bra design. Områden som är värda att ta sig tid att få rätt är typografi, avstånd och färger (eller vanligtvis en kombination av alla tre!).
Om du letar efter en övergripande översikt över byggstenarna i designen, kolla in Five Simple Steps. Det är värt vartenda öre, och har lärt mig en hel del om designprinciper som jag tidigare försummat.
Typografi
Typografi är förmodligen det vanligast förbisedda elementet i en design. Det har stor betydelse och kan göra eller bryta en webbplats.
Tänk noga på vilken typ du vill använda i rubrikerna och på din webbplats. Även om du för några år sedan var allvarligt begränsad till en handfull webbsäkerhet? teckensnitt, med hjälp av ett system som Cufon eller sIFR, betyder att teckensnittsmöjligheterna är oändliga.
Det viktiga är att välja två eller tre teckensnitt och hålla sig till dem i en förnuftig hierarki på hela webbplatsen. Skapa ett provpost som visar vilka olika taggar som ser ut, så att du har utformat allt korrekt. Detta kan innefatta:
- Rubrik (h1 och framåt)
- listor
- Citat
- Länkar (och rubrik / bildlänkar)
- förkortningar
- Tonvikten / kursiv / Fet / strong
- Kodformatering
Mellanrum
Det är viktigt att lägga saker på rätt sätt på sidan med tillräckligt med utrymme för att säkerställa att allt är läsbart. Att överensstämma med någon typ av rutnätstruktur är viktigt, med 960 Grid-systemet ett populärt val.
Se till att whitespace används i stor utsträckning och drar läsarens öga mot viktiga delar på sidan.
Färger
Att välja ett färgschema för en webbplats är långt ifrån enkelt (och vi kommer att täcka några verktyg för att hjälpa dig i en kommande artikel). Det är svårt att hitta ett unikt färgschema, vilket inte förringar sidans läsbarhet.
Om du fastnar för inspiration, är Color Lovers en bra plats för att snabbt bläddra genom olika olika färgprov och kombinationer.
Lägg till något kreativt
Även om du slår alla grunder kan vara tillräckligt för att få en webbplats som presenteras, kan den extra milen med en ny och innovativ design verkligen hjälpa till att fånga uppmärksamhet. Detta kan vara en intressant layout, bakgrund eller möjlig, bara otrolig uppmärksamhet på detaljer om varje sista element på sidan.
Webbdesign blir ofta otroligt? Fast i en ruta? Med en viss stil blir det genomgripande för några månader innan någonting nya stiger till popularitet. Webbplatser som bryter mot detta? Trend-efter? är mycket mer benägna att presenteras, eftersom de har mycket mer potential att inspirera.
Grafiska element
Den mest uppenbara platsen för innovation att komma ifrån är de grafiska elementen på en sida. Med detta sagt måste grafiken stärka utseendet på en sida, snarare än att känna sig ojämn och rörig. Dessa två exempel är bra illustrationer av bilder och illustration som används för bra och dålig effekt:
Att lägga till en unik och intressant grafik är ett bra sätt att injicera personlighet på din webbplats och få läsare att känna sig som hemma.
Animering
Med animeringsmöjligheterna som tillhandahålls av system som jQuery finns det ingen anledning att hålla en webbplats statisk. Det är också nu möjligt att göra detta är ett användbart och semantiskt sätt utan att behöva tillgripa Flash.
Jag pratar inte om klibbig animering, snarare effekter som gör en sida känns snällare? och mer fluid. Ett bra exempel på detta är Tim Van Dammes personliga sida, vilket är ett stort nöje att använda:
Prova att lägga till en enkel effekt på överföringsegenskaperna i dina länkar, för att ge en smidig övergång från ett tillstånd till ett annat.
Navigering
Huvudsyftet med webbplatsnavigering bör alltid vara att ge ett tydligt sätt för läsaren att komma åt innehållet. Det betyder emellertid inte att du behöver hålla fast med en vanlig lista med länkar. Oavsett om du går för vertikal eller horisontell navigering, är det enkelt att lägga till intresse med några grafik:
Jag inser att jag är väldigt hycklande här (titta på vår tråkiga lista med länkar!), Men jag tycker att Design Shack passar bättre med en vanlig navigationsstil. Olika webbplatser har olika krav!
Du kan gärna titta på en av våra partnerwebbplatser, 13 stilar för några intressanta menyer att ladda ner gratis.
Tänk två gånger om innehåll
Många tycker att det ska vara möjligt att hålla konstruktionen och innehållet på din webbplats relativt skilda. Detta är sällan fallet och innehållet på en sida kan ha stor inverkan på huruvida det är lämpligt för inkludering.
Dåligt skrivet kopia, stavfel och grammatiska felaktigheter är ganska oförklarliga. Om du hoppas kunna lägga fram en professionell bild med din webbplats, tar du tid att göra perfekt kopian är verkligen viktigt. Det står mycket om din uppmärksamhet på detaljer, och det är osannolikt att de flesta gallerier kommer att presentera dig om en sida är fylld med stavfel.
annonser
Många webbplatser är beroende av reklam för att generera inkomster och hålla ett projekt på gång (vi ingår!).Det betyder inte att annonser måste komma på bekostnad av bra design, och de måste användas sparsamt. Om du har tillräckligt med efterfrågan att fylla varje extra tum av utrymme på din webbplats med reklam, laddar du helt enkelt inte nog!
Generellt sett är det bättre (men inte nödvändigtvis lika lönsamt) för att undvika förvirrande läsare. Försälj inte annonsförbindelser i texten på din sida och försök inte dölja annonser. Samarbeta med företag som du gärna vill hantera själv och visa sin produkt med stolthet. Det hjälper också om du kan se till att annonserna är snyggt utformade (men det är sällan möjligt!)
Ett exempel på ett nätverk av webbplatser som gör det bra är Tuts +. De har tydlig skillnad mellan innehåll och annonser, men erbjuder fortfarande en framträdande position för sina sponsorer:
Kvantitet
En allmän tumregel brukade vara att innehållet inte skulle gå? Bortom veckan ?. I själva verket detta? är inte lika viktigt som folk trodde en gång. Användare är nu helt vana vid att rulla och förväntar sig när de besöker din webbplats.
Det viktiga att uppnå är att förmedla huvudsidan till en sida så snart som möjligt. Vara förnuftigt med antalet inlägg eller mängd innehåll som visas på varje sida av två skäl: (1) visar de senaste 30 inläggen att din sida tar en lång tid att ladda, och (2) en mycket lång innehålls-kolumn är osannolikt att? balansera? med längden andra kolumner på din sida.
Värt besväret?
En fråga som utan tvekan går igenom ditt sinne i detta skede är om allt detta arbete är värt ansträngningen. Varför skulle du vilja vara med i ett CSS-galleri alls? Bra fråga.
- Främjande & medvetenhet: Alla älskar lite trafik till en ny design, och att vara med är ett säkert sätt att få en massa människor att besöka din webbplats. Det är ditt jobb att konvertera dem till abonnenter, lojala fans eller betalande kunder.
- Prestige: Att vara med i en rad olika gallerier är en stor självförtroendeförstärkare. Det sagt, gör det inte ditt enda mål (och snälla, snälla du, lista dem inte alla i din sidfot)
- Framtida arbete: Jag har funnit att potentiella kunder ofta använder designgallerier som ett sätt att hitta en designer som har en viss stil som de letar efter. Att vara med kan vara ett bra sätt att ta fram nya affärer.
Lycka till!
Som en bonus för att komma till slutet av denna artikel vill jag gärna ge dig en chans att skicka in en webbplats till Design Shack gratis (det kostar vanligen $ 3,50). När du har beaktat punkterna ovan, släpp mig ett mail på [email protected]. Jag ska se över din inlämning och - förhoppningsvis - ser du din webbplats på Design Shack snart!
Den här e-postadressen är bra i en vecka - efter det stänger vi av det!