Walk Like a Designer

December 18, 2013

You're a developer, not a designer. I get that. But to say you just "can't do front-end" is just plain wrong. Especially considering the tools that we have available to us today. I think you'll find if you learn to walk like a designer (and by that I mean learn your way around HTML, CSS and SCSS enough to produce quality work), you'll be pretty proud of what you can accomplish.

Stop the "I only do back-end" mentality

To many developers, design or front-end development is a black box and they never make an attempt to change that viewpoint. It's absolutely fine to specialize in writing Ruby code, JavaScript, or SCSS, but these things should not be mutually exclusive. Sure, you might not have a natural design talent, but I'll bet you can look at something and determine if it looks good or not. Let's look at how we can improve this line of thinking.

Let's make "full stack" development just part of the job

Improvement starts by not glorifying the fact that someone is a "full stack" developer. These days, most of us are not working on massively complicated systems. More often than not, we are working on products that are used directly by customers. As developers, why are we putting ourselves in a position to have to hand portions of a project off to someone who is "better at front-end" than us when, with just a little effort, we could take a feature to completion?

Instead of just handing over a Photoshop document, designers are now expected to know HTML, CSS and probably a css pre-processor like SCSS. Developers need to master these skills as well. It allows a knowledge overlap of the middle ground, which will increase efficiency of the team and ultimately, create better products.

skill graph

Here's why this is awesome:

  • You as a developer can take a feature to completion.
  • Designers will not come to you the second they are done with Photoshop.
  • If you want to work on a side project, you'll be able to do a decent job with it and won't need to hire a designer to make it look nice.
  • You start thinking more about the customer. When working only on back-end code, the customer is the furthest thing from your mind. It's amazing how much better your work can be when you think of how a human will interact with it.
  • It will make you more marketable, which can increase your salary, or allow you to start a consultancy.

Here a a few things you can do right now, to make yourself better at front end development:

Quick Hit #1: Learn the grid

Laying out on a grid is the foundation of a good design, and will help solve issues with whitespace or things feeling crammed together.

By far the easiest way to get started with laying out pages in grids is to use a framework like Bootstrap or Foundation. Paired with a browser plugin like Grid displayer, you can look at the grid for any Bootstrap or Foundation site. This will get you to start thinking in grids and see how other people have used them. Pay attention to how a grid automatically helps your content "breathe" and makes your layout uniform.

Quick Hit #2: Imitate good designs

Find a site or UI that you like and learn how to implement it. And don't just copy and paste, either. Take the time to learn how each piece fits together and why each line of HTML or CSS is there. See how it fits into a grid, and how it enhances the overall experience. Maybe they use a great responsive design and you like the experience on your phone. Or maybe there is a creative approach to navigation.

Once you do this a few times you'll learn all kinds of new techniques that you can immediately start applying to new work.

Quick Hit #3: Pair with someone who's better than you

Pairing is often encouraged in the world of Ruby and Rails, but not as much with design, HTML, CSS or JavaScript. Find someone who is better than you and work with them for 30 minutes to 1 hour. Explain how you're thinking about approaching the problem, and then have them think out loud while both of you code. You'll be amazed at how much knowledge you can soak up in a short amount of time.

Front-end development is extremely important. It's how your customer interacts with your product. Work out some of the quick hits I mentioned here and let me know how it goes! If you need someone to pair with, give me a shout.

Learned something new?

Get my best development advice (almost) every week, right in your inbox.

Join Level Up
comments powered by Disqus