A complete guide to why designers should understand development

After working for different companies as a front-end developer, I’ve noticed that there’s one relationship that can be more tenuous than others; the one between designers and front-end developers. Why doesn’t it always go so smoothly and what can they both do to help?

Naming conventions

Top tip - Talk together to create a common language.

Designers have always been much better than developers coming up with naming conventions. I’m not completely sure why, but in my experience they just are. So designers use this to your advantage.

Many developers use Sass for styling, Sass is a scripting language that is interpreted into CSS.

Using Sass is an important intersection where designers can meet and help developers. It may seem trivial but getting your styling present and correct is a great place to start for a project of any size. It’s something that can be overlooked.

Make the names useful and meaningful to both parties. Naming a variable $anchor-visited-blending-color makes it clearer but it’s not very usable. And after five minutes you’ll be asking…what variable is that again?

/*
 * Colours
 * ===========
 */
$mint-green:          #A3D6AE;
$mint-green-lighter:  lighter($mint-green, 10%); // Hover state
$mint-green-darker:   darker($mint-green, 10%);  // Focus state

Sit down together and talk through your variables names. You’ll find by doing this you’ll both create a common language that you can easily talk about different parts of the site in perfect harmony. 👍

It’s pretty easy to over complicate things where you’re developing. Sometimes the simplest names can pass you by.

/* Bad */
.fpt {
  background-color: #A3D6AE;
}

/* Better */
.filterable-product-table {
  background-color: $mint-green;
}

Tools

Top tip - Keep it consistent, don’t jump in and change it to your way of working.

I’ve found that designers really love tools! They can download a new tool a day. It’s crazy.

With great tools comes great responsibility

And with these tools comes different styles, approaches and implementations. As a Front-end dev we strive for consistency.

Every line of code should appear to be written by a single person, no matter the number of contributors.

This is important in development. But it should be similar for your design team. I’m not talking about everything has to look the same. Far from it. Just whatever tools you are using, make sure you respect their way of doing things. don’t jump in and change it to your way of working.

Make a note of any suggestions and raise it with the person at a later date. They might have a really great reason for a particular method that you didn’t initially see.

Designing

Top tip - Explore the different tools and find out what works best for your team, rather that just you (Don’t dilly dally).

Mobile first development has been around for a while. It’s very standard. With 31% of USA population who are mobile capable access the web primarily through mobile devices. It’s an approach that takes the ever increasing mobile users into account…first.

Most of the time design is a Desktop first approach and how things will work responsively is a bit of an after thought.

Think about a fluid layout in percentages rather in fixed pixel values.

The most useful designs I’ve ever worked with were simply prints out and red lined. I would sit with this humble pieces of paper next to me and look at comparisons and relationships to build helpful utility classes and components.

Nowadays I love a mix of wireframes to get the structure and then more detailed component mockups; it’s a great way to save time and build a site.

A fantastic modern day red liner is Zeplin. You can simply hover over each element and see its relationship to surrounding elements. Font sizes, padding and colours. Also working with the designers you can start looking at delivering useful and thought-out components.

Component based design

Top tip - Design and create useful reusable components.

Mixing wireframes with prototypes can be a real time saver.

If you’re pushed for time you don’t need to make the entire site mockup pixel perfect. A few well thought out components will do the trick. Especially when using great tools like Zeplin.

Using a library like ReactJS is amazing for both Front-end dev’s and designers alike. You can create views built from various components in readable JSX.

As most companies work in an “agile” way, component based design and development can really lend it self extremely useful. It brings the designers into morning stand-ups, creates a focus for Business Analytics and makes it easy to work on each sprint and afterwards you have something great to show in showcases.

class FilterableProductTable extends React.components {
  render() {
    return (
        <div>
          <SearchBar />
          <ProductTable products={this.props.products} />
        </div>
      )
  }
}

Different teams, same application

Top tip - Be open and talk to each other.

At the end of the day we designers and developers have to work with each other much more than most teams. It’s very personal work where egos have to been thrown out of the window and collaboration is key.

If designers understand how sites are build from scaffolding to styling they can work more efficiently, collaborate to create amazing applications in a way that is just that little bit smoother.