Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

What resources could I (a programmer) find to help me with some basic design skills for an internal web application? I don't mean to make it look like it is off the shelf, but I would like to group information together in a nice format, to have tabular data displayed nicely, get some icons for "help", sorting, deleting, adding, saving, etc. I'd like to start with some best practices for when I design reports so that they can be printed relatively cleanly, etc.

share|improve this question

2 Answers 2

Skills required can span graphic design, ui design, information architecture, user experience, and front end development (CSS, HTML, JS).

Not knowing which of those skills you may or may not have, some general suggestions:

  • steal. Look at lots of good interfaces. Borrow from them.
  • keep it simple. Use fewer colors, not more. Use fewer screen layouts, not more.
  • leverage a framework. There's lots of UI frameworks out there these days...jQuery UI being one of many.
  • focus on tasks.
  • user test.
  • think like a user
share|improve this answer
1  
Sorry -- I'm a .Net developer, but I cut my teeth on HTML, JS and CSS in notepad, so I'm very web-centric. I do try to use few colors -- to the point where I always end up with a very light gray for background, very dark gray for text, and red for error messages. Which is why I'm here. :) Thanks for the advice. I'm printing it out and taping it to my wall. –  Matt Dawdy Feb 14 '12 at 19:55
    
It's been a long while since I've done .net, but I hear it's fairly easy to integrate jQuery now...so perhaps looking at jQuery UI might be a good idea. Good luck! –  DA01 Feb 14 '12 at 21:45
    
Yeah -- jQuery UI is a given for me, if only for the date picker. –  Matt Dawdy Feb 15 '12 at 15:07

Frameworks are definitely a good idea. Bootstrap is one of the most famous one, but MailChimp also has a collection of atomic elements that can be used to assemble new UIs quickly. It's called a Pattern Library.

Some other interesting references (more like a link frenzy, but you might find some of these interesting!):

  • Compose to a Vertical Rhythm is a guide to calculate optimum vertical rhythm (the spacing and arrangement of text as the reader descends the page) by using font size, line height and margin or padding.

  • A similar approach but for Baseline Grids (A baseline will ensure appro­pri­ate lead­ing (line-height) and is invalu­able in any lay­out that uses columns).

  • A guide and library on Responsive Tables, in case you need your site to respond to different resolution or devices.

  • Smashing Magazine's article on Web Form Usability, and their system for rating and comparing websites :) I definitely recommend checking their articles, most are really good!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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