Jag läste en intressant artikel om hur framtidens e-böcker ska utformas och vad man behöver tänka på i produktionen, inte minst i relation till det överflöd av information som finns att tillgå.   Men största behållningen av den var faktiskt en hänvisning i artikeln till hur matt.might.net beskriver syftet i en doktorsavhandling. Den sa bara klick inom mig. Några bilder säger vad hinkvis med ord aldrig kan uttrycka lika tydligt.

Bilden ovan ska ses i sammanhang av följande två bilder.

Den sista bilden sätter en avhandling i perspektiv av helheten av kunskap. Jag har som sagt lånat bilderna från matt.might.net - och där finns fler bilder i denna serie. Titta på dem för att få en helhetsbild!

Det hela handlar om perspektiv. Jag får hjälp att se mig själv i ett större sammanhang.

Jag associerar vidare. Bilden hjälper mig att tänka på “experter” som belyser fakta i olika sammanhang. Hur lätt är det inte att låta sig luras av att de är “experter” – även när de talar utanför sitt specialområde. Bilden gör det väldigt tydligt att deras kunskap kan vara oerhört smal och perifer.

Jag ögnade de färdiga mallarna i word för Mac, och upptäckte att det finns en färdig lektionsmall där. Den ser ut som ovan. Är du intresserad av den så finns den här (hoppas jag inte bryter några upphovsrättsregeler…)

Arbetsflöde är ett samlande begrepp för alla steg som används för att göra en webbplats. Från första början till färdig sajt. Hur arbetsflödet ser ut beror till stor del på i vilket sammanhang man gör webbplatsen. Till ett stort företag eller organisation? En liten privat webbplats? Det är stor skillnad.

Jag jobbar som lärare och ”lär folk göra webbplatser” på ungefär samma sätt som andra lärare ”lär folk läsa”. Därför handlar min vardag om de absoluta grunderna i att bygga webbplatser. Här vänder jag mig till dej som kanske fått i uppgift att göra en webbplats som en del av en nybörjarkurs i webbdesign eller kanske har kommit så långt att du vill pröva på att göra ett tema till WordPress på egen hand. Vi ska vrida lite på begreppet wireframe, se vad det innebär och vad du kan ha för nytta av det. Vi landar i en enkel ”metod” och på köpet får du referenser till bra fördjupningsmaterial.

Det arbetsflöde vi talar om kan delas in i följande steg. Bakgrunden sammanfattar vi i begreppet research: Vad handlar projektet om? Vilket sammanhang, vilka användare, speciella krav och begränsningar gäller?

I nästa steg gäller att generera, vrida och vända på idéer. Därefter blir det ofta någon form av prototyp, som följs av designarbete. Så gäller det att ”göra sidan”, dvs. den fas vi kan kalla utveckling. Till sist ser vi till att vi har ett korrekt innehåll och testar allt så det fungerar. Äntligen kan vi gå online. (Sen är det ”bara” underhåll och uppdatering kvar, det kanske viktigaste av allt!)

I denna process har begreppet wireframe en central roll. Ett okänt begrepp? Låt oss reda ut det.

Vad är en wireframe?

Vi konstaterar att en wireframe hör hemma i idéfasen i första hand. Huvudtanken är att ta fram en skiss innan den slutliga designen görs. En mer exakt definition gör Mário Andrade:

En webbplats wireframe visar dess grundläggande struktur. Den innehåller ingen funktionalitet eller design, det är den grundläggande strukturen för layout och fungerar som en guide för designern.
En wireframe ska omfatta all viktig information och behålla sidstrukturen ren och tillgänglig.

Mário ger oss följande exempel.

Han beskriver en wireframe med bilden av ett skelett. Det kan inte göra något i sig självt, inte ens hålla sig upprätt. Det behöver muskler. Här kommer designen in. Den håller samman sidan. Men det räcker inte. En kropp får inget liv med enbart muskler och skelett, den behöver hjärta och hjärna också. Inom webbutvecklingen motsvaras det av både front end och back end.

Jag gillar Will Evans sätt att beskriva wireframing: Ett tankeverktyg för att lösa ett givet problem. Han betonar vikten av en wireframe för att kommunicera med andra:

Medan jag undersöker problemet skulle jag tämligen enkelt kunna ha de olika designmodellerna i huvudet, men jag skulle misslyckas i min viktigaste uppgift, att skapa förutsättning för samtal mellan uppdragsgivarna, de tänkta besökarna och mig själv.

Will beskriver i sin artikel sitt eget sätt att arbeta. Den kom till som ett bakgrundsmaterial för ett kapitel i boken, A Project Guide to UX Design. Han konstaterar att en wireframe för honom lika mycket handlar om att få grepp om det (design)problem som ska lösas som själva lösningen av problemet. Därför börjar han alltid med kontexten. Vad är sammanhanget?

Wireframe på olika nivåer

Will avslutar sin artikel med en relativt detaljerad wireframe. Den är ett exempel på hur han under en process med många skisser tidigare definierat fram en wireframe utan plats för så mycket ändringar.

Janko Jovanovic skriver om ”Sketching, Wireframing & Prototyping” i boken The Smashing Book #2. Han inleder det med ett tänkvärt citat om arbetsflödet: ”Den steniga stigen från en dunkel idé till finputsat slutresultat är lika viktig som idén i sig – om inte viktigare, eftersom en idé utan ett korrekt genomförande bara blir en abstrakt tanke”.

Ha lyfter fram ett engelskt begrepp ”ideation”. Det motsvaras ungefärligt av vår idéstadium, men med fokus på att man faktiskt jobbar med idéerna. Inte att de ligger och slumrar någonstans. Bilden han använder sätter in begreppet wireframe i sitt sammanhang.

Här ser vi hur det är mera skissartat i början för att följas av mer detaljerade wireframes ju längre processen fortgår. Samtidigt sållas alternativa skissar bort efter hand.

Beroende på i vilket sammanhang och vilken roll man befinner sig i ett webbprojekt är behovet av detaljer i en wireframe väldigt olika.

Janko använder begreppet lo-fidelity wireframes, när de bara innehåller huvuddelarna, till vänster på bilden ovan. Här är det lätt att lägga till och dra ifrån saker på sidan. Det är fortfarande ett slags skisstadium. High-fidelity wireframes är mycket detaljerade, där de flesta avgörande designbeslut redan tagits.

Vad bör finnas med på en wireframe? Janko sammanfattar:

• Sidstruktur, som visar hur informationen organiserats på sidan, vad användarna ser och kan göra.
• Navigering, som visar hur användarna kan förflytta sig på sajten, var de befinner sig och vart de kan ta vägen.
• Interaktionsdetaljer, som visar vad som händer när användaren gör något, följderna av deras handlande och och nästa steg för att nå målet.

Vissa sammanhang kräver detaljerade wireframes, men det finns olika sätt att arbeta och det handlar om att hitta ett sätt man själv tycker är bra, och som funkar i det sammanhang man finns. Ibland behöver man förfinade wireframes, andra gånger kanske det räcker med en skiss på en servett!

En vardagsmetod – grå boxar

Låt oss kika på en ”vardagsmetod” för oss som inte jobbar i större sammanhang. Vi har inte behov av att göra lika detaljerade skisser. Efter lite arbete med innehållet, där vi tagit fram de olika delar som ska finnas med på sidan, handlar det om att prova sig fram till olika alternativ att utforma sidan. I detta läge sparar vi de kreativa designidéerna och -detaljerna. Vi provar helt enkelt vilka olika sätt det finns att presentera innehållet på sidan/sidorna (man kan få göra flera wireframes om man behöver helt olika sidor, t.ex. en unik startsida).

Låt en wireframe fokusera på innehållet och gör den enkel. Det finns en teknik som använder ”grå rutor”. Jason Santamaria visar exempel på detta med sin ”Grey Box methodology” i en artikel från 2004. Han beskriver hur han skissar strukturen på sitt innehåll med att fylla en wireframe med grå boxar.

På detta sätt fokuserar man på hur innehållet ska placeras på sidan/sidorna och lägger designen åt sidan. Om man öppnar Photoshop och börja skissa på en detaljerad design direkt är det oerhört lätt att fastna i detaljer, exempelvis i fråga om val av färger och typsnitt. Man riskerar att missa alternativa layouter för helheten. Andy Clark har anammat denna teknik i sin bok Transcending CSS och slår ett slag för metoden.

Om vi tittar på ett exempel från Janson Santamaria ser vi de grå boxarna i funktion.

Det är innehåll eller funktioner på sidan som ska placeras i de grå boxarna. Hur kan man ”lägga ut” de olika delarna? När man inte lägger till specifika designelement är det mycket lättare att hålla fokus på att prova olika alternativa sätt att placera innehållet. Det innebär inte alls att man saknar idéer för hur det ska se ut. Det innebär bara att man väntar med att fokusera på dessa idéer tills struktureringen av innehållet är klart. Det visar Jason i de olika skisser han hade med sig när han jobbade med wireframen ovan.

Jason ger själv ett tydligt exempel på användning av wireframe i ett testprojekt. Han visar tre varianter på förslag till wireframe och sen den färdiga designen.

Papper och penna

Några ord om själva tekniken. Använd gärna papper och penna. Framför allt i inledningsfasen. Av flera anledningar:

• Papper och penna är lättillgängligt.
• Du kan komma igång direkt.
• Det är billigt. Kräver inga program.
• Det hjälper till att fokusera på de viktigaste delarna, inte detaljerna. Har du bara en tjock filtpenna blir det ännu tydligare. Du får bara med huvuddelar.
• Det är lätt att kassera! Fångar man en idé så här blir det ingen prestige om man ratar den, vare sig för den som gör den eller den som kommer med kritik. Bara att knyckla ihop och kasta i papperskorgen.
• Den skissartade metoden uppmuntrar till att jobba snabbt och göra många utkast. Det är viktigt eftersom det inte handlar om att komma på en lösning utan hitta så många alternativ som möjligt.

Dessutom är det viktigt att notera: Man behöver inte kunna teckna för att göra wireframes! Det handlar inte om konstverk, utan om att förmedla idéer.

När man gjort sina skisser på papper kan man gå över till valfritt program och göra dem mer detaljerade. För enkla sajter kan det räcka gott med handskisser.

Avslutande exempel

Låt oss avsluta med ytterligare några exempel på wireframes. I boken ”Build Your Own Wicked WordPress Themes” går Brandon R Jones igenom hur man bör planera för att skapa ett eget tema. I slutet av arbetet med innehåll gör man en eller flera wireframes. Så här:

Han betonar vikten av att förbereda sajten för sidor med olika innehåll. Det enklaste sättet är då att göra en wireframe för varje innehållstyp. Här ser vi hur han ger ett exempel med en startsida, en sida där man listar poster, en sida för enbart en post och en för en enstaka sida (till skillnad från en post).

Elliot Jay Stocks ger följande exempel i boken ”Sexy Web Design”. De talar tydligt utan kommentarer:

Elliot säger för övrigt så här om vårt ämne:

När vi skapar en wireframe  tänker vi helt enkelt kring hur de olika delarna fungerar bäst på sidan. Vi överväger vilka element som ska lyftas fram och hur de bäst hänger samman.

Fler exempel

För exempel på wireframes kan du bege dig till I love wireframes, en plats där Ivana Jurcic samlar på olika exempel.

Hoppas denna översikt ger dig inspiration att testa wireframes, om du inte redan gör det.

PS.

Det finns många program för att göra wireframe. Det finns även tjänster på nätet.

Många vet om att det finns en licensform som heter Creative commons (se även wikipedia). Den gör det möjligt att dela med sig av upphovsrättsskyddat material. Huvudtanken är att göra det möjligt för andra att använda och publicera materialet – utan att bryta mot några lagar. Har du varit på flickr kanske du känner igen licensformen. Bilden nedan visar hur det kan se ut där. Den röda rektangeln ramar in symbolerna som “förklarar” vilken licens som gäller.

På bilden ser vi tre av symbolerna Creative Commons använder. De visar olika sätt att skydda sitt verk. Kanske inte alltid enkelt att tolka hur de fungerar tillsammans. Låt oss försöka reda ut begreppen – översiktligt. Verket är tillåtet att använda under följande villkor:

1)

Ange upphovsman, verkets namn och licens.

2)

Ange upphovsman, verkets namn och licens.
Inga bearbetningar tillåtna.

3)

Ange upphovsman, verkets namn och licens.
Får ej använda i kommersiellt syfte.

4)

Ange upphovsman, verkets namn och licens.
Dela lika. Ett lite svårtolkat uttryck som innebär att bearbetning av verket är tillåtet, men  man får enbart använda verket i ett sammanhang med samma licens. M.a.o. kan man inte publicera ex. ett foto med denna licens i ett copyrightskyddat verk.

5)

Ange upphovsman, verkets namn och licens.
Får ej användas i kommersiellt syfte.
Dela lika (se ovan).

6)

Ange upphovsman, verkets namn och licens.
Får ej användas i kommersiellt syfte.
Inga bearbetningar tillåtna.

Nu upptäckte jag att man även på Google har möjlighet att filtrera på Creative Commons under avancerad sökning. Det har jag missat tidigare.

(På bilden har jag gjort ett montage vad säger upphovsrätten om att göra så på en webbsida?!) Här ser du att du kan använda alternativ som (i stort sett) stämmer med alternativen jag listat ovan.

Vill du ha en broschyr som beskriver detta lite utförligare kan du ladda ner en från Skolverket. Eller givetvis gå till Creative Commons egen webbsida.

Känner du till Operas kursplan om webbstandarder? Nu finns där bortåt 80 artiklar som spänner från olika översikter om att utveckla webbsidor enligt standard, via CSS, HTML, JavaScript till sidor om HTML5, mikroformat m.m. Som vanligt: materialet är på engelska.

Eftersom jag inte kräver att mina elever ska läsa engelska har jag översatt ett par av dessa inför slutuppgifter de ska göra i kursen i webbdesign. Det är ett par artiklar. Det är informativ och nyttig läsning för den som vill fördjupa sin kunskap om hur man bygger en webbplats med bra innehåll och god funktionalitet.

 I den första artikeln, Informationsarkitektur – att planera en webbplats, handlar det om vad man ska tänka på när man planerar innehållet till en webbplats. Författaren tar ett exempel med ett låtsasband och går igenom allt från träff med dem till en färdig struktur för sajten.

Den andra, Vad behöver en bra webbsida?, handlar om vad det faktiskt är som gör en webbsida bra. Vad ska man tänka på? Här tar författaren upp begrepp som navigering, kontext, användbarhet och tilgänglighet.

Om någon är intresserad finns de att läsa eller använda. Just nu är de länkade i “tomma intet”, dvs. på en domän där jag enbart lagt upp material utan gränssnitt. Det är m.a. o. inget större idé att leta efter mer material där, även om det finns en hel del dolt. Jag ska åtgärda det, när jag får tid… och lust…

Här är artiklarna:

• Information Architecture—planning out a web site
  min översättning: Informationsarkitektur – att planera en webbplats
• What does a good web page need?
  min översättning: Vad behöver en bra webbsida?

foto: Kevin Dooley

Orden är inte mina. De kommer från någon som kallar sig för thalli1. Hon skriver på en bloggplats om utbildning. Det är inte Sverige, men det kunde vara!

thalli1 har varit lärare i 34 år. I Oregon, USA. Hon beskriver sin yrkesresa i inlägget I don’t want to be a teacher anymore. Läs det! Om du är det minsta intresserad av en mycket personlig beskrivning av hur läraryrket punkteras på grund av krav om bl.a. “effektivisering” och “resultat” från samhället runt omkring.

Hon har vetat ända sen hon själv var elev att det var lärare hon skulle bli. Fröken bad henne hjälpa till i skolan. Och på den vägen var det. Hon har alltid älskat att vara lärare. Älskat utmaningarna och möjligheterna.

Saker har förändrats. Vi lärare känner igen det. Ni som varit lärare längre än jag säkert med ännu större igenkänning.

Hon beskriver hur förändringen gradvis satt in. Fler saker har lagts på henne som lärare. Jag citerar:

Ett år påbörjade jag en lista som jag kallade “jobb som andra gett mig”, men när jag nått punkt 57 på min lista på mindre än ett år bestämde jag mig för att det nog inte var hälsosamt för mig att fortsätta med den.

Jag återger inte mer utan uppmanar dig, åtminstone om du är lärare, att läsa inlägget. Det är långt, men läsvärt!!

Faktiskt så läsvärt att hon enligt ett senare inlägg konstaterar att Washington Post velat publicera hennes inlägg och att CNN vill intervjua henne.

PS.

Mer skola: Vill du läsa en av lärarna på Mikaelskolan i Örebro, som är med i arbetslag 9, men som sågar serien 9A rejält kan du läsa vad han skriver hos Skolvärlden.

Ur AIKAs designportfolio hos Adobe

Jag letade lite efter utbildningsmaterial hos Adobe. Där spang jag bland annat på möjligheten att göra portfolio i Acrobat, något jag inte testat. Jag kikade på en designstudent och upptäckte den spännande bilden ovan. Den är gjord av AIKA_Design och jag blev väldigt fascinerad av hennes bild. Du hittar hennes portfolio (och får kontaktadress i den) och flera andra hos Adobe.

Jag inser att det hänt en del med Acrobat som jag inte hängt med i. Den har gjort det möjligt att skapa en portfolio (eller dokument med översikter i) på ett sätt som inte var möjligt tidigare. Något att undersöka.

För den som inte rör sig i skolvärlden kanske rubriken låter kryptisk. DTR 1201 är helt enkelt beteckningen på kursen i webbdesign i den gymnasieform som nu håller på att rinna ut.

Kursen har för övrigt ett av de värsta MVG-kriterier jag sett… kolla själv. Undrar vilket av webbens alla yrken idag man ska bedöma? Men betänk, den skrevs i princip före Google.

Jag har lagt ut en presentation för mina elever. Om någon vill se hur jag gjort det är ni välkomna.

Här finns en genomgång av de olika målen och lite kommentarer.

Ett mycket smalt tipz. Det gäller bara oss som på något sätt är inblandade i den nya gymnasiereformen. Men eftersom jag är det i allra högsta grad lägger jag in länken till Skolverkets sida med material som presenterar den nya reformen.

Här finns bl.a. en film på hela 1,5 tim att ta del av. Den är indelad i nio delar, som man kan se på nätet (i flera versioner) eller ladda ner:

• Introduktion till gymnasiereformen och Skolverkets uppdrag
• En jämförelse med dagens gymnasieskola och avvikelser från systemet
• Tydligare och mer ändamålsenliga styrdokument
• Ämnesplanerna och de gymnasiegemensamma ämnena
• En ny betygsskala
• Tydligare utgångsnivå. Gymnasieexamen. Implementering. Gymnasiesärskolan
• Ett internationellt perspektiv
• Kort om den nya skollagen
• Lärare och rektorer reflekterar över den nya skollagen

Vill du kontrollera vad du kan av HTML-taggar? Vill du lära dig fler taggar?

Jag har gjort en liten “frågesport” där du får hjälp att testa dina HTML-kunskaper. Du får klicka dig igenom 10 olika frågor. Det är totalt många fler frågor, så de ser olika ut för varje gång du testar dig.

Du får kryssa i rutor och radioknappar. Du får även dra alternativ till en tom ruta, passa ihop rätt alternativ genom att dra dem eller skriva rätt alternativ i klartext. Du upptäcker säkert hur det funkar.

När du har gjort ett test får du se resultatet. Klicka på “Se frågorna igen”:

Då kan du välja den lilla pilen längst upp till vänster. Du får fram frågorna och kan se var du gjort rätt eller fel.

Klicka på en fråga för att få fram alternativen, se vad du valt och se vad som var korrekt svar (om du svarat fel). Ett utmärkt sätt att repetera HTML-taggar.

Notera att om jag ber dig skriva HTML-taggar ska svaret bara stå med bokstäver, du ska inte ha med < och >.

Prova dina kunskaper här.