As a developer, I want to have a sense of design so that the products I create can be visually pleasing and intuitive to use.
However, it’s usually the case that I’d have an idea and as soon as I figure out how to solve the problem functionally, I’d jump right in and code up a solution. The end result is usually something that works but is not aesthetically pleasing. Sometimes I really don’t care but other times I feel as though a better visual design or UX would improve the work. I’ve never learned or practiced how to solve a problem in 2D/3D space, I’m all about the algorithms.
Shout out: If you’re a developer with little to no design chops and you’re feeling the same pain I’m talking about then let me know. Maybe we can share resources on how we’re trying to improve our skills in this area.
Speaking of sharing resources. Yesterday I was listening to Episode #2 of the Giant Robots Smashing into other Giant Robots podcast and in it I found that Phil LaPier had some really solid advice for us developers as we try to add a bit of design chops to our skill set. The episode is about 36 mins long and I’d suggest you listen to it in its entirety but just in case you don’t have the time, let me give you the TL;DR.
Relevant Notes from the Episode
Phil LaPier is a designer at thoughtbot (a company I truly admire). He does front-end development and works with clients to build web apps.
The usual workflow:
- Ideation with the client
- Sketching and wireframing
- Prototyping with HTML and CSS
- Hand-off to or should I say begins collaborating with the developers
Phil says that what makes him skilled at design are the following:
- Having a good understanding of the fundamentals of design, i.e. knowing its basic principles
- Knowing his medium well and in the case of the web that is HTML and CSS
- Having a personal interest in design and being able to study it on his own. His interest goes beyond just work. He’s constantly studying and constantly learning
He thinks “The best designers are people who are always asking questions and always wanting to learn.”
What does he recommend to do to learn?
Given the following scenario “A developer with basically no design chops (me, lol) had to design his own app and he needed help. In 2 minutes, what instruction would you give him to help him build his app out in the next 3 months?”
- Look into existing frameworks that are out there: Bootstrap, Foundation
- Don’t try to go overly complicated with the design, KISS
- Definitely think about whitespace. It’s a huge principle of design. Positive space is the actual content, negative space is the whitespace. Have enough negative space for the content to breathe. The fundamental rule of whitespace is “Have enough of it”
- Try having good typography. Work with 2 (possibly 3) typefaces. One is a headline font (sans-serif) and the other being a serif font.
In terms of going a bit deeper into the design process (at least at thoughtbot) he gave a run through of what the first few days are like on a brand new app and how they talk to the client to figure out how things are going to look.
- Requirements gathering. They have a kickoff meeting with the client for an entire day
- Do wireframes while sitting with the client. They do whiteboarding and rough sketches. At this stage they are trying to build a mental model of the system they would eventually be building
- No standard questions they ask since it usually depends on the project. Every application has a different set of data and a different set of requirements for a user on any particular page. A lot of it is figuring out the data. What is going to be where and building the mental model of the system which ultimately drives the questions
- Looking over the requirements and doing some more high fidelity sketches. These are shown to the client to give them a rough idea of what they’re thinking about
- He’s a Fireworks user (I won’t go into it here but he does mention why he chooses Fireworks over Photoshop for this part in the process, listen to the episode to find out, it’s around 14:35) so he usually takes it into that app at this point to build a visual prototype of what it would look like. No fancy typography or color. It’s usually just grayscale stuff just using Helvetica. This is not the time for the client or them to worry about those details. It’s about the big pieces at first
- Doing some HTML and CSS prototypes. Again not worrying about color or typography. Just laying it out. Clients can now click through some pages to get a good feel for the app
Process is absolutely fundamental to delivering good work.
~ Phil LaPier
Shout out: I’m actually really interested to find out the kickoff process for other designers and agencies (especially in Trinidad) when building websites, web apps and mobile applications. Just reach out to me on Twitter.
In the rest of the episode he talks about
- Bourbon - A library of Sass mixins he created
- What makes a developer colleague easy to work with?
- Managing the design feedback process
- His thoughts on HAML vs HTML (what do you think he likes?)
To end I’d just provide you with some of the resources I’ve personally been using:
Hope you’ve gained something from this post. As my secondary school basketball coach used to say,
Written by Dwayne Crooks.