Hvordan Lære Deg Webdesign

Del dette…
 Del På Facebook

Facebook

Pin På Pinterest

Pinterest

Tweet om dette På Twitter

Twitter

 Del På LinkedIn

Linkedin

Ja, det er helt mulig å lære deg selv webdesign. Jeg spurte rundt denne uken for å se hvordan folk klarte å skaffe seg ferdighetene, og jeg prøvde å huske hva som fungerte for meg.

learning-web-design-first-lesson

det er tre hovedmåter du kan lære deg selv webdesign.

  1. Ved å gjøre. Folk lærer ved å faktisk lage nettsteder.
  2. ved å bruke elektroniske ressurser. Alle på et tidspunkt finner svar på nettet om hvordan å designe nettsteder.
  3. ved å lese. Denne overrasket meg. De fleste designere sier at de lærer webdesign, delvis, ved å lese bøker.

så, la oss gå gjennom hver av disse kategoriene for å finne ut hvordan du lærer deg webdesign.

Lære webdesign ved å gjøre

den beste måten å begynne å forstå nettsider er å se hvordan eksisterende nettsteder er satt sammen og bygge dem selv.

Observere hvordan andre nettsteder fungerer

for å starte, de fleste nettsider på internett er skrevet, i det minste delvis, I HTML. FOR å se HTML som oppretter denne siden må du «Vis Kilde» i nettleseren du bruker. Prøv Å gå Cmd / Ctrl-U (For Firefox), gå Cmd/Ctrl-Alt/Opt-U (For Chrome), og hvis Du bruker Internet Explorer, må du virkelig spørre deg selv om webdesign er riktig karrierevei for deg.

prøv Å se GJENNOM HTML for å se hvordan de ulike elementene på en nettside er merket opp. Du kan være i stand til å identifisere bestemte koder straks. For eksempel <p> er for avsnitt, <h1,2,3> er overskrifter, <img> er for et bilde, etc. Du vil legge merke til at de fleste av disse kodene fungerer i par for å betegne begynnelsen og slutten av merket opp, for eksempel <p>Text here</p> viser åpning og lukking av avsnittskoden med skråstrek (/) før sluttkoden. Andre tagger fungerer ikke i par, for eksempel lukker bildetaggen seg selv <img src = "https://robcubbon.com/images/rob.jpg" /> dette instruerer nettleseren til å vise et bilde med en bestemt nettadresse som kilde (src).

learning-web-design-second-lesson

En annen ting du kanskje merker FRA HTML-kilden er at ALLE HTML-sider har lignende struktur. De starter alle med en <!DOCTYPE> – erklæring som sier hvilken VERSJON AV HTML DEN er i, etterfulgt av en <HTML> – erklæring, etterfulgt av <head> av dokumentet som er en beholder med ulike elementer, inkludert lenker til skript,stilark, metainformasjon, etc. Etter <head> kommer <body> der elementene på nettsiden er merket opp.

Øvelse: Velg all kildekoden til denne siden i et Notisblokk (PC) eller TextEdit (Mac) dokument og lagre det på datamaskinen som » test.html » eller noe. Åpne denne filen i en nettleser, og den skal se nøyaktig ut som den elektroniske versjonen. Slå av tilkoblingen til internett og se hvordan testsiden ser ut. Ganske annerledes, hva? Prøv å finne ut hvorfor.

Verktøy av handelen

Mens du gjør dette, vil det være visse verktøy du trenger.

  • Flere nettlesere og smarttelefoner. Prøv å teste dine egne nettsteder på forskjellige nettlesere og telefoner (dette er hvor Du vil starte en langvarig hat affære Med Internet Explorer).
  • Tekstredigerer. Du kan bruke basic NotePad (PC) Eller TextEdit (Mac), Eller Kanskje Coda (Mac) Eller Dreamweaver – ikke bruk Dreamweaver i visuell modus, bare arbeid på koden, du må forstå hvordan dette fungerer under hetten.
  • Validator. Validere websider MED HTML Validator og CSS Validator (bruk en nettleser plugin som Web Developer For Chrome å ringe på dem raskt).
  • Chrome Utviklerverktøy og Firebug For Firefox. Disse verktøyene hjelper deg å forstå CSS og JavaScript som, hvis DU trodde HTML var vanskelig, tar litt forståelse.
  • Grafikk-og bildeditorer. Sentralt i webdesign er bildeditorer som Photoshop eller Fireworks. Disse er ganske dyre, men DET er GIMP pluss en rekke online bildeditorer hvis du bare starter.

learning-web-design-third-lesson

Opprette dine egne statiske HTML-nettsteder

Mens forståelsen AV HTML, CSS og JavaScript vokser, bør du lage statiske HTML-nettsteder, enten lokalt eller på en webserver. Spill kontinuerlig med koden for å prøve å gjøre kule ting. Prøv å gjenskape visse elementer i andre nettsteder ved å kopiere biter av koden.

selv om nettstedene du til slutt oppretter, sannsynligvis ikke er LAGET AV HTML-filer, er det viktig at du forstår hvordan du lager statiske HTML-nettsteder først før DU kan begynne å bruke PHP og / Eller Content Management Systems (CMSs) for å lage HTML.

Lage dine egne nettsteder Med CMSs

De fleste nettsteder er laget Av CMSs-programvare som kan lage HTML-sider innenfor angitte maler. De beste Er WordPress, Joomla og Drupal, men det finnes en rekke lettere, åpen kildekode CMSs du kan eksperimentere med, disse vil lære deg hvordan PHP, OG med ANDRE CMSs, ASP, brukes til å sette sammen nettsteder.

Bruk MAMP (Mac) eller Wamp (Windows) på datamaskinen for å kjøre disse systemene lokalt, slik at du kan få en god forståelse av hvordan de fungerer.

Bruke bildeditorer

Du må vite hvordan Du bruker Photoshop eller noe lignende. Du trenger dette for å lage grafikk for nettstedet, samt å gi komplette visualer av hvordan nettstedet vil se ut når du er ferdig for å hjelpe designprosessen.

Få designing

selvfølgelig har jeg ikke nevnt at de resulterende nettstedene ikke bare må validere, jobbe, bli funnet av søkemotorer, tjene en hensikt og bli markedsført, men også … de må se bra ut.

for å forbedre ditt kunstneriske øye, produsere regelmessig arbeid og prøv å bedre det. Skisse design på papir deretter jobbe med Dem I Photoshop eller hva grafikk program du har. Praksis vil hjelpe deg å bli en bedre designer. Jeg vil anbefale flere ressurser senere som vil hjelpe deg med designprinsipper.

learning-web-design-lesson-four

Online ressurser

når folk vil ha svar, går de til internett og «Google det» eller søker På YouTube. Webdesign er ikke annerledes. Det er mange ressurser som vil hjelpe deg på nettet. Først Og fremst Er Det W3 Skoler som webdesignere refererer til som den beste online selv undervisning ressurs, Det Er Også Tizag. Noen anbefaler Lynda.com selv om jeg ikke har brukt det personlig.

Blogger

Det finnes en rekke flotte designblogger der ute. Det er store som kan hjelpe deg Som SmashingMagazine, WebDesignerDepot, 1stWebDesigner og Envato network.

Personlig får jeg mer fra de uavhengige web-og grafiske designerne som blogger. Det er imidlertid laster som jeg har lært av gjennom årene, så her er bare noen få, og jeg beklager til noen gode bloggere som jeg har slått av listen.

  • Chris Colyer CSS Triks er et flott utseende responsive nettside, men har også stor webdesign info og triks
  • Veerle Pieters har stor Photoshop og Illustrator tutorials På Veerle blogg
  • David Airey er noen jeg har fulgt en stund på sin egen selvtitulerte blogg, LogoDesignLove Og IdentityDesigned. David er interessert i blant annet organisasjonens overordnede identitet.
  • Chris Spooner har lært meg mye med tutorials på sin blogg På SpoonGraphics og pluss informasjon og inspirasjon På Line25
  • Fabio Sassos fantastisk designet nettsted Abduzeedo tilbyr stor inspirasjon og weirdness.
  • Nick La ‘ S N. Design Studio og WebDesignerWall har fantastisk informasjon og stor inspirasjon.

legg gjerne til dine favorittdesignblogger i kommentarene nedenfor.

Forums

når du er bashing hodet mot en murvegg fora er gode steder å få svar. Legg inn en beskrivelse av problemet ditt og nettadressen, og veldig ofte kommer noen tilbake til deg med en løsning. Her er noen av mine favorittfora.

Jeg liker Estetica Design Forum, DesignForums.co.uk, Og Designer, S Snakke. Der, S Digital Point Og Sitepoint for mer bredere alt spørringer, WordPress forumet er utmerket, og det, S Warrior Forum for internettmarkedsføring.

Bøker

Mange webdesignere hevder at gode gammeldags fysiske bøker har bidratt til å lære dem webdesign. Her er noen av mine favoritter og noen andre som har blitt anbefalt til meg. Linkene er Amazon.com affiliate linker.

  • Bygg Ditt Eget Nettsted På Riktig Måte Ved Å BRUKE HTML & CSS 3. (tredje) utgave Av Ian Lloyd er En Sitepoint-bok jeg leste for mange år siden. Det hjalp meg virkelig på den tiden da det fokuserer på beste praksis for webdesign. Pass på at du kjøper en oppdatert utgave (for øyeblikket den tredje utgaven som inneholder mye PÅ HTML5).
  • CSS: Den Manglende Håndboken Av David Sawyer McFarland inneholder forklaringer, eksempler og trinnvise opplæringsprogrammer. Denne boken er spesielt anbefalt som det gir deg bakgrunnen TIL CSS og inneholder mye OM CSS3.
  • The Principles Of Beautiful Web Design, 2nd Edition Av Jason Beaird, hevder at design er en ferdighet som kan læres og lærer deg de grunnleggende prinsippene for design.
  • Color Design Workbook: A Real World Guide To Using Color In Graphic Design av AdamsMorioka (redaktør) gir viktig informasjon som er nødvendig for å bruke farge kreativt og effektivt for å designe arbeid.
  • Ikke Få Meg Til Å Tenke: En Sunn Fornuft Tilnærming Til Web Brukervennlighet, 2nd Edition Av Steve Krug en umiddelbar klassiker på web brukervennlighet, lastet med innsikt og praktiske råd.
  • Bli Ekte: den smartere, raskere og enklere måten å bygge en vellykket webapplikasjon med 37 Signaler kan være om å skape webapplikasjoner, ikke nettsteder, men det har en så fantastisk måte å forenkle webprosesser på at jeg fant det så nyttig å lese.
  • Grave I WordPress Av Chris Coyier & Jeff Starr kommer sterkt anbefalt som den store WordPress boken. Tilgjengelig SOM EN PDF-versjon (hendig for kopiering kode) samt en fysisk versjon.

det er mange flere bøker jeg kunne ha tatt med spesielt om designteori. Hvis du har noen forslag til bøker som har hjulpet deg med webdesign, vennligst gi oss beskjed om dem i kommentarene.

Hva du kan gjøre

Mange designere hevder at feil er faktisk den beste læreren. Så kom deg ut der og design nettsteder! Når, som utvilsomt vil skje, kommer du over en murvegg, kan du bruke noen av de elektroniske ressursene her for å hjelpe deg. Og når du ikke kan se på dataskjermen lenger, kan du lese en bok om det!

Leave a Reply

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.