Thread: when designing a new site what is your prefered method?

Hi All,

as im sure most of you are aware from the 'hundreds' of questions ive been posting recently, im doing a redesign for my site. now i used to try and draw out what i wanted on paper and then go staright into creating it in dreamweaver. which was ok but as my drawing dechnique is poor it was hard to visualise what it would look like until i actually made it, therefor a lot of editing was made as i progressed.

now since i have tried to become a bit more creative i tend to look at some templates on the web for inspiration 'cause god i need it lol' and then create the page in fireworks or illistrator to get a good visual idea of how it will look and then when im happy with that start to create it in dreamweaver, seems to me to be a very good way of designing a new site, although it takes a while

i was just wondering what are your prefered ways when designing a site? do you plan it out on paper, fireworks etc or do you go from an idea in your head straingh to creation?

look forward you your replies
Luke

Well most would say how you do it, do drafts of paper till youre happy, then do some photoshopping design of it and then move onto coding after slicing it up.

Being a beginner however I tend to jump into photoshop and start designing, but I am completely happy with that at the moment.

Using photoshop, create a new document the width of your page - 960px is good.

Then goto edit>preferences>guides, grids & slices and change 'Gridlines every:' to a number divisible by your document width (i.e. for 960px try 120px), then subdivisions divisible by the 'Gridlines every' amount - so 5,6,8,10 or 12 (12 is good as each subdivision will be 10px wide).

Click Ok go to view>show>grid and ensure that view>Snap To> grid is ticked. Now you can create a 'wireframe' using the rectangle tool for each of the main areas, which will snap to the grid and therefore can all line up.

Once you're happy, you can then use the wireframe as a guide for your design.

whoo im doing something right thats a first lol

i hear that word slicing alot when talking about photoshop, what do you mean by that? is it just identifing the different sections of the page?

cheers mate

hay frinkky,

interesting!! thats sounds like a great way of aligning things? might have to look into that. once you have everything layed out as you require do you use the layout as background images on your site?

p.s what do you mean by wireframe
thanks
Luke

The link below is a good example of a wireframe. Once you have that on the bottom layer in photoshop, you can start adding in bits and pieces as part of the design.

http://cu.trabian.com/fileneresearch...eframe0101.gif

What I do is just fire up fireworks and then start drawing away, usually a beer helps get the creative juices flowing (so I do most of my design work in the evening!!)

I usually start in my moleskin sketching out layout ideas and close ups of content areas, then when I am happy with the layout I gather some inspiration (online and offline). Once I have a picture in my head of what I want it to look like I jump into photoshop and use the same method that Jon outlined above.

Then it's a matter of getting the juices flowing.