1

I usually have a hard time designing a good UI for my applications/websites (especially the websites).

Are there any tricks to this? Are there good books that can help/guide me? Or libraries eg. NetAdvantage or template creators that can help with this?

In the case of web development is there a really good UI design tool like Microsoft Expression Blend I can use to develop the layout?

5
  • 2
    That's what visual designers do. UXDs focus on making that "beautiful" design usable.
    – dnbrv
    Mar 10, 2012 at 22:18
  • Are you talking about usability of the interface? or the visual quality of the interface? Mar 10, 2012 at 22:21
  • Both, I think however good the quality can be it should be usable. Mar 10, 2012 at 22:22
  • This question is off-topic, please see the FAQ, notably the section "Your questions should be reasonably scoped. If you can imagine an entire book that answers your question, you’re asking too much."
    – Rahul
    Mar 12, 2012 at 10:33
  • My recommendation, especially in the beginning: Keep It Simple
    – Svish
    Mar 13, 2012 at 8:53

4 Answers 4

4

Tricks? Not really. Like any other handcraft this too requires time, focus and hard work to master the required visual-, interaction- and user experience design skills to deliver above average products.

That said these are some great reads, the 1st more theory focussed (must read primer), the 2nd much more practical focussed. Together they will give you a good kick start!

The Elements of User Experience by Jesse James Garrett
Smashing Book #2

Good luck and have fun!

2
  • Hmmm, order two books to get a good kick start? I was hoping to hear what you use yourself? Pure design with photoshop using some graphic design knowledge etc. Mar 10, 2012 at 22:55
  • 1
    @opatachibueze: Photographers have a saying, "The best camera is the one you have on you". In other words, it doesn't matter what tool you use as long as you know the craft & the tool.
    – dnbrv
    Mar 10, 2012 at 23:18
2

The trick is analysis, testing, and experience. The design should first and foremost be informative and accessible, and (this is important) relevant to the purpose of the product. Before deploying a design, usability testing can be done to identify problems. Last, keep trying; make small single page mockups by hand or using any tools you'd like to try out to become familiar with a good workflow.

I highly recommend doing wireframes before starting on the visual layout and coding the front end. Doing wireframes by hand is not uncommon, but as for software, any tool that can draw basic geometric shapes should do.

For building websites, after doing the above, I personally like to code by hand, maybe using a boilerplate of framework like HTML5 Boilerplate.

1
  • HTML5 boilerplate looks very interesting. Thanks for the link! Mar 10, 2012 at 22:53
1

There really are no shortcuts. As the others have mentioned it comes with experience. One thing I started doing is using Evernote to clip websites that I am particularly attracted to. It has become a pattern library of sorts that I can refer back to. I also found the Non-Designer's Design Book helpful.

1

If you're asking for tips to cut some corners, you can't really, IMHO. You will have to look at the complete design spectrum.

But do have a look here, you should find it helpful I think: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

In terms of tools, wireframe with any tool you prefer (I prefer illustrator but that's because I already have it in my fingers) but start on paper. For the actual design I'd stick to photoshop. Especially the upcoming version CS6 is going to be excellent; it will have document wide text-styling (think CSS) and layer search/filtering.

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