Hur man designar en webbplats

De tre grundläggande regler

1. 1
   Regel # 1: Lyssna på din klient. Du kan utforma "världens bästa webbplats någonsin i universums historia och utanför," med god svärta, sofistikerade teckensnitt och djärva konstnärliga färger för en webbplats som skriker "utforskar mig nu!" Tyvärr ville din klient en orange menyrad med chunky rosa och orange typ. Du är avskedad, och din bästa webbplats någonsin-att kunden äger rättigheterna till-försmäktar på sin backup hårddisk någonstans, aldrig att ses av dödliga människan.
   • Studera kundens organisationsnummer. Har klienten visa er några webbplatser som de verkligen gillar. Detta kommer inte bara cue du in vad kittlar deras fantasi, kommer det också ge dig några design idéer som du kanske inte har tänkt.
   • Om du trodde att vi skojade om orange och rosa hemsida, tänk att coolaste någonsin sofistikerade sajt främja denna produkt:
     
2. 2
   Regel # 2: Känn din publik och vad de letar efter, och design därefter. Anledningen människor har hemsidor är att de vill att andra ska se dem. Det kan vara informativa, eller det kan vara kommersiell, eller det kan vara för underhållning är anpassade till en viss demografisk. Ditt jobb som designer, är att veta vem du designar för, och att hålla dem på sidan när de landar där.
   • Du kanske tänker, "Om det ser bra ut, kommer de att stanna." Men detta är inte nödvändigtvis fallet. Tänk fastigheter, till exempel. Här är en webbplats som har en ren, rolig design. Den har massor av vita utrymme som öppnar upp saker, djärva färger och en mycket modern ser widescreen-format med länkar framträdande:
     
   • Nu överväga detta sätt att sälja fastigheter i samma område: det är rörigt och mycket upptagen, grälla färger och slathered med annonser.
     
   • Gissa vilket faktiskt fungerar bättre för människor som söker hem? Just det, den som faktiskt listar hem! När folk söker efter "bostäder till salu i Santa Monica," de inte bryr sig om det estetiska området. De vill inte veta om fastighetsmäklaren, eller se vackra bilder av staden. De vill se bostäder.
3. 3
   Regel # 3: Lyssna till dig själv. Du förstår vad kunden tycker om, och du vet vad din marknad söker efter. Slutligen är det dags att uppmärksamma dig, designern!
   • Bygg upp en mall i grafikprogram som du väljer. På separata skikt (så att du kan ändra saker senare utan att förstöra den övergripande mallen) skapa de element som går in i din sida. Dessa faktorer kan omfatta:
     • Header. Detta är en faktor som kommer att vara gemensam för varje sida på din webbplats. Huvudet består av titeln och webbplatsens logotyp, samt länkar till de andra avsnitten på webbplatsen (ex. Om, Kontakt, etc.). Visuellt och praktiskt, kommer detta knyter ihop allting. Det är god praxis att göra den första knappen på en menyrad länk tillbaka till startsidan.
     • Låt oss titta på Apple, till exempel:
       
     • Som med de flesta allt Apple, har sin hemsida en mycket ren, stilren design. Lägg märke till menyraden längst upp, med logiska ämnen för varje knapp, plus ett sökfält-alltid en fin touch om din webbplats har stöd för det. Nu ska vi titta en målsida för en av knapparna, iPad, och låt oss ta en titt på några av elementen:
       
     • Menyraden ändras endast genom mörkare iPad knappen.
     • Ämnet för målsida är i stora svarta bokstäver i det övre vänstra.
     • En ny sub-menyraden visas så att du kan läsa mer om produkten. Om du klickar på var och en av dessa undermenyer rubriker, kommer du att se varje sida kommer att erbjuda nytt ämne-relevant innehåll, men kommer att vara identiska i layout och design.
     • Många gånger, varje huvudrubrik i menyraden kommer flera underrubriker som du måste ta hänsyn till. Istället för att skapa en sekundär menyrad, kan du använda popupmenyer som detta exempel från musiker vän:
       
     • Side bar. Detta kommer att vara vanligt på många sidor på din webbplats, men inte nödvändigtvis alla - sammanhanget är kung. Men det är en mycket viktig faktor, och måste noggrant utformade för att vara intuitiva och onödigt rörigt. Till skillnad från menyraden, kan innehållet i en sida bar vara mycket dynamisk. Betrakta dessa två sidofält från fastigheter marknadsförare Trulia Den första är för köpare:
       
     • Och den andra är för hyresgäster. Lägg märke till den helt annat fokus för mycket liknande information, och det verkar på exakt samma plats på sidan baren:
       
     • Body. Det är där allt händer, och är den mest rörliga delen av din design. Om du designar en e-handelsplats, till exempel, kan en sida ha en produkt recension i kroppen, medan nästa har 20 föremål till salu. Ditt jobb är att knyta ihop dem så att de inte ser osammanhängande, visuellt. Använd liknande färger, teckensnitt och element i användargränssnittet för att dra ihop allt.
     • Sidfot. Detta är något som inte varje plats har, eller behov. Det används ofta för saker som kanske blir rörigt ett annars rent gränssnitt, eller ge tillgång till delar av webbplatsen som inte är webbplatsens huvudsakliga fokus. Här är ett exempel från Groupon:
       

Riktlinjer

1. 1
   Öva god design användargränssnitt. Placering av olika delar av webbplatsen, till exempel titel, sidofält, logotyper, grafik och text, på samma plats på varje sida kommer att göra din webbplats farbara och intuitiv.
   • Behåll samma sidhuvudet överst på varje sida. Oavsett om din webbplats innehåll lämpar sig för många repeterande element, och se till att toppen av varje sida är identisk är ett måste.
   • Använd logik i din design. Elementen på en enda sida bör beställas logiskt efter vikt eller efter ämne, olika sidor på webbplatsen bör göra detsamma.
2. 2
   Skapa en konsekvent stil. Även layouten ska ge din webbplats strukturell enhetlighet bör stilen ger det tematiska harmoni.
   • Stick med två eller tre huvudsakliga färger och se till att de harmonierar väl.
   • Undvik att använda alltför många teckensnitt eller storlekar, om du planerar att alternera mellan ett fåtal, se till att använda dem på samma sätt på varje sida.
   • Använd Cascading Style Sheets (CSS) för att hantera en enhetlig stil, och för att göra det lättare att byta element i en hel webbplats utan att behöva gå till varje enskild sida.
3. 3
   Maximera läsbarhet. För att göra din text lättare att läsa, dela upp den i mindre delar.
   • Använd underrubriker och lämpligt avstånd för att separera varje avsnitt.
   • Använd fetstil eller olika storlek typsnitt att visa hierarkin och vikten av ämnena.
   • Var uppmärksam på texthantering. Gör inte typsnittet för liten, och vidga radavståndet att göra stora block av texten mer läsbar. Stora block av text kommer att bli svårare att läsa, bryta upp dem i mindre stycken istället.
4. 4
   Gör din webbplats universellt läsbar. Använd standard HTML och undvika taggar, funktioner och plug-ins som endast är tillgängliga för ett märke eller version av en webbläsare.
   • Även om de flesta moderna webbläsare och datorer kan hantera komplexa bilder, allt blir lite snappier om din förvarar dina bilder mindre i storlek och optimerade för webben. Balansera önskan om kvalitet mot behovet av snabbhet.
5. 5
   Testa din webbplats. Se till att alla länkar fungerar som du förväntar dig, och att bilderna visas korrekt.
   • Du kanske vill genomföra vissa användbarhetstester genom att ha medlemmar i din målgrupp testa tydlighet och användarvänlighet i din design, och ge dig feedback på din webbplats.
6. 6
   Publicera din hemsida. Om du inte redan har gjort det, köpa ett domännamn. Kontrollera länkar regelbundet för att se till att de fortfarande existerar och lyssna på förslag skickas till dig av besökare.