#design for developers

[flatironschool]

The 10 Principles of Good Web Design for Developers

Good design is innovative

Innovation is the process of introducing new methods or ideas to an existing medium. This doesn't mean you need to reinvent web design every time you create a new site. Instead, be cognizant of design in other areas of your life and look for ways to incorporate it into your web designs. See an interesting commercial animation. What made it interesting? Try adapting that design to the web.

Good design makes a product useful

At the end of the day, you want people to use whatever you've built. Good design aids the user and helps them operate your web site or application. Highlight useful content and minimize distractions. For example, if you're working on a shopping site, the design should help a user select an item and move forward in the purchasing process before it does anything else. This book is a great place to start.

Good design is aesthetic

It's common sense, but the site should look nice. Studies show the quickest way to build trust with your users to have a professional-looking site. Take some time to learn the elements and principles of design (from this site, perhaps). Then find your favorite websites and analyze them. What aesthetic choices did they make? Why do you like their work? How can you use what they've done and make it your own?

Good design makes a product understandable

Design has it's own language. Even if you are not a designer by trade, you've probably picked up on a few of its principles—repetition, balance, contrast, hierarchy, and more. Your users will also be familiar with the established design patters in which they are constantly immersed, like having a navigation at the top or along the left side of a page. You have to reinvent the wheel. Use established patterns whenever possible to help your users immediately understand your website.

Good design is unobtrusive

Can users find information easily? Your website should be easy to navigate and operate. If it's a web app, does the design augment the process of using the app, or is it obtrusive? Accessibility should never be sacrificed for something that "looks cool."

Good design is honest

Honest design exists to aid the user, not trick them. If there is an important element on the site—like a "Buy Now" button—design it to direct your user where they expect to be directed. With great power comes great responsibility. Use this power for good, not evil, and avoid the dark side.

Good design is long-lasting

Trends come and go, but good design is forever. Compare 2002's apple.com with today's and you'll notice the site remains remarkably similar. Sure, color and fonts have changed, but the soul of the website is the same today as it was in 2002.

Good design is thorough down to the last detail

The 80/20 principle tells us it takes 20 percent of the time to finish the first 80 percent of a project, while the remaining 20 percent takes 80 percent of the time. Finishing a design is tedious. Sometimes you'll spend hours laboring to get one section to look just right. You'll be tempted to call it it quits, but good design is thorough down to the last detail.

Good design is environmentally friendly

While your web design will probably not affect the environment in the same way an industrial designer's might, you can still use conservation as a principle—just for a different purpose. Using lightweight frameworks and optimizing your code and images will help reduce the page load time for your users. A happy user is good for the environment, too.

Good design is as little design as possible

The adage, "less is more," applies here. Don't burden the design with non-essentials. I know you love that animation of the dog riding a fire-breathing dragon that you worked on for days, but id it's not essential to the design, lose it. Jost like bloated code, you will need to refactor your design, tweaking it several times before arriving at the optimal version.

All this is to say that the best designs get out of peoples' ways and let them do what they came to your site or app to do as quickly and as pleasantly as possible. This should matter to us developers because visual communication is an inherent part of what we do. The key to creating a well-designed product is to always remember that you're building for people above all.

[dwaynecrooks]

thoughtbot's Phil LaPier on Design for Developers

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

jQuery programming but usually stops when it requires intense JavaScript programming

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?

Top on his list is actually establishing a presence on Twitter and following people who are pretty well known in the industry and people who are pushing the boundaries. Some interesting people to follow include: Sacha Greif, Lea Verou, Benjamin De Cock, Jason Santa Maria and Trent Walton

Get on dribbble

Practice, practice, practice

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

He says:

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:

Bootstrapping Design

Hack Design

Design for Hackers

Designing with Progressive Enhancement

thoughtbot's Design for Developers workshop

Hope you've gained something from this post. As my secondary school basketball coach used to say,

Practice makes perfect permanent.

Happy hacking!

Written by Dwayne Crooks.

[thoughtbot]

Design 101: Stop Yelling

How do you make yourself heard in a loud room? BY YELLING! And when it comes to design, that's often the approach used for drawing attention to elements. LOUDER! BIGGER! FASTER!

But there's a better way.

Imagine yourself in that loud room again. Now imagine that instead of yelling to get above the noise, you could just turn down everyone else. Instead of shouting at the person you're talking to and ending up with a strained voice, you'll be able to have a nice, thoughtful conversation with them.

While it's hard to turn down the volume of a room, it's easy to quiet the background noise in your design and let the important parts speak clearly. Let's take a closer look at this idea.

Below is an example of a composition where everything is shouting at you. The big red headline at the top is trying to assert itself, but so is everything else, which means, in the end, nothing stands out.

So let's turn down the volume. You have to decide what you're trying to communicate and how to say it in a clear and concise way. This will drive your design decisions. In the example below, we've established a clear hierarchy between each bit of text. The headline still dominates, but we've toned down the other text so that your eye moves comfortably and naturally from headline, to subhead, to body text.

Let's try another iteration that makes more dramatic use of white space. I tell students in my workshop that white space is the secret ingredient in design. Effective use of white space can transform a mundane design into something that feels elegant and timeless.

In this example, I've made the headline and subhead the same size as the body copy. I'm relying on white space to create the hierarchy, isolating the elements within the composition so they can establish their presence without competing with surrounding elements. Think of that loud room again. Not only have we quieted the voices in the room, we've moved everyone to their own corner so they can talk without distraction.

When thinking about how to create emphasis, don't be so quick to turn up the volume. Think about how to use hierarchy and white space to communicate your message without shouting it at your audience. You'll create something more elegant and respectful that still accomplishes your communication goal.

I'll be teaching more visual design principles and strategy in my workshop, Design for Developers, which is running Feb 27–28 in our Boston office.

[thoughtbot]

Design for Developers

I'll be teaching the next session of our Design for Developers workshop on December 7th & 8th at our Boston offices.

The workshop is aimed at developers (as well as non-developers) who know HTML and CSS, but feel like they don't have the graphic design skills to make something that looks good enough to show customers and clients. I want to ease the pain of developers who feel like this:

I'm a developer who is a HORRIBLE at design so I don't even know where to start.

I have the technical skills but my designed sites and interfaces are always awful, I know how to build a site technically and I know when a site  looks bad, but I'm rarely able to do anything about it.

The workshop is heavily focused on hands-on instruction, so that you can start to see immediate improvements in your ability to layout pages, pick and use typefaces, and work with color.

Visit the workshops site to learn more and register.

On the Monday and Tuesday before this workshop, we'll also be running our Advanced HTML & CSS workshop. This workshop provides a solid foundation in HTML and CSS fundamentals. We're running these workshops back to back to give folks the opportunity to get a crash course in the full stack of skills you'll need to design and build great pages.

If you'd like to find out more about either workshop and figure out which one might be right for you, drop us a line.

[thoughtbot]

Better grids: Lessons learned from Design for Developers

After our first Design for Developers workshop in December, we shared a few examples of student work we especially liked.

The next Design for Developers workshop is just a few weeks away, and I thought it would be interesting to highlight some common problems our first group of students had while working on their projects, specifically around grids.

We asked all students to use the 12 column, 960 grid when designing their pages in order to focus their work. However, it was very common for students to build unnecessarily complex grids instead of taking advantage of the simplicity that the 960 grid offers. Let's look at four examples of problematic grids, along with strategies for improving them. As you'll see, the solutions are straightforward: make it simpler!

The uncomfortable quartet

The first two examples have a similar problem: they are confused about whether they want to be a 3 or 4 column layout.

In the first example, the three columns on the left group together nicely. But the column on the right doesn't feel coherent with the rest of the layout.

My solution? Stick with a uniform 3 column grid. The wider, more regular columns create a better rhythm across the page, and also give you more room to work with. The student who built this page was using the small column on the right for a navigation list. But it would be better to move that elsewhere on the page, and let the content on the left fill the width of the page. Often times using the grid correctly means re-thinking the placement of elements on the page.

The second example is similar, but has even more problems. The three columns on the right stray from the grid in an attempt to fit themselves into a space that is probably too narrow. The contrast with the correctly sized column on the left is awkward.

In this case, a uniform 3 column grid would also work, as would a uniform 4 column grid. Because a 12 column grid system can be equally divided by both 3 and 4, these column sizes are the most reliable choices when working with the 12 column 960 grid. They will create equal divisions of the page that are wide enough to fit most content, and as we'll see below, they look good when matched with each other on the same page.

Mix and (mis)match

The next two examples suffer from awkward mixing of column groups.

The first example starts with the right approach, using three equally sized columns through the center of the layout. The problem comes with the columns above and below. When mixing columns with different widths, the goal should be a harmony between all elements on the page. Unfortunately, in this example the columns clash with each other.

The solution is to use column groups that have a more harmonious relationship to each other. We achieve this by matching the 3 column group in the center with a 4 column group below it, and letting the header run the full width of the page. As we said above, 3 and 4 column groupings are often the best choice when working with the 960 grid. The intervals are more regular and we reduce the clash of irregular columns.

In our final example, the middle group of columns is again well defined, but the columns at the top and bottom again clash. The one unit of white space at the top of the page is especially troublesome, as it stops the eye and disrupts the flow of the page.

Again, the solution is to use a simpler, more consistent approach to the column groups. We want the columns to sit next to each other comfortably, and the lead the eye down the page naturally.

There are of course other solutions to the problems I've highlighted. But the best approach is often to remove any complex grid structure in favor of groupings of 3 or 4 columns.

If you browse through the example sites on the official 960 grid site you'll notice that many of them are using a simple 3 or 4 column layout. A straightforward approach to the structure of your page doesn't have to limit your design. Instead, it provides a solid base that will introduce clarity to your layout. And that's always beautiful.

Go deeper

We encourage developers who are looking to learn more about grid systems and other fundamentals of visual design to sign up for our next Design for Developers workshop, taking place Feb 21 through 23 at our Boston office.

[thoughtbot]

Recap: Design for Developers

We ran our first Design for Developers workshop this week. Kyle and I had a great time teaching it and were really pleased with the quality of the work the students were able to produce by the end of the workshop.

The main project the students worked on was a page for a fictional furniture company. We gave them a completely unstyled page and asked them to slowly transform it using grid systems, refined typography, and effective color schemes. The students sketched out their ideas on paper, then worked directly in HTML and CSS to implement their ideas. At the end of the last night, we had a group presentation of all the pages, where the students talked through their approach and we offered our critique.

We asked a few students to let us share their work with you.

This page was designed by Javan Makhmali (click for full-size image):

And this page was designed by Chuck Vose (click for full-size image):

At the end of the workshop, students walked away with a solid grasp of some fundamental principles of design along with practice building a well-structured, good looking web page.

If you're a developer who wants to improve your design skills, consider taking our next Design for Developers workshop, which we've scheduled for Feb 21-23.