Välj rätt arbetssätt och verktyg för webbdesign och gränssnittsdesign
Vägen från idé till slutgiltig produkt för ett webbprojekt består alltid i att baxa en beställning genom en process där formgivning, användarupplevelse och kundens preferenser alla ska styra delar av arbetet. Här tar vi dig igenom skisser, wireframes och prototyper mot en färdig webbplats på nolltid med ett urval av verktyg som du kan använda dig av.
Nästan oberoende av hur stort eller litet webbprojekt du ställs inför så är det viktigt att kunna beskriva, testa och bolla idéer med kolleger och kunden. Har man en stor projektgrupp är det viktigare att det även visuellt går att redovisa tankar och slutsatser för alla inblandade. Är projektgruppen mindre kan man kanske låta bli att dokumentera sina slutsatser detaljerat, men någon typ av dokumentation är trots allt nödvändig både för att komma ihåg vad man bestämt, och för att kunna dra nytta av i framtida projekt.
Ett väl beprövat sätt är naturligtvis att arbeta med papper och penna. Det fungerar mycket bra på ett tidigt idéstadium när man funderar kring spaltindelning, placering av navigering och känslan på layouten, och man är betjänt av att det är så snabbjobbat. Det är också en fördel att börja på ett tomt papper eftersom man då förutsättningslöst kan ta sig an problemet. Nu invänder säkert en del läsare att man minsann är mycket mer snabbjobbad framför datorn, och att papper och penna hör till det förgångna. Till viss del kan det vara så, men framför allt är det nog ett personligt drag var man har lättast att påbörja ett projekt. Projektgruppen är förmodligen också en drivande kraft i hur man enklast arbetar.
Tips på arbetssätt
Vi ska försöka att gå igenom några arbetssätt som kan lämpa sig olika väl för olika typer av arbetsgrupper och projekt, men förhoppningen är att något ska passa just ditt nästa uppdrag.
En liten projektgrupp, kanske rent av bestående av en eller ett par webbdesigners, kan ofta ha en mer rättfram arbetsgång mot både varandra och mot kund. Beslutsvägarna är korta jämfört med större projektgrupper, och man kan börja bygga prototyper redan i ett tidigt skede av projektet. Många gånger kan det vara en bra idé att snabbt komma igång med en fungerande sida för att testa funktioner och gränssnitt på ett tidigt stadium.
Är det också så att själva projektet är av en karaktär där funktionen på sajten är ganska tydlig redan vid beställningen så lämpar sig det arbetssättet mycket bra. Ska man bygga en sajt som enbart ska informera om ett event eller som ska sälja en produkt så innebär det inte bara att innehållet på sajten begränsas i mängd. Det gör även att man får en mycket tydligare indikation på vad som är viktigt och vad som ska lyftas fram på sajten.
I den andra änden av skalan hittar vi den stora projektgruppen med den stora beställningen. Kunden har själv en projektgrupp internt som arbetar med sajten, och inte nog med att sajten är omfattande, den har även ett flertal syften. Den ska kommunicera mot kunden via en självbekäningskuntjänst, den ska vara säljande och ha en produktbeskrivningsavdelning – kanske till och med en webbshop – och den ska passa en kundgrupp som är väldigt heterogen. Ingen lätt uppgift således.
Till den här typen av projekt är det bästa oftast att arbeta stegvis från enkla skisser där man diskuterar funktion, och struktur för att sedan gå på mer detaljerade layoutskisser efter hand. Ofta kan det vara bra att arbeta tillsammans med kunden i inledningsskedet och då jobba med väldigt enkla skisser antingen på papper, eller med hjälpmedel på datorn som är snabba och inte speciellt detaljerade.
Från de enkla skisserna kan man sedan i arbetsgruppen göra mer detaljerade layoutmallar, och fungerande prototyper utifrån dem.
På det viset kan man gradvis tillsammans med kunden arbeta fram en slutprodukt som man inte bara är nöjd med, utan som även är testad utifrån ett användbarhetsperspektiv redan på prototypstadiet. Istället för att bygga en hel sajt för att först när den lanserats upptäcka fel och brister i layout och användargränssnitt.
Bra program och system att använda
Vi kan dela upp verktygen som man kan använda i några huvudgrupper: enkla skissprogram, mer avancerade skissprogram och prototypramverk.
Balsamiq Mockups
I den första gruppen hittar vi program som Balsamiq Mockups. Ett Adobe Air-program som är snabbt att börja arbeta med, och som kan producera layouter som ser handritade ut. I programmet finns ett bibliotek av vanligt förekommande delar på en sajt, i ett vanligt desktopprogram och i ett Iphoneprogram. Det går snabbt att skissa upp en sajt med hjälp av menyer, knappar, textsnuttar och bilder. Gränssnittet är typiskt Air, och följer inte riktigt systemets standard, vilket gör att det kan kännas som det är i vägen. Trots det ett roligt program att arbeta i, och som man kan ha stor nytta av om man inte vill jobba med papper och penna.
iPlotz
En variant på samma tema som Mockups är Iplotz, men istället för att programmet laddas ner så körs det i webbläsaren. Fördelen är att alla dokument man skapar blir tillgängliga överallt, och det är enkelt att dela ett konto med någon medarbetare. Nackdelen är naturligtvis att det krävs en internetuppkoppling för att man ska kunna arbeta med programmet. Å andra sidan vore det väl märkligt om inte en webbdesigner hade uppkoppling.
Omnigraffle
Ett program egentligen till för att skapa flödesdiagram är Omnigraffle, men det fungerar alldeles utomordentligt bra på att skapa enkla layoutskisser också. Fördelen är att man kan få en sajtkarta mer eller mindre automatiskt både som ett flödesschema och som en lista direkt i programmet. För den som är van att arbeta med flöden eller mindmaps är det här ett givet val. Man kommer snabbt in i programmet, och det går att jobba med mallar på ett enkelt sätt. Projekt som 960.gs tillhandahåller mallar att utgå från, men föredrar man att utveckla sina egna mallar är det föredömligt enkelt.
Illustrator
Har man en mer traditionell formgivningsbakgrund kan det vara så att man är väl bekant med Illustrator. I så fall finns det en hel det att vinna på att gå direkt till det programmet för att göra layoutskisser. Den största fördelen är att man utan större problem kan exportera skissen till pixelbilder som sedan kan användas i den skarpa layouten. Man kan alltså göra en fullständig slutlayout som sedan enkelt kan styckas upp i delbilder och exporteras från programmet. Det här ger en flexibilitet där man kan arbeta med layouten från enkel skiss till slutgiltig form utan att byta verktyg. Smidigt.
Photoshop
Det vanligaste programmet att använda för webblayout är utan tvekan Photoshop. Oavsett var man börjar så kommer nog delar av layouten att mellanlanda i Photoshop innan det är färdigt. Men trots många webbdesigners förkärlek för att layouta i Photoshop så kommer man inte ifrån det faktum att programmet är ett bildredigeringsprogram, inte ett layoutprogram. Det som underlättar är att det finns drösvis med mallar tillgängligt på nätet för att underlätta arbetet. Är man bekant med lagerhanteringen i programmet, oavsett tiotals eller hundratals lager, så kan det här mycket väl vara ett alternativ.
Indesign
Undertecknads favoritverktyg Indesign som har fördelen av att vara ett layoutprogram i sin rena form. En stor styrka är att det går att arbeta med alla de grundläggande hjälpmedlen man förväntar sig när man jobbar med formgivning; typografimallar, bibliotek, mallsidor, färgrutor och hela arsenalen av import och montering av i stort sett alla bildformat man kan tänka sig. Dessutom kan man jobba med flersidiga dokument, vilket gör att man kan återanvända stora delar av arbetet från en sida till en annan. Att ändra en layout är mycket snabbt gjort, och man kan sitta i en workshop och arbeta i grupp med layouten utan att det bromsar processen.
Blueprint, Boilerplate och 960.gs
När man väl kommit förbi själva layoutfasen och behöver kunna användartesta och prova gränssnittet i ett mer eller mindre skarpt läge finns det ramverk som gör att man på några minuter kan ha en fullt fungerande sajt uppe och rulla. Tre populära ramverk är Blueprint, Boilerplate och 960 grid system. Ser man dessutom till att bygga sina layouter utifrån den spaltindelning ramverken erbjuder så kan man komma riktigt nära en slutlayout på väldigt kort tid. Använder man de här ramverken kräver det att man är välbekant med HTML och CSS, och att man lär sig uppbyggnaden på dem. Inget av det är speciellt krångligt, men förmodligen upplever de flesta att ramverken inte räcker hela vägen för ett helt projekt. Trots det så är det en rejäl kickstart för att producera en webbplats och för att kunna koncentrera sig på saker som navigering, layoutstruktur och användbarhet, och mindre på att få sajten att fungera i alla webbläsare. I alla fall i ett startskede.
Det bästa är trots allt att titta på de befintliga verktygen och sedan utgå från dem för att skapa ett arbetsflöde som passar just det arbetssätt man själv använder. Att utveckla egna mallar och egna ramverk kan vara ett stort arbete initialt, men det kan också löna sig rejält i längden. Sen kan man alltid utgå från något befintligt och justera det så det passar ens eget sätt att jobba. På det viset får man en bra start, och kommer snabbt igång. Oavsett vad så är förarbetet oftast det viktigaste i ett projekt.