How to design when you’re not a designer

One of the common problems with being a developer who creates a website or application from start to finish is that developers, like most human beings, often are stronger in some areas than others. A lot of coders who are in their element setting up the back end of a website fall over when it comes to the design of the front end. Elegant functions are completely obscured by a user interface that looks like it was dragged out of the ’90s. When designing an application, the front end makes the strongest impression. So what do you do, if like me, you can’t put a colour scheme together to save your life?
I’m going to share with you some of my favourite resources for colour management and UI design.

Choosing a palette:

If you’re really lucky your client has a corporate colour scheme. Simply grab those hex codes and start work. If there’s not already a colour scheme in place you can still get a head start by asking the client to provide a couple of colours they would like featured. Take those colours to colourco.de.

This tool may seem intimidating at first but hang in there. Click anywhere on the screen and it will select a colour. Move your mouse to the bottom of the screen where you will see a small arrow. Click on it and the various colour codes will appear. Here you can edit them to your client’s chosen colour.
colourcode2

Once you are happy with your feature colour move your mouse to the left of the screen and a menu will pop out.colourcode.png
Now you can simply select various options until you find a scheme you like. For instance selecting ‘monochrome & light gray’ gave me the following colour scheme:
colourcode3

Want to tweak the results? Simply click on the middle panel and you will be able to edit the colour and accompanying scheme will change to suit. A good rule of thumb is to keep a white background, use the darkest colour for your text and add accents in your feature colour.

Get your text sorted:

You know roughly how you want your text to look but are struggling to get that into good CSS? Pop over to csstypeset.com for a speedy solution. Simply put in a text sample, tweak the sliders and the CSS you need will appear in the right hand box. This is great for when you need to play about with line-heights and word-spacing in particular.

CSSTypeset.png

Buttons:

Take advantage of CSS3 and get your buttons looking right with css3buttongenerator.com.

Fiddle about with the settings until you have a button that looks like it belongs on a top end website.
buttongen1

Admittedly this one looks like it’s asking you to download some suspicious files, but it’s nicely rounded and there’s a subtle gradient on the background. The code you need for your glorious “totally-not-spam” button will appear in a box at the bottom of the page, ready for you to copy and paste.
buttongen2

As you can see this includes all the browser-specific code you’ll need to get the fancy effects.

Having got our colour scheme, text and buttons we’re well on our way to pretending we are a proper website designer. What tools do you use to help you create professional looking applications?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s