Mustafa Kurtuldu’s Designer vs Developer series seeks to foster greater understanding between the two camps. Released every two weeks, each episode deals with a different issue, from effective collaboration to whether too much testing and data ruins the creative process.
This week, Kurtuldu discusses how design skills can be learnt and how technical ability influences the creative process.
For each episode, Kurtuldu writes an accompanying essay inspired by the discussion:
A list of methods to break down the design process so we can remove the mysticism that surrounds creative folk.
Every so often a non-designer will ask me “How can I learn to design?”. This seems to imply that design is a checkbox that you can tick, on a checklist of things. I think the reason for this confusion is in part due to the aesthetics being very prominent. The aesthetics appear superficial and, thus, give the illusion that ‘design’ is something you slap on at the end.
“All industrial designers work within constraints, this is not fine art” — Matthew Carter
The first step is to understand the constraints
Research is an excellent way of finding out the limitations of the world you are designing in. If it’s a product you’re creating, that means interviewing users and asking them about their pain points.
For example, if your product is a new type of shoe that protects builders when they are on a building site, then you need to find builders and ask them about their favorite shoes. Ask them to put on their shoes, then get them to take them off. Walk with them around their building site, observe the everyday actions they do. Find out what they love about their shoes and try to tease out what is annoying. You might notice that builders have to change their laces on a regular basis because they break easily. They do this because they always have. It’s the industry standard. That’s a great first thing to improve.
You will start to discover the constraints and the harsh environment builders have to work in, so a ballerina designed shoe won’t do. You have also seen an experience that the builders are being forced to ‘hack.’ Because no one has come up with a reliable solution, the problem becomes the norm. It’s here where we can challenge this norm and fix the problem.
Once you’ve invented a new shoe, you get them to wear it and test away. At this point, you want to create a user persona, which is the avatar for a set of similar people you have interviewed. They embody the trials and tribulations of a single character. If you have multiple characters that have different problems, then you can create different personas to break up the use cases you are trying to fix. Personas are not about demographics because someone’s wealth or cultural background won’t have any relevance to whether their shoelaces keep breaking while they work.
These are user constraints. But we also have technological limitations. In the 1960’s, type was set using a technique called Photocomposition, which involved setting type by photographing characters on film and then turning them into printing plates. Early photocomposition machines, would sometimes bleed the letter forms at intersections of strokes. Below, the “W” on the left is the actual design and on the right is what the machine would produce.
Type designers like Matthew Carter (designer of Verdana & Georgia) had to come up with ingenious new letter shapes to bypass the technological constraints so that they would remain legible to the reader.
In most cases, when we find a constraint, it’s only a matter of time until engineers come up with a fix. On the web, designers prayed for an easy way to make items with rounded corners, so engineers came up with a way to add them to CSS, the styling language of the web.
Technical constraints and user constraints help shape the boundaries you’ll need to work within. Try not to think of them as limitations, but rather see them as a set of tools to keep your product or project in focus.
Applied design is about contrast
Once you know the world of constraints, it’s time to distinguish the essential elements using contrast. Design in its application is all about contrast. To put it simply, the more obvious something is, the more important it seems. Because of its perceived importance, it guides a person to deal with that thing first. In typography, that means the title is larger than everything else because it is intended to be read first.
The same thing applies to white space, use of colour, the embossing or boldening of an elevator button, and vibrancy of a boot strap. They’re designed to show the obviousness and how they’re meant to focus and do something.
Draw your ideas in silence and solitude
“If you’re alone, you belong entirely to yourself. If you’re accompanied by even one companion you belong only half to yourself, or even less…” — Leonardo Da Vinci
Disney animator Richard Williams once asked Milt Kahl, chief animator on the Jungle Book, about playing music while drawing. Kahl scolded him about having any distractions while working. Williams went on to adopt a silent method of working and noted that his work significantly improved. Being in a space that allows you to think is vital.
When running a Google Design Sprint, the first phase is about finding the constraints by doing the research. The next phase is sketching in silence. You may come up with ideas as a group but you should always sketch on your own.
This is a sketching technique that allows you to generate lots of ideas in a short burst. It works by taking a sheet of paper and folding it into eight sections and setting the timer for 8 minutes.Once the timer reaches 8 minutes, stop drawing. Review what you did, highlighting elements that you like in each. Try the process again. Each time refine your ideas. You can learn more about other sketching techniques here.
When you have a clear concept, it’s time to sculpt the contrast. Note the key action you want someone to take: if it’s a book you are designing, you could be looking at a typescale that will guide people to read the content in a specific way. Make sure typefaces work well with the scale you’ve chosen. You can learn more about typography in Matthew Butterick’s book Practical Typography. If you’re designing a product, you must focus on the core call-to-action you want someone to take. Note down the main activities. This will help you define the hierarchy and prominence for navigational items in an interface.
We sometimes add too much functionality to our designs, because a blank canvas is scary. But learn to remove things. The more elements you have, the more questions you are asking the person who is supposed to use it. If too many things have the same level of importance, then nothing is important, and the core action is lost. You must break down the priorities.
Now iterate and test, and iterate and test again. You need to make sure that the thing you’ve created isn’t just superficially beautiful, but performs the action that you intended.
Design is not a singular task. It’s a process of doing, or to be more specific, it’s a process of sculpting contrasts within constraints. Design is about figuring stuff out and fixing things. It takes time to master technical skills like drawing and working with type, but with time anyone can do it.
You can learn more about design and UX at Web Fundamentals.
Designer Vs. Developer is a Google Chrome Developers YouTube series. You can also listen to a longer version of the conversation by downloading or subscribing to the podcast oniTunes or Google Play Music.You can learn more about design and UX at Web Fundamentals