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.

“Less Glamorous
Elements of Design”

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”?

Clients from Hell Website

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

Dribbble Website

Nor even the so called dribbbilisation of design...

Well, not exactly...

Different types of designers

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.

Should designers code?

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?

There are various roles

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 fragmentation of roles be a symptom of fragmented education?

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

Our industry is largely self-taught

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

Our industry moves fast

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.

Existing fragmentation of roles

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

Pathways

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.

Our industry is largely self-taught
Our industry moves fast
Existing fragmentation of roles

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

Curriculums being taught aren’t always relevant for the work we do today

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.

Without a relevant curriculum, we have no guide for what to learn

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

How do we learn?
What do we learn?

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

Known Knowns

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.

Unknown Unknowns

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

Deciding what to learn should be deliberate

Because what you learn should be a deliberate decision.

But you cannot make an informed decision without all the information

But you cannot do this without all the information.

Here’s how I learned

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

Dribbble Website

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.

Winamp Skins, Userbars, Gloss

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 a great way to learn what you know what you need to learn.

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

I appreciated superficial qualities of design.

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

But there was more to learn.

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

Jesse James Garrett

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.

The Elements of User Experience

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.

Designing applications vs websites

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.

The Elements of User Experience

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.

Simplified process

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

Skills

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.

A common entry point

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.

The overlooked layer

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.

A Visual Vocabulary

Which he refers to as a visual vocabulary.

Sitemap?

Oh, like a site map?

Basically, yes! But much more than that.

A Visual Vocabulary

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

A Visual Vocabulary

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

A vocabulary for visualising a user’s journey through an application or website, efficiently.

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.

Requires no technical design skills

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

Inclusive

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.

Design with comittee?

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

Design with context

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.

Design with greater perspective

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.

Make design decisions more efficiently

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

Make design decisions at the right fidelity

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

Visual Layer

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

Structural Layer

And have a few iterations with boxes and arrows

Sketch and Framer

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

Framer Design View

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...

Designing page by page

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...

Flow

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.

Focus on the big picture

In other words, focus on the big picture.

Easier to iterate

It’s faster to iterate on

Easier to throw away

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.

Junior Designers vs Senior Designers

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

Junior Designers vs 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.

Process

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.

“Not My Job”

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...

That’s fine!

And that’s fine!

As long as it’s a conscious decision

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

The problem with less glamorous elements of design is that they’re easily overlooked.

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.

The Unnecessary Fragmentation of Design Jobs

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.”

Design with Context

Or put another way, designing with context.

SDW on UX vs UI

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.

User experience should be everyone’s concern

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

Kylie Timpani on Twitter

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.

Siloed processes

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

Overlapping processes

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

⚠️ Full-stack anxiety ⚠️

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

Full Stack Anxiety by Joel Califa

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.

“Our Industry Moves Fast”

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].

Simplified process

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.

Fundamentals vs fashion

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.

Rate 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.

The Best Interface is No Interface

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.

Chatbots, Vocal Assistants, Internet of Things...

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.

Boxes and Arrows

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

“Less Glamorous
Elements of Design”

So that’s the less glamorous elements of design…

Thanks