How do you design a layout for your website?

Shicky · 12 Dec 2010 at 19:33

Im used to tweaking from templates I find as Im weak at this sort of thing. However I have to do a radio station website and want to design it from scratch. I have a prototype built with the basic PHP functionality I want, now I wish to create the actual look of the website.

I have a very basic design drawn but am a little unsure how to implement other than CSS/HTML trial an error. Any other way to do this?

Tripnologist · 13 Dec 2010 at 09:08

I usually wireframe it first, and then create the layout around that in photoshop.

Sp00n · 13 Dec 2010 at 09:33

Tripnologist said:
wireframe

+1

Shicky · 13 Dec 2010 at 09:39

Thanks i'd never even heard of wireframing at all. Any kits you can recommend?

*Its for my final year project so clear design like this will look great

zomex · 13 Dec 2010 at 10:25

Tripnologist said:
I usually wireframe it first, and then create the layout around that in photoshop.

I agree, that's the best way to go. This is what I do:

- Sometimes I'll create a rough drawing of the layout (I can't draw but still

)

- Next I'll use a wireframe to re-create a clearer version and make tweaks where needed

- Next I'll create the design in Photoshop with much more detail

- Lastly I'll create the HTML/CSS and take images when needed from the PSD file.

Thanks i'd never even heard of wireframing at all. Any kits you can recommend?

I'd highly recommend the following:

https://gomockingbird.com/

It's free for 1 project and online based so it's a great solution

You can also export the file as a PNG or PDF once finished.

Jack

Shicky · 14 Dec 2010 at 20:54

Thanks very much guys that mockingbird wireframing kit is pretty cool. Moving onto doing it in photoshop now...I've never done this before, any tips? Plan to exhaust google/youtube starting from now so any lesser known facts would be very welcome.

With regard to colour scheme could you recommend anything to see what will 'work' or is this essentially what is done in photoshop using shapes and filling?

Im a bit concerned with doing logo's in this, I have one I ripped from the old website but its going to require heavy cutting/magic wanding to fix it to the main part I want, any quick tips for this?

Finally im really worried about developing so the site appears correctly on all resolutions. My own lappy is 1280x800 which obviously raises concerns about how it would look on a standard monitor. The plan is to develop to 800x600, then hopefully have what looks like a raised page in the centre, the background would then increase/decrease based on the user resolution. Is the way around this using a repeating background and percentages to align images correctly for example?

Thanks

Tripnologist · 14 Dec 2010 at 23:03

Shicky said:
With regard to colour scheme could you recommend anything to see what will 'work' or is this essentially what is done in photoshop using shapes and filling?

You should have your color scheme and a general idea of the 'feel' your trying to achieve before starting in photoshop.

Shicky said:
The plan is to develop to 800x600, then hopefully have what looks like a raised page in the centre,

Nobody designs for 800x600 these days. The standard is 1024x768 with many people now starting to move up to 1280x1024.

I, and many others, recommend 960px.
1024px-960px = 64px (which gives you space for scroll bar and a bit of whitespace on each side of your layout)

960 is also perfect for grid based layouts, which most decent ones are.

Tetsujin · 15 Dec 2010 at 01:20

Tripnologist said:
You should have your color scheme and a general idea of the 'feel' your trying to achieve before starting in photoshop.

On the emboldened point, this is a great tool for colour schemes.