Den ultimata guiden för att komma igång i webbdesign

Vill du lära dig hur du designar din allra första hemsida? Kanske har du designat några och nu vill du göra dina färdigheter till en karriär? Denna artikel är här för att peka dig i rätt riktning.

En artikel kan inte täcka allt du behöver veta självklart. De färdigheter, verktyg och teknik du behöver bli en ganska skicklig designer, kommer att ta månader att lära dig och år att behärska. Tyvärr nej. Det är verkligen inte ett snabbare sätt. Men konstant lärande och utveckling är en av de roligaste aspekterna av detta jobb.

För designarna bland oss: Har du någonsin berättat för någon "Jag designar webbplatser", och upplevt den kalla frykten när de svarar med, "Cool! Kan du lära mig hur man gör det? "Jag menar, förklarar hur mycket arbetsdesign kan vara, är svårt. Detta gäller särskilt när personen frågar lite om datorer till att börja med. Många människor antar att du klickar och drar allt på skärmen, lite som PowerPoint, kanske. Jag kommer att berätta det här gratis: PowerPoints alternativ för export av "webbsidor" har inte hjälpt. Vi är här för att hjälpa dig med det här felet. Nästa gång någon frågar dig hur man utformar webbplatser, peka på dem här.

Välkommen, Damer och Gents, till Webdesigner Depots guide för att komma igång med webbdesign. Ta tag i dina möss och kram dina tangentbord, det här kommer att bli en lång. Kaffe är frivilligt, men rekommenderas starkt.

Vem är det här för?

Denna artikel är avsedd för alla som vill börja utforma webbplatser i sin webbläsare. Det är också för personer som vill börja utforma webbplatser, period. Denna artikel förutsätter att läsaren inte har någon formell designutbildning alls, ingen kodningsförmåga och ingen erfarenhet inom webbdesignindustrin.

Minimikraven för personer som vill utforma sin allra första hemsida är låga. Om du vet vilka mappar och textfiler du kan, kan du börja. Det är så enkelt.

Men när du kommer igång är det enkelt att bygga en bra hemsida. Det finns många färdigheter som du måste lära dig. Du måste lära dig om färgteori. Du behöver veta hur människor interagerar med webbplatser, och varför de gör det som de gör. Du måste lära dig grundläggande kodningsspråk, nämligen HTML och CSS.

Då kanske du vill lära dig några grundläggande programmering i JavaScript och ta reda på hur du använder den för att manipulera delar av din webbplats. Sedan finns det innehållsförvaltningssystem, sökmotoroptimering, marknadsföring.

Och förstås måste du ha bra innehåll för din hemsida. Varför vill du göra det här i alla fall? Jag menar att du bara kan anställa en professionell. Du måste vara här eftersom du älskar att lära dig. Du måste fascineras av Internet och all dess potential. Du behöver mycket ledig tid. Du behöver dock inte vara expert på allt. Ingen av proffsen är. Vissa är specialiserade på ett område. Vissa gör lite av allt.

Välkommen till den underbara världen av webbdesign, nybörjare. Var beredd att skruva upp mycket, och kom ihåg att ha kul!

Så här använder du den här guiden

Läs bara nog för att komma igång. Gör din första, förmodligen galna, hemsida. Kom tillbaka och läs mer. Förbättra. Upprepa.

Inte riktigt, du vill nog inte läsa allt på en gång. Det finns många externa resurser att läsa, många koncept att koppla om huvudet. Jag lärde mig inte på en gång. Troligtvis kommer du inte heller. Det är okej.

Vi utformar i webbläsaren

Kanske har du tittat runt på webben, och du har märkt att många människor använder bildredigerare för att designa sina webbplatser först. De kodar mönstren efter eller har någon annan gör det. Photoshop är verktyget mest vanligt, men folk använder också program som Skiss , GIMP , Inkscape , och Illustratör .

Titta runt på webben och du kommer se blogginlägg efter forumtråden debattera fördelarna och problemen med att använda ett verktyg eller en annan för att designa dina webbplatser. Det här är bra. Jag har alltid sagt att folk ska använda vilka verktyg som fungerar bäst för dem. Jag gör dock ett undantag från den här regeln. Jag tror att webbplatser ska utformas i webbläsaren - helst i flera webbläsare - eftersom människor inte surfar på webben i Photoshop.

Dessutom kommer ett webbläsarbaserat arbetsflöde med flera andra fördelar:

Du ser exakt vad du får. Även high-fidelity mockups överför inte de interaktiva delarna eller de animerade delarna av en webbplats mycket bra. Med webbläsarbaserad design kan du se exakt hur designen fungerar .

Detta gäller särskilt när det gäller responsiv design. (För den oinitierade: lyhörd designen är när du skapar en webbdesign som ändras och anpassas till olika skärmstorlekar. Det betyder att samma webbplats kommer att se ut, och kanske fungera lite annorlunda på telefoner, surfplattor och stationära datorer.)

Har du någonsin försökt göra minst tre high-fidelity mockups av varje sidlayout på din webbplats? Det är inte bekvämt. Det är mycket bättre att göra det "på en gång".

Browserbaserad design kan göra dig till en bättre designer. När du gör allt det preliminära designarbetet i, säger Photoshop, är det lätt att låta sakerna gå ur hand: gränssnitt kan bli röriga, designers går vilda med den tunga grafiken. Lädertexturer överallt! (Lyckligtvis har denna trend minskat de senaste åren.) Det behöver inte ske så, men det gör det ofta. Detta blir värre om personen som utformar webbplatsen inte är den person som kommer att koda den.

Det är ett sätt att utforma i webbläsaren kan ändra din inställning till estetik och visuella. Det tvingar dig också att lära dig mer om HTML. Och du lär dig mycket mer om hur de olika webbläsarna fungerar. I grunden ju mer du får dina händer smutsiga med kod, desto bättre förstår du hur webbplatser fungerar. Det kommer inte att göra dig en fantastisk designer på egen hand; men det är en bra start.

De tankar du behöver

Innan du någonsin öppnar en textredigerare och börjar skriva, behöver du förstå några grundläggande principer. Personer som designar i en bildredigerare som Photoshop kan utforma en webbplats så här:

1. Om de är kloka, ska de först skissera några idéer på papper. Sedan öppnar de Photoshop. Som amatör började jag alltid med det andra steget - gör inte mina misstag.
2. De kommer att hälla sitt hjärta, själ, blod, svett och tårar i sina bästa idéer. Dessa idéer kommer att bilda en komplett och vacker design för hemsidan (förmodligen). Sedan antar de att de har en chef eller kund som begär det, så kan de snabbt kombinera några andra design / layoutalternativ.
3. Klienten kommer nästan oundvikligen välja en av de "underlägsna" koncepten av egna skäl. Även om det inte är "kundens fel", kan det vara väldigt svårt att gå tillbaka och byta ut mönster som du redan har flaskat ut eller "klarat".

Detta tillvägagångssätt gör inte någon bra. Således är det första du behöver veta:

Allt är iterativt

Bokstavligen bör varje del av din design vara föremål för förändring. Ingenting är heligt. Om något inte fungerar eller inte passar resten av designen, ska den gå eller ändras. Även när din webbplats är "klar" och lanserad, kanske du märker buggar, eller du kanske bestämmer dig för att ta den i en ny riktning. Webben själv är flytande och ständigt förändras. Även om jag inte verkligen tror på förändring för förändrings skull, bör du vara redo att justera vid behov.

Du bygger inte bara en webbplats och lämnar den där. Webbplatser är lite som barn, bara de växer aldrig upp och går hem. Du måste hålla koll på dem, uppdatera dem, behålla dem.

Gör det rätt, men du får en fantastisk avkastning på din investering.

Du kan aldrig sluta lära dig

Nuvarande designers sluta lära sig nya saker om webbdesign är det ögonblick som de slutar vara relevanta. Internet handlar om relevans. Allvarligt, om din webbplats ser för daterad ut, är chansen att många besökare inte kommer att hålla fast för att se vad du måste säga. Uppfattningen är allting.

Du behöver inte omdesigna var sjätte månad, men du bör alltid läsa mer, upptäcka nya designhjältar och prata med andra designers. Som någon läkare, advokat eller annan professionell måste du hålla reda på vad som är nytt.

Det är inte alla glänsande nya designtrender. Det finns också nya appar, tekniker och tricks som kan göra ditt liv och arbete enklare. Kom ihåg vad jag sa om att vara med i den här långa tiden? Ja. Det här är en del av det jag pratat om.

Innehållet är viktigare än allt annat

Vi har redan etablerat att du aldrig ska hoppa direkt i skapandet av grafiken när du skapar en webbplats. Egentligen borde du aldrig hoppa in i något designarbete först, någonsin. Det första steget i utformningen av en webbplats är att se till att du har webbplatsens innehåll. Det betyder text, foton, kontaktuppgifter, verk. Du behöver det först. Detta är inte förhandlingsbart.

Du kanske har sett människor fylla i sina mönster med dummy text som heter "Lorem ipsum" text. Du kanske också känner till det som "latin text" eller "grekisk text" även om den faktiskt har mycket lite att göra med något språk. Det är bara dummy text, utformad för att visa hur en design kommer att se ut när den fylls med innehåll. Undvik det om du kan. Jag tror att så mycket som möjligt bör designers försöka använda det verkliga innehållet för webbplatsen. De borde göra detta även i sina digitala trådramar.

Denna praxis ger en mycket bättre uppfattning om hur mycket utrymme du behöver för ditt innehåll och kan hjälpa till att undvika många buggar och problem senare.

Regeln att tänka på är detta: innehållet bör inte göras för att passa din design. Designen ska göras för att passa ditt innehåll. En gång talat högt, det verkar som en no-brainer. Det tog mig år att räkna ut det. Nej, jag är inte ensam i det.

Koroll: Typografi är i grunden webbdesign

Om inte webbplatsen byggs är speciellt allt om bilder, video eller ljud, kommer det att finnas mycket text. Faktum är att det kanske finns mycket text även i de fallen. Textkommentarer, textbeskrivningar, textrecensioner, textargument om innehållet i fråga. Internet är mestadels text.

Det står därför att typografi är den viktigaste estetiska designdisciplinen att behärska. Om folk kan läsa ditt innehåll är du gyllene. Förse mig inte, alla designdiscipliner är viktiga; men börja med typografi. Snygg text kommer ta dig långt.

Du surfar på webben annorlunda än dina användare gör

Du kommer att vilja komma ihåg att människor surfar på webben med olika enheter och i olika miljöer. Du måste ange detta på olika sätt.

Vissa människor har mindre, mycket mindre skärmar. Kom ihåg vad jag skrev ovan om responsiv design? Det är här det kommer till spel. Din webbplats måste anpassas till skärmar som sträcker sig i storlek från tre till fyrtio tum breda. Det här är inte lätt, men det är värt det. Det är värt det för att om fler människor faktiskt kan använda din webbplats, är de mer benägna att köpa det du säljer.

Andra bläddrar i olika belysning än dig, och deras skärmar kan vara svaga. Eller de kanske bara har dålig syn. Detta innebär att din design kommer att behöva kontrast, och mycket av det. Dessa fantastiska, subtila skillnader i färger och nyanser betyder ingenting för många användare.

Vissa använder pekskärmar. Dessa är vanligtvis samma personer som använder små skärmar. Du måste ta reda på det här genom att se till att länkar och knappar är lätta att trycka på med fingrarna. När du testar dina mönster med dina egna mobila enheter kan du stöta på andra användbarhetsproblem som ska tas upp.

Då är det synskadade. Det finns människor som bara använder olika webbläsare. Personer som använder textbaserade webbläsare. Jag kunde fortsätta, men poängen är detta: dina användares erfarenheter med din webbplats kommer att variera, ibland mycket. Glöm aldrig det.

Du säljer något

Slutligen kom ihåg att designa för försäljning. Och ja, du säljer något. Även om du bara bloggar om dina personliga erfarenheter säljer du fortfarande dig själv. Du säljer dina erfarenheter, förmodligen på grund av att de är av intresse eller ger värde åt dina läsare. För en blogg, det kan bara betyda att folk kan hitta de inlägg som de är intresserade av snabbt och enkelt. För en broschyrsida kan det innebära att man utformar varje sida för att bäst visa upp produktens / tjänstens awesomeness, samtidigt som det är enkelt att faktiskt köpa saken.

Faktor detta till allt om webbplatsen, inklusive innehållet och webbplatsens faktiska layout. Människor behöver se vad du säljer, och vara övertygade om att de vill ha det. Snabb. De måste visa att det finns ett enkelt sätt att vidta åtgärder utifrån vad du säljer. Om du är en bloggare kan den här åtgärden vara att prenumerera på din blogg. Om du säljer en produkt eller tjänst kan det vara att ge dig pengar för den nämnda produkten / tjänsten.

De färdigheter du behöver

Om du vill göra detta professionellt, kommer du att behöva en mängd olika färdigheter. Här kommer vi att fokusera på de färdigheter som krävs för att själva utforma och bygga en webbplats. Du behöver naturligtvis också affärs- och kommunikationsförmåga. När du är redo att lära dig allt du kan om det, kolla in Företag kategori här på WDD.

För nu börjar vi med de första sakerna du behöver veta.

Användarupplevelse Design

Användarupplevelse, eller UX-design handlar i detta sammanhang om att veta hur de flesta använder webbplatser och översätter den kunskapen till en överlägsen webbdesign. Det är en process, det är en filosofi, och det är mycket arbete. Kom ihåg, hur du använder webbplatser kan skilja sig från hur andra gör det. Vad som är meningsfullt för dig kanske inte är meningsfullt för dina användare. Webdesigners på varje nivå på kompetensnivå glömmer det från tid till annan, så var försiktig.

Det finns naturligtvis resurser som kan hjälpa dig att komma igång, till exempel Vad är användarupplevelse design? Denna omfattande artikel av Smashing Magazine täcker grunderna i UX-designen och innehåller en omfattande lista över länkar till andra resurser. När du är klar med det, se till att läsa UI vs UX: Vad är skillnaden? , av Dain Miller. (Du kommer ibland att se termer som "UI (användargränssnitt) design" och "UX design" används växelvis och det ger människor fel intryck.)

Det här är också en ganska bra tid att lära sig om trådframställning. Wireframing är en process under vilken du kan skissa några grundläggande layoutidéer på penn och papper först. Penna och papper, eller ett ritprogram på en tablett, är idealiskt för de snabba, grova koncepten du ska jobba med.

Senare kan du använda en stationär dator eller en tablettapp för att göra en mer detaljerad version av din layout. Denna process är en viktig del av att från början bestämma hur din webbplats ska fungera.

För en snabb introduktion till grundläggande wireframing-koncept, kolla in Använda Wireframes för att effektivisera din utvecklingsprocess . För en mer omfattande introduktion, komplett med en lång lista över resurser, läs En nybörjarguide till Wireframing .

Estetiska färdigheter

Vissa skulle hävda att du borde lära sig att koda dina mönster innan du stör om att försöka få dem att se bra ut. De kan vara rätt. I den här artikeln ville jag dock täcka teori före praktiska färdigheter.

Estetik: Det är en knepig sak. Det som ser ut som ett bra färgschema för vissa människor kan se riktigt konstigt ut mot andra. De teckensnitt som känner "precis rätt" till dig kan se helt fel på dina affärspartners. Det verkar väldigt, mycket subjektivt.

Det finns en vetenskap för att få saker att se bra ut. Det kan verka som en inexakt vetenskap, men att känna till de grundläggande reglerna får dig förbi många problem. Precis som i någon annan kreativ disciplin är det första steget att veta reglerna. Då lär du dig att bryta reglerna på kreativa sätt, utan att bryta din webbplats.

Typografi

Kom ihåg vad jag sa om lärande typografi först? Jag skojade inte. Internet är text. Det är ord. Dessa ord skulle se fantastiskt ut . Typografi handlar om mer än att välja rätt typsnitt. Typografi handlar om användbarhet. Du måste välja rätt typsnittstorlekar och typsnitt, till exempel för att göra din text läsbar för de flesta människor, på de flesta skärmar. Du måste ange rätt storlek för rubriker och titlar för att skapa en visuell hierarki. Du måste göra din text meningsfull för det största antalet personer som är möjliga.

Här för att hjälpa dig gör det Buttericks praktiska typografi . Den här boken har allt: utmärkta förklaringar till typografiska begrepp, typografiregler, bra exempel och en av de mest brittiska ljudtitlar som jag någonsin har hört. Du borde läsa hela boken. Du kan göra det online, gratis eller beställa en kopia i verkligheten. Gör det. Även om du aldrig kommer runt för att designa din första webbplats, kommer rådet i denna bok att förbättra utseendet på varje dokument du gör.

Om du inte vill läsa hela boken, kolla in den korta versionen . I bokstavligen mindre än tio minuter lär du dig minst av vad du behöver veta.

När du har lärt sig typografireglerna kanske du vill försöka välja några teckensnitt för ditt projekt. Det finns massor av bra fria där ute, så titta runt. Många, inklusive mig själv, väljer sina teckensnitt från Googles webbfonter . Google-teckensnitt ger dig möjlighet att direkt "bädda in" teckensnitten för användning på din webbplats, så det är bekvämt. Ännu bättre, några bra designers har gått och sammanställt listor med typsnittskombinationer för dig att prova:

• Topp 5 rekommenderade Google-teckenkombinationer
• 8 fantastiska Google typsnittskombinationer10 Fler fantastiska Google
• WebFont-kombinationer att prova idag
• 10 Fler fantastiska Google typsnittskombinationer du kan kopiera

Om du vill skapa egna par av Google-teckensnitt, kolla in Web-typsnittskombinatorn . Det är ett verktyg som gör att du snabbt kan förhandsgranska teckensnittskombinationer på ett förnuftigt sätt. För ett mer avancerat typografiplaneringsverktyg, försök FASTNA I SITT ROLLFACK . Den har en fri plan som passar de flesta nybörjare och ensam designers. Om du börjar arbeta med andra, och du verkligen behöver ge dem åtkomst till din skriftplanering, är prissättningen inte alls dålig. Typecast ger dig också tillgång till betalda teckensnitt som inte finns i Google Fonts-biblioteket.

Ett annat ställe att leta efter webbfonter: Font ekorre. Font Ekorre har ett massivt bibliotek med fria teckensnitt för användning på webbplatser. Till skillnad från Google är inte inbäddning dem lika praktiska. Du måste göra det själv. Om du vill lära dig hur du gör det här är det a bra guide . Innan du gör det kanske du vill hoppa över och lära dig lite grundläggande HTML och CSS först.

Sist men inte minst finns det många bra teckensnitt, gratis och betalda, listade här på Webdesigner Depot. Vi har också mycket bra artiklar om typografi som går utöver grunderna. Titta runt platsen för teckensnitt (några av dem finns i avsnittet Freebies). Du hittar typografiartiklarna här: https:// {$lang_domain} / Kategori / typografi /

Färgteori

Färgteori har lite att göra med att lära sig de tekniska namnen på färger. Så, om din kund frågar efter fuchsia, men vill verkligen ha rosa, är du ensam. (<- Verklig livserfarenhet.)

Färgteori handlar om kombinationer av färger och de mänskliga känslor som de kan framkalla. Det är faktiska vetenskapen. För en bra introduktion till färgteori, kolla in denna artikel av Tutsplus: En introduktion till färgteori för webbdesigners . När du avslutar den här artikeln, kolla in de två färgschema generatorer som visas i slutet.

Kom ihåg att färgteori också har konsekvenser för din webbplats användbarhet och användarupplevelse. Om färgen på din text till exempel är för nära bakgrundsfärgen kan du inte läsa den bra. Det problemet blir sämre med skärmbländning, dåligt konfigurerade skärmar och synfel.

HTML & CSS

HTML står för "Hypertext Markup Language". Varje webbplats du någonsin tittat på är gjord av HTML. HTML är vad som talar om din webbläsare om det tittar på vanlig gammal text, en bild, en länk, en video och så vidare. Din webbläsare översätter då det till vad du ser på skärmen.

Språket gör en webbplats ser ganska kallas CSS, och den står för "Cascading Style Sheets". CSS berättar webbläsaren vilken typsnitt texten ska vara och vilka färger som ska användas. CSS definierar också webbplatsens layout, hur knappar ser ut, hur stora eller små allt ska vara ... du kan även animera saker med det.

Att lära sig dessa språk är enkelt nog. De är de enklaste dataspråken du någonsin kan lära dig. Men de är också omfattande och kan kombineras på många sätt, för att göra massor av fantastiska mönster. Det tar ett tag att lära sig att använda dem ordentligt. Jag föreslår att börja på Kod Academy . Kod Academy är en webbplats där du kan lära dig HTML och CSS, liksom några programmeringsspråk, alla gratis. Förklaringarna hålls enkla. Du är försedd med kodningsövningar och lever återkoppling på ditt arbete.

När du väl vet grunderna finns det ett verkligt otroligt stort antal webbplatser där du kan lära dig mer.

Grundläggande JavaScript (valfritt)

Javascript, som tidigare sagt, är ett grundläggande programmeringsspråk som låter dig manipulera innehållet på din webbplats på sätt som HTML och CSS inte ens kan hantera. Men du behöver inte faktiskt det. Det är också en storleksordning mer komplicerad än grundläggande HTML / CSS. Åh, det är oerhört användbart, men för din första hemsida är det inte nödvändigt. Det är dock en av de viktigaste teknikerna i samband med webbdesign, och så nämner jag det här.

Vad kan du göra med det? Åh, saker som snygga bildspel, ringa in nytt innehåll utan att ladda om sidan, förbättra användbarheten på webbplatsen och massor av andra saker! Om du vill lära dig hur du gör de sakerna är min rekommendation densamma som i det sista avsnittet: Kodakademi. De är bara så fantastiska.

jQuery

En sidnot: Kodakademin lär dig också hur du använder jQuery, om du väljer det. jQuery är i huvudsak ett bibliotek av saker som andra redan gjort med JavaScript. Det underlättar användningen av JavaScript på webbsidor genom att göra det enklare att välja och manipulera innehållet.

Om du inte förstod något av det, är det okej. Börja med HTML och CSS. Lär dig lite regelbunden JavaScript. Titta på andras kod ... mycket. Mellan det och Code Academy-kursen börjar du räkna ut det.

Verktygen du behöver

Programvaran kan vara ett noggrannt ämne, med att vissa människor svär av en bildredaktör och andra pratar goda nyheter om sin favorittextredigerare. Ändå kommer andra att ropa: "Nej! Du är fel! "På och på argumenten går. De kan ibland bli ganska intensiva; men du kan säkert ignorera det mesta.

Andra blir inte så upphetsade över de appar som de använder. Men de blir bekväma i en viss app, och de gillar inte förändring. Denna tankegång är döden till någon formgivare eller programmerare. Alla ska ta tid att regelbundet experimentera med nya verktyg, arbetsflöden och processer. Du kanske inte har tid att göra det hela tiden, och det är okej. Det finns något att säga för "Om det inte är knäckt, åtgärda det inte." Min poäng är att du aldrig borde vara rädd för att experimentera med något nytt, särskilt i denna bransch.

Så här är vad jag ska göra: Jag ska lista några bra, gratis verktyg. Om du gillar dem, bra! Om du känner att du behöver något annat, finns det listor över alternativlistor.

Den kompletta uppsättningen moderna webbläsare

Ah, webbläsaren. Du kanske känner det som "Chrome", eller "Firefox", eller, Gud förbjuder "That Blue" E "Thingy". Inte en av dem är ganska densamma. De har alla sina små quirks, och webbplatser kan se lite annorlunda ut i var och en. De kan också se radikalt olika, beroende på hur webbplatsen kodades. Du måste testa din webbplats och se till att den ser rätt ut så många av dem som möjligt. Lyckligtvis har webbläsarfunktioner nått den punkt där webbplatser börjar se nästan exakt desamma i var och en. Åtminstone webbsidor är i allmänhet inte längre ett problem.

Men nyckeln till att säkerställa kvaliteten på ditt arbete är att testa det i så många miljöer som möjligt. Om din skrivbords- / bärbara dator kör Windows, har du redan Internet Explorer (Blue E). Du vill också ha det Firefox och Google Chrome , minst.

På en Mac har du Safari, men du har problem med att köra Internet Explorer. Det är genomförbart men irriterande. Om din dator kör ett Linux-derivat som Ubuntu kan du testa Safari 5 och Internet Explorer 8 och under. Det måste noteras att IE 8 och nedan är de mest smärtsamma versionerna av IE att arbeta med, och är knappast i bruk längre. Faktum är att Internet Explorer faller i allmänhet, och färre människor använder det varje år. Dessutom kommer Microsoft att släppa en ny webbläsare helt tillsammans med Windows 10-med Spela på Linux .

Mobila webbläsare

Din mobila webbläsartestning kommer att begränsas av de enheter du äger. Med det sagt har de välkända mobila webbläsarna alla ganska lika möjligheter.

Word har det som Firefox för iPhone / iPad är i verk för release i år. Du kan dock installera Krom , och Opera Mini just nu.

På Android-enheter kan du installera Krom , Firefox , Opera , och Opera Mini. Ingen Safari kärlek, men det är ingen överraskning. Apple gillar att hålla saker "i familjen".

Tror du det här många webbläsare ska testa? Det finns massor mer! Dock är deras användarbaser relativt små. När du testar i webbläsare måste du spela för majoriteten. eller du kör dig galen.

Trådverktyg

Penna och papper (eller en ritningsapp)

Jag nämnde förut att du vill starta din trådramning på penn och papper, eller kanske i en slags teckningsapp. Detta är viktigt . Det är väldigt sällsynt att någons första idéer är deras bästa idéer. Med hjälp av snabba engångsramar till att börja med kan du fördjupa dina idéer lite innan du begår någonting alls.

Ritningsprogram

När du är redo att börja göra dina riktiga trådramar, de som din kod kommer att basera på, behöver du en trådframställningsprogram. Jag har valt Google Draw (det är vad jag kallar ritningsappen i Google Drive) eftersom den har allt jag behöver. Det kommer med alla de grundläggande formerna jag någonsin skulle vilja ha, bra delningsfunktioner och live samarbete. Det är rätt, om jag jobbar med någon annan, kan vi göra ändringar i samma trådram samtidigt.

Jag har gjort det förut. Det fungerar. Det är grymt. Åh, och du får cirka 15 GB ledigt utrymme att arbeta med. Det är webbaserat, så det fungerar på alla stationära operativsystem. Det verkar inte ha en tablettversion, vilket gör mig orolig. Tja, du kan inte ha allt.

För tabletter har vi en lista med appar som kan få jobbet gjort här: Så här designar du trådlister på din surfplatta .

En kodredigerare

En kodredigerare är egentligen bara en förhärligad version av Anteckningar. Jag kan bara ha gjort några tekniker sputter och förbannelse, men det är mest sant. Skillnaden är att dessa textredigerare kommer med många extrafunktioner som är utformade för att göra kodningswebbplatser och program lättare. Kom ihåg vad jag sa om att folk blev besatta av sin programvara? Det blir dåligt med textredigeraren.

Kom ihåg, om någon frågar dig om "Vim" eller "Emacs", tillbaka långsamt utan att bryta ögonkontakt. Det är ditt enda skydd.

Detta är en av de tillfällen då du måste experimentera och se vad du gillar bäst. Du kan bokstavligen bygga webbplatser i Anteckningsblock, om du vill. Det skulle bli smärtsamt och tråkigt efter ett tag, men du kan.

Så vilken ska du börja med? Jag ska säga konsoler . Det är fortfarande under aktiv utveckling, men det är stabilt. Det är gratis. Det fungerar på Windows, Mac och Linux. Den är utformad speciellt för personer som designar och bygger webbplatser i webbläsaren.

En bildredigerare

Du kanske inte utformar webbplatser i Photoshop längre, men du behöver fortfarande skapa och redigera enskilda bilder. Oavsett om det är foton, logotyper eller ikoner, behöver du något. Använd igen vad som fungerar för dig. Det kan vara Photoshop, GIMP, Paint.Net eller en av Corel-appar.

En lokal server (halv valfri)

Slutligen kanske du vill installera en webbserver på din dator. En webbserver brukar vanligtvis berätta för Internet: "Kolla in det! Det finns en webbplats här. "I grund och botten ger en webbserver alla tillåtelse att titta på de specifika filer som utgör din webbplats.

Om du inte har en skrämmande fantastisk Internetanslutning, och en lika skrämmande dator, öppnar du inte servern till Internet. Istället kan du installera en server för att efterlikna hur sakerna fungerar online.

Att lära sig hur man arbetar med en server på din dator kan spara mycket tid när du laddar upp dina filer till en verklig värdserver. Så ja, du vill nog ha en, även om det inte är absolut nödvändigt.

För enkelhets skull säger jag till att börja med XAMPP . Du kan installera den på Windows, Mac eller Linux, och du är bra att gå.

Ett exempel på processen

Låt oss säga att du har fått viss kompetens med alla färdigheter och verktyg du behöver för att bygga din första webbplats. Alternativt kan vi säga att du vill prova dina färdigheter för första gången. Oavsett fall är det dags att lägga allt du har lärt dig att använda. Jag har sammanställt ett exempel som du kan använda när du utformar och kodar din webbplats. men ta det inte som evangelium.

Lek med det. Ändra det. Personifiera det. Medan det finns vissa saker som helt enkelt bör göras först, är mycket av detaljerna upp till dig. Din process påverkar resultatet, nästan mer än något annat, inklusive dina färdigheter och förmågor. Se till att det fungerar för dig och alla kunder du kanske arbetar med.

Hämta ditt innehåll tillsammans

Ta det från din klient eller skriv det själv. Du kan anställa en kopia författare och en fotograf, eller leta efter anständiga stockbilder. Vad du än behöver göra, få text, bilder och vad-du-du tillsammans och organiserad.

Om du skriver innehåll för dig själv, föreslår jag att du läser nästan allt som skrivits på Copyblogger . De har år och år värt råd om hur man skriver bra innehåll för Internet.

Innehållsarkitektur

Obs! Innehållsarkitekturen är förmodligen inte den tekniska termen. Det är det jag använder för det här steget, eftersom informationsarkitekturen redan har tagits.

När du har ditt innehåll tillsammans måste du bestämma hur det ska organiseras. Vad händer på hemsidan? Vad händer på de andra sidorna? Hur kommer dessa sidor att vara kopplade till varandra?

Denna strukturella organisation är avgörande, och kommer att diktera många aspekter av din webbplats design (särskilt navigering), hur du organiserar dina filer, allting.

Här är ett exempel på en tankekarta som jag gjorde för en klient någon gång tillbaka, detaljerade innehållsarkitekturen och navigeringsstrukturen för en mellannivå. På denna sida ingår grundläggande sidor som annonserar några tjänster och en produktkatalog:

Note: I used Google's drawing application for this, too.

Wireframing

Now, take everything you learned about wire-framing from the articles linked above, and have at it! Start with disposable wire-frames, and iterate quickly. Give each page of your site no more than, say, half an hour. (Actually, that might be a lot.) Remember, these first wireframes need not be very detailed. Create the basic layout, and nothing more.

Once you're ready, move on to your wire-framing application of choice. Create more detailed versions of the wire-frames for each page, including as much of the actual content as you can. Don't forget to include individual elements like forms and buttons. Try to define, as much as possible, exactly how the user is expected to interact with each page.

If you have a lot of the same type of page, for example, in a product catalog, just make one of each type. No need to make more work for yourself than you're already doing.

Creating Style Tiles (or some equivalent)

So you have your website structure, planned. That's great! If the fonts, color scheme, typographical styles, and other aesthetic stuff hasn't already been defined by a style guide, now is a good time to pick them.

Stilplattor are a great way to do this. Here's an explanation of what Style Tiles are, straight from the official website:

The files you download from this website will be Photoshop files. They're meant for you to play around with until you find the right combination of fonts, colors, and imagery to use as a guide while you build and style your website.

Coding

Basically, you open up your text editor and your main browser, then you start typing. You keep typing code until a page forms in the browser that is a combination of the structure you planned in your wireframes, and the style you planned in your style tiles. Then you keep typing code until you're happy with it. It's all about iteration.

The text editor I linked to above, Brackets, has a great feature for this part. Hit the “Live Preview” button on the right side of the Brackets window, and it will launch a browser window for you. (You need Google Chrome installed for this.) The browser window will update live with any changes you make.

During this part of the process, you'll find yourself re-sizing the browser a lot, to see what your website looks like at different screen sizes. You'll make typos, figure things out through trial and error, and spend lots of time going back and looking for those typos I mentioned.

People used to clicking and dragging things onto their canvas may get quite frustrated, at first. Once you have your workflow in place, however, designing in the browser can be a speedy process.

Testning

Once you have all of your basic code in place, it's time to start testing your website on all those browsers I mentioned earlier. More bug fixes may ensue.

Don't sweat the really small inconsistencies between browsers, to start with. (If you're testing in Internet Explorer 8 or below, don't sweat the big inconsistencies.) Just make sure that people have access to all of the information on your site. The goal is to make sure that people can see what you're selling, and take some form of action based on what they read and see.

If some browsers show some pixel-for pixel differences, that's fine. Sånt är livet. The most important thing is to make it work.

Launch

Ready to put your website online? Have a domain name (example: mywebsite.com) and hosting (space on a computer that's constantly connected to the Internet)? Upload those files, kick back, relax, and…

Things to do post-launch

Fix the things you forgot.

Åh. Right. That thing… you meant to fix that before launch. How did you forget that? I mean, come on!

It happens to everyone. There are almost inevitably post-launch bugs. The bigger your site is, the more likely it is you missed or forgot something. For your convenience, here's a pretty thorough pre-launch checklist to go through: http://boagworld.com/mobile-web/pre-launch-checklist/

Ask Questions

You don't know everything you need to. You'll always run into new problems and challenges, techniques and browser bugs. You'll spend lots of time asking professionals how to accomplish things, and researching those same things.

I've said this many times, but Google is your friend. Also, before you ask a question, see if someone else has already asked it on Stack Overflow , a site where people discuss various computer languages and how to make stuff with them.

Often, you'll find that discovering the answers you need requires searching for very specific words and phrases relating to the technologies in question. Do your reading first, and get familiar with the lingo. It'll make getting help a lot faster.

Get feedback

You can't improve unless you know where you've made your biggest mistakes. Time and experience can teach you that, but others can teach you faster.

When you're just starting out, I'd suggest that you join a community too build a network of fellow designers who can help you out with feedback. One of the most well-known and longest-running communities is the Sitepoint Forum .

Do it all over again

Maybe it's been a year or so months and your site needs a re-design. Maybe you're building a new one. Whatever the reason, it's time to take all the skills you've learned, the knowledge and experience you've gained, and do it again.

Hey, I said it was a lot of work.

Utvald bild, web design space via Shutterstock.

• ← Hur Googles mobila vänliga uppdatering kommer att påverka dig (och vad du kan göra om det)
• Ska designers lära sig att koda? →