Hey there folks.

Im currently developing a new website... now this is my first indepth site that Ive made from scratch and I really want it as close to my idea of perfection as possible. Other sites Ive done the coding and then just slapped a quick design ontop, its never looked particularly good but then Ive never really attempted to make it anything special.

So my current site im coding, im in the early stages of coding still (login script etc etc) but what I want to know is do you guys have a design ready and code the site to fit into the design... or do you do the coding and then make a design around the working script?

- Please let me know what works for you and way :D

My process: Get/write content > organize content into categories/pages/subpages/etc. > design according to content requirements > write code according to design requirements

The layout, visual elements, and user experience should be done before the code. Certain elements and scripts can be coded before hand, of course like standard login scripts, or email forms if you know that those will be elements of the site structure.

I do design, then code, then content.

Since I separate business from presentation logic, it makes it easy to already have half the job done.

I don't mean to hijack the thread but how can you design before you have any content? Isn't the point of a website/poster/comercial to present information? If you don't have any content how do you know what you are presenting and how to organize it?

I was assuming that if it were a large project, half the point would be to have an admin panel so adding information is easier.

I personally already know what the content will be and how it will be presented, so I set up everything then add it. Writing content beforehand just adds an extra layer of work since you have to categorize it twice.

Lets say the site doesnt have content as such... I mean articles or anything.

Example... a forum script (this is just an example)... or something like it.

Oh ok, I get it. :P I thought you meant that you didn't have *any* content before you started a design and put that in later (as in site structure, products, etc). I agree that finalized copy isn't necissarily needed before the design is done, but a basic understanding of how much there is and how to separate it is.

Work through your system.

Identify the functionality you need within your design to compliment what you want to with the site.

After that, build a basic design with simple follow through links... make SURE it makes SENSE. This is the quick way to do UI testing. Don't actually program anything yet, because at this point, you shouldn't be 100% set on what you need.

Once your mock up is giving you sufficient usability, then do your code. I prefer to utilize OOP and API methodologies to keep the function as far away from the form as possible.

After that, put your design in place, and start gluing the pieces together.

It may sound funny, but my typical project has a lot of stuff in /main, a lot of stuff in /templates and maybe 1000 lines of code across all the files in /public_html. Most display-only pages will be less than 7 lines.

It just makes it very easy to work with everything on our end. YMMV :)

Assuming that I know generally what the content is going to be, I prefer to do the design first. When I get a design that looks awesome it motivates me to do the boring work (like coding) so that I can get it up and running.

You could work concurrently on both layout design and coding unless you want to design using HTML :)

Basically how it is in my situation is im coding a community based site, a very basic version of FaceParty I guess... but I am totally rubbish when it comes to the designing side of things.

So im planning on getting someone else (via a competition) to design it, so I wanted to know peoples opinions on which were most important in the order.

What I usually do is figure out what my content is going to be. Figure out how much space it's going to take up (ei: is it going to be a lot of content that's going to make the page scroll, or just a few lines?). Design the layout. Code everything into the layout (ie: make a cms using the design). A WHABAM, I have a website. All I would have to do then is fill it up with content.

i would recommend the following:
sit down, think about all that the site will require and the purpose of the site, write it down and organize the needs into categories or sections (potential links), then either begin drawing it out on paper or go into PS and begin designing the site. after you've got your design, then it's ready to begin piecing everything together.

if your site is flash, it's easy to separate layers in PS and import them into flash voila, site is ready for content (unless it's dynamic and unless it's like sites like http://www.bbdo.com/ that require a butt load of trig and math and just code period.)
if your site is html, your best bet is to just go ahead and make styles of what div's that you'll know you'll need. after that, then it's just figuring out how to place everything..

good luck, man..

If your work is in php, it really helps to have good separation of business code and design elements. I recommend you have a look at smarty if you havent already (smarty.php.net).

What I have gotten into the habit of doing is making a rough mockup on paper of the function (not look) that I want, then implementing it on the code side. Since in smarty you pass variables / arrays / whatever to the templates, you dont really have to worry about what it will look like (thats the whole point).

Then, once in the template-design phase, you can present that data received however you wish using design logic and modifiers. Spend a lot of time thinking about how the site will WORK from a user's perspective, but dont sweat the design in the slightest until the end. Remember, if you follow the examples of cssZenGarden you will never have to touch your HTML to get a completely different look and/or structure to your site.

Well, in my case, I approach Design as a process. And this starts with a little bit of research. Any web design project has a lot of potential pitfalls that can cost you a lot of time if you don't plan ahead.
Design is an hollistic discipline in which you must strive to reach very precise goals.
You have to start by identifying these goals. This is very important for several reasons but maybe most of all to prevent you from wandering off-track.
As a web page is something that has no physical existence and as it is very easy to edit/update, people often make the mistake of using shortcuts which later will be updated a zillion times...

Every communication object has two major components: content and process.
A web site can be very complex on these two fronts. While designing a web site you can't loose sight of either one of these.
There are two simple and effective methods you can use. First, layout the information architecture (IA) for your site: this will be all the information your users will need to access + all the information you must store. With the IA laid out, you've got your content pinned down (in abstract). Now, for the process, you can develop a storyboard of the site. Storyboards have been traditionally used for sequential media but work just fine for interactive/hyperlinked media. The storyboard will help you get a grip on the processes.

These two tools will help you model your database, design your interface and develop your site's inner workings. And if you plan things right, you can actually develop the interface and the internal parts concurrently with minimum fuss.

I hope these tips will help you in your design and development process.
(BTW, I agree to this definition (http://en.wikipedia.org/wiki/Design) of Design. People tend to think otherwise, though...)

Cheers,

Generally, i did DESIGN FIRST. -- for a single fighter web-development...

1. The concept -- (flash or html, rich content or simple, portal or product catalog) -- paperwork

2. Web-structure and sitemap -- paperwork

3. Template, layout, page-flows -- paperwork & photoshop

4. Template & graphics parsing -- photoshop & dreamweaver

5. Database concept and program structure/flows

6. Create physical tables and attach some reusable classes

7. Programming -- dreamweaver

Clear concept and pageflow will reduce rollbacks and modifications


jj.