Den ultimate veiledningen for å komme i gang i webdesign

Vil du lære å designe ditt aller første nettsted? Kanskje du har designet noen, og nå vil du gjøre ferdighetene dine til en karriere? Denne artikkelen er her for å vise deg i riktig retning.

En artikkel kan ikke dekke alt du trenger å vite selvfølgelig; ferdighetene, verktøyene og teknologiene du trenger å bli en rimelig dyktig designer, vil ta måneder å lære og år å mestre. Beklager Nei. Det er egentlig ikke en raskere måte. Men konstant læring og utvikling er et av de hyggeligste aspektene ved denne jobben.

For designerne blant oss: Har du noen gang fortalt noen "Jeg designe nettsteder", og opplevd den kalde frykten når de svarer med, "Cool! Kan du lære meg hvordan du gjør det? "Jeg mener, og forklarer hvor mye arbeidsdesign kan være, er vanskelig. Dette gjelder spesielt når personen spør spør lite om datamaskiner til å begynne med. Mange antar at du klikker og drar alt på skjermen, litt som PowerPoint, kanskje. Jeg vil fortelle deg dette gratis: PowerPoints alternativ for eksport av "nettsider" har ikke hjulpet. Vi er her for å hjelpe deg med dette feil. Neste gang noen spør deg hvordan du designer nettsteder, pek dem her.

Velkommen, Ladies og Gents, til Webdesigner Depots veiledning for å komme i gang med webdesign. Ta tak i musene dine og klem dine tastaturer, dette kommer til å bli en lang. Kaffe er valgfritt, men anbefales sterkt.

Hvem er dette for?

Denne artikkelen er beregnet for alle som ønsker å begynne å designe nettsteder i nettleseren sin. Det er også for folk som ønsker å begynne å designe nettsteder, periode. Denne artikkelen antar at leseren ikke har hatt noen formell designutdanning, ingen kodingsevner og ingen erfaring i webdesignindustrien.

"Minimumskravene" for folk som ønsker å designe sin aller første nettside er lave. Hvis du vet hvilke mapper og tekstfiler du kan, kan du starte. Det er så enkelt.

Men mens du begynner, er det enkelt å bygge en god nettside. Det er mange ferdigheter du må lære. Du må lære om fargeteori. Du må vite hvordan mennesker samhandler med nettsteder, og hvorfor de gjør det slik de gjør. Du må lære de grunnleggende kodende språkene, nemlig HTML og CSS.

Deretter vil du kanskje lære litt grunnleggende programmering i JavaScript og finne ut hvordan du bruker den til å manipulere deler av nettstedet ditt. Deretter er det innholdssystemer, søkemotoroptimalisering, markedsføring.

Og selvfølgelig må du ha noe godt innhold for nettstedet ditt i utgangspunktet. Hvorfor i verden vil du gjøre dette, uansett? Jeg mener, du kan bare ansette en profesjonell. Du må være i dette fordi du elsker å lære. Du må bli fascinert av Internett og all dens potensial. Du trenger mye ledig tid. Du trenger imidlertid ikke å være ekspert i alt. Ingen av proffene er. Noen spesialiserer seg på ett område. Noen gjør litt av alt.

Velkommen til den fantastiske verden av webdesign, nybegynner. Vær forberedt på å skru opp mye, og husk å ha det gøy!

Slik bruker du denne veiledningen

Les akkurat nok for å komme i gang. Gjør din første, sannsynligvis crappy, nettside. Kom tilbake og les litt mer. Forbedre. Gjenta.

Nei, du vil sannsynligvis ikke lese alt på en gang. Det er mange eksterne ressurser å lese, mange konsepter for å vikle hodet rundt. Jeg lærte ikke dette på en gang. Sannsynligvis vil du heller ikke. Det er ok.

Vi designer i nettleseren

Kanskje du har sett deg rundt på nettet, og du har lagt merke til at mange mennesker bruker bildeditorer til å designe sine nettsteder først. De koden designene etter, eller har noen andre gjort det. Photoshop er verktøyet mest brukt, men folk bruker også programmer som Skisse , GIMP , Inkscape , og Illustrator .

Se deg rundt på nettet, og du vil se blogginnlegg etter at forumtråden diskuterer fordelene og problemene som er forbundet med å bruke ett verktøy eller et annet for å designe nettsteder. Dette er bra. Jeg har alltid sagt at folk skal bruke hvilke verktøy som fungerer best for dem. Jeg gjør imidlertid et unntak fra den regelen. Jeg tror at nettsteder skal utformes i nettleseren - ideelt i flere nettlesere - fordi folk ikke surfer på nettet i Photoshop.

I tillegg kommer en nettleserbasert arbeidsflyt med flere andre fordeler:

Du ser nøyaktig hva du får. Selv high-fidelity mockups overfører ikke de interaktive delene eller de animerte delene av et nettsted veldig bra. Med nettleserbasert design kan du se nøyaktig hvordan designet fungerer .

Dette gjelder spesielt når det gjelder responsiv design. (For den uinitierte: Respektive designen er når du lager et nettsteddesign som endrer og tilpasser seg forskjellige skjermstørrelser. Det betyr at samme nettsted vil se, og kanskje jobbe, litt annerledes på telefoner, tabletter og stasjonære datamaskiner.)

Har du noen gang prøvd å lage minst tre high-fidelity mockups av alle sidelayout på nettstedet ditt? Det er ikke praktisk. Det er langt bedre å gjøre det "alt på en gang".

Nettleserbasert design kan gjøre deg til en bedre designer. Når du gjør alt det foreløpige designarbeidet i, sier Photoshop, er det enkelt å la ting gå ut av hånd: grensesnitt kan bli rotete, designere går vill med den tunge grafikken. Lær teksturer overalt! (Heldigvis har denne trenden gått ned de siste årene.) Det trenger ikke å skje på den måten, men det gjør det ofte. Dette blir verre hvis personen som designer nettstedet ikke er den personen som skal kode det.

Det er en måte at design i nettleseren kan endre tilnærming til estetikk og visuelle. Det tvinger deg også til å lære mer om HTML. Og du lærer mye mer om hvordan de forskjellige nettleserne jobber. I utgangspunktet, jo mer får du hendene skitne med kode, desto bedre forstår du hvordan nettsteder fungerer. Det vil ikke gjøre deg til en fantastisk designer alene; men det er en god start.

Tankene du trenger

Før du åpner en tekstredigerer og begynner å skrive, må du forstå noen grunnleggende prinsipper. Personer som designer i et bilderedigeringsprogram som Photoshop kan designe et nettsted som dette:

1. Hvis de er klare, skal de først skisse noen ideer på papir. Da åpner de Photoshop. Som amatør begynte jeg alltid med det andre trinnet - gjør ikke mine feil.
2. De vil helle sitt hjerte, sjel, blod, svette og tårer i deres beste ideer. Disse ideene vil danne en komplett og vakker design for hjemmesiden (sannsynligvis). Da antas det at de har en sjef eller klient som ber om det, kan de raskt sette sammen noen andre design / layoutalternativer.
3. Klienten vil nesten uunngåelig velge en av de "dårlige" konseptene av egen grunn. Selv om det ikke er "kundens feil", kan det være veldig, veldig vanskelig å gå tilbake og endre design som du allerede har fleshed ut, eller "ferdig".

Denne tilnærmingen gjør ikke noen noe bra. Dermed er det første du trenger å vite:

Alt er iterativt

Bokstavelig talt bør alle deler av designet bli endret. Ingenting er hellig. Hvis noe ikke fungerer, eller passer ikke til resten av designet, bør det gå, eller bli endret. Selv når nettstedet ditt er "ferdig" og lansert, kan du merke bugs, eller du kan bestemme deg for å ta det i en ny retning. Internett i seg selv er flytende og stadig skiftende. Selv om jeg ikke virkelig tror på forandring for å skape forandring, bør du være klar til å justere når det er nødvendig.

Du bygger ikke bare et nettsted og la det være der. Nettsteder er litt som barn, bare de vokser aldri og går hjem. Du må holde øye med dem, oppdatere dem, opprettholde dem.

Gjør det riktig, skjønt, og du får en fantastisk avkastning på investeringen din.

Du kan aldri slutte å lære

Øyeblikk designere slutter å lære nye ting om webdesign er øyeblikket de slutter å være relevante. Internett handler om relevans. Seriøst, hvis nettstedet ditt ser for datert ut, er det sjansen for at mange besøkende ikke vil holde fast for å se hva du må si. Perception er alt.

Du trenger ikke å re-design hver sjette måned, men du bør alltid lese mer, oppdage nye designhelter, og snakke med andre designere. Som enhver lege, advokat eller annen profesjonell, må du holde tritt med det som er nytt.

Det er ikke alle skinnende nye designtrender. Det er også nye apps, teknologier og triks som kan gjøre livet ditt og arbeidet enklere. Husk hva jeg sa om å være i dette i lang tid? Yeah. Dette er en del av det jeg snakket om.

Innholdet gjelder fremfor alt annet

Vi har allerede etablert at når du oppretter et nettsted, bør du aldri hoppe rett inn i å lage grafikken. Virkelig, du bør aldri hoppe inn i et designarbeid først, noensinne. Det første trinnet i å designe et nettsted er å sikre at du har nettsidens innhold. Dette betyr tekst, bilder, kontaktinformasjon, verkene. Du trenger det først. Dette er ikke omsettelig.

Du har kanskje sett folk fylle opp deres design med dummy tekst som heter "Lorem ipsum" tekst. Du kan også kjenne det som «Latintekst» eller «Gresk tekst», selv om det faktisk har svært lite å gjøre med begge språk. Det er bare dummy tekst, designet for å vise hvordan et design vil se ut når det er fylt med innhold. Unngå det hvis du kan. Jeg tror at designere, så mye som mulig, bør prøve å bruke det virkelige innholdet på nettstedet. De burde gjøre dette selv i deres digitale trådrammer.

Denne praksisen gir en mye bedre ide om hvor mye plass du trenger for innholdet ditt, og kan bidra til å unngå mange feil og problemer senere.

Regelen å huske på er dette: Innholdet bør ikke gjøres for å passe til design. Designet skal utformes slik at det passer ditt innhold. Når det er sagt høyt, virker dette som en no-brainer. Det tok meg år å finne ut det. Nei, jeg er ikke alene i det.

Koroll: Typografi er i utgangspunktet webdesign

Med mindre nettstedet bygges, er det spesielt om bilder, video eller lyd, det vil bli mye tekst. Faktisk kan det være mye tekst selv i de tilfellene. Tekst kommentarer, tekst beskrivelser, tekst vurderinger, tekst argumenter om innholdet i spørsmålet. Internett er for det meste tekst.

Det er derfor grunnen til at typografi er den viktigste estetiske designdisiplinen å mestre. Hvis folk kan lese innholdet ditt, er du gyldig. Ikke misforstå, alle design disipliner er viktige; men begynn med typografi. God utseende vil ta deg langt.

Du surfer på nettet annerledes enn brukerne dine gjør

Du vil huske at folk surfer på nettet med forskjellige enheter, og i forskjellige miljøer. Du må registrere deg for dette på forskjellige måter.

Noen mennesker har mindre, mye mindre skjermbilder. Husk hva jeg skrev over om responsivt design? Det er her det kommer inn i spill. Nettstedet ditt må tilpasse seg skjermbilder i størrelse fra tre til førti tommer bred. Dette er ikke lett, men det er verdt det. Det er verdt det fordi hvis flere mennesker faktisk kan bruke nettstedet ditt, er de mer sannsynlig å kjøpe det du selger.

Andre surfer i forskjellige belysninger enn deg, og deres skjermer kan være svake. Eller kanskje de bare har dårlig syn. Dette vil bety at designet ditt trenger kontrast, og mye av det. Disse fantastiske, subtile forskjellene i farger og nyanser betyr ingenting for mange brukere.

Noen bruker pekeskjermer. Disse er vanligvis de samme som bruker små skjermer. Du må ta hensyn til dette ved å sørge for at koblinger og knapper er lette å trykke på med fingrene. Når du tester dine design med dine egne mobile enheter, kan du støte på andre bruksproblemer som skal behandles.

Deretter er det synshemmede. Det er folk som bare bruker forskjellige nettlesere. Folk som bruker tekstbaserte nettlesere. Jeg kunne fortsette, men poenget er dette: Brukerens erfaringer med nettstedet ditt vil variere, noen ganger sterkt. Aldri glem det.

Du selger noe

Til slutt husk å designe for salg. Og ja, du selger noe. Selv om du bare blogger om dine personlige erfaringer, selger du fortsatt deg selv. Du selger dine erfaringer, antagelig på grunnlag av at de er interessante eller gir verdi til leserne dine. For en blogg, det kan bare bety at folk kan finne innleggene de er interessert i raskt og enkelt. For et brosjyreområde, kan det være å designe hver side for best å vise produktets / tjenestens awesomeness, samtidig som det blir enkelt å faktisk kjøpe ting.

Faktorer dette til alt om nettstedet, inkludert innholdet og nettstedets faktiske layout. Folk må se hva du selger, og være overbevist om at de vil ha det. Fort. De trenger å bli vist at det er en enkel måte å handle på, basert på hva du selger. Hvis du er en blogger, kan denne handlingen være å abonnere på bloggen din. Hvis du selger et produkt eller en tjeneste, kan det være å gi deg penger til det nevnte produkt / tjenesten.

Ferdighetene du trenger

Hvis du vil gjøre dette profesjonelt, vil du trenge en rekke ferdigheter. Her skal vi fokusere på ferdighetene som kreves for å designe og bygge et nettsted. Du skal selvfølgelig også trenge forretnings- og kommunikasjonsevner. Når du er klar til å lære alt du kan om det, sjekk ut Virksomhet kategori her på WDD.

For nå begynner vi med de første tingene du trenger å vite.

Brukeropplevelsesdesign

Brukeropplevelse, eller UX-design, handler i denne sammenheng om å vite hvordan de fleste bruker nettsteder og oversetter den kunnskapen til et overlegen nettsteddesign. Det er en prosess, det er en filosofi, og det er mye arbeid. Husk at måten du bruker nettsteder på, kan være forskjellig fra hvordan andre mennesker gjør det. Det som gir mening for deg, kan ikke være fornuftig for brukerne. Webdesignere på hvert nivå av ferdighetsnivå glemmer det fra tid til annen, så vær forsiktig.

Selvfølgelig er det ressurser som kan hjelpe deg med å komme i gang, for eksempel Hva er brukeropplevelsesdesign? Denne omfattende artikkelen av Smashing Magazine dekker grunnleggende UX-design, og inneholder en massiv liste over lenker til andre ressurser. Når du er ferdig med det, sørg for å lese UI vs UX: Hva er forskjellen? , av Dain Miller. (Noen ganger ser du begreper som "UI (brukergrensesnitt) design" og "UX design" brukt ombyttbart, og det gir folk feil inntrykk.)

Dette er også en fin tid å lære om wireframing. Wireframing er en prosess hvor du kan skissere noen svært grunnleggende layoutideer på penn og papir først. Penn og papir, eller et tegneprogram på en nettbrett, er ideelt for de slags raske konseptene du vil jobbe med.

Senere kan du bruke et skrivebord eller et nettbrett for å få en mer detaljert versjon av oppsettet ditt. Denne prosessen er en viktig del av å bestemme, fra begynnelsen, hvordan nettstedet ditt skal fungere.

For en rask introduksjon til grunnleggende wireframing konsepter, sjekk ut Bruke Wireframes for å effektivisere utviklingsprosessen . For en mer omfattende introduksjon, komplett med en lang liste over ressurser, les En nybegynners guide til Wireframing .

Estetiske ferdigheter

Noen ville hevde at du skulle lære å kode inn designene dine før du plager å få dem til å se pen ut. De kan være riktige. I denne artikkelen har jeg imidlertid ønsket å dekke teori før praktiske ferdigheter.

Estetikk: Det er en vanskelig ting. Det som ser ut som et flott fargevalg til noen, kan se rett og slett rart ut mot andre. Skriftene som føles "bare rett" til deg, kan se helt feil ut til dine samarbeidspartnere. Det virker veldig, veldig subjektivt.

Det er en vitenskap å gjøre ting ser bra ut, skjønt. Det kan virke som en inexakt vitenskap, men å vite de grunnleggende reglene vil gi deg forbi mange problemer. Akkurat som i enhver annen kreativ disiplin, vet reglene det første trinnet. Deretter lærer du hvordan du kan bryte reglene på kreative måter, uten å ødelegge nettstedet ditt.

typografi

Husk hva jeg sa om å lære typografi først? Jeg tullet ikke. Internett er tekst. Det er ord. Disse ordene skal se fantastiske ut . Typografi handler om mer enn å velge riktig skrifttype. Typografi handler om brukervennlighet. Du må velge de riktige skriftstørrelsene og skrifttyper, for eksempel for å gjøre teksten leselig for de fleste mennesker, på de fleste skjermbilder. Du må angi de riktige størrelsene for overskrifter og titler for å lage et visuelt hierarki. Du må gjøre teksten fornuftig for det største antallet personer som er mulig.

Her for å hjelpe deg å gjøre det er Butterick er praktisk typografi . Denne boken har alt: gode forklaringer på typografiske begreper, typografireglene, gode eksempler og en av de mest britiske lydende titlene jeg noensinne har hørt. Du bør lese hele boken. Du kan gjøre det på nettet, gratis, eller bestille en ekte kopi. Gjør det. Selv om du aldri kommer til å designe din første nettside, vil rådene i denne boken forbedre utseendet til hvert dokument du lager.

Hvis du ikke vil lese hele boken, sjekk ut den korte versjonen . I bokstavelig talt mindre enn ti minutter lærer du det minste av det du trenger å vite.

Etter at du har lært reglene for typografi, kan du prøve å plukke ut noen fonter for prosjektet ditt. Det er mange gode gratis der ute, så se deg om. Mange mennesker, inkludert meg selv, velg skrifter fra Google webfonter . Google-skrifttyper lar deg direkte legge inn fonter for bruk på nettstedet ditt, så det er praktisk. Enda bedre, noen flotte designere har gått og samlet lister over skrifttypekombinasjoner for deg å prøve ut:

• Topp 5 anbefalte Google Font-kombinasjoner
• 8 fantastiske Google Font-kombinasjoner10 Mer fantastisk Google
• WebFont kombinasjoner å prøve i dag
• 10 Mer Googles Font-kombinasjoner du kan kopiere

Hvis du vil lage dine egne par av Google-skrifter, sjekk ut Nettfeltkombinatoren . Det er et verktøy som lar deg raskt forhåndsvise skriftkombinasjoner på en fornuftig måte. For et mer avansert typografisk planleggingsverktøy, prøv typecast . Den har en gratis plan som passer de fleste nybegynnere og enslige designere. Hvis du begynner å jobbe med andre, og du virkelig trenger å gi dem redigering av tilgang til skriftplanleggingen, er prisen ikke dårlig i det hele tatt. Typecast vil også gi deg tilgang til betalte skrifter ikke i Google Fonts-biblioteket.

Et annet sted å lete etter webfonter: Font ekorn. Font Ekorn har et massivt bibliotek med gratis skrifttyper til bruk på nettsteder. I motsetning til Google er det ikke like praktisk å legge dem inn. Du må selv gjøre det. Hvis du vil lære hvordan du gjør det, her er en flott guide . Før du gjør det, kan du kanskje hoppe videre og lære litt grunnleggende HTML og CSS først.

Sist, men ikke minst, er det mange flotte skrifttyper, gratis og betalt, oppført her på Webdesigner Depot. Vi har også mange gode artikler om typografi som går utover det grunnleggende. Se rundt på siden for skrifttyper (noen av dem er i Freebies-delen). Her finner du typografiartikler: https:// {$lang_domain} / Kategori / typografi /

Farge teori

Fargeteori har lite å gjøre med å lære fargenes tekniske navn. Så, hvis klienten ber om fuchsia, men ønsker virkelig rosa, er du alene. (<- Virkelig livserfaring.)

Fargeteori omhandler kombinasjoner av farger og de menneskelige følelsene de kan fremkalle. Det er faktisk vitenskap. For en god introduksjon til fargeteori, sjekk ut denne artikkelen av Tutsplus: En introduksjon til farge teori for webdesignere . Når du er ferdig med denne artikkelen, sjekk ut de to fargeskjema generatorer vist på slutten.

Husk at fargeteorien også har implikasjoner for nettstedets brukervennlighet og brukeropplevelse. Hvis farge på teksten din for eksempel er for nær fargen på bakgrunnen, kan folk ikke lese det godt. Det problemet blir verre med skjermblending, dårlig konfigurerte skjermer og synshemming.

HTML og CSS

HTML står for "Hypertext Markup Language". Hvert nettsted du noensinne har sett på, er laget av HTML. HTML er det som forteller nettleseren din om det ser på vanlig gammel tekst, et bilde, en lenke, en video og så videre. Nettleseren din oversetter da det til det du ser på skjermen.

Språket gjør en nettside se ganske kalles CSS, og den står for "Cascading Style Sheets". CSS forteller nettleseren hvilken skrifttype teksten skal være, og hvilke farger som skal brukes. CSS definerer også nettstedets layout, hvordan knapper ser ut, hvor stort eller lite alt skal være ... du kan til og med animere ting med det.

Å lære disse språkene er enkelt nok. De er de enkleste dataspråket du noensinne kan lære. Men de er også omfattende, og kan kombineres på mange måter, for å lage tonnevis av flotte design. Det tar litt tid å lære å bruke dem riktig. Jeg foreslår at du starter på Kode Akademi . Kode Akademi er et nettsted der du kan lære HTML og CSS, samt noen programmeringsspråk, alt gratis. Forklaringene holdes enkle. Du er utstyrt med kodende øvelser, og lever tilbakemelding på arbeidet ditt.

Når du vet det grunnleggende, er det et virkelig svimlende antall nettsteder der ute der du kan lære mer.

Grunnleggende JavaScript (valgfritt)

Javascript, som nevnt tidligere, er et grunnleggende programmeringsspråk som lar deg manipulere innholdet på nettstedet ditt på måter som HTML og CSS alene ikke kan håndtere. Men du trenger ikke det egentlig. Det er også en størrelsesorden mer komplisert enn grunnleggende HTML / CSS. Åh, det er utrolig nyttig, men for din første nettside er det ikke viktig. Det er imidlertid en av de viktigste teknologiene knyttet til webdesign, og så nevner jeg det her.

Hva kan du gjøre med det? Å, ting som fancy lysbildefremvisninger, ringer inn nytt innhold uten å laste på siden, forbedre brukervennligheten på nettstedet og mange andre ting! Hvis du vil lære hvordan du gjør disse tingene, er min anbefaling den samme som i siste avsnitt: Kodeakademi. De er bare så kjempebra.

jQuery

Et sidemerk: Kodeakademiet vil også lære deg hvordan du bruker jQuery, hvis du velger det. jQuery er egentlig et bibliotek med ting som andre allerede har laget med JavaScript. Det letter bruk av JavaScript på nettsider ved å gjøre det enklere å velge og manipulere innholdet.

Hvis du ikke forstod noe av det, er det greit. Start med HTML og CSS. Lær litt vanlig JavaScript. Se på andres kode ... mye. Mellom det og Code Academy kurset, begynner du å finne ut det.

Verktøyene du trenger

Programvare kan være et berøringsfylt emne, med noen som sverger av en bildeditor, og andre forkynner de gode nyhetene om deres favoritt tekstredigerer. Fortsatt vil andre rope: "Nei! Du er helt feil! "På og på argumenter går. De kan noen ganger bli ganske intense; men du kan sikkert ignorere det meste av det.

Andre blir ikke helt så begeistret over appene de bruker. Imidlertid blir de komfortable i en bestemt app, og de liker ikke forandring. Denne tankegangen er døden til noen designer eller programmerer. Alle bør ta tid til å eksperimentere med nye verktøy, arbeidsflyter og prosesser. Du har kanskje ikke tid til å gjøre det hele tiden, og det er greit. Det er noe å si for "Hvis det ikke er bra, ikke fikser det." Mitt poeng er at du aldri bør være redd for å eksperimentere med noe nytt, spesielt i denne bransjen.

Så her er hva jeg skal gjøre: Jeg vil liste noen flotte, gratis verktøy. Hvis du liker dem, flott! Hvis du føler at du trenger noe annet, er det lister på alternativer.

Det fulle settet med moderne nettlesere

Ah, nettleseren. Du kan kanskje kjenne det som "Chrome", eller "Firefox", eller, Gud forby, "That Blue 'E' Thingy". Ikke en av dem er ganske den samme. De har alle sine små quirks, og nettsteder kan se litt annerledes ut i hver enkelt. De kan også se radikalt forskjellige, avhengig av hvordan nettstedet ble kodet. Du må teste ditt nettsted og sørge for at det ser like ut i så mange av dem som mulig. Heldigvis har nettleserfunksjonene nådd det punktet hvor nettsteder begynner å se nesten nøyaktig det samme i hver enkelt. Minst nettstedoppsett er generelt ikke lenger et problem.

Likevel er nøklene for å sikre kvaliteten på arbeidet ditt å teste det i så mange miljøer som mulig. Hvis din stasjonære / bærbare datamaskin kjører Windows, har du allerede Internet Explorer (Blue E). Du vil også ha det Firefox og Google Chrome , i det minste.

På en Mac har du Safari, men du har problemer med å kjøre Internet Explorer. Det er gjennomførbart, men irriterende. Hvis datamaskinen kjører et Linux-derivat som Ubuntu, kan du teste Safari 5 og Internet Explorer 8 og under. Det må bemerkes at IE 8 og nedenfor er de mest smertefulle versjonene av IE for å jobbe med, og er knapt i bruk lenger. Faktisk faller Internet Explorer ut av favør generelt, og færre mennesker bruker det hvert år. I tillegg vil Microsoft løse en ny nettleser sammen med Windows 10-med Spill på Linux .

Mobilnettlesere

Mobil nettlesertesting begrenses av enhetene du eier. Når det er sagt, har de kjente mobile nettleserne alle liknende muligheter.

Word har det at Firefox for iPhone / iPad er i arbeidene for utgivelse i år. Du kan imidlertid installere Chrome , og Opera Mini akkurat nå.

På Android-enheter kan du installere Chrome , Firefox , Opera , og Opera Mini. Ingen Safari kjærlighet, men det er ingen overraskelse. Apple liker å holde ting "i familien".

Tror du dette mange nettlesere å teste? Det er tonn mer! Men deres brukerbaser er forholdsvis små. Når du tester i nettlesere, må du spille til flertallet; eller du kjører deg gal.

Wire-innramming verktøy

Penn og papir (eller tegneapp)

Jeg nevnte før at du vil starte din wire-innramming på penn og papir, eller kanskje i en slags tegneapp. Dette er viktig . Det er veldig sjelden at noens første ideer er deres beste ideer. Ved å bruke raske, engasjelige ledningsrammer til å begynne med, kan du forfine ideene litt før du forplikter deg til noe i det hele tatt.

Tegneapplikasjoner

Når du er klar til å begynne å lage dine virkelige trådrammer, vil de som koden din baserer på, trenge en wireframing-app. Jeg har valgt Google Draw (det er det jeg kaller tegneappen i Google Disk) fordi den har alt jeg trenger. Den kommer med alle de grunnleggende formene jeg noensinne vil ha, gode delingsfunksjoner og live samarbeid. Det er riktig, hvis jeg jobber med noen andre, kan vi gjøre endringer i samme ledningsramme samtidig.

Jeg har gjort det før. Det fungerer. Det er kjempebra. Åh, og du får omtrent 15 GB ledig plass til å jobbe med. Det er nettbasert, så det fungerer på alle stasjonære OS. Det ser ikke ut til å ha en tablettversjon, som skuffer meg. Vel, du kan ikke ha alt.

For tabletter har vi en liste over programmer som kan få jobben gjort her: Hvordan lage wireframes på nettbrettet ditt .

En kodeditor

En kodeditor er egentlig bare en forherlig versjon av Notisblokk. Jeg har kanskje bare gjort noen techies sputter og forbannelse, men det er mest sant. Forskjellen er at disse tekstredigererne kommer med mange ekstra funksjoner som er laget for å gjøre kodingswebsteder og programmer enklere. Husk hva jeg sa om folk blir besatt av programvaren deres? Det blir vondt med tekstredigeringspersonalet.

Husk at hvis noen spør deg om "Vim" eller "Emacs", kommer du langsomt tilbake uten å bryte øyekontakt. Det er din eneste beskyttelse.

Dette er en av de tidene da du må eksperimentere og se hva du liker best. Du kan bokstavelig talt bygge nettsteder i Notisblokk, hvis du vil. Det ville bli smertefullt og kjedelig etter en stund, men du kan.

Så hvilken skal du begynne med? Jeg skal si brak~~POS=TRUNC . Det er fortsatt under aktiv utvikling, men det er stabilt. Det er gratis. Den fungerer på Windows, Mac og Linux. Det er designet spesielt for folk som designer og bygger nettsteder i nettleseren.

En bilderedigerer

Du kan ikke designe nettsteder i Photoshop lenger, men du må fortsatt lage og redigere individuelle bilder. Enten de er bilder, logoer eller ikoner, trenger du noe. Igjen, bruk det som fungerer for deg. Det kan være Photoshop, GIMP, Paint.Net eller en av Corel-appene.

En lokal server (semi-valgfritt)

Til slutt vil du kanskje installere en webserver på din personlige datamaskin. En webserver brukes vanligvis til å fortelle Internett i stor grad, "Sjekk det ut! Det er et nettsted her. "I utgangspunktet gir en webserver alle tillatelse til å se på de spesifikke filene som utgjør ditt nettsted.

Med mindre du har en skummel og fantastisk Internett-tilkobling, og en like skremmende datamaskin, åpner du ikke serveren din for Internett. I stedet kan du installere en server for å etterligne hvordan ting fungerer online.

Å lære å jobbe med en server på datamaskinen kan spare deg mye tid når du laster opp filene dine til en faktisk hosting server. Så ja, du vil sikkert ha en, selv om det ikke er strengt nødvendig.

For enkelhets skyld vil jeg si til å begynne med XAMPP . Du kan installere den på Windows, Mac eller Linux, og du er god til å gå.

Et eksempel prosess

La oss si at du har fått en viss ferdighet med alle ferdighetene og verktøyene du trenger for å bygge din første nettside. Alternativt kan vi si at du vil prøve dine ferdigheter for første gang. Uansett er det på tide å sette alt du har lært å bruke. Jeg har satt sammen et eksempel som du kan bruke når du designer og koder nettstedet ditt. men ikke ta det som evangelium.

Lek med den. Endre det. Tilpass det. Mens det er visse ting som bare skal gjøres først, er mange detaljer opp til deg. Prosessen påvirker utfallet, nesten mer enn noe annet, inkludert dine ferdigheter og evner. Pass på at det fungerer for deg, og eventuelle klienter du kanskje jobber for.

Hent innholdet ditt sammen

Få det fra klienten din, eller skriv det selv. Du kan ansette en kopiforfatter og fotograf, eller se etter anstendig bilder. Uansett hva du må gjøre, få teksten, bildene og hva-du-dere sammen og organisert.

Hvis du skriver innhold for deg selv, foreslår jeg at du leser omtrent alt skrevet over på Copyblogger . De har år og år verdt råd om hvordan man skriver godt innhold til Internett.

Innholdsarkitektur

Merk: Innholdsarkitektur er trolig ikke det tekniske begrepet. Det er en jeg bruker for dette trinnet, fordi informasjonarkitektur allerede var tatt.

Når du har innholdet ditt sammen, må du bestemme hvordan det skal organiseres. Hva skjer på hjemmesiden? Hva skjer på de andre sidene? Hvordan vil disse sidene være koblet til hverandre?

Denne strukturelle organisasjonen er viktig, og vil diktere mange aspekter av nettstedet ditt (spesielt navigasjonen), hvordan du organiserer filene, alt.

Her er et eksempel på et hjemmekart som jeg laget for en klient litt tid tilbake, detaljert innholdsarkitektur og navigasjonsstruktur for et mellomstort nettsted. Dette nettstedet inkluderte grunnleggende sider som annonserte noen tjenester, og 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.

Stil fliser 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.

testing

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. Det er 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. Ikke sant. 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.

Utvalgt bilde, web design space via Shutterstock.

• ← Hvordan Googles mobilvennlige oppdatering vil påvirke deg (og hva du kan gjøre med det)
• Skal designere lære å kode? →