Many people, both friends and clients, have asked me how I make a web page. Well, the process is twofold.
The first half (or often more than half) is the design. It all starts with an idea. You have to have some inspiration, or some goal in mind. It helps to know what content you’re going to have and how you want the site to look. Though that can always be changed down the line.
Anyways, I begin my design on paper, generally during Calculus or Chemistry class. Here I work on the page layout, as well as brainstorm the style and functionality of the site. One thing to note is that the better you do on one step, the easier the next ones become. Experience also really helps streamline the process. And as Cameron often says, the essence of strategy is choosing what not to do. This is especially important here, where being able to discriminate between a potentially great design and a not so good one is very important.
Anyways, after three or four revisions on paper, or just once it seems promising, I generally try it out with Photoshop. Now one reason this method is effective is that it decreases dead ends, or at least minimizes losses of time. A sketch on paper only takes five or ten minutes, but creating a photoshop file of the same design could take half an hour. Starting from code, perhaps even longer.
Now we’re working in Photoshop. This is where most of my work is done. Generally I use generated filler text within text boxes (click and drag with type tool) for paragraphs. Photoshop’s guides (Control + ; ) and smart guides (View > Show > Smart Guides) are amazing tools and very helpful in creating a strong grid and well aligned elements. Folders and layer visibility is helpful in creating variants of elements. Rulers (set to pixels) are also good in creating uniform distances and sizes.
My best advice would be revise, revise, revise. Each time, fix something that looks bad or could be better. If you keep improving things, (hopefully) by the end you will end up with something that looks good. As a rule, my first few revisions are generally horrible and I normally take about seven revisions to get things looking good. However, that is also where I do a lot of my experimentation and new ideas - which often create a unique style for the design. So don’t be shy, get your hands dirty and try something new.
These are not clip art, or free templates, or shareware designs, or whatever else you want to call them. They are examples for you to see. Inspiration is one thing but copying is another. All content here is the sole property of me and/or the respective owners.
One great example is Dragon Labs. I didn’t keep track but I might have spent around fifty hours, just creating different variants in photoshop. I’m sure all my friends got annoyed at the time, I was sending them a link a minute. After loads of experimentation, and even more decisions, I reached what I think was a pretty good product. I’m glad I didn’t stop halfway there, at what I thought was pretty good at the time.
Some of these are actually a bit embarassing, but they’re good examples of how a design progresses.
I sort of broke my own rules here. I started coding what I thought was a good final design, but ended up making endless changes. It would’ve been more efficient to have made these decisions and changes directly in Photoshop. Lots of the changes between versions were very minor - just thickness of lines, coloring, text alignment - but the details are what make the difference.
Here is the evolutionary process of this very site. This wasn’t the first design I had going, it was the last of about five or six, but the end result turned out pretty well.
Anyways, the process somewhat ends when you’ve reached a design you are content with. An example is the exploding commerce layout that I’ve been working on. At this point, I think the design is quite matured and just about ready to be coded. Here are some examples of design workflow on the Exploding Commerce design.
Here a slightly unique approach is used. Each “layer” is an addon to the previous one. So the first layer is just the basic layout, and the next layer adds basic styling, and the next one adds some other elements.This lets you focus on one aspect of the site, whether it is fonts, layout, colors or images.
But that isn’t the end. Next we will be going from a design blueprint to a coded site. And in my opinion, that is the a bit easier than coming up with a strong design. It takes practice, and time of course, and definitely experience - but the design also takes creativity and skill, as well as a good eye, and of course time and experience.
Comments
This place isn't ALL about me — just mostly.
Matt Doran
3 years, 9 months ago
All the links to images seem to be broken.
Birgit
3 years, 9 months ago
Very good article, thanks for the insight and all the examples. The image links say “forbidden” for me, too!
Anand
3 years, 9 months ago
Most of it should be working by now.
raghu
3 years, 6 months ago
Nice article! Thank you for sharing.
I am a developer, but have been trying my hands at design lately. I was wondering how the first image on this blog is created? ie. the photoshop part of the design where you have all those lines creating perfect sections. If you can come up with an article on how to take your pencil-paper drawing to photoshop, it would be great.
Those were all the comments. But don't be shy — Add your own!