Knitted Keyboard II

Responsive Environments researcher Irmandy Wicaksono has developed KnittedKeyboard II, a multi-modal, soft, and stretchable electronic textile musical interface customized and fabricated with digital knitting and functional fibers

Mesmerizing Kinetic Sculptures

Rise of the Product Managing Designer

The design team at Skillshare does a lot more than just design. We’ve learned that to be as effective as possible we need to break out of our traditional role and own much more of the overall product process.

Not to say that the world does not need product managers, but by equipping our design team with skills like a deep understanding of business, operations, and analytics we’ve been able to create more impactful products at a higher velocity. Below are a few core competencies of a product managing designer.

Understand your company’s business needs and goals.

Product managers tend to have a handle on the big picture. They understand the inner workings of the business, its goals, and the focus of each team.

Without this understanding, it is nearly impossible to judge a good product idea from a bad one. Even worse still, you will be rendered unable to anticipate the repercussions of your decisions unless you consider how it relates to the larger whole.

It is critical for Skillshare’s design team to have a comprehensive understanding of the ecosystem and how each project will affect it. We do this by syncing on strategy with everyone who might have a stake in the game early and often. This happens well in advance of the formal design process. By aligning with the relevant teams, we are quick to understand how our strategy will be helpful or hurtful to them. For example, syncing with the content team on the tools they use to create classes informs what strategies we ultimately push and enables us to move forward confidently.

The Skillshare design team has gotten very good at choosing what strategies to pursue, and perhaps even more importantly, what doesn’t look like it will work, before we ever start designing.

Design doesn’t matter if it never ships.

Product managers are judged on their ability to get things out the door. This means they’re relentless when it comes to minimizing scope and sticking to a schedule in order to maximize their impact. They’re also great at taking a complex strategy and breaking it down into manageable chunks.

Because our product managing designers are responsible for strategy as well as timeline, we rarely design features that would take more than a week to build. That’s not to say we don’t work on big projects. It simply means that we invest upfront in working through how we can break a project down and get smaller pieces out the door (prioritized by impact). We quickly and effectively ship the “must-haves,” but will often deprioritize the “nice-to-haves.” This is a fact of life for a small product team, but the benefits far outweigh the negatives: 1) smaller releases are easier to QA and support, 2) much easier to iterate and 3) reduces product debt with bloated features that no one uses.

This way of working provides a strong sense of accomplishment for the product team. It also helps boost momentum companywide, since progress builds energy and keeps people excited. At Skillshare, we send a companywide email every time something ships out to the site. We believe it’s important to celebrate the wins.

Own the metrics and feedback.

Product managers tend to be an analytical bunch. Once something hits the site, they immediately start assessing its impact to see if the new feature in which they have invested so many resources is working properly.

Product managing designers need to be the same way.

At Skillshare, this means setting the right goals (realistic and measurable) at the start of a project during the strategy and alignment phase. We then loop back around immediately once something has launched and measure its effectiveness. We also keep a close eye on all other feedback sources, such as engaging with angry (or happy) tweeters or gauging user reactions with the help of our support team. Taking initiative to actively monitor results and then being proactive about updates is the only way to make a smart path forward.

This may all sound obvious, but it’s easy to ship work and forget about it. If you don’t actively reflect on your successes and failures, you will never learn what works and what doesn’t.

To dive even deeper into how Skillshare builds product, you may be interested in: Optimize Your Team for Impact over Speed or Golden Rule of Managing Up.

Motion Ui Design Principles

This blog is a quick look at some simple Ui motion design principles.  There isn’t too much documented about this area of mobile ui design and I thought there would be some value in expressing my views.   From what is documented already I urge anyone interested in ui motion to check out Pasquale D’Silva http://psql.me/ and Johannes Tonollo’s meaningful transitions http://www.ui-transitions.com/#home.  

Also make sure you bookmark http://littlebigdetails.com and http://capptivate.co.  (A special thank you to Capptivate.co who allowed me to use their captures below).   

These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation.  With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.  With the exclusion of skeuomorphic design there is now a freedom for content to behave in an unrestricted manner.  Gone are the awkward and sometimes absurd transitions that appeared to break all laws of their pre-defined physical environment.  Now the space has opened for there to be a much richer identity and defined language or landscape to mobile Ui and motion is very much an integral part of that.

Personality.

The most obvious principle is that any motion or animation should be of the highest standard possible.  Apps should look at going beyond “out of the box” motion solutions and making something bespoke and truly engaging.  Within the app the motion should convey a distinct character, whilst keeping a clear consistency throughout. Behaving in an expected manner will help maintain a stable relationship with the user keeping them engaged with experience.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Paper Makes use of a scale overshoot through out the app, giving it a clear and distinct character. 

 http://capptivate.co. https://twitter.com/CapptivateCo

Dots carries through a very relaxing inertia which is prevalent through all aspects of the Ui.  Again making it definable against other apps.  

Orientation.  

Motion should help ease the user through the experience.   It should establish the “physical space” of the app by the way objects come on and off the screen or into focus. It should aid the flow of actions, giving clear guidance before, during and after.  It should serve as a guide, keeping the user orientated and preventing them from feeling lost, reducing the need for additional graphics explaining where they are or have been.

 http://capptivate.co. https://twitter.com/CapptivateCo

Yelp shows a great example of drawing focus with a intelligent and well crafted animation.

Making keeps the user orientated when drilling down into a category with a simply elegant transition.

National Geographic keeps the user aware of where they are and have been with a good use of 3d perspective. 

Context.

Motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.  Without the restrictions of skeuomorphism the ui is free to behave in any manner with out seeming contradictory to its pre defined environment.   Adding a stretch or deform to an object or applying inertia to a simple list scroll can make the experience much more playful and engaging.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Responsive.

Motion should be responsive and intuitive.  It should react in a way that reassures the user, rather than surprises or confusess them.   The reaction of the ui, to a users actions, should be complementary and comprehensible.

 http://capptivate.co. https://twitter.com/CapptivateCo

Emotive

It should evoke a positive emotional response, whether that be comfort from a smooth scroll or excitement because of a well executed animation transition.

 http://capptivate.co. https://twitter.com/CapptivateCo

Restraint.

Steer clear of distracting or even confusing the user with too much animation, Subtlety is key.  It should be used to maintain or help focus.  Not take it away.  Also don’t over elaborate aspects such as screen transitions. This becomes increasingly frustrating to the user over time.  Or if they are simply left waiting for what seems like “forever”. (there are no examples of this as its a not to do - and i’m not in the habit of kicking peoples work in the nuts)

Source

14 Different Ways of Product Design

After my dribbble post with picture of a Diagram with very positive feedback and lot of questions, I was motivated to create this article about my process and what I’ve learned after 2 years of this journey.

It’s a bit hard to say that I’m always using this same process, but you can read it similar to an ideal process. I’ve divided this process into 4 parts — Pre-process, Work process, Post-process and tips for Productivity.

Pre-Process

1. I’m drawing

It doesn’t matter if it’s paper, a notebook or just a small piece of something. I need to share the ideas in my head. I need to put these ideas down where they can be saved and not forgotten. Consequently this means that I have some sketches on my bank statements, bills from restaurants, book covers etc.

Sketch of old idea

However, for me it is ideal to have something tangible, for example, on Moleskine. It’s always nice to go through these lists from time to time, look at my old ideas and try to reinvent or recreate something for this particular project or different idea.

2. Collecting Pictures

“An artist is a collector. Not a hoarder, mind you, there’s a difference: hoarders collect indiscriminately, the artist collects selectively. They only collect things that they really love.” — Steal like an Artist (Austin Kleon)

Another pre-process phase is the collecting of pictures, I do this everyday. There is definitely hundreds of styles on how to collect and view these images, however I particularly prefer old school style — Dropbox folder separate to different categories (Dashboards, iOS, Illustrations etc.). Then, when I receive an inquiry or project, I’m going through these images and I’m trying to find inspiration. Dropbox is pre-caching low quality previews of files so you’re able to list them without an internet connection.

3. Moodboard and Preparation

We have plenty of sites for inspiration — Dribbble, Behance, Pttrns, Pinterest etc. and it’s really easy to find similar projects like the one you have. Additionally, it could be a solution for a problem that you’re experiencing and you’re trying to solve.

So when I begin working on a new project, I always prepare a folder with — PSD, Screens, Inspiration and Resources folders. I’m saving everything to the Inspiration folder that I find on the internet and is related to this project.

It should be everything from swatches to full case studies from Behance. Yet it also could be pictures of attractive people if the app has users’ profiles. It sometimes happens that I don’t even use that folder but that’s different story!

Work Process

4. I don’t care about wireframes quality.

I’m not a big fan of spending half a year on wireframes. I also prefer it if a client has prepared wireframes.

A good client is one who has prepared his ideas on paper.

I’m taking wireframes as just more about understanding the purpose and not the actual final result. The final result matters about you and your UI / UX skills and ideas which you want to present. Wireframes can help with the imagination of how many screens you’ll need and what’s the client’s idea.

On another page of the wireframes is a nightmare for the designer in which someone wants just the replication of prepared wireframes and to use the right details from the wireframes. That’s monkey’s job not the designer’s. In this case, every designer would just quickly finish that job and run away from the project like Usian Bolt.

5. PSD — Big Canvas (back to the Illustrator)

When I started 7 months ago at Badoo, I saw how my colleague works (Hi Sasha!), I thought that he didn’t understand how Photoshop works. However, now I’m trying to get into this technique, and in fact this style make sense to me. It’s good to use this style when you’re working on something really big, for example, a web application or a rich dashboard.

Basically, I work with a big canvas for example 8000*5000 pixels. Furthermore, my work isn’t more than just creating one big UI kit. The work is much faster because you see every element together and I can easily see what’s happening in every state. Additionally, it is much quicker to make a screenshot for developers with a small flow or just one states for one thing.

6. All screens in one PSD

In another case, which is not that revolutionary or different. If I’m working on a mobile app I’m working in different extremes. That means — All screens are in one PSD.

In folder 14 is another 12 designs of graphs

I know in this case it will be better to use Sketch, which could be really helpful with work. But I prefer one instead of 40 because it’s hugely quicker, I can easily pick one element from a different screen and copy that to another folder/screen. So that means if I change the background or a few icons on the top bar, I don’t need to change hundreds of other PSD’s.

7. Folders and Etiquette

I’m a tidy person in every respect — I have one icon on my desktop, folders per clients, per projects. Every folder is structured in the same way as I mentioned before. The same as in PSD. Every of my PSD’s is nicely structured in every folder. I use the rule that if you have more than 8 layers in folder then you should create a new folder. I think about my PSD’s like I’m preparing them for someone else. I’m not a big fan of naming layers because you can easily go through my folders.

But lately I’ve started working with @LukášKus and he always complains that he doesn’t have these folders in AE. Therefore, a particular situation always matters.

If you would like to know anything else about PSD Etiquette you can look at this — http://photoshopetiquette.com/

8. Communication with friends

A network of people who can provide you with relevant feedback is something critical for me. I can easily do mini user testings and listen to what people think about these specific problems This usually opens the doors to other solutions and other points of view for these problems. I do these calls/tests as much as I can in every state of my project or screen. Moreover, it doesn’t matter who you are testing. It could be anyone, I prefer to combine two segments — people from the community, the UX designers and normal regular users. This is because you’re usually working on project for regular users not for designers and UX principals.

9. Diagram

After my client or I prepare wireframes, I prefer to take them and merge them in one PSD. Then I try to think about interactions, what happens when I click here or there. Usually, we find a lot of missing screens and additional errors which clients or I don’t realise, when I was thinking about just one particular screen when I was preparing wireframes. For me, it’s this pre-prototype phase which I don’t consider a double job. It’s actually also a visual overview of all the screens and the elements. When I’m working on 15+ screens project it’s hard to keep the same visual style across the whole app and I can easily break the guidelines.

3 different types of lines — first a normal line with the number of next screen. Second in app screen. Third — an external app or linkHow it looks with contentComplete overview

About style — I use the same style similar to a lot of designers, however instead of spending a lot of time with creating these lines across whole canvas, I use circles with the numbers of the next screen. It’s a little bit like gamebooks which I was reading back in the days, but it’s a better solution than creating of printed circuit boards. You can see more states on the picture.

I add a link for the Diagram PSD for a better understanding these diagrams(The iPhone render is done by GraphicBurger)

Post Process — Guidelines

And we are finally close to end of the process, the last part is the creation of the guidelines and the final check for visual consistency. It turns out for me like such an important part of the process for small and also for big projects. Usually, when I work on a big project I want to change something in this part of process and I’m never a 100% sure that I’ve changed every of these properties. I use these for myself and also for developers to be sure that they won’t use 50 shades of grey or 14 different sizes of fonts.

10. Colour Specs

The specification of colours is one of the first thing which I try to keep in mind. It’s really nice in these flat design age to keep as few colours as possible for the buttons and for text. It’s nice to prepare this in your PSD like a painter’s palette or like swatches in Photoshop, which is basically the same.

11. Typo Specification

One other thing which can remind you of the logo specification is the guide for text sizes and the weight of fonts across the application. Again, it’s good for developers, but also for your overview.

12. UI Kits

The UI kit is a really important thing if we are talking about consistency across company apps and websites. It’s also important when you’re working in team of designers or you have more front-end developers who work on that project. I can use a UI kit in way that I’m always taking these elements from UI Kits. Also the developers can easily see how this button will look on hover and they don’t need to ask about everything.

Note: I’ve realised that in big companies, it is a big problem that nobody has heard about these things and teams basically re-create these same CSS lines again and again. Then you realised that you have 3 different interpretations of one button in 3 different applications. So you can’t forget about consistency.

Productivity

13. Todo

My key aspect of tidiness is working with todo lists. It doesn’t matter what type of app or paper you use. I prefer Things by Cultured Code and sometimes piece of the paper. That feeling of completing lists is always great. I was possessed with accepting every project which ends up in my email inbox, but now I’ve realised that it is much too comfortable to focus on 1-2 projects and 100% focus just on these 2 projects and then go to another one instead of fighting with 5 different ones.

“If you chase two rabbits, you will not catch either one.” — Russian Proverb

14. Goals

It’s really nice to know what you want to achieve, but also don’t be too bound to them. I make goals for 14 days (like a sprint) and quarterly goals. Also, I try to set these goals in way that I can achieve some new experiences (for example: make my first animation in After Effects) and also keep working on current things (finish 2 Behance case studies).

And what else?

I don’t use a mouse, just a tablet, I don’t have Tools panel I have learned all keyboard shortcuts. For streaming Photoshop to iPhone I use Skala Preview and I want to learn After Effects and Sketch. For prototyping, I use InVision App for web projects and the newly MarvelApp for iOS designs. It’s quicker for me to work with a pen instead of dragging and swiping on the iPhone screen. I sometimes still work with PopApp for some early prototypes, when I have time on the Tube for clicking and dragging on Screen.

The last few words

It’s really hard to say that I will always complete and follow the exact process for each project, because I sometimes skip some steps or I start in Photoshop if I see that the design in my mind and I have an exact idea about that.

In companies where I have worked, I’m still not experiencing real feedback, user testing and these things where designers can profit and take and experience them for thinking about new projects or updates for the current one. Especially User Testings, these change the thinking about all the things and show us that regular users usually work in completely different ways than we expect.

The End

I’d be happy to hear about your work processes, which steps you usually take in your personal projects or your thoughts about additional steps in my process.

Source

Two Keys to Building a Great Product

In the product group at HubSpot there are two guiding principles to building amazing products, they come from David Cancel and he’s 100% right in my experience:

1. Be customer-driven
2. Show meaningful progress

Each of these means different things at different stages in the product lifecycle, but they are strong guiding principles from early stage research through MVP to mature product.

Here’s a starting point to think about how to lean into each of these principles, and a view of how that changes as a product comes to market and matures.

Pre-prototype

1. Customer-driven: Narrow your focus to your target go-to-market end user. Find where they spend their time, where their pain is. Watch them in their natural environment. 
2. Meaningful progress: Consider doing a minimum of X interviews, and/or defining the output as being the top Y painpoints to start addressing.

MVP

1. Customer-driven: Be insanely impatient to get an early working product in front of one user. That’s the hardest part, getting one person to the point where they would pay, or be seriously disappointed if you took the product away from them. super hard stage, from zero to one user. Then move from one user to ten, another extremely hard stage. Put your cell phone in the product, follow up with people as they use the product, and watch every motion they take using it. Start doing user testing as well.
2. Meaningful progress: Live and die by activated user count. From zero to one, and from one to ten. 

Growth phase

1. Customer-driven: The product team should directly support their customers. When applicable work with sales to understand how to iterate on *validated* learnings - not “all i need to close every deal is XYZ” requests but actual records of painpoints, blockers, competitive landscape, potential for product differentiation, shortcomings against existing solutions, etc. It helps here to have consultative sales folks who don’t do “feature dumps” but rather do a great, scalable job of customer pain discovery. If product/dev can overhear these conversations some magic can happen :)
2. Meaningful progress: Measure, chart and distribute to the team: active users, activation rate, recurring revenue, net churn, referral loop, tickets/customer (whatever makes the most sense as a yardstick for product/market fit). Company demo (monthly) of new features LIVE for real customers, not mockups or qa.

Mature product

1. Customer-driven: Record and distribute top support inquiry drivers, measure decrease in these drivers month over month. Heavy use of user testing to optimize the core flows and usage patterns in the product.
2. Meaningful progress: Measure, chart and distribute to the company: tickets/customer, call drivers (and delta month-over-month), uptime/availability, performance/speed. Continue company demos, include performance improvements in addition to features.

Hope someone out there finds this useful, it’s been a breakthrough for me and my colleagues to embrace these principles and to dive deeper and deeper on both.

Nostalgia: A Product Designer’s Secret Weapon

Remember pogs?

Remember Tubthumping?

Remember Nickelodeon GUTS?

Now pause…

How do you feel right now? Did reading those words stimulate any emotional reaction? Did it bring back memories? Excite you? Make you smile?

Nostalgia is powerful. Simply mentioning the names of childhood toys, old TV shows, classic video games, and other pastime activities often instigate an emotional response, reminiscence. But why? Why is nostalgia so compelling and how can product creators use this to build more engaging products?

The Influence of Nostalgia

The term nostalgia was coined by 17th century physician, Johannes Hofer, based off the Greek words nostos (return) and algos (pain). He prescribed nostalgia as a mental illness, attributing it to Swiss soldiers’ symptoms of anxiety, homesickness, insomnia, and anorexia. Hofer believed“continuous vibration of animal spirits through those fibers of the middle brain in which impressed traces of ideas of the Fatherland still cling,” was the cause of these ailments.

Since then, we’ve acquired a better understanding of nostalgia, now defined in the Oxford Dictionary as “a sentimental longing or wistful affection for the past, typically for a period or place with happy personal associations.” Nostalgia generally instills positive emotions of happiness, social connectedness, confidence, and optimism of the future. When feeling down, people seek nostalgia to raise their spirits. Dr. Clay Routledge, a Professor of Psychology at North Dakota State University, posits that “nostalgia increases positive mood, perceptions of meaning, and a sense of connectedness to others. Thus, people may naturally turn to nostalgia if positive mood is threatened, a sense of meaning in life is undermined, or feelings of social connectedness are compromised.”

Negative emotions are powerful triggers, influencing our behavior. Feelings of loneliness, boredom, or insignificance prompt people to browse their Facebook feed, search for a match on OkCupid, or send a photo to a friend on Snapchat. People turn to these services, often subconsciously, to improve their mood. In one study Dr. Routledgeexamined the effects of music-induced nostalgia, playing popular songs and providing lyrics to participants. Those exposed to the music were more likely to report that they felt “loved” and that “life is worth living” than a control group.

Routledge further explains, “[Nostalgia] is a psychological resource that people employ to counter negative emotions and feelings of vulnerability. Nostalgia allows people to use experiences from the past to help cope with challenges in the present.” Smart product designers and marketers recognize the influence of nostalgia, integrating it into apps and services we use every day. Here are a few products that use nostalgia to spark engagement and build compelling experiences.

Timehop

Nostalgia is a core component of Timehop’s design. Each day the service revives past status updates and photos shared exactly one or more years ago. Instantly, memories resurface as these shared moments encourage people reminisce with friends and family.

The other day Timehop resurfaced this photo:

This was from an incredibly fun 80’s KOFY TV Dance Party, two years ago. Instantly, I shared this with my friends to reminisce.

Heyday

Heyday uses a similar approach, reminding users of the past. But it adds another dimension: location. Last month when I visited my hometown, I received a delightful push notification from Heyday, prompting me to “Look back at your photos shared in Eugene, OR.”

Using the location data stored within the photo, Heyday generates a historical map of one’s travels to surface delightful, contextual memories from the thousands of pictures stored on my iPhone.

Facebook Year in Review

Facebook amused the world toward the end of 2012 with a special year in review, surfacing the 20 most popular posts in one’s timeline. People enjoyed the digital scrapbook, reviewing and sharing memories of the past year. Facebook repeated the successful campaign again at the end of 2013.

Visit your 2013 year in review and observe your emotions and behaviors. Does it make you smile? Are you compelled to comment on these memories? This nostalgic look-back also helps communicate the value of Facebook as a destination to store and relive memories the following year.

Mindie

As Dr. Routledge’s research shows, music has remarkable nostalgia-inducing powers. Mindie, a mobile app to watch and create 7-second music videos, leverages this potent power to quickly deliver an aha! moment, hooking users on day one. Browse the feed of user-created videos to listen to the classics or create your own, selecting your favorite song from yesteryear, surfacing memories and nostalgia.

Polar

Polar, a mobile app of visual polls, covers a wide range of topics from current day politics to modern memes. But many of its most engaging polls, as found in its feed of top submissions, are based on old pop culture references and childhood activities like:

• Who’s cooler? Marty Mcfly or Ferris Bueller.
• Favorite Pokemon Tourney: Round XY-Finals? Dedenne or Mega Absol.
• What game did you play? Hide and Seek or Tag.

Boya

Boya, a new product from the folks at Monkey Inferno, thrives off of nostalgia. After registering any account, users are prompted to describe themselves, entering things they’ve done.

These shared experiences ignite conversation as community members ask users about their experiences, further digging into the archives of the brain.

Foursquare Timemachine

In the summer of 2013, Foursquare Timemachine, hit the internet, igniting a wave of attention in the press and social media.

People loved the data-rich, interactive map of their check-in history. My memories moving from Portland to San Francisco was most notable for me, marking a new chapter in my life. Others reminisced of past vacations as the map traveled across the world.

Glimpse

Glimpse, a dating app that uses Instagram photos to express oneself, creatively uses nostalgia in its on-boarding process. When first signing up, it prompts users to login with Instagram and select nine photos to express one’s personality.

Browsing years of beautiful photos from the past is delightful and although it’s not core to the product, the experience is fun and engages users when they’re most susceptible to churn, before they’ve recognized the value of the app.

---

Be it a one-time marketing tactic like Foursquare’s Time Machine or core part of the product design like Timehop, nostalgia is a powerful tool to re-engage users and create compelling experiences. Consider how you can use nostalgia to:

• Promote your product and provide interesting content people want to share
• Deliver an aha! moment on day one, encouraging users to return
• Build sustainable value and delightful experiences by making people feel good

---

To learn more about product design and influencing user behavior, check out Hooked: How to Build Habit-Forming Products and subscribe to receive the first chapter for free.

This essay was originally published on Pando.

Source

Stationery required to design software

My software design training (as much as it could be called that) was in a mixture of strategic design thinking and graphic/communication design. 

I ended up designing software by a mixture of choice and accident. After a foray into management consulting with a design twinge at Engine, I’ve ended up spending the last seven years involved in different kinds of software design companies at EMC Consulting, Sidekick Studios, and now Makeshift.

Along the way I’ve been lucky enough to work with some amazing software engineers, and very talented interface designers who’ve introduced me to many useful digital tools to help me design better software includingcode management services,  product management apps, wireframing softwareand interface design things. 

The non-digital toolkit

But, as my digital toolset has evolved and grown, one part of my design toolkit has remained pretty static and actually become more refined - the stationery I use.

Now physical bits of stationery are not the first thing that come to mind when you think about designing software, but in my experience printing stuff out, drawing and talking as a group around a design are essential to collaboration and new ideas. And if you are going to physicalise your digital designs, you should use the right tools.

twitterfacebookemail

“Physical bits of stationery are not the first thing that come to mind when you think about designing software”

So, here’s my list of stuff that I use, and some notes on what I use it for. Below I’ve taken a picture of my full toolset, and I’ll go through each one in turn. I’d love to get your feedback on these choices and what you use.

Pens.

There are only two pens I need. PaperMate Flair in black and red, and standard Sharpie in black. I use pens for writing, of course, and for drawing simple wireframe interfaces - the PaperMate Flair is best for this, and the sharpie is best for writing on Post-its. The sharpie is also great for highlighting bits of interfaces. 

I find these two pens give me the full range of line quality I need. I can go to a pretty high resolution, but also keep things open and indeterminate in order to invite feedback. A note on pens not to use: Biros - no. Not clear enough. Other colours - no. Unnecessary distraction and they don’t show up on coloured Post-its.

Paper.

A3 and A4 + cheap sketch books. That is all the paper you need. I like to take a big stack of new paper when I sit down to do interface sketching, as it makes it feel like there’s lots of potential. 

A3 is best as you can draw a reasonably ‘screen sized’ box, but still have space for annotations or a smaller mobile view concept. I’ve finally settled on the 99p sketch books (ruled, squared or plain I don’t mind) as I draw so many big pointless doodles that Moleskines felt totally over specified.

twitterfacebookemail

“Sketching interfaces on paper is an essential part of software design”

I think that sketching interfaces on paper is an essential part of software design - its often where you come up with really new ideas, and its also the only place you can really conceptualise an entire app in one go (this normally requires sticking stuff on the wall).

Record cards.

These are essential to designing software. I use the 6” x 4” and 3” x 5” record cards for all sorts of things, but mainly for writing tasks / to do items for sprints (we then pin them on to large foam boards). They are also really useful for drawing tiny low resolution screens to illustrate key information required during stages of a user journey.

Post-its.

Only use Post-it branded Post-its. Cheaper Post-its are a false economy - they fall off the wall, and the colours are annoying. I prefer the warm neon and cool neon sets (I’d pick warm over cool generally) as this gives you a good range of colours to play with. I generally like to have all four main sizes available - tiny, square, letterbox and the ‘super sticky’ large size ones.

Cutting and sticking.

Once you’ve drawn your wireframes, printed off your graphics ideas you have to stick it all on the wall. 

Sticking things on the wall is a very important part of the design process - it gives you a huge canvas to visualise large flows through an app, lets you identify visual design inconsistencies and provides a way to get a group of people to feedback on an idea via notes, post-its and so forth. 

I like to use scotch / magic tape for connecting together pieces of paper, and then use coloured artist tape to highlight things or draw large grids on the wall an so on. Its also helpful to have a cutting mat, and a scalpel to hand.

twitterfacebookemail

“Sticking things on the wall is a very  important part of the design process”

Making it real helps make it better

In addition, sticking stuff up is just a great way of ‘socialising’ ideas around a company - the value of having something that people can see is huge, as it gives them something to ask you about. 

It’s often the ‘what are you working on’ unexpected conversations that lead to the big ideas, and having stuff up in and around your team’s space is a big catalyst for these moments.

So, that’s my stationery stack. What’s yours? Let me know on Twitter, and if you liked this post sign up for our newsletter below to get more of the same in your inbox once a week.

Source