10 verktøy eg må ha for å overleve som webdesigner

Eg tykkjer alltid det interessant å sjå kva verktøy og metodar andre webdesignerar brukar. Så her kjem mine topp-10 mest brukte og nyttige verktøy i min jobb som webdesigner.

1. Firefox

Mitt første val for nettleserar, Firefox er utvilsomt den det er kjekkast å kode ei nettside til. Og i kombinasjon med to viktige programtillegg: Firebug og Web Developer blir det eit svært nyttig verktøy til å feilsøke kode og kle av ei nettside ned til minste detalj. Last ned Firefox her om du ikkje alt brukar den!

 

2. Internet Explorer

Mitt siste val av nettlesar, lite intuitiv, ustabil og full av overbeskyttande sikkerhetsfunksjonar som hemmar surfegleda mi. Men det er nok den viktigaste nettlesaren ein kan ha om ein skal drive med webdesign. Internet Explorer troner framleis over dei andre nettlesarane blant brukarar flest, og vil nok gjere det så lenge Microsoft er markedsleiar på operativsystem. Derfor må nettsida du lagar fungere i denne nettlesaren. Og det er ofte litt frustrerande –  særskild IE 6, IE 7 er betre og IE 8 virkar lovande, men det  tar nok nokre år før versjon 8 er den mest brukte nettlesaren blant IE brukarane.

 

3. Safari

På dei fleste prosjekta eg jobbar med er det safari so kjem som nummer 3 blant nettlesarane til brukarane. Eit tips for å feilsøke i Safari er å låse opp Safari sin eigen “debugger”. Den minnar om Firebug og er integrert i Safari men den må låsast opp først. Du kan lese korleis du låser opp debug i safari her.

 

4. Opera

Opera er den nettlesaren som oftast ligg på 4. plass. Sjå øvrige punkter.. Og ja, no er eg ferdig å ramse opp nettlesarar. Men enn må ha dei store nettlesarane og teste nettsidene frå start til slutt for å skape  webdesign som held mål.

 

5. Blyant og papir

Genialt enkle verktøy som mennesker har brukt i lang tid. Dei fleste gode webdesign startar som enkle blyantstrekar på eit papir. Frimerkeskisser er ein god start, då skisser ein alle ideane ein kjem på når ein går i gong med eit prosjekt som små skisser på mlag 3x4cm. Deretter lagar eg meir detaljert skisse av dei frimerkeskissene ein tenkjer at fungerte. For å byrje rett i eit grafisk-program som photoshop og likande på ein datamaskin er ofte hemmande for den kreative starten i eit prosjekt.

 

6. Illustrator

Dersom ein skal forsikre seg om at nettsida blir optimalt bør ein ta steget over i Adobe Illustrator for å reinteikne skissene meir konkret som “wireframes” eller strukturskisser. Dette er eit godt utgangspunkt for å være sikker på at ein får med den riktige informasjonen som er viktig å få med. Mot kundar er det også supert med tanke på at dei ikkje heng seg opp i at “knappane er grønne” sjølv om kunden likar betre “raude knappar”. Og ein sparar faktisk tid på kor ting skal være når ein går i gong med det detaljerte designforslaget.

 

7. Photoshop

Det detaljerte designforslaget lagar eg utelukkande i photoshop. Det er det “fotoredigeringsprogrammet” eg har brukt heilt sidan Photoshop 4.0 i 1998(?) så det er for meg utenkeleg å bruke andre verktøy til dette. Men det finnes sikkert gode alternativer til Adobe Photoshop.

 

8. HTML- & CSS-editor

Her er det mange verktøy å velgje mellom, på jobb brukar me stort sett Dreamweaver, det har eit utmerka “Code-view” som me brukar. Dettte programmet følgjer også med Adobe Design Premium som mange kjøper. Men heime likar eg best TextMate, då det er eit mykje lettare program som ikkje lastar alle dei unødige WYSIWYG-funksjonane til Dreamweaver. Noko min litt eldrande mac tykkjer om. For at eg skal jobbe effektivt er det viktig at det er mange “snippets” (kodesnuttar som du aktiverar med hurtigtaster), og at dei har oppslagsverk på CSS-reglane eg ikkje brukar dagleg. Smultron og Aptana er forresten gode gratis alternativ til TextMate og Dreamweaver.

 

9. FTP-klient

Når ein er ferdig å planlegge og bygge webdesignet og feilsøkinga i nettlesarane er gjort er det på tide å laste opp “rammeverket” eller malen til nettsida på internett. Her brukar eg Transmit på mac og WinSCP på windows. Dei støttar dei fleste ftp-tilkoblingane og begge to let deg redigere filene på server direkte og enkelt.

 

10. Publiseringsløsning

Eit heilt uvurderleg verktøy for vellykka webdesign, ei nettside som ikkje held seg oppdatert blir fort ei utdatert nettside. Så å sørge for at kunden eller andre som skal vedlikehalde nettsida har gode verktøy for å publisere innhald på ein ikkje teknisk måte er uvurderleg. Her svergar eg “sjokkerande” nok til publiseringsløsninger me har utvikla på jobb: Argo Publisering til avanserte prosjekter og Argo Start til enklare prosjekter. Dei gir mange avansert moglegheiter i oppsett. Men for kunden er dei like enkle å bruke som å skrive dokumenter i Word eller likanande.

Men dersom du ikkje har budsjett på eit prosjekt og ynskjer å bruke mykje tid å ressursar på å installere og konfigurerer ein publiseringsløsning sjølv, kan eg anbefale WordPress som kan være mykje meir enn berre eit blogg-verktøy.

Og du då?

Håpar du fann det interessant å lese kva eg vektlegg i mine prosessar. Del gjerne dine eigne synspunkt og unnværlige verktøy:

9 thoughts on “10 verktøy eg må ha for å overleve som webdesigner

  1. Håvard Pedersen

    Grei liste :) Har et par ting jeg vil legge til:

    Istedenfor FTP-klient i vanlig forstand bruker jeg Macfusion fra http://www.macfusionapp.org/ som lar meg mounte servere som lokale disker. Dra og slipp i Finder. :)

    For å redigere HTML, CSS, JS, PHP, Python og Ruby bruker jeg Komodo Edit frahttp://www.activestate.com/Products/komodo_ide/komodo_edit.mhtml . Den er gratis (det finnes en tyngre versjon som koster litt), og veldig fleksibel.

    Når det gjelder publiseringsløsninger er jeg veldig pragmatisk, og har jobbet med litt av hvert. Men hvis jeg skal lage noe helt fra grunnen av skjer det som regel med mitt eget OneFileFramework på http://www.pmedia.no/off/ :)

    Reply
  2. Mia

    Og du har en bittelite “bug”. Når vi besøkende kommenterer vises ikke logoen din øverst som bildefil, men som vanlig heading…regner kanskje med det ikke var meningen.

    Reply
  3. Anders-Meyer

    Håvard Pettersen: Gode ting du tipsar om her, den macfusion greia såg bra ut.

    Mia: Opera på 2. plass? Ser ikkje heilt nytteverdien av det. Har den nokre gode funksjonar ein kan dra nytte av i prosessen?

    Ja, har vore litt trøbbel med malane i dag. Takk for tipset, no er det retta opp i :)

    Reply
  4. Bjørn Endre

    Flott liste, er veldig enig i Firefox som soleklar førstepunkt på listen :D

    Ettersom jeg sitter på mac har jeg vanskeligheter med å teste websider i IE, men heldigvis finnes det tjenester som browsershots.org som er veldig behjelpelig.

    For noen uker siden kjøpte jeg meg Coda, et fantastisk program som smelter sammen punkt 8 og 9, anbefales på det sterkeste for webutviklere på mac.

    Synes forresten Fireisland er veldig bra, er bookmarka, feedmarka, linka til og det som er :D

    Reply
  5. mia

    Du kan si Firefox er den nettleseren jeg stoler mest på, Opera har noen irritasjonsmomenter som ikke er lett å ignorere.

    Men jeg er helt avhengig av zoomfunksjonen (Opera zoomer hele siden ut og inn og ikke bare teksten). Veldig kjekt noen ganger. Også har den mange funksjoner som å vise strukturmarkering, validering, vise class/id og div andre ting som jeg liker veldig godt!

    Reply
  6. Calle

    Hei! Som publiseringsverktøy ser jeg wordpress som en kandidat. Men hvordan er det med MS Publisher 2007?? Er ganske ny i gamet.. Fikk Publisher med i office2007..Hva skal jeg bruke?? hehe.. Takk på forhånd..

    Reply
  7. Emil

    Flott artikkel!
    Jeg vil absolutt anbefale Coda til webutvikling på Mac. Det har i den senere tid blitt mitt weapon of choice, og har innebygd ftp/css/editor/terminal/brukerhåndbøker/clips.
    Kort sagt alt du trenger i et og samme program.
    Grafikken bruker jeg alltid Photoshop/Illustrator til.

    Stå på, jeg har bokmerket bloggen din i Kreativitet mappa mi sammen med andre gode nettsider som handler om webutvikling!

    Emil

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>