HELP!! I need a Website structure

Hi there

What's the most effective way in structuring a website before you start building it?

Every time I try to complete a website, it feels like I'm spending too much time on it which I believe it should only take a minimal effort.

Here is what I normally do:

> Documentation; "A creative direction" Well this is not always the perfect document as I am always in a hurry to design and then end up going back and forth trying to add more stuff to it. I'm really not good at this but practice makes perfect I guess lol.

> Design; Once I have the layout then I slice it up ready for css/html etc.

I only ask for help because if I was doing a deadline for a client then I would definitely breach it by far.

Please help me, I just need a guideline or maybe someone who have been designing websites for years to show me a more easier and quicker way instead of days which might take only hours.

I really appreciate your help on this one.
Many thanks in advance.

CHEERS

 

I've been designing for 4 years and still refuse to use Photoshop for anything other then background gradients and logo text... And even then its a last resort. Not a popular choice with many, but thats how I work.

Structure comes before style and as such you should write it before actually designing it. I have never agreed with people slicing and dicing in a Photoshop environment but ultimately that comes down to personal opinion after having tried various different methods of design.

If you're comfortable working like that then you've either made your first step into design or got yourself a bad habit - you choose and again its down to personal opinion.

The way I design (by creating each element individually and only using images where necessary) offers a massive boost in the amount of time it takes to get a design off the ground... Not to mention load times, saved bandwidth etc etc. If I want a block in the sidebar for say 'categories' then i'd style that after writing the html - thus I can re-use the element for other sidebar blocks without going back to the image suite, edit its visual aspects from the stylesheet (not having to switch back and forth between software exporting image after image trying to achieve pixel perfection), apply minor changes for highlighted sidebar segments etc etc.

At the end of the day it comes down to personal preference... But changing your design over and over is what is truly slowing you down.

The structure IS the building.

 

Cool! Thanks for that dlb.

So how would you normally do your mockup/layout?
Obviously you wouldn't build a website off the top of your head without planning or seeing what producing right?

I use Photoshop to do my mockup/layout unless you know a better way of saving time then I'm willing to hear it out.

 

What ever happened to using a pen and paper???

Draw your main pages out as sketches, detail what code will be required.

It is easy to change and add things.

This is how I have done it for years! Photoshop is not always the answer!

 

I think this was one of my steps I left out.

>I normally write it out first
>Sketch on paper
>Design it and then code it

Hey I'm not sure what you mean by

?

 

For example:
You may need scripts that run certain areas of the site, just quick details about how everything is produced really.

I much prefer my trusty pencil!

 

I used to design by writting the code by hand, started designing in photoshop then transfering it now.

 

lol
yah that was a difficult one

buy sticky yellow paper note and work on your content 1st

once you have all content together, divide the content by sections (category)

once you have the categories you start building the menu (navigation )

after you have done your navigation
next process is to work on content placement
(simplest way to show your most important content in your front page)

after you have figured out the map for the content (structure)

your next task is to work on GUI , Interface, Icons, Flash assets players, different themes colors.

next:

create a framework for your CSS (cascading sheet style) which you will use to style your html

then work on your html , seo ,

sometimes you gotta use advertisement on sites so visually that has to be considered as well

 

For my own sites I tend to do them off the top of my head. Sometimes I plan on paper beforehand and always when there is a client involved. But generally I just let the creativity flow. It's quite a rewarding process, if somewhat mentally draining.

 

Sweet thanks for the feedback guys .

I like the way VarriaStudios broken everything up and that's something I was looking for.

CHEERS

 

While I think VarriaStudios has a decent process, here's how I go about it while working with clients.

First, the key is getting as much information as possible from the client. Don't ask for anything and everything, just what is needed from them for your design.

Some examples are having a generic brief with questions to ask them about the site (styles they like, things they like about other sites, colors, etc etc). Also, I feel it is important for ask them for their sitemap at the beginning of the project.
95% of the projects I work on aren't prepared to give you their new content, so it's a waste of time to bother with it. Ask them for their sitemap - how they want their site laid out. If they need help or have too many items, then you should assist them to better organize the navigation.

After that, start working on the design however you feel is best. I'm not going to get into this b/c it's a long process and everyone has their own way to do it. If I had to say something, start working with the items you can't change and have to be in the designer, header/logo and navigation are most important.

After you're done with the design, get approval from the client and start your coding.

 

The best way are :

#IDEA

1) First user paper and pencil to make scratch design
2) Use photoshop to make initial rough design (mockup)

#WORK

3) Create html/css template base on your design
4) Create individual detail design using photoshop (header,logo,etc,..)

Enjoy!