Less

Glamorous

Elements

of Design

Hello, I’m Brett 👋

I’m a designer and front-end developer at Pin Payments, and a co–organiser of Mixin.

Tonight I’m here to talk to you about what I’m calling the “less glamorous elements of design”.

What do I mean by “̵Less Glamorous Elements of Design”?

I’m not referring to clients from hell, who always want their logos to be bigger...

Nor even the so called dribbbilisation of design...

Well, not exactly...

There are many different types of designers, but for designers in our own industry, I often feel this palpable sense of anxiety and uncertainty due to the many differing expectations placed upon designers.

So who’s seen this great philosophical question of our decade, posited by the greatest thought leaders on Twitter and Medium?

These questions, and others, in varying degrees of sincerity, to me, plainly indicate that there are many varying ideas and expectations around what designers in our industry should do.

Why is that, though?

Well, obviously there are various role. Here are some current titles — next week there’ll be new ones.

But when I see dozens of roles, and all this terminology I feel like the industry is getting awfully fragmented, and I wonder if it needs to be this way...

Could the fragmentation around roles actually be a symptom, not the cause of varying expectations?

Our industry is largely self-taught, I don’t think that’s controversial to say.

The reason for such prolific self-learning in our industry is that it moves fast. It can feel like traditional curriculums aren’t relevant for the work we do today.

And because of that, expectations and ideas about what we should do change all the time.

And the existing fragmentation of roles further reinforces expectations and ideas about what we should do.

And depending where you enter the industry from, it’s plausible you may unconsciously be guided towards learning some things, and overlook things that may be useful for your career, just by the role you enter in to.

I want to talk a little more about all these. Starting with the self-learning in our industry.

Part of the problem is that curriculums can feel outdated or irrelevant. Perhaps institutions have caught up in recent years since I was at university, but that’s certainly how I felt at the time, and with the rate of change, I could easily see it being worse now.

I hear a quality which university is good at instilling — regardless of curriculum — is self learning.

But without a solid curriculum, we have no guide for what to learn.

How do we learn, and what do we learn? It should be a deliberate decision.

There are things we know we need to learn, which we currently don’t know. In design, that’s often glamorous, visual design which we can identify as technical skills we need to practise.

But it’s the things we aren’t even aware we can learn that’s really insidious.

Because what you learn should be a deliberate decision.

But you cannot do this without all the information.

So I’ve been speaking in abstract for a bit. Here’s my experience learning design.

Which brings us back here. Now I love Dribbble. I promise this isn’t a rant on dribbbilisation of design. This is in fact what got me excited about design. Nice looking, shiny pixels. So glamorous!

To fourteen year old aspiring designer me, this was the pinnacle of design. It was enthralling, I saw these amazing looking designs and I wanted to do it too.

Actually, back then, Windows Media Player and Winamp skins were my aesthetic. And userbars — shoutouts to silkscreen.ttf, and web 2.0 gloss, diagonal stripes etc…

So back in the day...

So here’s a dramatisation of the day my journey in designer education began, one afternoon after school when seeing flashy graphics on the web, and opening a Firefox 2 browser to google it.

And so, thanks to a knack for Google, I ended up teaching myself design — or so I thought of it — through series of 16 step psd tutorials and the like.

And this is where a problem arises.

Now this is a slightly exaggerated example, but when it comes to self-learning...

Google is only a great way to learn what you already know you need to learn.

The superficial qualities of design and the technical skills I’d need to develop.

But there was so much process and technique I should learn that was invisible to me.

Enter Jesse James Garrett. He has written a lot on the topics of user experience design, including a book entitled “The Elements of User Experience”.

I became much more familiar with Jesse’s work at my current position, when we looked at how to make our design process more explicit.

And specifically, this diagram. Here is something that didn’t come up in my google searches while learning design. I didn’t know the combination of magic words to bring it up.

Now this diagram looks quite complicated, but it’s a brilliant encapsulation of much of what we do, and is still relevant now.

I just want to start off with this quote here:

The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application.

Or to put it another way, sometimes we design websites, sometimes we design applications, and the process differs between the two.

Now as unremarkable as this statement is in 2017, this diagram was conceived in 2000...

Eight years before the iPhone had an app store, seven years before the iPhone was released, six years before Twitter, four years before “The Facebook”, and three years before MySpace.

This predates so much of what we consider when we think contemporary product design, yet it still holds a lot of value and insight.

In fact, if we look at the labels on the elements, we have both an instructive curriculum of design skills to practise, and a design processes for websites and applications to refer to.

A simplified version of this diagram exists. Looking at this diagram, I notice a few things.

Firstly, it seems to me that there is a progression of specialist skills as you move through the elements. Most people can draw up high level goals or objectives.

But as you go through the layers, more technical and specialist skills emerge.

I feel the topmost visual layer is a common entry point to the industry for many designers — it’s certainly how I entered the industry. It starts with an appreciation for the aesthetics of Design, it’s what gets us excited and our foot in the door.

As we become immersed in the industry and gain experience, we naturally start to see and appreciate skills and techniques less appreciable from outside the industry.

As such, I want to talk a bit more about this section, right in the center.

The surface layer is the easiest to appreciate. From outside the industry, you can recognise the technical skills required to produce aesthetically pleasing work.

But this structure layer as a proficiency, was all but invisible to me as a beginner, starting out, and I feel one of the most easily overlooked, not just by me, but by many.

Jesse refers to the tasks in the structural layer of design as Interaction Design and Information Architecture when designing apps and websites respectively.

And again, Jesse has a useful framework for this layer.

Which he refers to as a visual vocabulary.

Oh, like a site map?

Basically, yes! But much more than that.

The vocabulary describes a wide library of symbols which are used to represent a user’s journey through an application or website.

And the various possible conditions and relationships between pages and states.

So this visual vocabulary framework allows you to quickly ideate and iterate on the user’s journey through a website or application, without having to produce high fidelity mockups or prototypes.

It requires absolutely no technical skills to apply. It’s a vocabulary anyone can learn — anyone can draw boxes and arrows.

And because of this, it allows for this stage of design to be a very inclusive process. Developers, project managers, and other stakeholders, can all use this framework to relate to the project, without a sense of not being qualified to contribute due to lack of technical skills.

Maybe that set a red flag off, are we designing with a comittee?

No. I think of it as designing with context.

Ultimately, designers are still responsible for synthesising from other stake holders. There’s a difference between having more context and delegating decisions.

Bringing on developers and other parties allows your design process to be informed by other perspectives, allowing you to design more robust products and websites.

Even outside a team scenario, being familiar with these frameworks will allow you to make your design decisions more efficiently.

And at the right time. Too often I’ve found myself mulling over high level design decisions while making pixels shiny.

At this point, I really should jump away from a visual design tool or code.

And have a few iterations with boxes and arrows

But wait, does all this still apply? These days we have Sketch and framer which makes it so much faster!

Indeed, Framer itself just launched framer design after all! An end–to–end design tool as they call it!

Whatsmore, they finally solved that “should designers code” question with a segmented control right there in the UI!

Now I’m a huge fan of Framer and their team. But unless you’re designing an interface flow as rote as a messaging app or weather app...

I think there is a real problem with starting by design at a screen–by–screen level in applications like Sketch or Framer.

Sure modern tools make this process faster...

But we can move faster and make decisions more efficiently by zooming out, looking at the high level flow, and iterating on that before zooming in on the details.

And then we can design all the delightful micro interactions on each page, secure in the knowledge that we’re building the right thing.

In other words, focus on the big picture.

It’s faster to iterate on

And you can be more ruthless, throwing away work without feeling like you’re throwing out 60 hours worth of time spent in Photoshop, XD or Sketch.

Julie Zhuo, a product designer at Facebook, wrote—or rather, drew—a series of insightful comparisons between junior designers and senior designers.

It was this comparison between the process of a junior designer, and the process of a senior designer that really resonated with me.

To the left, she compares a junior designer process which appears to be all over the place, with no rhyme or reason, to a deliberate, methodical approach by a senior designer.

To the left is me, every time I make high level product decisions in Sketch or another tool. To the right is a senior designer making decisions at the appropriate fidelity.

Now I’m not here to prescribe any process on anyone—it all depends on the context of what you’re building—and especially not one that looks scarily waterfall–esque.

But I think adding some structure to the process, working at the correct fidelity for the decision your making will allow your process to be more deliberate and considered, and give you more consistent, better results.

Perhaps you find all this interesting, but maybe you don’t think it’s your job. Perhaps you don’t consider yourself a designer.

But even if you aren, and you’re aware of this now, but aren’t convinced to jump in...

And that’s fine!

It just should be a conscious decision, one that you’re aware of.

The problem is it’s easily overlooked in out industry. It isn’t sexy, it isn’t glamorous, it isn’t particularly exciting, until you realise it can help make the process to building great work more robust.

Many designers — myself included — seem to enter from a visual design background and so the learning and knowledge around this type of thing is awfully fragmented.

Jonas Downey, a designer at Basecamp, recently wrote an article entitled The Unnecessary Fragmentation of Design jobs, in which he states...

“If you’re only focused on examining problems, you’re not empowered to dream up the proper solutions.

If you’re only dreaming up what you could do, you’re not close enough to the ground-level truth.

If you’re only working on the nitty gritty implementation, you know about the what but not a lot about the why.”

Or put another way, designing with context.

Indeed, outside of research specialities, I feel it’s pretty hard to separate UX from other concerns, which is why I find Sebastiaan’s tweet here very useful.

User experience is all-encompassing. When I design a nice looking button, that affects a user’s experience. When Glen Maddern goes to the extra mile to ensure a website works well for someone with network latency has a tremendous impact on that user’s experience.

I do feel like user experience should be everyone’s concern, as we all contribute to it.

And above all else, more perspectives, more adjacent skills, more experience…

It’s a common theme I hear from designers I respect in the industry. It all informs our work, allows us to grow, and makes us better.

I think when it comes to roles and processes, I don’t like to think of them as silos

The areas of overlap and intersection between roles and perspectives is where the real interest and value lies. More perspective, more context, better work.

Now all this potentially new homework… I don’t want to cause you any undue full stack anxiety.

That’s a much better talk by Joel Califa which I suggest you watch.

In it, he provides a framework for deciding what you should learn, and being okay with deferring the rest.

But I want to leave you on a note of optimism.

I’ve stated that our industry moves fast. And that’s certain feels true. Just ask anyone who’s attempted to learn Javascript in 2016, or [current year].

And yet a lot of Jesse’s work still holds a lot of value, insight and relevance to this day.

I can only hope the digital work I produce stands 2 decades on the Internet and still seems relevant.

Which brings me to my final point.

When it comes to the less glamorous elements of design… I think there’s a correlation between each element of design and the cadence of change.

Trends come and go quickly on the surface. It’s exhilarating, but also exhausting.

But a few layers down, the less glamorous, fundamental elements of design are mostly unchanged since we’ve been designing for screen, and still relevant today... and perhaps well into the future too.

Golden Krisna wrote a book entitled The Best Interface is No Interface.

In the mid 2000’s, it seemed like smart devices meant everything, including your fridge, should have a screen.

Golden posits that we’re perhaps too infatuated with screen based interfaces, and to look into opportunities that exist beyond the screen.

Indeed, with vocal AI assistants, chatbots, and internet of things. There may come a time when new paradigms emerge, which may have new problems to solve for, without a screen.

And even in that eventuality, design processes involving humble boxes and arrows would continue to live on and be a useful technique to learn.

So that’s the less glamorous elements of design…

Thanks so much for your time.

Further Reading

1. The Elements of User Experience — Jesse James Garrett
2. A visual vocabulary for describing information architecture and interaction design — Jesse James Garrett
3. Junior Designers vs Senior Designers — Julie Zhuo
4. The Unnecessary Fragmentation of Design Jobs — Jonas Downey
5. Full Stack Anxiety — Joel Califa
6. The Best Interface is No Interface — Golden Krisna