There are lots of different ways to plan the general layout of a website, from good ole pen and paper to drawing it up in Photoshop first. Just wondering what people do? I tend to be a very "in the head"-type of person, but for complex layouts with important considerations like size, is there a better way?

I work best with a basic framework in place. Raw code with a WYSIWYG option (like Trellian supports) helps me click back and forth to see the end result of my wild typing. LOL

I use graph paper as it helps me to draw straigh lines. I do a few sketches whilst browsing the net for inspiration and then I tanform sketches to visuals in fireworks.

I use graph paper as it helps me to draw straigh lines. I do a few sketches whilst browsing the net for inspiration and then I tanform sketches to visuals in fireworks.

 

I tend to plan it out in my head first. Because I'm not much of a designer, I like to get the basic functionality of the site going first. I then design the site according to its functions, not the other way around.

 

Just a personal preference.

I do basic sketches on blank paper, but I always end up moving things around completely once I'm on the editor.

And this is why I am not a website designer.

 

I look at a multitude of templates and basic CSS layouts that are already completed and just pick one I like. Then I change the colors & graphics to be what I want them to be. I end up with servicable, but not too exciting websites.

Aww, Melos.

 

Bobber, could you expand on that a bit? Do you mean, for example, you might design (in your head) the menus based on what links you might want in them, that sort of thing?

Aww, Melos.

 

Bobber, could you expand on that a bit? Do you mean, for example, you might design (in your head) the menus based on what links you might want in them, that sort of thing?

 

Well, I think Melos means he considers first the structure of the website and then he moves forward. You sort of need to know what it's in the menu to be able to create a functional website.

 

When I desgin (sometimes I do, although my main field is SEO), I take a very careful look at the corporate identity guidelines of my clients. I do my first layouts in Photoshop.

I use some reverse engineering tool like visio first to chalk out my plan then when step by step with my design, normally i use photoshop in later stage when my all things were in place.

I get my inspiration analyzing websites I like design-wise, check out their functionality and if the information communicates properly. Since I am also a writer, this is really important. Then I go and work out at the gym and surprisingly, the ideas start flowing as I am on the crosstrainer stepping wildly into the land of ideas without rules and regulations. Guess that’s what oxygen does to the brain..LOL. Sometimes, the ideas for a layout come at the most unusual times - then I get images in my head, go to the computer and start sketching right there in Dreamweaver or Photoshop. You just can’t beat that UNDO button when the ideas are flowing fast and you have to cancel stuff out and try other ideas immediately.

 

:-)

it works for me to sketch on a piece of paper first.(not being able to draw first lines, i thank some of you for bringing up the graphing paper) lol. i do bookmark great websites and blogs i chance upon to combine great designs, layouts and ideas.

I usually don't plan a layout. I am more spontaneous as I would try things that works and doesn't. That is how I am.

To go about planning a layout, I just make a simple pen and paper-type sketch as a first step and analyse how the content should flow as I sketch. Then I become more detailed as to how things should align and use graph paper (which is REALLY helpful) and a ruler. Then, I use Photoshop to create a simple layout with coloured boxes that contrast a bit. It's only as a set of final steps do I actually go and create all the nice little effects (gradients, etc.) that go into website design. I value the way things are aligned and placed over aesthetics sometimes...or perhaps both to a certain degree.

I'm glad someone else uses coloured boxes.

 

I do exactly that when I'm building a site layout as then you can see for definite when your floats aren't working or your padding is throwing the layout out. It's easy to take a screen shot and measure in pixels how wide your divs are and see if there is an issue with padding.

 

I use background colours on all my main div elements until I've got the layout sorted and tested on all browsers cross platform. Then I'm ready to start exporting graphics and placing them within the file. Sometime you need to change things as maybe the design changes, so I always go back to the original coloured file and tweak that until it works and apply the changes to the site in progress. It's a very good way to work.

First, I make a site tree. Then I decide which elements need to be on which page. I then sketch the elements in rough detail, for example, for the 'latest news' section on the landing page I will draw the shape and sketch the position of text, the "Read more" button, the heading etc. I do that for every element on the website. Then I create a wireframe for each unique page, something like this.

 

Then I make it look good. ^^,

I always make the design up in my head, then I draw a rough and small concept layout. I have made all my own logo's and symbols for complex things like gradients e.t.c

 

Then I take that, goto photoshop.

 

Design it in there.

 

Then add a splash of CSS and XHTMl on gas mark dreamweaver, for 30 minutes, and you have a cake....doh, I mean a template

I always go onto a peace of paper and sit in a chair for insparation then draw. Then I scan it put into fireworks and cut it out and draw over it. I am doing a round one called glow that I got a from a basketball....

I dounno really. Sometimes on paper just for ideas (i mostly do logo ideas on paper) but i use good ole microsoft photodraw 2 witrh a huge blank page and then just start making stuff, fiddling with it etc. Colours should be decided in-pc i think!

 

@lex

For me mostly on paper, but right now I just saved all kinds of template, and just use it for layout which realli save me a lot of time and it is easy to change the content later on as well

Yes - I think paper wins - you can quickly rub it if something goes wrong.

This however works well if you do it for your own use - what if you'd like to show your ideas to the customer?

 

Using Fireworks and its Frames you can get yourself quite nice workflow by first designing the framework and than using the same elements on the new frame adding colours, and other formatting.

 

Thanks,

I use pen and paper first, as they are just for my eyes they always end up as scribbly messes with a lot of notes around, then I move to either photoshop/flash depending on what is needed and design the layout from there.

Using Fireworks and its Frames you can get yourself quite nice workflow by first designing the framework and than using the same elements on the new frame adding colours, and other formatting.

 

Yes I am the same, I work with Pen and Paper, sketch out some rouch ideas, navigation position & header design mainly. Then once i'v played about with some colour schemes I do a mock-up in Fireworks to show the client.

 

I use pen and paper first, as they are just for my eyes they always end up as scribbly messes with a lot of notes around, then I move to either photoshop/flash depending on what is needed and design the layout from there.

 

I find Fireworks quicker for creating layouts and Photoshop for quality results, I find the .gif exporting aswell much better.

I just tend to doddle a rough idea on paper. More layout than design. But I'm only a designer by requirement not want or ability :-)

I used to go for the pen and paper approach initially but these days tend to go straight for photoshop. I've used it for coming on ten years now so find it just as easy to create a grid with blocked out areas for header, navigation, content, footer and then add the design based on these blocks.

 

I may grab a pen and paper from time to time but more often than not I find it easier working on screen.

I'm pretty set in my ways when it comes to starting a new design.

Start with drawing it out, then photoshop a wireframe - just grey boxes labelled with text. then i add content then i pretty it all up! do that for three or four pages then start building. everything starts with a sitemap though obviously.

I'm the same I create a wireframe in Fireworks and then work the design in that way. The content is all planned before this as I find it much easier to know what i'm designing for, otherwise I take forever designing.

 

DK.

I am still experimenting with different techniques...

 

I first started off with doing 'all-in-my-head' designs where I just had a gist of a theme I wanted or did something spontaneously.

 

Now I do sketches of what I want on paper, do a very very simple mock-up in Photoshop and then do the main structure on Dreamweaver. After that, I apply CSS and images.

 

I might start using wireframes, though I sort of cover that in my doodles on paper...

 

Unfortunately, I want to start following a brief to meet some-ones specification to see how well I perform, but I doubt any one would give up spare time to some one my age Because it's all very well doing what I want, but that's not how the industry works (unless your client lets you have 100% control), usually the client has a list of 'must-haves' and essential elements they want in their site.

I am still experimenting with different techniques...

 

I first started off with doing 'all-in-my-head' designs where I just had a gist of a theme I wanted or did something spontaneously.

 

Now I do sketches of what I want on paper, do a very very simple mock-up in Photoshop and then do the main structure on Dreamweaver. After that, I apply CSS and images.

 

I might start using wireframes, though I sort of cover that in my doodles on paper...

 

Unfortunately, I want to start following a brief to meet some-ones specification to see how well I perform, but I doubt any one would give up spare time to some one my age Because it's all very well doing what I want, but that's not how the industry works (unless your client lets you have 100% control), usually the client has a list of 'must-haves' and essential elements they want in their site.

 

 

Trying doing websites for family and friends. Then they can act as a client and it will give you a portfolio as well.

Trying doing websites for family and friends. Then they can act as a client and it will give you a portfolio as well.

 

Nice idea! I'll ask around.