41

I'm not a graphic designer. I'm pretty bad at drawing anything. I struggle to build things that look even as nice as "sample" applications bundled with development tools; primarily because I don't have squat in the way of art assets.

What strategies might I take to mitigate this?

4
  • 3
    Just to be clear: you want to create GUIs which do not use the default platform's look & feel? The first question would then be: why not rely on the OS to draw your UI? Apr 19, 2012 at 11:24
  • 2
    @KonradRudolph: Even with the default look and feel (which is actually what I find more pleasing than anything else most of the time) there are still art assets typically needed for a polished application, such as icons. Apr 19, 2012 at 15:29
  • 5
    Icon assets: Use Open Source icon sets. ;-) There are some quite high-quality ones, e.g. FamFamFam’s Silk Icons or Glyphicons … Personally I prefer to avoid too many other graphics but for those contract work is probably the best solution … Apr 19, 2012 at 15:46
  • method.ac might be helpful, once it's launched.
    – Maxpm
    Apr 21, 2012 at 2:00

6 Answers 6

24

I personally do not think you have to be good artistically to create pleasing user interfaces.

What makes a good UI is not up to creativity, but is more related to a couple of well-established guidelines. If you follow these guidelines and practice some you can create great interfaces yourself.

I would suggest doing the following...

  • Read about what makes a good user interface. (online mostly)
  • Research and find some user interfaces that are pleasing to you.
  • Compare several good designs and try to pick out things that are similar between them.
  • Now look at your own design and see if you have those elements.
  • Try to recreate your user interface to be similar to the ones you liked.

I forecast that if you do this exercise for a week or two (and if you ask me, a week or two to learn how to design good interfaces is not such a long time), you will learn most of what makes a good user interface.

Just a couple of things I found that make user interfaces pleasing:

  • Simplicity
  • Consistency (colors, fonts, usage of buttons, links, etc...)
  • Spacing
  • Less is more (hide as much as you can from the user without diminishing usability)
  • Do not use white background and black font. Make sure the contrast is good enough, but usually change your background to a light shade of gray while your font to be dark gray.

Also... do not start with the design. Start with functionality and let the design evolve. Also, experiment! Do not get upset if it does not look perfect after 1-2 'iterations'. It gets better over time. But most importantly, you have to try.

4
  • 3
    I'm talking about polish, not UX. Knowing how to design a "pleasing" UI doesn't help (for instance) your icons look better. Apr 19, 2012 at 1:06
  • 5
    @BillyONeal: Sorry but your question to me was a lot broader than 'designing icons'.
    – c_maker
    Apr 19, 2012 at 1:18
  • 3
    It is; icons are just a simple example. My point was that this is not "hiding behind an excuse" -- there are legitimate parts of decent UI design that do require, well, art. There are pretty and unusuable interfaces, usable and ugly interfaces, unusable and ugly interfaces, and usable and pretty interfaces; a polished application needs to be both usable and visually appealing. You address usability well in this answer (+1); but the "pretty" is a legitimate concern too. Apr 19, 2012 at 2:05
  • I think the font colour/background colour thing is heading down the right path here. The contrast thing was one of the first items I got public feedback for from the first site I ever published. Maybe some other tips, like how to choose/apply colour - how many? One or two? More? Light or dark? Put it in the headings? Borders? Background? All/none/some of the above?
    – Stoive
    Apr 20, 2012 at 6:26
12

My art ability is about 5th grade on a good day:). I employ a graphic designer, either professionally when at work, or my wife, who has excellent art skills and loves using them.

Note that in my mind Graphics design is not UI/UX design. I either do a majority of UX, or employ a UX expert to retain control of UX, who then works with the GD to make it look pretty. Although I am sure there are good combined UX/GD professionals, I have had very bad experiences with GDs doing stuff that looked pretty, had very bad UX, and was outdated in a couple of months, and won't take that risk until I have worked with the GD for a couple of projects.

3
  • 1
    So, pay someone to do it, or get hitched to someone who can do it for free? :p. What if it's too early to pay a designer - proof of concept, or trying out the functionality? There needs to be minimal aesthetic attention put to the software, lest the people I demonstrate my software to get distracted by gawdy colours and fonts that I don't know how to do better for.
    – Stoive
    Apr 19, 2012 at 2:52
  • 2
    @Stoive. Great point, now you have got me started. Initial impressions are really important. To any non-engineer (and many engineers), the GD is usually critical, unfortunately it outweighs the UX design and engineering by several orders of magnitude. Get the graphics looking flash and shiny, and the magpies will flock to the product, no matter how crap it is. Get the GD wrong......
    – mattnz
    Apr 19, 2012 at 5:13
  • 1
    To elaborate - I have convinced a client on hiring a graphic designer before (UI design I'm okay, graphics I'm horrendous), by stating that good visuals project confidence and trustworthiness onto the users. In this case, the client was already paying (their ideas, I was just coding), but in other circumstances you need to convey confidence and trustworthiness to the clients before you get to touch any money for graphic design resources. Or, as per the OP (hobby projects?), money will never be involved - hiring a designer isn't feasible, yet presentation is still important.
    – Stoive
    Apr 19, 2012 at 6:07
9

If you’re looking for graphical assets there are a few websites which collect high-quality graphics for free use:

And many more, such as the GNOME art project which includes lots of free graphical assets as well.

Not being the least bit creative, and having no education in design, I always strive on the side of conservativism: use established patterns (i.e. frameworks) and deviate as little as possible from trodden paths. This won’t necessarily be very interesting but at least you minimise your chance of failure and UX disaster.

Picasso said that “great artists steal” but in reality it’s mostly the talentless hacks, and look where this has led Microsoft and Samsung: to great-selling platforms.

0
8

You can hire specialists for this sort of thing, but you don't need innate artistic ability to learn some basic techniques. My undergrad degree actually required a semester of "art for engineers." Taking a class or two at your local community college could be very beneficial. You still won't be as good as people specially trained in the field, but you can definitely improve to the point where your programs look more professional.

There are also books geared toward relative amateurs. One book I found useful for web design is The Principles of Beautiful Web Design by Jason Beaird. Even if your designs don't improve much, getting a little education can help you better verbalize what's wrong with a design. Instead of always saying, "I know it looks bad, but I can't figure out why," you'll be able to pinpoint problems like bad kerning or a lack of negative space, and defining the problem is half the battle.

3

What you might be looking for is "UI/UX Design for Developers". One book related to this topic is User Interface Design for Programmers

If you're not looking for UI/UX design but looking to improve graphic design skills, I would recommend finding a class on how to use Adobe Photoshop or Adobe Illustrator (if not, at least some tutorials on the internet). By learning a few techniques and looking at other people's work for inspiration, you would be surprised how little artistic creativity you need.

For example, you could learn the Gradient Tool in Photoshop, along with the Rounded Rectangle tool, and you could make something similar to the "Sign up for the newsletter" button on the right (although in this case it's done with pure CSS).

2
1

Let others "do the work for you" in the form of using frameworks, templates and pre-built gui components. For example I can't draw or design are either so for every new web project I do I start off with a css template (from the many free css template sites) for the layout and design and then 'tweak' it from there. These templates include a complete design that can help you address this gap.

I agree with c_maker in that good usability is good design, although it sounds you are being more specific on the 'arty' designy end.

If you are doing web design and layout work here are some of those css sites:
http://www.freecsstemplates.com/
http://www.templatemo.com/
http://www.free-css.com/
http://www.oswd.org/
http://www.openwebdesign.org/

1
  • This works okay for web devs I guess. Really thinking more language -agnostic here though. Thick clients need UI love too. Apr 19, 2012 at 2:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.