Jag har i några tidigare inlägg skrivit mig varm om programmet Sketch – ett designverktyg med fokus på webben. Under den senare tiden har jag märkt att fler och fler börjat använda det, med följden att mer gratismaterial har blivit tillgängligt för dess användare. Många förutspår att Sketch kommer att få ett större genombrott sedan nyheten om att Adobe kommer att avveckla Fireworks släpptes. Här kommer några trevliga gratismallar som du kan använda.

Fresh UI-kit

Fresh UI-kit är en snygg samling element till för att skapa ett eget användargränssnitt. Här finns knappar, sökfält, sliders och ett väldigt snyggt volymreglage. Ladda ner  Fresh UI-kit här.

Wired

Wired är ett väldigt enkelt – men gediget – wireframepaket, skapat av Mark Collins. Här finns väldigt många element att välja mellan och det är sällan man upptäcker att något saknas när man skapar wireframes med detta paket. Den mjuka framtoningen gör att man kan skapa tydliga wireframes, som också är behagliga att titta på. Ladda ner Wired här.

Två mallar till iPhone 5

Denis Rojčyk har skapat en samling användbara mallar för iPhone 5, vilket kan vara användbart när du designar mobila appar och webbsidor. Du kan ladda ner Denis mall. Om man gillar att designa appar för iPhone så får man inte heller missa Bryan Clarks uppsättning av UI-element från iOS6. Här finns det mesta från iOS standardutförande, återgivet i Sketch. Bryans mall hittar du här.

Det är kul att verktygslådan för oss som använder Sketch växer. Jag blir själv väldigt inspirerad och ska försöka bjuda på lite eget material under de kommande veckorna. Har du tips på något bra UI-kit, eller annat bra så är du självklart välkommen att tipsa om det i kommentarsfältet.

En filosofi som vi har på Webbgaraget är att det alltid ska finnas tid för egna projekt. För oss är det en av nycklarna till att ständigt utvecklas och ett bra sätt att hålla sig uppdaterad med tekniken på webben. Men det är inte bara ett sätt att främja utveckling, utan också en möjlighet att göra något som bygger på ren skaparglädje.

Tidigare har vi byggt Leveransrapport som håller koll på dina postpaket, och Cykelstaden som listar cykelpumpar och verkstäder i Uppsala. Även nätverket Frilans Uppsala är en idé sprunget ur egna projekt.

Låt oss presentera matAPI

Vårt kommande projekt är att bygga ett API som hämtar näringsvärden för ett specifikt livsmedel. Detta ska göras genom att slå ur Livsmedelsverkets databas över mat – Livsmedelsdatabasen. Det finns ett intresse inom Webbgaraget för kost och hälsa, men vi tror också att det kan bli ett användbart verktyg för många fler än oss själva.

Att det ska vara användbart är också en av anledningarna till att vi bygger ett API, istället för en färdig tjänst. Vi vill att vårt API ska ge en synergieffekt – det vi skapar ska leda till att andra skapar fantastiska saker. Vi ska bygga något som både webbutvecklare och näringsintresserade har nytta av.

Hur kommer det att fungera?

Arbetet med matAPI kommer att ske under STHLM Startup Hack som går av stapeln på lördag. STHLM Startup Hack är en dag där utvecklare, designers och innovatörer kan träffas och bygga saker tillsammans. Deltagarna kommer att få 12 timmar att skapa något, som egentligen kan vara vad som helst – så länge det kan stå på egna ben.

Utifrån dessa premisser är det därför ett medvetet beslut att inte specificera saker och ting i förväg, utan allt kommer att bestämmas på plats. Därför går det inte på förhand att säga exakt hur det kommer att fungera.

Målet med lördagens kodning är att bygga version 1.0 av detta API. Det betyder att vi gärna tar emot feedback på vad ni skulle vilja se i framtida versioner av matAPI. Om du har några tankar, funderingar eller idéer får du gärna skriva det i kommentarerna nedan.

Besök gärna matapi.se för mer information.

I ett tidigare blogginlägg berättade jag att jag brukar använda programmet Keynote för att skapa wireframes. Programmet är snabbt och lättarbetat, vilket gör att det går fort att presentera en idé på ett upplägg för en sajt. Det finns dock saker som gör att jag har valt att titta på andra sätt att presentera wireframes.

Responsivitet

Den ökande efterfrågan på responsiva sajter gör att man måste ta fram flera skisser för varje sida som ska presenteras — en för vardera upplösning, som sedan ska designas. Här blir Keynote omständigt att använda. Inte bara för att det tar längre tid att skapa fler skisser, utan också för att alla slides i en Keynote-presentation måste ha samma storlek. Det gör att det blir otympligt att skapa wireframes för mobila upplösningar i samma dokument som fullskärmsversionen. Själva kärnan i responsiviteten – att utseendet anpassas direkt efter bildskärmens storlek – kräver också viss interaktion för att presentera.

Statiska bilder bäddar för interaktiva missförstånd

Ett vanligt flöde är ganska lätt att presentera i Keynote, till exempel “om du klickar på den här knappen, så hamnar du på den där sidan”. Däremot är det svårare att presentera mer avancerad interaktion. Det krävs mycket jobb för att visa hur animationen på din accordion-meny ska se ut, eller hur bilderna i din slider ska växlas. För sådana saker krävs det nästan någon typ av interaktiv lösning.

Twitter bootstrap

Twitter Bootstrap är en fri samling av verktyg för att skapa webbplatser och webbapplikationer. Samlingen innehåller HTML- och CSS-mallar för typografi, formulär, knappar, navigering och andra gränssnittskomponenter. Bootstrap innehåller också CSS-mallar för responsiva sajter. Tack vare detta går det lätt att bygga en responsiv sajt — bara man håller sig efter riktlinjerna för strukurering av HTML-koden.

Många använder Bootrap som skelett på sina sajter. Sedan har man lagt på sina egna stilmallar för att få ett eget utseende. För skapande av wireframes behövs inte detta, utan det går bra att anväda Bootstraps CSS rakt igenom. Det ser faktiskt riktigt schysst ut — om än lite färglöst.

Vad är då fördelarna med att koda upp sina wireframes efter detta verktyg? Som jag skrev tidigare är det en klar fördel då man vill presentera funktionalitet och flöde på ett interaktivt sätt. Använder man mallarna för responsivitet så får man den biten gratis.

En annan fördel är också att om man har byggt wireframes i HTML, så finns det inget som hindrar dig från att publicera dem på en server. På så sätt kan man skicka en länk till kunden, be dem klicka runt och återkomma med feedback.

Ska jag alltid använda Bootstrap?

Jag har nu använt Bootstrap vid skapandet av wireframes och det finns några saker man bör fundera på när man väljer sitt verktyg. Jag är inte helt såld på det, utan använder fortfarande Keynote när det passar bättre. Här är några punkter att fundera över när man fattar sitt beslut:

• Hur mycket tid har jag?
  Projektets omfattning är av stor vikt när man väljer verktyg. Att koda fram en layout tar längre tid än att rita den — åtminstone för mig.
• Vilken datavana har kunden?
  Om kunden redan känner till begreppet wireframes så har den en högre förståelse för det man vill presentera. Ni kanske till och med har gått igenom samma procedur tidigare och vet hur ni kommunicerar bäst. Då kan det också räcka med wireframes i Keynote.
• Vilken funktionalitet har sajten?
  Fundera på vilken funktionalitet sajten har. Här är inte svaret att man ska använda Twitter Bootstrap bara för att sajten är av avancerad karaktär, utan att man ska fundera på vilket verktyg som matchar den funktionalitet man vill ha med. Låt säga att vi har en meny i form av tabbar som vi vill ändra till en accordion för mindre skärmar. Detta är inget som automatiskt stöds i Bootstrap, utan då måste man fundera på om det är värt att hitta en lösning i kod för att presentera detta, eller om det är bättre att rita ett enklare flöde i Keynote.

Twitter Bootstrap är ett bra verktyg när man vill presentera wireframes med interaktivitet. Det finns även andra verktyg med samma, eller liknande, funktionalitet. Foundation från ZURB liknar Twitter Bootstrap och är värt att spana in. Det använde vi när vi byggde Hitta och Jämför åt Uppsala Kommun. Vid genomgången med kunden kunde de själva klicka runt och skapa sig en förståelse för sajtens flöden.

Fundera på ändamålet, projektets storlek och kundens data vana. Utifrån det är det lättare att besluta vilket verktyg för wireframes som passar bäst.

Nu kan vi äntligen meddela att vi har fått tillökning i garaget. Lisa Kriga från Valbo kommer att arbeta på Webbgaraget – främst med produktion av webbsidor.

Sedan de första trevande stegen togs under sommaren 2008 har bilden blivit allt tydligare vad vi vill göra. Vår ambition är att leverera Uppsalas bästa sajter – främst i publiceringsverktyget WordPress. Lisa är en person som vi känner delar vår vision och vår törst efter kunskap.

Lisa har också erfarenhet inom copywriting, storytelling och marknadsföring – något som vi tror kommer att lyfta företaget ytterligare.

Samtidigt som vi säger välkommen till Lisa vill vi också passa på att tacka för alla ansökningar. Detta var första gången vi sökte ny personal och vi känner oss hedrade över det stora antalet ansökningar vi fick in.

Kontaktformulär på hemsidor brukar ibland ha en tendens att vara webbdesignerns kreativa frizon. Om man googlar efter kontaktformulär på webben får man nästan uteslutande upp träffar med ledorden ”inspiring”, ”beautiful” och ”creative”. De flesta artiklar listar snygga och märkvärdiga formulär, vissa så utsmyckade att man knappt ser att de är kontaktformulär. Tyvärr belyser man sällan kontaktformulär ur ett användarperspektiv.

Jag tänkte göra just detta och visa några saker som kan vara bra att tänka på när man skapar ett formulär med besökaren i fokus.

Ge feedback

På en vanlig hemsida är kontaktformuläret kanske den enda riktiga interaktionen som besökaren upplever. Därför är det viktigt att man underlättar användandet, inte minst för ovana besökare.

• Vilka inputfält är obligatoriska?
  Markera tydligt vilka fält besökaren måste fylla i, inte bara efter det att något har gått snett. Ibland kan man se inputfält som följs av en röd asterisk (stjärna). Vi vana besökare tolkar detta som ett obligatoriskt fält. Men hur är det med övriga användare? Gör som gör när man skriver ett dokument – följ upp med en förklaring av vad asterisken betyder, dvs. ”* Dessa fält är obligatoriska”.
• Var är jag?
  Markera tydligt, gärna med CSS-attributet :focus det markerade inputfältet, så att besökaren inte behöver fundera på vilket fält man håller på att fylla i.
• Vad gick snett?
  Skriv ut information om varför meddelandet inte kunde postas. Ofta kan det handla om att ett fält kräver en viss formatering. Låt besökaren få veta det isåfall.
• Vad händer när meddelandet har skickats?
  Ibland känns det som att kontaktformulär bara är en ventil till ett stort och rörigt cyberspace. När man skickar iväg ett meddelande får man ofta det korta svaret ”Tack! Ditt meddelande har skickats”, utan att egentligen veta vad som hände. Här är det viktigt med ordentlig feedback. Berätta för besökaren vad som gäller härnäst. Ett exempel kan vara ”Tack! för ditt meddelande! Vi kommer att höra av oss inom 48 timmar”.

Håll dig kort

Tänk på att besökaren ofta vill kontakta dig för en snabb fråga, exempelvis be dig återkoppla via telefon. De flesta har för vana att skriva vanliga e-postmeddelanden om det gäller viktiga meddelanden eller längre dialoger. Håll därför ditt formulär kort. Undivk onödiga fält så långt som möjligt. Exempel på onödiga fält kan vara ämne, samt två fält för för- och efternamn istället för ett.

Utnyttja de nya inputfälten i HTML5

Med HTML5 finns en del  nya inputfält som kan hjäpa besökare att fylla i rätt innehåll, inte minst på mobila enheter. Om man klickar i ett inputfält av typen nummer, dvs.

<input type="number">

så triggas mobiltelefonens numeriska tangetbord. I vissa webbläsare triggas också datumväljaren om man markerar ett fält av typen datum, dvs.

<input type="date">

Detta är ett snyggt sätt att hjälpa besökaren med formateringen.

Man kan också låta inputfält ha attributet autofocus som automatiskt ställer textmarkören där. Det man gör är att lägga till autofocus i sin HTML-tagg.

<input type="text" autofocus>

Ett exempel på detta är Google (även om de inte använder HTML5-attributet). När sökmotorns startsida är färdigladdad står markören i sökfältet och det är bara för besökaren att börja skriva sökord. Detta ger besökaren ytterligare handledning.

Detta var några tips på vad man kan tänka på när man strukturerar upp sitt formulär. När man har koll på detta, ja då kan man återvända till sin kreativa frizon.

I ett tidigare inlägg berättade jag om hur jag provade programmet Sketch, en vektorbaserad bildbehandlare med fokus på webben. Mitt tycke för programmet var ingen kortvarig romans, utan jag har fortsatt att använda det i flertalet projekt. Här tänkte jag berätta om några funktioner som gör Sketch så trevligt att arbeta i.

Griddsystemet

Griddsystemet i Sketch är något mer avancerat än i exempelvis Photoshop och Illustrator. Här utgår man från de griddsystem som man ofta ser på webben, nämligen de kolumnbaserade. Man kan ange antal kolumner, dess bredd och hur bred sidan ska vara i sin helhet. Dessutom kan man välja att hantera rader på motsvarande sätt, vilket helt enkelt roterar gridden 90 grader.

Den klassiska gridden, som man kan se i Photoshop finns också att tillgå. Där kan man välja griddstorlek och hur förhållandet mellan tjocka och tunna linjer ska vara.

Smidig hantering av sidor

Sketch är byggt med webben i åtanke. Därför har programmet en enkel, men ack så användbar, sidhantering. I det övre vänstra hörnet av arbetsytan finns en dropdown-meny som låter dig växla mellan de sidor som utgör ditt arbetsdokument. Det går att duplicera, döpa om och ändra ordning på sidorna.

När man är klar med sitt arbete kan man exportera alla sidor till ett PDF-dokument. Här skulle det dock behövas lite fler inställningar för att  det dokumentet ska fungera perfekt. De exporterade bilderna blir nämligen något stora om man har sin PDF-läsare ”utzoomad”.

Enklare verktyg för att kombinera objekt

I Illustrator finns ett bra verktyg som (åtminstone i min engelska version) heter Pathfinder. Där kan du skapa nya former genom att kobminera banor (paths) från två objekt, låta formen av det ena objektet bilda ett hål i det andra, osv.

Samma funktionalitet finns också i Sketch, fast den är enklare att jobba med. Här kan man nämligen redigera förhållandet mellan objekten efter att man har kombinerat dem.

När man använder verktyget i Sketch bildas det en grupp av de objekt man arbetar med. Gruppen bildar det nya objektet, men om man öppnar gruppen kan man fortfarande komma åt orginalobjekten. Man kan också i efterhand lägga till fler objekt i gruppen.

Om jag ska förtydliga med ett exempel kan du alltså skapa en fyrkant med ett hål i (visst låter det snyggt?) och sedan i efterhand redigera hålet eftersom det bara består av en cirkel. Du kan flytta, ändra storlek på det och lägga till flera hål genom att dra in fler objekt i den grupp som har skapats.

Är allt verkligen bra?

Nej, det finns en hel del som behöver förbättras i programmet. Det händer tämligen ofta att programmet kraschar. Av vad jag har märkt är det när allt för stora och många pixelbaserade bilder kommer in i dokumentet som det blir riktigt tungrott. Många gånger har jag tackat Apple för Mountain Lions fina autosparfunktion som låter mig fortsätta jobba där jag var, trots att Sketch har kraschat.

Det som dock är härligt med Sketch är att de ofta uppdaterar programmet. Den senaste tiden har uppdateringar kommit ut ett par gånger per vecka, vilket ger mig känslan av att de jobbar aktivt med att förbättra programmet.

Inom design brukar skeumorfsism vara en vattendelare. Somliga tycker att det är snyggt och praktiskt, medans andra avfärdar det som smaklöst och uppsvällt. Innan du bildar din egna uppfattning tänkte jag förklara vad skeumorfsism är.

Skeuomorfism är ett uttryck inom design som syftar till att man efterliknar ett redan känt objekt. Även om viss funktionalitet hos det man efterliknar inte behövs, så tar man med det som grafiska detaljer ändå.

Olika företag har tagit olika inriktningar i förhållande till detta. Apple är kanske ett av de företag som vanligen förknippas med skeumorfism. Det sägs att Steve Jobs gillade detta sätt att designa, vilket med största sannolikhet har påverkat utseendet på många av företagets program. Microsoft, å andra sidan, har markerat ett tydligt avstånd från detta med sitt nya gränssnitt för Windows 8. Här ska det vara minimalistiskt och enkelt.

Några exempel

Appen Paper från Fifty Three är ett lysande exempel på snygg skeumorfism. I visningsläget där man bläddrar mellan sina bilder efterliknar man effekten av att bläddra bland pappersskisser på ett snyggt sätt.

OS Xs inbyggda adressbok är ett annat tydligt exempel. Här låter man adressboken helt enkelt efterlikna en vanlig bok. Notera att man ser bokens bindning i mitten – en nödvändighet  i en riktig bok som har återgivits som en grafisk detalj i applikationen.

Fördelar

Ett återkommande argument för skeumorfism är igenkänningsfaktorn. Om du ser en applikation som liknar en kalender så är det rimligt att anta att dess funktionalitet också gör det. På så sätt kan man få användaren att känna igen sig och snabbt komma igång med applikationen.

Skeumorfism är också bättre på att förmedla känslor. När vi ser en textur som vi känner igen så minns vi hur det känns att ta på den. På så sätt kan man förmedla känslan av olika årstider, om det är varmt eller kallt, fuktigt eller torrt. Här kan det vara lämpligt att använda skeumorfism om man designar en webbsida för en viss produkt. Då vill man skapa en känsla som också väcker ett ”vill ha”-begär hos besökaren.

Många anser att det är visuellt tilltalande att använda skeumorfism. Jag kan hålla med till viss del. Om det används på rätt sätt (vilket kan vara svårt att definiera) så kan det verkligen lyfta en design.

Nackdelar

En nackdel med att låta designen efterlikna vardagen är att den ofta blir platsineffektiv. Det verkliga livet (om du tittar upp från skärmen) är inte begränsat i 1280 gånger 800 pixlar och därför har detta inte varit en fråga för verkliga objekt. Om vi återvänder till exemplet med adressboken så tar designen åt onödig plats för att återge formen av en bok.

En stor risk är att man bryter mot designstandard. Ofta finns det grafiska riktlinjer, inte minst för operativsystem. Med skeumorfism finns en större risk att man bryter mot dessa.

Slutsats

Skeumorfism är helt klart ett trevligt grepp, men det bör användas i rätt sammanhang och med måtta. Jag kan tycka att det alltid så hyllade Apple borde tona ner  användandet en aning. Ibland misslyckas även de. Öppna bara programmet Game Center så förstår du vad jag menar.

Vidare kan man fundera på hur länge metaforerna är aktuella. Jag som är 80-talist har aldrig använt en filofax i hela mitt liv och jag är ganska säker på att nästa generation inte heller kommer att göra det. Är det då rimligt att designa en kalenderapplikation som en filofax? För vem finns igenkänningsfaktorn?

För de som designar för webben är Adobes programserie Creative Suite troligen vardagsmat. Vi är många som har spenderat massor av timmar i InDesign, Illustrator och kanske framför allt Photoshop.

För egen del har det ofta handlat om just Photoshop, ett oerhört kraftfullt och kompetent bildbehandlingsprogram som få designers kommer att kunna växa ur. Utöver själva programmet är en rejäl fördel med Photoshop det stora antalet användare som har genererat mängder av templates, tutorials och fantastiska tillägg. Photoshops kraft och kompetens har lockat många – allt från webbdesigners till fotografer och konstnärer. Men varför är det så? Behöver alla samma funktionalitet? Behöver vi som ska designa webbsidor verkligen kunna lägga på ett sepia-filter eller simulera linsoskärpa på vår ”kontakta oss”-knapp? Svaret är naturligtvis nej.

Dessa funderingar fick mig att se mig om efter alternativ. Ett intressant sådant är programmet Sketch.

Vad är Sketch?

Sketch är ett vektorbaserat bildbehandlingsprogram för Mac med fokus på webbdesign. Funktionaliteten är ganska begränsad, men ofta räcker det. Många gånger handlar själva designfasen om att formge enklare element, som knappar och typografi. Mycket av det kodar man senare upp i ren CSS – och det är just kopplingen till CSS som är Sketchs ess i rockärmen.

Låt säga att du ska designa en knapp. I Photoshop brukar man då jobba med lagereffekter för att bland annat skapa skuggor och gradienter. Motsvarande funktionalitet finns i Sketch, fast i ett begränsat utförande. Här är de flesta av effekterna begränsade till vad man kan göra i ren CSS. Det betyder att mycket av designen går att koda istället för att spara ut som bilder.

Jag tänkte lista några funktioner som gör Sketch extra intressant.

Export till CSS

En funktion som har fått viss upmärksamhet är möjligheten att hämta själva CSS-koden från de element man har skapat. Som jag skrev så matchar mycket av det man gör befintlig funktionalitet hos CSS och ett snyggt funktion är att man kan högerklicka på ett element och välja menyalternativet ”Copy CSS Attributes”. Detta funkar ganska bra, men jag saknar exportmöjlighet till SASS.

Exportera retinaanpassade bilder

I Sketch jobbar man med vektorgrafik och en smart funktion som utnyttjar det är möjligheten att exportera bilder som är retinaanpassade. När det är dags att spara ett element i PNG-format finns en checkbox med alternativet ”Export @2x version”. Med det alternativet valt sparar Sketch ut två bilder – en vanlig och en i dubbel storlek.

Stilmallar för typografi

När man skriver text i Sketch så kan man tilldela den texten olika stilmallar. Detta enkla, men geniala knep gör att man snabbt kan definiera rubriker, brödtext och annan text. Om man sedan vill byta utseende på sina rubriker behöver man bara göra det på ett ställe, sen slår det igenom överallt.

På tal om typografi så kan det vara värt att nämna att renderingen av typsnitt i Sketch utklassar den i Photoshop. Detta genom den enkla detaljen att det faktiskt ser ut som det gör i webbläsaren. Typografin har länge varit dålig i Photoshop och det känns skönt att Sketch inte har samma problem.

Slutsats

Sketch känns som en kaxig uppstickare och på många områden är det en värdig utmanare till Photoshop, på vissa är det till och med bättre. Det är kul att jobba i ett program som fokuserar på webben. Att sidmallarna är anpassade efter mobiltelefoner och surfplattor gör att valet mellan pappersformat (A3, A4, osv.) i Photoshop känns förlegad. Programmet har fortfarande en del buggar och barnsjukdomar, men det är likväl en fröjd att arbeta i det.

Det är kul när det dyker upp utmanare till jätten Adobe, ett företag som egentligen inte borde ligga mig så varmt om hjärtat med tveksamma lösningar som Business Catalyst och Dreamweaver i katalogen.

Sketch är ett bra program, men det klarar inte av allt. Mycket av det som gör en bra webbsida är ett snyggt och genomarbetat bildmaterial. Här kommer Adobe troligtvis behålla ledartröjan ett bra tag framöver, även om uppstickaren Pixelmator kan vara värt att kika på.

En viktig faktor, som åtminstone kan tilltala småföretagare och privatpersoner är priset. Istället för de 6000 kr som man får pröjsa för Photoshop betalar man ungefär 300 kr. För den som vill testa programmet finns en kostnadsfri version att köra i 30 dagar. Den kan du ladda ner här.

Sista ansökningsdag för tjänsten har passerat. Just nu håller vi på att gå igenom annonser och kommer att uppdatera samtliga sökande så snart vi kan. Tack för visat intresse!

Vill du jobba på Uppsalas bästa webbyrå? Brinner du för samspelet mellan teknik och design? Då är Webbgaraget den perfekta arbetsgivaren för dig! Webbgaragets verksamhet fortsätter att växa och vi söker just nu efter en talang inom webbutveckling.

Ditt uppdrag

Som webbutvecklare på Webbgaraget förväntas du jobba med produktion av webbsidor. Du kommer att bygga dem i WordPress där allt från konfigurering av databaser till frontendutveckling ingår.

Du förväntas kunna HTML, CSS och Javascript. Det är meriterande om du behärskar WordPress, PHP och Adobe Photoshop.

Din bakgrund

Så länge du har en gymnasieutbildning i bagaget är det inte relevant var du kommer ifrån. Det viktiga är vart du är på väg. Du är inte rädd för att komma med egna idéer, plocka upp nya tekniker och gillar att utvecklas. Vi ser gärna att du är en ny ingrediens i den homogena mix som vi just nu består av. Du är engagerad och ser ett hårt arbete som en möjlighet att utvecklas, både som individ och i grupp.

Webbgaraget

Webbgaraget är en ung webbyrå i Uppsala som startades av tre ingenjörer sommaren 2008. Vårt fokus ligger på utveckling av sajter i WordPress, men också andra skräddarsydda system. Just nu är vi, i likhet med våra ambitioner, Uppsalas högst belägna webbyrå med lokal i Uppsala slott.

Som anställd får du ta del av den fantastiska gemenskapen där nyfikenhet och kreativitet är ledord. Vi sätter ett högt värde i att bygga en trivsam arbetsplats där alla är välkomna och idéer förvaltas.

Mer om tjänsten

Har du frågor om tjänsten är du välkommen att skicka ett e-postmeddelande till jobb@webbgaraget.se eller skriva en kommentar nedan. Övriga kontaktuppgifter finns på vår hemsida.

Tjänsten innebär en 6 månaders provanställning med möjlighet till tillsvidareanställning. Arbetet kommer att utföras i våra lokaler och lön betalas enligt överenskommelse.

Har vi fångat ditt intresse? Då hoppas vi att du tar chansen att fånga vårt. Skicka in personligt brev, CV och gärna arbetsprover och digitala meriter till jobb@webbgaraget.se. Vi anställer löpande och vill ha din ansökan senast den 18 februari. 

Det är alltid kul att designa knappar, ett litet element som sätter stor prägel på hur en sajt upplevs. I designfasen kan det ibland vara svårt att föreställa sig hur interaktionen med knapparna kommer att se ut i webbläsaren. I vanliga fall kanske man skapar några knappar i Photoshop, där var och en representerar ett tillstånd (hover, active, osv.). Sedan försöker man se framför sig hur en knapp i webbläsaren skiftar mellan dessa olika tillstånd. Jag tänkte visa hur man på ett smidigare sätt kan få kontroll över sina knappar – med hjälp av amimationer.

Animationer i Photoshop

I Photoshop finns ett verktyg för animationer, som vi kommer att använda för att simulera knapparnas tillstånd. Börja med att välja Animation ur menyn Window. Då kommer en panel med titeln Animation (Frames) att visas.

Med denna panel kan man hantera de bildrutor (frames) som utgör själva animationen. Precis som för lager så finns knappar för att lägga till och ta bort frames, samt också en enkel spelare för att växla mellan dem. Det man kan göra är att skapa en frame för varje tillstånd en knapp har. Men först ska vi skapa en knapp per tillstånd genom att duplicera vår ursprungsknapp. Låt oss säga att vi vill skapa CSS-tillstånden normal, active och hover. Då vill vi ha tre lager (eller grupper av lager) där var och en representerar ett av tillstånden. Skapa nu tre frames genom att klicka på knappen Duplicate selected frames

Nu kommer vi till själva kärnan hos tricket – nämligen att skifta synlighet för lagren. Markera den första bildrutan. Gör så att endast lagret (eller lagergruppen) för tillståndet normal är synligt, genom att ”klicka bort ögonen” för övriga lager. Markera nästa frame och se till att endast hover syns och för den tredje framen, gör så att bara active syns.

Nu kommer du få ett resultat som ser ut ungefär som denna bild.

Spara ut som animerad GIF

Det vi har gjort är att bestämma synligheten för varje lager, i respektive frame. Nu är det bara att redigera innehållet så att knapparna ser ut som du vill ha dem. När du sedan vill visa dem för en kollega, eller kund, som inte har Photoshop kan du spara ut bilden för som en GIF-animation. Genom att ange lämpliga tidsintervall för varje bild kan du simulera hur knappen kommer att synas på hemsidan. I detta exempel har jag låtit normal state vara i två sekunder, hover state i en sekund och active state i en halv sekund.

På detta sätt är det också lättare att demonstrera hur flödet i knappen kommer att vara utan att koda upp den.