My favourite pens for UI/UX sketching

image

It was only until recently, when I delved a bit deeper into the pen world, that I realised it was a diverse universe with passionate people interested in cheap off the shelf pens. Once you start investigating something seemingly banal, picking up a Bic disposable will never feel quite right ever again.

I choose pens based on five factors:

  1. How smooth the ink flows
  2. Vibrancy of the colour
  3. How comfortable it is
  4. How much page bleed through it causes
  5. How aesthetically pleasing it is (I am a designer after all)

image

Whether I was aware of it or not, I’ve been testing pens for as long as I remember. I always had a favourite pen for short time and then found something new I’d use exclusively. I’m no expert, but I do know what I like, as I’ve put the doodling hours in.

I’ve tried every variety of pen from expensive fountain pens to Sharpies. Fountain pens often seem like the logical choice for sketchers, they have a cache attached to them. Maybe it’s my lack of skill, but I never got used to the feel of them and found them awkward to use. Aesthetically, they do look the part though, so I really should have a few lying about!

I don’t like popular copics at all either. They don’t feel right to me, maybe they don’t suit my style of sketching, which is more layout doodle and grid based. I also find I destroy the nibs too easily, as I tend to put a lot of pressure while sketching. I’m can be an angry sketcher.

What I choose are plain off the shelf Gel pens. They are plentiful, affordable and pleasant to work with. Together with good Moleskine paper, I’ve never considered anything else.

Here are my top three pens for sketching or simple note taking.

image

Pentel EnerGel-X

It has an amazing deep black line. Very smooth although it can smudge if not allowed to dry and it can bleed a little if too much pressure applied. This is where my other two pens excel. It is comfortable to hold, because of a rubbery plastic grip, which is not too fat. It also looks great.

image

Muji .7 Gel Pens

Inexpensive and solidly built, although you could say it looks a little cheap. They are extremely smooth, with very little clumping of ink. They come in a large variety of vibrant colours. It is comfortable to write with and absolutely no bleed. I usually use these in combination with other pens for colour shading.

image

Uni-ball Signo Gel Grip

This is my favourite pen. It’s my favourite because of it’s smoothness. It also has the least bleed through on the page of any of the pens I’ve tried. Very comfortable to hold and very attractive looking. I’ve been using these for awhile now and I have used the alternative version, the Signo 207, cheaper looking but similar flow. The black tone is very good, slightly less vibrant then the EnerGel but a superb everyday sketch pen.

Pen addiction is an ongoing process and I’m sure to discover another pen to use soon.

Birth of Modern Music. Sketch for poster series.

Saul Leiter is possibly one of my favourite photographers. He took this stunning image of Jean Shrimpton for a British Vogue in 1966.

Final part of the quote:

When we do not know why a photographer has taken a picture, and when we do not know why we are looking at it, all of a sudden, we discover something that we start seeing.

It’s difficult to prove if this quote is verbatim, as there are different sources and versions doing the rounds. But for me, it sums up his philosophy nicely.

Kubrick at his most clinical and wonderful.

You can’t fight in here! This is the War Room!

image

Dr. Strangelove is arguably Kubrick’s finest movie. What really sets it apart is Ken Adam’s set design for the war room, which is perfect in its simplicity. Aside from his lavish work on the early Bond movies, this is possibly the greatest film set ever designed.

image

Beckett’s not fucking me about

image

I love what Harold Pinter had to say about Samuel Beckett, as it sums up everything we need to know about him in Pinter’s own inimitable style.

“The farther he goes the more good it does me. I don’t want philosophies, tracts, dogmas, creeds, ways out, truths, answers, nothing from the bargain basement. He is the most courageous, remorseless writer going and the more he grinds my nose in the shit the more I am grateful to him. He’s not fucking me about, he’s not leading me up any garden path, he’s not slipping me a wink, he’s not flogging me a remedy or a path or a revelation or a basinful of breadcrumbs, he’s not selling me anything I don’t want to buy — he doesn’t give a bollock whether I buy or not — he hasn’t got his hand over his heart. Well, I’ll buy his goods, hook, line and sinker, because he leaves no stone unturned and no maggot lonely. He brings forth a body of beauty. His work is beautiful.”

Classic movie posters: World on a Wire

image

World on a Wire was Werner Fassbinder’s seminal 1973 film about the impact of computer-created virtual reality.

Designed by Sam Smyth.

The lean designer

image

I use very few tools to get my job done as a designer. I have kept a log of what I use over a three month period, to analyse how I work. Over this period I’ve tried many apps and processes to try and make life easier, yet I come back to a few essential coding and design tools:

Muji pens (lovely flow to them) for sketching in my Moleskin squared and dotted notebooks. I’m aware of the ‘Mr Designer with his Moleskin’ stereotype, but there is simply nothing as comfortable to sketch in as a soft cover Moleskin.

Coda 2 has been my code editor of choice for many years. Simple, clean and the integrated FTP works well.

CodeKit for compiling Sass files and many other wonderful things to make my day more efficient.

ColorSchemer for creating colour schemes, something I seem to do on a weekly basis. I’ve been using this since it came out around 2007.

Photoshop for site mockups and photo editing. I rarely use it for creating web artwork like buttons etc, as I do this all in CSS now.

Illustrator is used mainly for creating SVG icons, infographics and cartoon characters.

I’d love to know what other designers regard as their essential toolkit.

Here are my three ages of tech.

At the dawn of modern computing, positions were normally held by mathematicians, physicists and engineers. While these disciplines are still core to tech, it’s a much broader universe now than those early pioneers could have envisioned.

Designing in the browser was bad for me

image

About five years ago I had a sudden realisation; my design process was wrong and outdated. I was wireframing and then jumping into Photoshop to build out the look and style of a site, where I should have been doing this in the browser. Yes, designing in browser was the sensible thing to do. It was revelatory moment and I could suddenly feel free of the constraints of the pixel, less in inclined to perfection, and therefore designing for pure function. Every client could now see what I was creating in an instant.

At the time, I had read Andrew Clarke’s words about designing in browser and taken it as gospel. Then I remember a wave of designers started commenting how this method was the only good way of getting a practical working solution to a website. It was a way of letting go of the ‘artifice’ that can distract from good user experience. And I was receptive to this philosophy. Maybe it was because I was bored with using Photoshop or maybe it felt quicker to start with code. I am not sure.

At the time, I had read Andrew Clarke’s words about designing in browser and taken it as gospel. And I was receptive to this philosophy.

Designing in the browser then became the responsible way to design if you were a ‘web’ and ‘UX’ professional. Having mild OCD, I had to pick one design process over another, so I chose designing with the browser as my canvas with a unfathomable ardour and stuck to it. 

My workflow had refined over the intervening years. My design process has been one of paper prototyping, sketching in my notebook, then wifeframing in Balsamiq, creating the low res HTML prototype and then developing the final version in code.

I felt happy with my process, it felt stable and logical, yet I was constantly nagged by the feeling that something was missing.

Not so long ago, I was asked to create a dashboard design for an app. All they needed was a visual, no code. They had good wireframes to go on too. This was the first time for what seemed like years that I had be asked to create a purely visual design for web. It was an odd moment. How was I to start this project? I now had to work with Photoshop, but this didn’t feel like the correct way to start with a web project. Wasn’t Photoshop just for designing the frills after the refined layout was in place? So I began my design.

I think I was terribly wrong about my assertions. Blinded by the good intentions of ‘superstar’ designers who I followed religiously back then.

At that moment, I had another sudden realisation. Maybe designing in Photoshop and not directly in the browser was something I had missed. It felt strangely liberating. Where once I had the limitations of CSS, now I had a full artistic toolset to render what I really wanted. Not constrained by fighting with positioned elements and floats.

What just happened?

I think I was terribly wrong about my assertions. Blinded by the good intentions of ‘superstar’ designers who I followed religiously back then. Now I am only speaking for myself in this, so don’t all start calling around and trying to burn the heretic.

I now think the ‘browser’ method is flawed for me, to a degree that could have wasted potential in some of my work. Designing in the browser is in essence an excellent method; design with function in mind, quickly prototype and change if necessary. Doubtless the biggest advantage is that you can view the behaviour of effects. Yet for all this, it was missing the crucial element for me, namely ‘inspiration’. 

I have found that the options I choose now are far greater when it comes to designing in Photoshop or Fireworks. It allows me to find more possibility in a design. I can test visual ideas quickly, I’m simply talking about visual ideas, not behaviour.

What I felt I had lost was a sort of visual craftsmanship and I wanted was to become a ‘visual’ designer again.

When designing in browser, I was continually trying to improve things yet not really changing anything. The efficiency of coding has the advantage of seeing everything instantly, but it was holding me back from considering there may be more possibilities in the design because, the layout looked good, and it’s nearly built, and it’s functional, so why mess with it?

What I felt I had lost was a sort of visual craftsmanship and what I yearned for was to become a ‘visual’ designer again. I was always thinking about the function to the detriment of everything else. 

Yet this comes with some issues of course. Photoshop mockups become unwieldy, eye strain from trying to locate hidden layers abound and of course you are unable to test behaviour.

I still use my old process; paper prototyping, then low fidelity HTML mockups, but I now I complement this with something visual. And as usual, when the development code starts flowing, the static visual gets relegated to a blueprint, yet at least I feel have started with a vision.