Designing as a Developer

Software developers have two things in common: we write code and we suck at making things look nice. Or so we think.

The truth is we aren't actually bad at making stuff look nice. Our issue is that the blank canvas of a new site is daunting. Ironic, given that a new codebase tends to be so exciting. This is one of the reasons Bootstrap has enjoyed so much success. It provides a baseline set of styles. It serves as a foundation of visual direction we badly need to get started.

But Bootstrap shouldn't be our only tool.

Colors

The first thing you should look for when trying make something look nice is a pleasing and consistent color palette. There is no substitution for consistent coloring around an app.

Colour Lovers is here to help. They have over a million color combinations submitted by users. This is a great place to find your basic colors. I would strongly suggest grabbing one with a couple shades of light grey in them. Your app only needs 2-3 actual colors to build an interface with. Using too many will only complicate things visually.

But as any coder knows, we can't just work with 5 colors. We need shades for things like shadows or hover effects. This is where Adobe's Color Wheel comes in. It is invaluable when you need a shade or derivation of a color in your palette.

Patterns and photos

Another way to add visual interest to your marketing pages involves patterns or photos. Both offer our eyes a break from solid colors and straight lines.

For patterns, i'd suggest browsing Subtle Patterns. This is effectively Colour Lovers for patterns. Try using them as the background to your site. Also, with the use of background-blend-mode in CSS3 (MDN reference), you can achieve some neat background effects when you combine patterns with colors. This is how i made the top section in my most recent project, Detextion.

Another obvious route is photos. Stock photos used to be great for this but they have grown way too expensive for my tastes. Unsplash is the solution to this issue. They have thousands of excellent photos that are free to use and modify at your pleasure. Nearly every header image on my blog comes from there.

My only criticism would be the lack of search-ability on Unsplash. They have started to make it a focus in the last 6 months or so, but it is lagging far behind the bar set by stock photo sites. So if you don't see quite what you are looking for, take some time browsing. Often times you will find a photo tangentially related to your topic matter that is a more powerful visual option.

Use a grid

For the majority of developers, this comes free with their inclusion of Bootstrap. Personally, i avoid Bootstrap like the plague. Zurb's Foundation, on the other hand, continues to outdo themselves with the expressiveness and flexibility of their CSS grid. I would strongly recommend it to any developer who doesn't want to spend their time in media queries optimizing things for mobile.

In addition to bringing built-in responsive styles to your website, grids solve one of the biggest flaws in amateur design: inconsistent spacing.

Copy-ish a layout

They say that imitation is the ultimate form of flattery. While i do not advocate ripping off someone's CSS, i absolutely recommend drawing layout inspiration from sites you enjoy.

Another important point is to keep your layout simple. Of late the trend has been to have 100% width sections containing centered, fix width content blocks. This is largely because the CSS grids use this layout by default. No reason to reinvent the wheel here. Start simple and evolve from there.

Subtlety, simplicity and consistency

Design philosophy varies widely between people. That said, interface and usability principles are a deal more structured. Simplicity and consistency have withstood the test of time.

Luckily for us, those same principles are a great place to start when making things look nice. If there is another thing to consider it would be subtlety.

The best advice i ever received about design was that some of the best design aspects are subtle enough that you don't consciously notice that they are there. So when you try adding a shadow or border and think it looks good, try lowering the alpha or border size. Often times you can continuously reduce these properties, getting an increasingly subtle style that in the end looks cleaner and feels nicer.

Remember, the purpose of design is to present, not distract.

We are all artistic here

Coding is a creative profession. While we are thought of as developers or engineers, we are in an artistic career. We are the blacksmiths of our age. And while the true quality of a blacksmith's output was in the raw quality of the product, there was greatness in those who learned how to inject beauty into their work. Form amidst the function.

Developers have that same potential. We may appear to suck at design compared to our classically trained, designer counterparts, but that doesn't mean we should abandon our efforts. Reasonable design chops can be had with some simple resources and a little practice.

tl;dr: Coders can make great designs with a some helpful resources and a few of these tips.