• Registered: 2006-06-23
  • Posts: 63

Topic: Web Design for Dummies

Hi, thought I'd post this here. I've been a programmer for over 8 years now but only began building web applications 2 years ago. I think it's fair to say that right now, I don't really have a designer's brain. I don't really know which colors to use, how to create a unique layout e.t.c. Don't get me wrong, I eventually get a good design and the clients I build web applications for tend to rave about the design, but to be honest, it takes me such a long time. Like at least 70% of the time it takes me to build an application is spent on design. I'd like to shorten this dramatically.
Can anyone suggest tips on how to speed up the design process, maybe sites I can look at for inspiration, simple tips e.t.c. I'm currently working on a project and I'm facing this problem once again. All my tests have been written, the application's logic is more or less complete. But designing the interface for the admin section is proving a major chore and I haven't decided on anything for the past four days.
Of course as we all know, with Web 2.0, the bar has really been raised and average web designs just don't cut it anymore, and I don't want to rip off someone else's design.
Thanks

  • From: kansas city
  • Registered: 2006-06-15
  • Posts: 383

Re: Web Design for Dummies

Just look around.  Try out basecamp, or shopify.  You don't have to copy it directly, but if you "borrow" an idea here and there, you'll start to develop your own.  It took my a while to realize that you can't start from nothing when it comes to design. 

If you're looking for literature The Zen of CSS Design, is a really good one.  It doesn't talk so much about CSS as it does just basic design concepts.

thabenksta's Website

  • Josh
  • Forum Ghost
  • Offline
  • From: TX-USA
  • Registered: 2006-05-10
  • Posts: 776

Re: Web Design for Dummies

I'm no designer myself, but you should become an avid reader of A List Apart. smile

Josh Catone helps run this place
Rails Forum - Rails Jobs

Josh's Website

  • Kelli
  • Illusionist
  • Offline
  • Registered: 2006-05-11
  • Posts: 300

Re: Web Design for Dummies

www.webcreme.com and www.designmeltdown.com are two good ones for inspiration.

Other places I go for thoughts/reading on design:
http://www.andyrutledge.com/
http://www.weareseencreative.com

KSD

Kelli's Website

  • Registered: 2006-06-19
  • Posts: 54

Re: Web Design for Dummies

One of the greats, Cameron Moll, just posted this to his blog yesterday

Beginner

  • Registered: 2006-06-30
  • Posts: 19

Re: Web Design for Dummies

You probably thought of this but have you thought of outsourcing the design to  a good web designer.

The 70% saved in your development time would allow you to tackle more projects and spend your time at what you do best.

You may get a good ROI on the cost of outsourcing.

Otherwise, I made some breakthroughs in my CSS skills with the two 'Eric Meyer on CSS' books.

Good luck

  • Registered: 2006-06-23
  • Posts: 63

Re: Web Design for Dummies

Thanks for all the links guys. I've been looking at some of the blogs you put up and they've helped a lot. Glad to say I've finally completed the admin interface.

allesklar you're right I could outsource it but this is a skill I really want to develop.

  • Registered: 2006-06-30
  • Posts: 19

Re: Web Design for Dummies

daibatzu wrote:

allesklar you're right I could outsource it but this is a skill I really want to develop.

More power to you. all the best.

  • ryanb
  • Yardmaster
  • Offline
  • Registered: 2006-06-14
  • Posts: 6,324

Re: Web Design for Dummies

There's an excellent book called Don't Make me Think which I find has a lot of practical advice about usability (not necessarily graphic design so maybe not what you want). The site Web Design from Scratch has some pretty good advice too.

Last edited by ryanb (2006-09-16 02:07:41)

Railscasts - Free Ruby on Rails Screencasts

ryanb's Website

  • Kelli
  • Illusionist
  • Offline
  • Registered: 2006-05-11
  • Posts: 300

Re: Web Design for Dummies

I think good design fosters good usability, and vice versa, so it would definitely be a good read.

KSD

Kelli's Website

  • riki
  • Ticketholder
  • Offline
  • From: Japan
  • Registered: 2006-09-18
  • Posts: 5

Re: Web Design for Dummies

I always do layouts in Photoshop, so you can focus on the design and quickly make changes without worrying about the technical aspects of what your building.

  • Registered: 2006-09-21
  • Posts: 3

Re: Web Design for Dummies

I must admit that for the small sites I've done so far I tend to go over to www.owsd.org and find a template I like and adapt it a little bit to what I'm looking for. 

Gets me out of all the heavy lifting of working out colours and the like, which I'm not great at...

  • Kelli
  • Illusionist
  • Offline
  • Registered: 2006-05-11
  • Posts: 300

Re: Web Design for Dummies

If you're struggling with color coordination, may I highly recommend The Pantone Guide to Communicating With Color. I :heart: this book.

KSD

Kelli's Website

  • Registered: 2006-06-23
  • Posts: 63

Re: Web Design for Dummies

Thanks a lot. I've read through many of the links and have already come up with 3 designs I am truly proud of. I will be buying a couple of books:

Don't make me think
Defensive Design for the Web and
The Pantone Guide to Communicating with Color.

I'm starting to believe design can be learnt, not just something you are born with.

  • Registered: 2007-01-03
  • Posts: 3

Re: Web Design for Dummies

I usually start off with a good color scheme. I really like the adobe color scheme site,

http://kuler.adobe.com/

but you can use any.

Then i use photoshop to design (use some diagonal backgrounds, nice gradients, and keep how you would code it in mind). Then I will determine how to slice it, slice it, and code it out.

I'm trying to get my vector skills up because the most creative websites have vector images, headers, navigation, etc.

  • Opel
  • Coach Class
  • Offline
  • Registered: 2006-11-24
  • Posts: 62

Re: Web Design for Dummies

There is a new tutorial on colour and design tips on Slash 7 that I found helpful. I am a full time web designer and do a lot of work for developers in my free time. I'm trying to learn rails as I'm getting a bit bored of designing CSS layouts all the time. Below is a rough few steps of how I tackle a design.

1. Browse the net for sites I like webcreme, stylegala, css beauty etc are good for this. I also go through magazines and club flyers to. I go through all to look for colour schemes, styles etc that work. Bring them all together either as a montage in photoshop, or my use slideshow on my Mac. and browse until I get a few ideas.

I may take a colour scheme i like from a flyer with a layout that I like from a site and the aesthics froma  few other things will give me a starting point for putting  my own stamp on the design. once you get to this point then you will probably be rolling with ideas you want to try out.

2. I ALWAYS make a graphical mock up of my site pages home/content and any special pages to get signed off by the client. It also gives me a framework to work from.

3. Make sure you always use colours and saturation to identify specific areas for usabilty. The y don't have to be different but just show a there are different things going on. e.g. grey back ground for nav menu's and sub menus and white for content. The tutorials on usability should cover this.

I find this site is covers any CSS problems I have to : http://www.cssplay.co.uk/

  • ryanb
  • Yardmaster
  • Offline
  • Registered: 2006-06-14
  • Posts: 6,324

Re: Web Design for Dummies

I just got this sitepoint book in:

The Principles of Beautiful Web Design

This looks like a design book made for programmers! Finally, where have you been all my life? wink

Seriously, just glancing through it, this book looks really good. I have barely started reading it, so I'll come back and update my impressions if they change.

Railscasts - Free Ruby on Rails Screencasts

ryanb's Website

  • Beppo
  • Ticketholder
  • Offline
  • Registered: 2007-04-19
  • Posts: 3

Re: Web Design for Dummies

great site for color pallet ideas and generation: http://www.colourlovers.com/

  • elpee
  • Passenger
  • Offline
  • Registered: 2006-12-29
  • Posts: 38

Re: Web Design for Dummies

daibatzu wrote:

.. Like at least 70% of the time it takes me to build an application is spent on design...

Ohh...man this is so true. I spent most of the time figuring out why this layout work in Firefox and but not IE, or just to learn how to ./ in css box model

  • Registered: 2010-11-11
  • Posts: 1

Re: Web Design for Dummies

There are lots of templates to work on that could be adjusted to your needs. And there are sites that provide site building service for free. You need just to buy a domain from them. Abbey from http://www.xtgate.com/

Last edited by AbbeySmith (2010-11-11 05:50:13)