Blogg


Tankar kring user experience, service design och effektstyrning

How to make great wireframes in Sketch

Alexander Skogberg

In recent years, Sketch has risen to one of the top vector graphics editors among designers. I use it several times a week at work and I love it! Here are my tips for making great wireframes in Sketch.

When I started working as an IT consultant in 2011, my designer colleagues all used different vector graphics editors. Today, almost everyone of them uses Sketch exclusively. If you're making wireframes, creating a style guide or drawing illustrations Sketch is the perfect tool! It's popular, not overburdened with features and costs much less than editors like Photoshop. Here are my best pieces of advice when making wireframes in Sketch.

Organize your screens with Pages and Artboards

As your wireframes grow, keeping all screens organized is essential for staying efficient. Hence, you should make use of Pages and Artboards.

Create a Page for each set of related screens

In Sketch, a Page offers a new blank canvas. There's no reason to put all of your screens on the same Page. Instead, create a Page for each set of related screens of the app or website your making wireframes for. If I was making wireframes for a website where you buy stuffed animals, I'd create the following Pages:

  • Assets (for logos, photos and so on)
  • Text Styles (for just my Text Styles)
  • Symbols (automatically created by Sketch)
  • Home page (for latest offers and news)
  • Category page (for different categories of stuffed animals)
  • Product page (for a specific stuffed animal)
  • Checkout page (for entering address and payment information)
  • Purchase confirmation page (for confirming the purchase)

The list of Pages. The Artboards for the Selected Page are listed in the bottom.

The list of Pages. The Artboards for the Selected Page are listed in the bottom.

On a Page, create one Artboard for each screen variant

Since each screen is likely to have multiple variants, I'd recommend creating one Artboard for each of them. All the Artboards you create are automatically placed on the selected Page. When you create a new Artboard you can set its width and height how you like, but Sketch also offers presets based on popular devices and screen resolutions. What a screen variant is, is up to you. I usually make variants for different screen sizes and for showing how the interaction design is supposed to work in detail. For the checkout page for the stuffed animals website, I'd create Artboards for the following screen variants:

  • No address or payment information entered
    • For small screens
    • For large screens
  • Correctly entered address and payment information
    • For small screens
    • For large screens
  • Incorrectly entered address and payment information
    • For small screens
    • For large screens

The Artboards for the selected Page are placed on the main canvas

When it comes to naming the Artboards, I recommend using the naming pattern name-number-modifier-size.jpg. Using this pattern, your team members are more likely to be able to identify the content of an exported Artboard without having to open it. Here are some examples:

  • checkout-01-default-small.jpg
  • checkout-02-delivery-address-search-small.jpg
  • checkout-03-correct-payment-information-small.jpg
  • checkout-04-incorrect-payment-information-small.jpg
Tip: Make sure an exported Artboard is identifiable by its name. A name like checkout-03-correct-payment-information-small.jpg is great, a name like screen21.jpg is terrible.

Make use of Text Styles

You'll be using text to some extent in you wireframes and when need to adjust the font size or change the typeface altogether, it's an enormous waste of time and energy having to do it on each and every screen. Luckily, Sketch offers the ability to save and reuse your design choices using Text Styles. Once a Text Style is saved it can be applied to new pieces of text. If you change a Text Style, it will affect all pieces of text using that Text Style. Whenever I start working on a new project, I create Text Styles for common pieces of text like:

  • H1 headline
  • H2 headline
  • H3 headline
  • Body text
  • Meta text (for dates, timestamps, input hints and so on)
  • Input labels (for input fields and groups of radio buttons and checkboxes)

I always put my Text Styles on a Page of their own so I can see them all at once.

Set up a naming convention

Just like web developers (hopefully) have a set of rules for naming their CSS classes, you should set up a naming convention for the Pages, Artboards, Symbols and Text Styles you'll be using. It's a good idea to use the same (or a very similar) naming convention that the developers are using. If you share your wireframes with them using tools like Zeplin, there will be less confusion and second-guessing if you all use the same names for the same components. For example, if your development team have named the CSS class for styling a website's primary buttons "button-primary" you should use that name instead of something like "call-to-action".

Tip: Imagine that your creating a naming convention for someone else and not just for yourself. Ask someone else if your terminology makes sense.

If you're looking for a real life example of a naming convention, have a look at the Trello CSS Guide or BEM.

Master the power of Symbols

Symbols is probably the best feature in Sketch. It's like Text Styles, but for all combinations of shapes and pieces of text. It's powerful and will save you a lot of time in the long run.

Tip: Save logos and icons as Symbols too.

For example, let's say you create an input field with a label and an input hint and want to reuse it on more screens. By saving these three elements as one Symbol, it's now stored in your library and can be used anytime you want. If your Symbol contains text, you can override the pieces of text for all instances of that Symbol. Changing the text (not its design) will not affect the other instances.

A Symbol of an input field with a label and an input hint. The pieces of text can be overridden for every instance of this Symbol.

If you later edit this Symbol, the changes will affect all instances of it.

Name your Symbols with slashes

Since you probably will create lots of Symbols, you should put slashes (/) in their names for organizing them neatly. When you put a slash in names of Symbols, Sketch will automatically create subgroups of them making it easier to find the ones you're looking for. I'd recommend using these two naming patterns:

  1. category/type/state
  2. category/type/variation-state
Tip: Stick to a maximum of two slashes so you only have a depth of three layers (that has worked best for me so far).

Here are some examples of named symbols based on these two patterns:

  • button/primary/default
  • button/primary/disabled
  • button/secondary/default
  • button/secondary/disabled
  • input/label/default
  • input/label/focus
  • input/label/disabled
  • input/labelandhint/default
  • input/labelandhint/focus
  • input/labelandhint/disabled

The subfolders Sketch creates when you put slashes (/) in the names of the Symbols you create.​

Create a library of common Symbols

Sketch offers common shapes like rectangles, circles, triangles and arrows. There's no need to redraw these, but you should use them to create common interface components like buttons, input fields, date pickers and modal windows. For example, I always create Symbols of common components in different states such as:

  • Buttons
    • Primary
      • Default state
      • Disabled state
    • Secondary
      • Default state
      • Disabled state
  • Checkboxes with text labels
    • Checked
    • Not checked
  • Radio buttons with text labels
    • Checked
    • Not checked
  • Expandable blocks
    • Not expanded
    • Expanded
  • Input fields
    • With just a label
      • Default
      • In focus
      • Disabled
    • With both a label and an input hint
      • Default
      • In focus
      • Disabled

There are lots of ready-made interface components you can download and use for free, but I'd recommend creating your own library. You'll learn more about using Sketch and end up with less unused Symbols.

The Symbols Page Sketch creates automatically when you start creating and saving Symbols.

Make your symbols responsive

When making wireframes today, you'll probably need to create different variants of your screens for different screen sizes. One variant for small screens, one for large screens and perhaps one for medium sized screens. This means you should set up your Symbols so that their layout don't break when you stretch them horizontally or vertically. Luckily, Sketch handles this excellently! For each element included in a Symbol, you can set up how it will behave when the Symbol is stretched using a control in the properties column to the right. Here are some of the settings you can make for a selected element in a Symbol:

Will stretch in any direction.

Will keep it size, but move with the same proportions to the sides, to the top and to the bottom.

Pinned to the top. Will stretch its width, but keep the same height.

Pinned to the top left corner. Will keep its size.

Presenting the wireframes

Some developers prefer having a look in the Sketch file directly, others prefer having your screens exported to images and some prefer tools for making clickable prototypes like inVision.

Tip: Treat the developers in your team like users. Serve them your wireframes the way they prefer.

If inVision sound interesting, please read my post Prototype like a pro with inVision.

Don't use layers in your Sketch files

Based on my experience working with developers, you shouldn't use layers on your screens in Sketch. I think this way of working used to be the norm when Photoshop reigned supreme. Most developers I've worked with find it annoying having to hide and show lots of (often poorly named) layers to learn how a screen looks and behaves. Instead, just use more Artboards for presenting the different screen variants.

Further reading

A lot of great articles have already been written about using Sketch. Here are my favorites:

Is there anything you think I should add, remove or change in this post? Let me know in the comment section. /Alex

96 % want to come back to FBTB

Sara Doltz

The speakers, the attention to details and the surprises, this is what you appreciated the most about FBTB 2017.

The most common feedback we get in the evaluation is that you love the speakers. We couldn’t agree more. Our conference chair handpicks all of the speakers; it’s truly their knowledge and inspirational talks that make the conference what it is to day. Here are some of the comments from last year:

Well organised as usual. Alexander Osterwald and Katie were best speakers. Magic performance by David de Leon was awesome too!

Very inspiring talks – themes like our responsibility as designers to create GOOD in this world was very inspiring.

Many good speakers. I especially liked Osterwald and the business perspective.

The variation of high flying and hands on speakers.

The speakers is the thing that makes the conference rock.

 

The details

We love how you pay attention to the smallest of details, because it’s nice for us to know that some of our smallest efforts are appreciated.  We like to treat you with some classic Swedish fika. Last year, instead of a gift to the speakers, we donated money to the Red Cross that financed a doctor in Syria. We also promise to keep our vegetarian lunch for this year’s conference. Here are some of the comments from 2017:

Big plus for vegetarian food as the default!

The fact that you gave doctor-gift to the speakers.

I loved the notebook :-)

Equal gender division amongst the speaker

For two years in a row From Business to Buttons has been held at Munchenbryggeriet. But last year some of you commented that the venue was crowded and the logistics didn’t work out perfectly – so we listened. For the first time FBTB will be at Cirkus in Stockholm. We are super exited about the venue and hope you are as well.

Surprises

As always we try to incorporate a little bit of extra excitement throughout the day. Last year you got a handful of magic as David de Leon, part-time magican, co-hosted the conference with Emma Estborn.

We also like to share some giveaways with the attendants; last year it was the Design Critique Card Deck and a branded Leuchtturm1917 notebook.

Afterwards, 96.1 percent of those who attended said they would like to come back again. Thank you all! We hope to see you again on May 15. Heads up: Get your tickets before February 28 and you'll save 1000 SEK.

Ari Ahokas, from fake teeth to UX design

Sara Doltz

”I applied to inUse because I wanted to be in an environment where UX is a priority”, says Ari Ahokas, new UX Designer at our Malmö office.

Ari Ahokas describes himself as a self-taught designer who made a career change after being a dental technician for ten years.

– I went from a very strange industry designing fake teeth to designing digital products—the two things couldn't be further from each other. I was raised in Raleigh, NC by my Finnish father and American mother—so Scandinavia was always a part of my life in some way or another. 

So, what made you apply for a job at inUse?

– I applied to inUse because I wanted to be in an environment where UX is a priority. It's very difficult to find an organization like that, but inUse is defined by UX being a priority. I was extremely impressed by the screening process and how fun it was. 

Tell me a bit about your previous work and studies.

– I have never really studied in a traditional way outside of high school, but I suppose we are always studying subconsciously by observing patterns of behavior and design in the world—so in that sense, I've been a student for 31 years. However, I will say that I love Treehouse, Lynda and Google :). 

– My work experience has been quite diverse over the years. When you work at small companies and startups, you have to sometimes be the jack of all trades. So I've done everything from branding, visual design and UX, to front-end web development.

What would your dream project be like?

– I've always wanted to build a full-fledged typeface for a large brand. 

Livscykeln på inUse – från första till sista dagen

Sara Doltz

Hur får du jobb hos oss?
Hur är det att arbeta på inUse?
Hur säger jag upp mig?
Här har du artikeln som ger svar på alla dina frågor.

Allt börjar, i de flesta fall, med en ansökan. Du kontaktar någon på det kontor du vill jobba på. Magnus Lif eller Sara Doltz i Stockholm. Mikael Aldman i Göteborg eller Linda Tolj i Malmö. CV är bra, ett personligt brev med nuläge och mål är ännu bättre. En portfolio är ju asgrymt. Och en dedikerad inUse-sång är sjukt häftigt. Men egentligen är vi som de flesta och vill veta vem du är, vad du gjort tidigare och hur vi kan mötas kring det.

Kanske är du AD, UXD, SxD, researcher, affärsutvecklare, projektledare, frontendare, strateg eller innehållsspecialist. Eller har du en helt annan kompetens som vi bara måste ha? Sök. Alltså nu.

....

Ser vi en match mellan oss så är det dags att ses och prata mer. Detta steg kallas för intervju – jag tror du vet hur det brukar gå till. Trivs vi tillsammans går du vidare till en screening, det är ett tillfälle för dig att visa upp dina kunskaper i ett arbetsprov. Hur det är utformat beror på vilken roll hos oss du söker. Efter det möts vi och du presenterar din lösning inför oss – vi blir antagligen så imponerande att vi står upp och applåderar. Du får buga, artigt säga tack fler gånger, samtidigt som du mentalt high five:ar dig själv multipla gånger.

Efter det går vi vidare till att prata avtal. Vi berättar om förmånerna, extra semesterdagar, våra inUsedagar där vi varannan vecka samlas och kompetensutvecklas, våra värden, att du får gå på From Business to Buttons, kollektivavtalet och att du får extra föräldrapenning när du är föräldraledig. Ja, och så din lön såklart.

När vi sen är överens så skakar vi hand. Signerar det digitala dokument och ta-da. Du är inUsare!

...

Så, nu börjar du på kontoret. Pling på dörren och där står din fadder. Hen finns där för att du ska komma igång och känna dig välkommen från dag ett. Hen hjälper dig med allt praktiskt, ser till att din handplockade utrustning finns på plats, tillhandahåller dig nycklar, passerkort, lunch och russelpengar (okej det där sista stämmer inte).

Efter ett tag på jobbet är det dags för introduktionsdagar. Då träffas alla nyanställda och fördjupar sig kring vision, historia och vad det innebär att vara en riktigt bra inUse-konsult. Du får också lära dig mer om Effektkartläggning och vi berättar om hur vi arbetar i våra uppdrag. Att vi nätverkar och hjälps åt i uppdrag och emellan kontoren. Sen är det lite administration … ja – det hör till! Till exempel: incheckning, uppstartsmöten, tester, projektledning, dokumentation från kund och vem som är ansvarig för vad.

Sen jobbar du. Med massor av spännande saker. Bilar, skrivbord, webbar, intranät, app för bank, kontrollrum, appar för barn och med pro-bono-grejer.

Du ger en kompetenslunch för dina närmsta kollegor, du åker till Tyskland för att göra användningstester, du åker tåg till Sveriges artonde minsta kommun för att se hur busstationen kan designas för att skapa ökad trygghet, du gör koncept för en app som sparar energi, du gör kundresekartor för en non-profit-verksamhet i Denver och skapar Effektkartor för en hel region. Och det är antagligen bara ett axplock.

Men till sist är du faktiskt 60 år och vill gå i pension. Eller så vill du sluta tidigare (låter helt orimligt, men ändå). Då lovar vi att ta hand om dig också. Om du vill tar vi ett Exit-samtal. Vi tänker tillbaka på tiden tillsammans. Du blir avtackad på det sättet du skulle uppskatta bäst. Glasskalas, fika, middag, AW, ost-frossa eller så krossar vi en Pinata tillsammans. Vi kommer sakna dig. Du kommer sakna oss.

Låter det intressant? Du vet vad du ska göra.

Kundresekarta styr arbetet framåt

Sara Lerén

I Göteborg Stad infördes ett system som ökade administrationen, istället för att förenkla arbetet. Kommunen tog hjälp av inUse för att ta ett tjänstedesignperspektiv. Arbetet ledde fram till en kundresekarta som är aktuell och visar upplevelsen, visionen och potentialen till förbättring. Ett perfekt stöd som ger vägledning i hur man ska prioritera i det fortsatta förbättringsarbetet.

Utmaning

Under 2013-2015 infördes ett nytt ekonomisystem i Göteborgs stad. Tyvärr ökade det nya systemet administrationen på stadens förvaltningar eftersom det var stora skillnader jämfört med det tidigare systemet. Under 2015 påbörjades arbetet med att effektivisera och förenkla arbetssättet för att minska den administrativa bördan på förvaltningarna. 

Ett led i arbetet har varit att ta fram processbeskrivningar. Den största utmaningen har varit att ta fram en processkarta som är relevant och användbar för alla stadens förvaltningar eftersom det är stora skillnaderna i deras verksamhetsområden och arbetssätt. Processkartan var därför tvungen att kunna användas av alla olika roller som arbetar med kundreskontran. Tanken var att den också ska fungera som beslutsstöd vid framtida förbättringsarbete.

Arbetet

inUse antog ett tjänstedesignperspektiv i arbetet med fokus på användarupplevelsen på stadens förvaltningar. Många olika typer av förvaltningar var inblandade för att säkerställa en god förståelse av helheten. inUse gjorde intervjuer och workshops med såväl stora som små fack- och stadsdelsförvaltningar. En enkät skickades ut till alla förvaltningar för att mäta upplevelsen av kundreskontrans olika delar och underlätta framtida mätningar av olika förbättringars effekter.

För att minska arbetsbelastningen på förvaltningarna genomförde projektet förbättringsåtgärder för att öka andelen korrekt betalade kundfakturor. Kampanjer för e-faktura och autogiro involverade flera olika kommunikationskanaler såsom webbsidor, pappersfakturor och papperstidningar. En ny design för fakturor och påminnelser togs fram, den hade fokus på maximal tillgänglighet både i digitalt format och i pappersformat. Designen kvalitetssäkrades genom användningstester med personer med olika funktionsvariationer, i olika åldrar och med olika modersmål.

Resultat

Traditionella processkartor visar ofta bara en idealiserad bild av hur arbetsuppgifterna i processen borde genomföras, men säger ingenting om hur det fungerar i verkligheten.

I detta projekt valde vi istället att illustrera förvaltningarnas upplevelser i en kundresekarta som kompletterades med detaljerade beskrivningar av delprocesserna med risker och förbättringsmöjligheter för varje delmoment. Denna typ av visuella beskrivningar ger en god förståelse för nuläget och underlättar arbetet med att prioritera förbättringsåtgärder för att nå ett önskat läge.

Länk till pdf-version av kundresekartan.

Vill du lära dig mer om tjänstedesign? Ta en titt på vår kurs i Service Design.