How should a web programmer learn to design websites? [duplicate]

Question

I worked at an agency coding websites for some time. I got very good, to where I could code entire websites from scratch in less than a day.

The agency had a separate department for graphic design, those designers would give me proofs of the final website exactly how it was to look and what it was to say. This is how I was able to code them so fast, I had full visual proofs of end product exactly as it should look.

Now I've been back to coding on my own for a couple years, and the biggest hurdle I am still having is creating a process of some kind to actually design the site. If I can have a final design, I can code the site quickly.

What is stopping me from finishing any sites lately is I have to design them too. And it can take me weeks to design one site. I can eventually make them look good, but its just trial and error for 2 weeks straight until I finally come up with something that looks half way decent.

My question, as a coder, how can I learn to design the sites too? I've tried working other designers but it hasn't worked out so well. I need to fill the shoes of a designer as well. And I need a process of some kind so designing sites can be a task that I can schedule, rather than it having to be some kind of creative retreat that takes weeks and weeks and hopefully I come down from the mountain with something that looks nice.

I need a step by step guide so to speak, or some kind of training to be able to design sites as quickly as I code them.

My uncle offered to pay for any courses I could take that would train to be a professional site designer. Does anyone have good links to online courses that can make me into a good designer so I can design the websites before coding them?

Thanks, David

EDIT: The best web designers at the agency I worked for happened to professional print layout artists before learning the do the graphics for websites.

Edit 2: Theres another good answer here: Coming from a programming background, where should I start to learn web design?, the answers there and here are all great. This post is still valid because one is from the East, one is from the West. Combined the two should cover every aspect and no one ever needs to ask this question again ;) (of course unless someone from Antarctica asks the question for a third time!)

Answer 1

To start, make some research, look for other companies who sell the same product or have the same name. Look for subjects that have a connection to the company. This should already give you some ideas of the direction you need to go in for the design. Once you've done that, you start the design process.

1. First you brainstorm and make a mindmap. So you write down the name of the company you're desinging a web for on a blank piece of paper. Around it you write down everything you can think of associated with the name and services or product the company sells. Wherever you can, make little drawings next to what you wrote down.

This will help you with ideas for interactivity on the site, and for any designs you might want to use.

2. The next step is a moodboard. You make a board on photoshop with pictures associated with the company. The board is to give you ideas on color as well as design. You search for pictures with colors you think you might use. These can be anything from objects to nature pics to pics of people. On your moodboard you also put a color palette.

You may want to look at these examples:

• https://twitter.com/nanabenzparis
• http://www.fancygirldesignstudio.com/portfolio/ruby-reds-floral-garden/
• https://www.pamelawoodbrowne.com/new-years-refresh/moodboardproject/

After you've made a mind map and a mood board, you should already have a general idea of where you want to go with the site.

3. Take a blank piece of paper, and start drawing mockups of each page of the site you want to design. Put in details like what will be interactive, which color it's going to be, and so on.

4. Now you open photoshop, and you make a fully detailed mockup of your web homepage. Put in everything that's going into the actual website.

Now that you've brainstormed, made a mind map a moodboard, a mock up of each page on paper, and a fully detailed mockup in photoshop, you should have a pretty clear idea on how to design the website.

Instead of creating and recreating codes, you've done most of the preparation on paper. This should make the process somewhat smoother for you. However, be aware that designing does take time. It's normal to take a week or more to create a site(at least for me).

One last tip. If you've done all the preparation, and you start coding, and then you decide that the design doesn't really work for you, don't be afraid to start all over again. Sometimes it's necessary.

Good luck.

Answer 2

Design takes time, that's the catch. You need to think through everything. And indeed if the designer is good then he has thought of everything relevant and implementing should be a breeze. Because the designer should have thought about that, kind of the job. But the world is full of designers that can not do this.

So, did you ever ask your designers who you were implementing solutions for (in one day) how long they took on the designs? If the answer is that they used a 1-2 weeks to do it, then what you're experiencing is about right.

Design is also quite a lot of trial and error, which is what you do. You just need to start doing that trial and error faster. So do you sketch things on paper? Drawing thumbnails might help you test many things faster, since you can have a crude guesstimate in minutes rather than hours.

Answer 3

Print or web regardless, most of the time the trick is controlling two essential things, which alone can create great designs even without photos/icons/etc:

1. whitespace
2. typography

If you look at some very modern websites (Apple, Revolut, etc), these are mostly built using the 1 & 2, plus some sexy photo/video content. Everything else is basicly a routine:

• experience: the more work you do, the easier you'll handle the 1 & 2 and understand how they connect to everything (alignment, grid, content flow, etc)
• inspiration: just being aware of what other designers are doing
• dealing with feedback and providing revisions

Answer 4

This may seem Cliche but you can learn through experience. Research some ready made designs or bootstrapping softwares that may gave you an idea or actually, a design preference.

PS. I did this and is still doing this.