Reader Question: Design first? Or make it up as you go?
In the real world, is it best to design it all on paper first, and then create the site? ... How does everyone else do it?
My Thoughts
This is an excellent question, one which I ask myself nearly every time I start designing a new site, especially when I'm working from scratch. It can be very tempting to just start banging away at the pages - and in fact, I am more often guilty of just that. Plus, it's just more fun (for me, anyway) to start building things than to draw out ideas on paper or in a graphics program. But, the sites that I've built that have lasted the longest or been the most effective were the ones where I spent time planning, on paper, what the site was going to do and look like.
However, I recommend planning more than just the design. In my opinion, the design should be driven more by the structure of the site, than by any specific desires of the designer. In other words, you need to look at how big or small the site is so that you create a design that supports it. For example if your site has a large number of sub-topics, you'll want a design that has lots of access points. Or if you're creating a site that is to sell one product, you'll want to make sure the design provides a lot of focus on the product and its benefits.
Remember too that planning a site doesn't have to be done on paper. Many people create entire websites in Photoshop or another graphic program before they ever begin writing HTML.
More Resources
- Solving Writer's Block for Web Designers - 6 Ways to Get Unblocked
- What to Write About
- Prioritizing Web Projects - How to Prioritize
- Maintaining a Businesss Site
How do you plan your designs?
Do you build your sites on paper or in a graphics program before you build them in HTML? Do you have any recommendations for maid_of_kent on whether to plan first or just jump in? If you can help maid_of_kent, you can post your ideas in the comments here or reply to the message in the forum.
Comments
Wonderful post!
Form follows function.
I usually start designing and coding at the same time. I often build websites “just for fun” and delete them after a week, even though they may have not even seen “daylight”. Usually, I just make the ideas up in my mind and start coding away. While I am coding and developing the page in my head, I come up with design ideas, which I then put into life in Photoshop.
When I started my job at the car dealership I am working for now (as a webdeveloper and online marketing specialist), I had to build our website from scratch. All I got was a color sample and a logo image to start with. I told my new boss that it will take at least 12 weeks before I will even start “working” on the design and functionality of the website. That means that I told him that he will not be able to see that I am actually working (with viewable process). That was a pretty scary part of the whole new job thing. But he accepted it. So I spent 3 months and 350 handwritten pages of design and programming plans. The website I have built is now working for about 8 months, with about 48000 PI (page impressions) per month. We have had a lot of hacking attempts (at least 2 a week), and I am glad that I have spent such an amount of time planning the looks, functionality and security of the site. So I would say: the bigger the project, the more you have to plan in advance. If you want to have a website that is stable, functional and secure: go with planning before you start designing.
My 2 Cents
)
Chris
Chris, sounds like you are lucky guy. My job doesn’t afford me much planning time as we streamline projects, so most of my time goes into designs and interactive concepts. But I definitely agree, the sites that I spend most time planning almost always remain my most rewarding.
Hi Joseph,
well, I guess I _am_ a lucky guy. I have been chosen to work as one of the first fulltime webdevelopers for a car dealership in germany. Not many companies like ours goes that way. Most of them don’t even see a reason to have a website, let alone to hire a fulltime developer and marketer.
What I found was most important was that my boss agreed to let me work my own way. Every once in a while he asked “How’s it going” or “What are you working on”. That was like once a week. But completely without pressure. When I unplugged my phone at my workplace and handed it to him telling him that I couldn’t work on the planning while the phone rang every minute or so, he just accepted it. So I have had a great time there during the programming phase. Now, everything has calmed down a bit, I am mostly doing marketing and advertising and some international sales (as I am the only english speaking guy at our house). I think I am a pretty lucky guy … that job is fun, my boss (who has actually NO idea at all about design, programming and wb business) tries to understand me and gives me space wherever I need it. Pretty neat. I have seen webdesign forms that don’t do that, even though they know what it means to program or design. To me, 5 hours of programming are just as hard as working with a jackhammer for 5 hours.
Anyhow, I have the weekend off, so time for me to go working on my private projects *gg*
When I started designing web pages, ten years ago, it was enough to use some program as Front Page and a couple of photos.
A couple of years ago I teamed with my son, who is studying graphic design. So when a new project arrives I ask him to draw a photoshop layout. He leaves me to deal with HTML, CSS and PHP. The Photoshop layout is what we first show to the client, to start working. BUT most of our sites are small ones - tourist cabins and the like. If the site is bigger we spend a lot of time planning it in advance.
I am just starting to learn web design. I don’t have a site of my own as yet. I have been doing design work for a sight for a few years. I jot ideas, words,etc on paper, then go to a graphics program and begin laying with various elements.
Once I have a few primary elements figured out I go back to paper and pencil to begin building around the ideas. I finish my work in a graphics program and load it up to the web master as either a jpg, gif or pdf. I have done some pages in Pagemaker, made them into PDF files and uploaded them. I don’t recommend the latter. Very tricky and limits what you can do graphically.
Because I am an old systems person turned web designer/developer, design means functional design to me.
For a recent freelance client whom I only met online, I did a text-only functional mock up and a separate graphic design. This saved me time in the end. I thought I was very good at keeping function and graphics separate but on this site, they are nearly ‘Zen garden’ separate!
Goals, functionality and navigation decisions ALWAYS precede graphic design. Should it be eye-catching for advertising or does it need to be more information-driven? Web commerce? Hit revenue?
HOWEVER, I NEVER wait until ALL of those decisions are made. It is just that technical and graphic design work needs to be sufficiently informed so that the first prototypes don’t cause customers to lose confidence in your ability to meet their needs. The project design then has a better chance to proceed with orderly review and refinement.
Paper first!
Another programmer and I have a little unofficial competition going on our separate projects… She starts keying right away (”The design’s in my head.”) and I sketch little drawings of how it’s going to work: links to and from the main pages, directories, where the various index pages live, how it’ll expand in the future, whatever. -Then- I hit the keyboard.
Hers is often up first, but then gets revised (and revised and revised) long after mine is up and fully functioning.
(My mama always said, “What makes you think you have time to do it over to get it right, and not enough time to do it right the first time?”)
For my job I make many websites on a regular basis. I almost always design the site in Fireworks (or Photoshop or whatever)and then start coding it. This is nice so my boss and co-workers can ok the design first so I don’t have to change it mid way through. It really depends on the type of website though. If it is just a one page info site I usually just start coding. I would never use paper to design a website though. ^_^
I work with a client to find out what they want to include. Then I design on paper: what should be on the pages - for the html and then how they should look - for the css.
I write all of my own html - I do not use any program that writes the html for me. I have to design first and then create the pages according to the design. I would not know how to proceed without a plan to work from.
I used to go right to my Expression WEb software and start creating a web site and pages and CSS styles….and, once I broke that habit, I began to work more efficiently.
I suggest reading a book by SitePoint.com, “Principles of Beautiful Web Design”. The author lays out the steps in planning a website.
I now follow those steps, in my own way. First, I do talk to my client about their goals and preferences, colors the want or currently use, etc.
Then I search the internet for similar websites. For instance, my current project is a Property Management Website. So after meeting my client in person, I went to the internet to learn and research this area….I need to write all the content so I wanted to see how other sites organize it, etc.
Obviously I am taking notes..and my mind begins to see how I want to lay out my site.
I also begin to write on paper, the elements of my navigation, and the heirarchy I am going to use for pages. Again, I keep users in mind first, and SEO second.
I then go to templatemonster.com or similar sites to look a templates to get ideas of the actual layout. My sites are more geared for usability than they are for heavy graphics….and with good reason….a boost in SEO….
Then open Fireworks….an Adobe graphics program that is much easier and faster than photoshop….and quickly make a prototype and begin experimenting with colors, content boxes, navigation, etc.
I do not use graphics for navigation buttons, i make them completely from CSS. I may, however, use slices for a background or nav bar to give it some flare. I never want my site to be heavy in the code, and search engines cannot read graphics. So I use CSS to design my entire site, including putting images or graphics as CSS backgrounds.
So, yes, planning on paper is essential, and I do it throughout my development. I don’t do the whole site at once. It’s more of an ongoing kinda thing. But intially, you need something on paper to keep it organized.
Hope this helps.
Kelly
In learning HTML and trying different WYSIWYG as I looked at what I liked in other peoples web pages, I think I really don’t have enough experience to plan a web site before starting the coding.
My basic goal is a site with a large amount of useful information content up and running with a format that is easily updated because chances are that I will forget a lot of the coding knowledge before I get back to the updates.
To that end I have used Jennifer’s advice about a CSS sheets and even taken it a step further by creating a master page with an extensive menu in Microsoft Web Expression2 beta version.
I am linking that master page to 45 different content aspx pages that are easily updated with cut and paste methods. The master page menu and the CSS page written only for the master page enable changes throughout all 45 pages for menu and layout and all of that only requires 3 pages of code.
The big parents with children menu system JUMPS OUT AT YOU on the first page hopefully showing a potential client (through the large amount of usefully organized information) that it is a worthwhile bookmark. By the way how do you code a good bookmark request to the user into a web page?
Still, I can see from reading Jennifer’s emails and these blogs that I have a lot to learn and I will probably never be nearly as good as a professional designer.
I was very interested in Christian Haensel had to say about the large amount of time he spent planning website security and really have not seen a lot of information on the web on the security topic. How do I achieve relative website security?
I use a grafical outlining program called Mind Mapper. It can really help figure out the way things will work together. Not much help for the graphics end, but for layout and linking, big help http://www.mindmapper.com/
that’s really a fantastic post ! ! added to my favourite blogs list..
We think that short videos on a website are great. We encourage our clients to put short videos on their site when available. They are a great way to show credibility.
However, you have to remember that you don’t always have as much editorial control over a video compared to a Flash walk through.