Göra och inte göra bra webbdesign

När den följs kommer den här guiden att visa sig vara en ganska värdefull webbdesignresurs, särskilt om du planerar att använda den programvara för webbutveckling i framtiden. Från den oerfarna till den erfarna, den här guiden har något för alla.

Processen med bra webbdesign Bara för att se till att vi alla är på samma sida, låt oss börja med den grundläggande definitionen för "webbdesign". Enligt Wikipedia är webbdesign:

"en process för konceptualisering, planering, modellering och utförande av elektronisk medialeverans via Internet i form av märkningsspråk lämpligt för tolkning av webbläsare och visning som grafiskt användargränssnitt" .

Processen med webbdesign kan jämföras med processen att skriva ett forskningsarbete. I konceptualiserings-/planeringsstadiet skapas flödesscheman (konturen) som illustrerar navigeringsstrukturen på din webbplats. I modelleringsstadiet skapas statiska trådramar (det grova utkastet) som illustrerar skelettlayouten för varje sektion av din webbplats. Efter att trådramarna skapats används grafik, färger och text för att skapa designen av dina webbsidor baserat på trådramarnas layout. I utförandestadiet konverteras din design till ett format som stöds av webbläsare, text och innehåll läggs till, och slutligen publiceras din webbplats live på Internet för världen att se (slutligt utkast).

Alla tre stegen i designprocessen är lika viktiga. Många webbdesigners hoppar över ett steg för att spara tid eller för att de inte tycker att det är nödvändigt. Men alla tre stegen är nödvändiga om ditt mål är att skapa en framgångsrik design och respektabel webbplats. Även om de tre stegen används, finns det många misstag som webbdesigners kan göra som kommer att leda till dåliga, icke användarvänliga webbplatser. Det är dags att rensa ut skåpet från dåliga metoder för webbdesign och fylla på med de bra.

Steg 1: Konceptualisering och planering
Detta steg hoppas över oftare än de andra två stegen. De flesta skribenter gillar inte att skapa konturer för forskningsartiklar, och de flesta webbdesigners gillar inte att skapa flödesscheman heller. Var inte lat. Om du anstränger dig och planerar din webbplats kommer du att märka att webbdesignprocessen går smidigt med färre misstag på vägen.

Det finns några saker som du behöver för att effektivt konceptualisera och planera din webbplats:

• en hjärna
• en penna och papper
• (valfritt) flödesschemaprogramvara
• en allmän uppfattning om de olika delarna av din webbplats

Börja med att ta din penna och papper eller starta din favoritprogram för flödesscheman. Vi använder OmniGraffle Professiona för Mac OS X som kostar $150 per licens men är väl värt det om du skapar webbplatser regelbundet. Om du är på en PC är SmartDraw ett fantastiskt GRATIS flödesschemaprogram som du kan använda. En penna och papper fungerar dock bra.

Det finns många metoder för att skapa flödesscheman. Vi kommer att visa dig det mest grundläggande sättet att göra det för tidens skull och längden på den här artikeln. Om du vill lära dig mer om flödesscheman, sök efter flödesscheman på Google eller Yahoo.

Se flödesschemat som vi skapade när vi konceptualiserade Chromatic Sites. (1) Överst i flödesschemat listar vi namnet på vår webbplats. (2) Därefter inkluderar vi varje primär sektion av vår webbplats: Hem, Om och Tjänster. Dessa avsnitt är huvudnavigeringen för din webbplats. Vad namnen på varje avsnitt kommer att vara beror helt på innehållet på din webbplats. Försök att använda så få avsnitt som möjligt så att dina besökare inte blir överväldigade när de navigerar genom din webbplats.

(3) Lägg sedan till alla sekundära sidor (underavsnitt) som kommer att listas på var och en av de primära sidorna. För Home har vi inkluderat professionell webbdesign, webbutveckling och sökmotoroptimering. Den sekundära navigeringen måste vara mer beskrivande än den primära navigeringen. Ju djupare din webbplatss navigeringshierarki går, desto mer beskrivande bör varje etikett vara.

Dos

• Mindre är mer; hålla antalet primära sektioner till ett minimum. Vi använder 6 sektioner på vår hemsida vilket är mer än tillräckligt
• Oavsett om du använder penna och papper eller flödesschemaprogramvara, håll saker så rena och organiserade som möjligt. Även om du (och alla som arbetar med dig) är de enda som kommer att använda flödesschemat, måste det fortfarande vara vettigt - Dina primära sektioner bör använda bredare termer, medan sekundära och tertiära termer bör vara mer beskrivande

Donts
Att skapa ett flödesschema är ganska enkelt; Det finns dock några misstag som lätt kan göras:

• Använd inte mycket beskrivande termer i din primära navigering om inte hela din webbplats fokuserar på ett smalt ämne - Försök inte att klumpa ihop flera ämnen på samma sida. Skapa ett allmänt avsnitt för dessa ämnen och skapa underavsnitt från det avsnittet. Detta kommer att göra underavsnittet (beskrivande) webbsidor mer benägna att ha bättre ranking i sökmotorerna (Google, Yahoo, MSN, Ask) När du har skapat ett kortfattat och beskrivande flödesschema är du redo att gå vidare till det andra steget av webbdesignprocessen:

Steg 2: Modellering
I modelleringsstadiet skapas statiska "wireframe"-modeller. Varje mockup illustrerar ett barbent skelett av layouten för var och en av webbsidorna som kommer att inkluderas på din webbplats. Detta steg är viktigt eftersom det ger oss en uppfattning om var olika element kommer att placeras i vår design. Några av dessa element är:

• logotyp
• navigationsmeny
• innehåll
• bilder, videor

För att skapa dessa mockups kan du använda en penna och papper eller din favoritmockup-programvara. Tidigare har vi använt Photoshop, men på senare tid har vi använt OmniGraffle Professional. OmniGraffle är inte så resurskrävande som Photoshop är och det gör att vi kan montera våra wireframe-modeller mycket snabbare.

Se dessutom till att du har flödesschemana som du skapade i närheten eftersom du kommer behöva referera till dessa då och då för att se till att du hånar alla sidor som kommer att visas på din webbplats.

Här är vårt exempel på hur en wireframe-mockup ska se ut. Som du kan se finns det inga färger eller grafik. Det är precis så här en wireframe mockup ska vara – en skelettlayout av din design. Syftet är att kunna ha en generell uppfattning om var var och en av webbsidans element kommer att placeras.

Vi brukar börja uppifrån till vänster och arbeta oss ner till botten. Det finns inget specifikt sätt som en trådram ska se ut. Använd din fantasi. Se dock till att när du skapar dina wireframes glömmer du inte att inkludera de viktigaste delarna av en webbplats (logotyp, navigeringsmeny, innehållsplacering, bilder/videoplacering).

Om några av dina sidor kommer att använda samma layout, är det inte nödvändigt att håna alla dessa sidor (även om du säkert kan). Se bara till att mockup alla unika layouter som din webbplats kommer att ha. Du kommer att tacka dig själv senare.

Do's

• mockup alla unika sidor
• inkludera viktiga element (logotyp, navigering, innehållsplacering, bilder/videoplacering) -börja uppifrån och arbeta dig ner - referera till ditt flödesschema skapat i steg 1 för att få dig att inte glömma att mockupa några sidor -spara, spara, spara – som med allt på datorn, spara dina mockup(ar) var tionde minut eller så
• fokusera på rena, användarvänliga layouter -märk dina element så att du inte glömmer vad de är när du refererar till dem i steg 3, utförande -använd andra webbsidor som inspiration; det är inget fel med att ta element från andra webbplatser och göra dem till dina egna (se "donts")

Dont's

• inkludera inte grafik eller färger (det är för nästa steg) - gör inte dina mockups för "upptagna"; fokusera på rena, välorganiserade, användarvänliga layouter - hoppa inte över detta steg; den är lika viktig som den första och den sista - om du tar element från andra webbplatser, se till att du inte plagierar; det är skillnad mellan att bli inspirerad av en annan webbplats för att skapa vissa delar av din design och att på ett flagrant sätt riva av deras layout och färger

Steg 3: Utförande
I det tredje och sista steget, utförande, kombineras planeringen från steg 1 och 2 för att hjälpa till att skapa en levande, interaktiv webbplats.
Det tredje steget är det överlägset mest tidsintensiva eftersom du kommer att 1) ​​skapa grafiken 2) skapa innehållet och slutligen 3) konvertera webbdesignen från bilder till kod som webbläsare använder för att presentera din webbplats för världen.

När du når det tredje steget bör du ha en klar uppfattning om:

• hur dina besökare kommer från en plats till en annan (steg 1, flödesschema) -hur dina webbsidor kommer att läggas upp (steg 2, wireframe-modeller)

Om du inte har en klar uppfattning om dessa två saker, gå tillbaka till det första och andra stadiet och fortsätt att utveckla dem. Du kommer att upptäcka att det tredje steget är enklast när du har konstruerat en tydlig, kortfattad stridsplan för att designa din webbplats.

Släpp pennan och papperet
I steg 3 måste du använda Photoshop eller annat bildredigeringsprogram eftersom du kommer att använda färger och grafik för att skapa layouten för din webbplats.

Vi börjar vanligtvis skapa "hemsidan" (index) först. Använd dina wireframes som du skapade i steg 2 som en mall för var och en av sidorna du skapar. Men istället för att använda solida rutor, använd grafik, färger och text istället. Varje sida måste se ut precis som du vill att den ska se ut på Internet eftersom detta är det sista steget i designprocessen.

Se till att inkludera bakgrunden för din navigering (men lägg faktiskt inte till texten i din bild). När du konverterar med CSS (cascading style sheets) ska din navigering vara i form av text och inte bilder. Bilder kan inte genomsökas av sökmotorerna (sökorden som används i din navigering kommer inte att indexeras på sökmotorernas resultatsidor, vilket innebär att färre personer kommer att kunna hitta din webbplats).

När du är nöjd med dina mönster och känner att de är redo att läggas ut på Internet, är det dags att bryta isär designen så att du kan skapa en CSS-baserad layout. För mer information om hur du konverterar dina layouter till CSS eller markerar din webbplats i CSS, besök w3schools.com. Efter att ha tittat runt på Internet kunde vi inte hitta en anständig bild-till-CSS-handledning – så förvänta dig en från oss under de kommande veckorna. Att konvertera din design till CSS är extremt viktigt eftersom tabelllayouter är ett minne blott.

Här är ett exempel på en nästan färdig webbplats med layouten vi hånade upp i steg 2. Detta togs direkt från vår webbläsare och som du kan se finns det nu en logotyp, färger, ett vackert navigationssystem, en sidfot, och viktigast av allt, en ren, organiserad layout.
Tack vare planeringen i steg 1 och 2 är vår layout välorganiserad och lätt att använda.

Dos

• referera till dina mallar som skapades i steg 2; även om det går bra att avvika från din ursprungliga layout, borde du inte behöva göra det
• gör lite forskning innan du skapar din faktiska design; få idéer från andra webbplatser och gör dem till dina egna (utan att plagiera)
• inkludera färg och grafik för att skapa det slutliga utseendet för dina webbsidor - använd CSS (cascading style sheets) för att konvertera dina designs från bilder till markeringar som är förståeliga för webbläsare - referera till ditt flödesschema från steg 1 när du kodar dina sidor med hyperlänkar; det är bättre att använda en rullgardinsmeny som innehåller alla (eller majoriteten) av länkarna på din webbplats på varje sida; detta kommer att möjliggöra enklare navigering och även göra dina sidor lättare att genomsöka när sökmotorns spindlar stannar förbi; ett bra ställe att få rullgardinsmenyer för CSS är på DynamicDrive.com - slutföra din design medan du arbetar i Photoshop eller vilken bildredigeringsprogram du än använder; det kan vara jobbigt att göra ändringar i din design när den väl har konverterats till uppmärkning (kod)

Donts

• inkludera inte texten i dina navigeringsmenyer när du konverterar till CSS; istället för att använda bildtext, använd vanlig text som är läsbar av sökmotorspindlar
• använd inte tabeller när du konverterar; även om du behöver köpa en bok om CSS kommer det att vara värt det; borden är döda
• hoppa inte över de två första stegen bara för att spara tid; din webbplats BLIR bättre om du börjar från början av webbdesignprocessen (istället för i slutet)
• glöm inte att komprimera dina bilder när de skärs isär för CSS; det finns inget värre än en webbplats som laddas långsamt på grund av stora bildfiler; Photoshop har alternativet "Spara optimerat för webben" (CS3 - "Spara för webben och enheter")

Process ger färdighet
Genom att följa en webbdesignprocess som den som illustreras i den här artikeln ökar du chanserna att skapa en webbplats som är välorganiserad, lättnavigerad och väldigt användarvänlig. Låt oss inse det – om besökare går vilse eller blir förvirrade när de försöker surfa på din webbplats kan de trycka på bakåtknappen och leta efter en mer användarvänlig webbplats. Folk tycker inte om att tänka när det gäller att hitta runt på webbplatser. Få dem inte att tänka. Du tänker genom att planera din webbplats från steg 1 till steg 3 och du kommer att upptäcka att fler kommer att uppskatta att besöka din webbplats.