What approaches are there to learn design, coming from a development background?

Question

I'm a web developer trying to become a web designer. But seems that I'm lost in the world of design.

But I don't know what to do, and from where should I start. I'm even unable to find good resources (of course, there are tons of resources out there, but I'm talking about good resources for web-design specifically)

I can tell if a design is good or not, I can offer suggestions to improve the layout or UX. But I cannot pick a color scheme, I cannot create a layout, and I am terrible at generating graphics.

As a developer, how can I pickup design?

Answer 1

I thoroughly recommend reading the book Universal principles of design. It covers 125 design principles (in the current revision, 100 in the previous one), looking not only at software and web design but covering a wide range of design areas, although all are good to be aware of.

Each topic has a single page of description, and a single page of visual examples. Each item has a little panel that lists seminal works on the principle and gives further reading.

It's easy to dip in and out of and for those perhaps less aware of the existence of these design principles, it's an eye-opener. It really will increase your appreciation of the world around you and how everything that you do affects what the user sees and how it is perceived. I can't recommend it enough.

Answer 2

As far as creating a layout, start with blank pages. Ask yourself "What information needs to be on this page?" Think what NEEDS to be there, then think of how you want to interact with it in that setting. This will help you decide what kind of controls need to be present, which can lead to a (rudimentary) layout that you can finetune once it's in place.

As far as colorscheme and detailed layout, pull up an existing project you've worked on and check out the UI. Play with the details, and try out things. If you see something and think "I wonder how this would look over there," move it over there and try it out. Change some colors to see how it looks. This will give you a feel for what works, what works well, and what just isn't a good idea.

As far as generating graphics, there is some natural talent and skill involved in that. Basic image-making isn't to hard to pick up, but if you want quality graphics, you'd better have some artistic skill (or someone available who does).

All in all, its about taking what you need a view/page/screen to do, putting the tools you need to do it in a box, and arranging that box so they all fit nicely. I suggest a lot of test use, to see if it is something you find easy and natural, or if you have to think too much. Make changes if you think it's best, or even if you just don't like what you have and don't know how to make it better, you might like what you see.

Answer 3

I've been in this boat before too. My best advice is to fake it until you can make it. Now I'm not advocating ripping off another site's design but pick a few sites similar to the one you have to make and decide what you like and dislike. Build off those elements and you'll find you already have a pretty well designed site.

Design is a very iterative process so I would encourage you to take the elements you found on other sites and throw them together in a few different ways (either with wireframes or quick and dirty prototypes) until you see what you like and dislike, what you think works and doesn't work for your site. The more you can iterate your site, refine your sense of what works, and get a few extra sets of eyeballs on the site the happier you'll be with the final product.

Answer 4

I recently graduated with a degree in Web Development and Database Design. I will tell you the one thing that is repeated over and over in every book I used on Development.

To quote Wally Wood:

“Never draw anything you can copy, never copy anything you can trace, never trace anything you can cut out and paste up.”

Web design is done incrementally. You will always be improving on others designs, taking what worked leaving what didn't.

Also, keep in mind, that designing for aesthetics is often the opposite for designing for usability, which always comes first.

Lastly, if you want to become a better designer, don't design in a browser. Use paper or Inkscape, but never in a browser. It is basically where we live, but shouldn't be where we design.

Answer 5

It sounds like you have a decent grasp of software design, and at least the basics of UX design.

The gap in your skillset appears to be graphic and UI design. There's many ways to get better at that.

Some options:

• go back to school for a BA/BFA in design/art
• Pick up some graphic design classes at a local community college
• partake in some local community art classes
• Grab some books on design theory/history and start reading.
• work on your client-side dev skills as much as you can (HTML, CSS, JS)
• Practice. Start working on some personal logos. Design your resume. Create a poster for your kid's b-day party. That kind of thing.
• sketch. Draw. Paint.

Answer 6

I would also recommend checking out the numerous html/css templates out there and just pick and choose which ones you like, the different features etc., and make it your own. pretty soon you will develop your own style and preferences automatically

Answer 7

Here's some ways to learn the three things you asked about:

• Picking colours: Colour theory with example websites
• Layout: AListApart articles on layout
• Generating graphics: Lyda.com Photoshop tutorials

Other than that learn by example, bookmark all the websites you like and stick them under 'inspiration'.