Ja, det är fullt möjligt att lära dig själv webbdesign. Jag frågade runt den här veckan för att se hur människor lyckades förvärva färdigheterna och jag försökte komma ihåg vad som fungerade för mig.
det finns tre huvudsakliga sätt att lära dig själv webbdesign.
- genom att göra. Människor lär sig genom att faktiskt skapa webbplatser.
- genom att använda online-resurser. Alla hittar någon gång svar online om hur man designar webbplatser.
- genom att läsa. Den här förvånade mig. De flesta designers säger att de lär sig webbdesign, delvis, genom att läsa böcker.
så, låt oss gå igenom var och en av dessa kategorier för att ta reda på hur du lär dig själv webbdesign.
lärande webbdesign genom att göra
det bästa sättet att börja förstå webbsidor är att se hur befintliga webbplatser sätts ihop och bygga dem själv.
observera hur andra webbplatser fungerar
till att börja med skrivs de flesta webbsidor på internet, åtminstone delvis, i HTML. För att se HTML som skapar den här sidan måste du” Visa källa ” i webbläsaren du använder. Prova att gå Cmd / Ctrl-U (för Firefox), gå cmd/Ctrl-Alt/Opt-U (för Chrome), och om du använder Internet Explorer måste du verkligen fråga dig själv om webbdesign är rätt karriärväg för dig.
försök att titta igenom HTML för att se hur de olika elementen på en webbsida är markerade. Du kanske kan identifiera vissa taggar direkt. Till exempel är <p> för stycke, <h1,2,3> är rubriker, <img> är för en bild etc. Du kommer att märka att de flesta av dessa taggar fungerar i par för att beteckna början och slutet av markeringen, till exempel <p>Text here</p> visar öppningen och stängningen av stycketaggen med snedstrecket (/) före stängningstaggen. Andra taggar fungerar inte i par, till exempel bildtaggen själv stänger <img src = "https://robcubbon.com/images/rob.jpg" /> detta instruerar webbläsaren att visa en bild med en viss webbadress som källa (src).
en annan sak du kanske märker från HTML-källan är att alla HTML-sidor har liknande struktur. De börjar alla med en <!DOCTYPE> – deklaration som säger vilken version av HTML den är i, följt av en <HTML> – deklaration, följt av <head> i dokumentet som är en behållare med olika element, inklusive länkar till skript, stilark, metainformation etc. Efter <head> kommer <body> där elementen på webbsidan är markerade.
övning: Välj all källkod på den här sidan i ett anteckningsblock (PC) eller TextEdit (Mac) – dokument och spara det på din dator som ”test.html ” eller något. Öppna den här filen i en webbläsare och den ska se exakt ut som onlineversionen. Stäng nu av din anslutning till internet och se hur testsidan ser ut. Ganska annorlunda, va? Försök att räkna ut varför.
verktyg för handeln
medan du gör det kommer det att finnas vissa verktyg du behöver.
- flera webbläsare och smarta telefoner. Prova att testa dina egna webbplatser på olika webbläsare och telefoner (Det är här du börjar en långvarig hataffär med Internet Explorer).
- textredigerare. Du kan använda basic NotePad (PC) eller TextEdit (Mac), eller kanske Coda (Mac) eller Dreamweaver – använd inte Dreamweaver i visuellt läge, bara arbeta med koden, du måste förstå hur det här fungerar under huven.
- Validator. Validera dina webbsidor med HTML Validator och CSS Validator (använd en webbläsare plugin som Web Developer för Chrome att ringa på dem snabbt).
- Chrome utvecklarverktyg och Firebug för Firefox. Dessa verktyg hjälper dig att förstå CSS och JavaScript som, om du tyckte att HTML var svårt, tar lite förståelse.
- grafik och bildredigerare. Centralt för webbdesign är bildredigerare som Photoshop eller Fireworks. Dessa är ganska dyra men det finns GIMP plus en mängd online bildredigerare om du just börjar.
skapa dina egna statiska HTML-webbplatser
medan din förståelse för HTML, CSS och JavaScript växer bör du skapa statiska HTML-webbplatser, antingen lokalt eller på en webbserver. Spela kontinuerligt med koden för att försöka göra coola saker. Försök att återskapa vissa element på andra webbplatser genom att kopiera bitar av koden.
även om de webbplatser du så småningom skapar sannolikt inte kommer att göras från HTML-filer, är det viktigt att du förstår hur du skapar statiska HTML-webbplatser först innan du kan börja använda PHP och/eller Content Management Systems (CMS) för att skapa HTML.
skapa dina egna webbplatser med CMSs
de flesta webbplatser skapas av CMSs – programvara som kan skapa HTML-sidor inom angivna mallar. De bästa är WordPress, Joomla och Drupal, men det finns en mängd lättare, öppen källkod CMS du kan experimentera med, dessa kommer att lära dig hur PHP, och med andra CMS, ASP, används för att pussla ihop webbplatser.
använd MAMP (Mac) eller Wamp (Windows) på din dator för att köra dessa system lokalt så att du kan få en god förståelse för hur de fungerar.
använda bildredigerare
du måste veta hur du använder Photoshop eller något liknande. Du behöver detta för att skapa grafik för Webbplatsen samt för att ge fullständiga bilder av hur webbplatsen kommer att se ut när du är klar för att hjälpa designprocessen.
Get designing
naturligtvis har jag inte nämnt att de resulterande webbplatserna inte bara måste validera, arbeta, hittas av sökmotorer, tjäna ett syfte och marknadsföras utan också … de måste se bra ut.
för att förbättra ditt konstnärliga öga, producera regelbundet Arbete och försök sedan förbättra det. Skiss mönster på papper sedan arbeta med dem i Photoshop eller vad grafikprogram du har. Övning hjälper dig att bli en bättre designer. Jag kommer att rekommendera fler resurser senare som hjälper dig med designprinciper.
Online-resurser
när människor vill ha svar går de till internet och” Google det ” eller söker på YouTube. Webbdesign är inte annorlunda. Det finns många resurser som hjälper dig online. Först och främst finns det W3-skolor som webbdesigners kallar den bästa online-självlärarresursen, det finns också Tizag. Vissa människor rekommenderar Lynda.com även om jag inte har använt det personligen.
bloggar
det finns ett antal bra designbloggar där ute. Det finns stora som kan hjälpa dig som SmashingMagazine, WebDesignerDepot, 1stWebDesigner och Envato-nätverket.
personligen får jag mer från de oberoende webb-och grafiska formgivarna som bloggar. Det finns dock massor som jag har lärt mig genom åren så här är bara några och jag ber om ursäkt till alla utmärkta bloggare som jag har lämnat listan.
- Chris Colyers CSS Tricks är en snygg responsiv webbplats men har också bra webbdesign info och tricks
- Veerle Pieters har bra Photoshop och Illustrator tutorials på Veerles blogg
- David Airey är någon jag har följt ett tag på sin egen eponymous blogg, LogoDesignLove och Identitydesign. David är intresserad av organisationernas övergripande identitet bland annat.
- Chris Spooner har lärt mig mycket med handledning på sin blogg på SpoonGraphics och plus information och inspiration på Line25
- Fabio Sassos underbart utformade webbplats Abduzeedo erbjuder stor inspiration och konstighet.
- Nick La ’ S N. Design Studio och WebDesignerWall har några fantastiska information och stor inspiration.
lägg gärna till dina favoritdesignbloggar i kommentarerna nedan.
Forum
när du bashing huvudet mot en tegelvägg forum är bra ställen att få svar. Lägg upp en beskrivning av ditt problem och webbadressen så kommer någon ofta tillbaka till dig med en lösning. Här är några av mina favoritforum.
Jag gillar Estetica Design Forum, DesignForums.co.uk, och Designer, S prata. Där är Digital Point och Sitepoint för mer bredare frågor, WordPress-forumet är utmärkt och där är Warrior Forum för internetmarknadsföring.
böcker
många webbdesigners hävdar att bra gammaldags fysiska böcker har hjälpt dem att lära sig webbdesign. Här är några av mina favoriter och några andra som har rekommenderats till mig. Länkarna är Amazon.com affiliate länkar.
- Bygg din egen hemsida på rätt sätt med hjälp av HTML & CSS 3th (tredje) upplagan av Ian Lloyd är en Sitepoint bok jag läste år sedan. Det hjälpte mig verkligen då det fokuserar på bästa praxis för webbdesign. Se till att du köper en uppdaterad utgåva (för närvarande den tredje upplagan som innehåller mycket på HTML5).
- CSS: The Missing Manual av David Sawyer McFarland innehåller förklaringar, exempel och steg-för-steg-handledning. Den här boken rekommenderas särskilt eftersom den ger dig bakgrunden till CSS och innehåller mycket om CSS3.
- principerna för vacker webbdesign, 2: a upplagan av Jason Beaird, hävdar att design är en färdighet som kan läras och lär dig de grundläggande principerna för design.
- Color Design Workbook: en verklig Världsguide för att använda färg i grafisk Design av AdamsMorioka (redaktör) ger den viktiga information som krävs för att tillämpa färg kreativt och effektivt för att designa arbete.
- Låt mig inte tänka: A Common Sense Approach to Web Usability, 2nd Edition av Steve Krug en omedelbar klassiker på webbanvändbarhet, laddad med insikter och praktiska råd.
- bli verklig: det smartare, snabbare och enklare sättet att bygga en framgångsrik webbapplikation med 37 signaler kan handla om att skapa webbapplikationer, inte webbplatser, men det har ett så fantastiskt sätt att förenkla webbprocesser som jag tyckte att det var en så användbar läsning.
- gräva i WordPress av Chris Coyier & Jeff Starr rekommenderas starkt som den stora WordPress-boken. Finns som en PDF-version (praktiskt för kopiering kod) samt en fysisk version.
det finns många fler böcker som jag kunde ha inkluderat särskilt om designteori. Om du har några förslag på böcker som har hjälpt dig med webbdesign, vänligen meddela oss om dem i kommentarerna.
vad du kan göra
många designers hävdar att misslyckande faktiskt är den bästa läraren. Så gå ut och designa webbplatser! När du, som utan tvekan kommer att hända, stöter på en tegelvägg, kan du använda några av online-resurserna här för att hjälpa dig. Och när du inte kan titta på datorskärmen längre kan du läsa en bok om den!