Before the Code: Planning Your Site

[TheDPQ]

I'm wondering what sort of techniques you guys use to plan your website. Mostly I've stuck to the pen-and-paper method. I draw out a few tables, how I want things to connect, and maybe a few things on how the code may need to be organized. I've mostly dealt with simple classic ASP and PHP site, and just recently (oh so recently) got into .NET. My chicken scratches aren't really cutting it.

I've gotten on a much larger project then a simple website and I'm wondering how you guys "plan" your websites. What sort of techniques, software, and resources do you use to plan the site.

What about presenting that plan? Usually I get an instruction "do this", I do it, and I just present the finished product a few days (at most) later. However,what about when your project goes on for months, has phases, needs to be approved...etc. How do you present the plan?

I thought this might be an interesting discussing and it would help me a great deal. This is more on the programming side of planning, not the project manager.

Thanks for your time.

[ruby-lang]

In most projects I've participated, we had Visio for screen mockups and the occasional high-level architecture diagram; and one use case document for chunk of functionality. If you are writing CRUD, the most useful documentation you can have is a DB column <-> screen field data map.

[NateL]

I just discovered ConceptDraw and experimented with the trial version. Those three pieces of software are excellent and I'm trying to talk the higher ups into getting it. Give it a shot

[Newviewit]

We always start off with pen and paper to jot it all down then move over to Visio to map the structure. After a wireframe page outline is created then get into Photoshop to complete the designs. Sometimes or big projects we will include MS Project to keep track of the tasks. Also in the middle of creating an online wiki for document collaboration so the clients can view progress in real time.

[lukemeister]

I just discovered ConceptDraw and experimented with the trial version. Those three pieces of software are excellent and I'm trying to talk the higher ups into getting it. Give it a shot

I've found ConceptDraw to be very useful, and quick. It took a little getting used to at first (finding where all the shapes/tools are at) but once I got used to it and felt efficient with the app I found that I could make website mockups and charts pretty quickly compared to anything else I've tried. It even got me to stop using pencil/paper for the most part, which I had always reverted to in the past.

[puzanov]

As for planning something bigger than just common website I would suggest not to use simple scratch pen-and-paper method but to look at some project methodologies (XP, Scrum, RUP, etc).

[loganathan]

I always use paper & pen to do

[Foxhound]

i dont know how to plan my work actually..
i dont know how to describe it on paper or anything else, so i just keep it in my mind and plan how everything work and pass.
but this goes for like days of thinking and everything is organized

the best in this is that you wont stop to think whats next, you just code code code then coffee

and the worse is if you forget something you just forget it..

[Force Flow]

Paper and pen/pencil for the initial UI, database, and functionality/psudocode. I probably go through 3-5 revisions of those. Then, I draw out a clean copy of the UI and use Visio for laying out the database, and probably go through a few revisions with the database.

Once that's done, I jump into laying out the pages either in dreamweaver or photoshop (sometimes a combination of both), start coding, and revise the database along the way as needed in case there were additional things to add/remove/change as I got into the actual coding.

After it's built, there's bug fixes and minor revisions and minor feature requests, and after that, it's more or less done.


If I do a version two, I start the process over again from paper, keeping in mind what was needed and what wasn't, plus any additional feature requests. Increased modularization for better code happens here, which makes it easier for more features later. I also usually take code splices from version 1 here and there when useful.



I've rarely done version twos, and have never gotten to version threes.

[graham barnes]

It is great you have stuck to old tactics, I actually start by making a specification what do i want from the site, what do i want it to achieve and what market - this needs to be all kept in mind when making any site and for anyone.

I then do wireframes myself in photoshop because thats what i know, I personally am not a person which thinks into the website too much detail when planning so ill plan but not a great deal otherwise ill be planning all my life . I then go ahead and make something again in photoshop and think ah well that will look better maybe there or something else there once i'm happy ill either build it or wait a few days and then come back to it because sometimes i get that excited by the work it becomes a difficult task to find any issues with it without a rest or someone else's input.

Once i think its ready i go ahead and build it but lets just take a step back a moment before i build it i think how am i going to code it because i need to think about web usability, not to put too much graphics on otherwise it becomes too distracting for the user and may divert their attention away from what i'm trying to achieve.

I also make sure i code it into XHTML first with no CSS document and all the CSS embedded into the html file then once i see what it looks like and checked it in a lot of browsers ill then put the CSS into a CSS file and then validate it to W3C Strict. Once done ill start performing SEO and SEM on the website.

I'm sure others will have different ways than mine and i have a even longer way if i include how i design too but this way has worked best for me and my clients for over 10 years now so i think its good, please feel free to pick any holes in my description.

[mason.sklut]

Pen + Paper (10&#37 then Photoshop (30%) then XHTML/CSS (50%) then PHP/JS (10%).

....then relax (100% completed project).

I've really found it helpful to use Photoshop more for getting the design part put together. You have all the tools needed right in front of you and all you have to do is use your creativity. Afterwards, slice up your design accordingly (ie. into smaller images that you will use for repeating patterns in CSS). Code the site with a similar layout as your one in Photoshop (decide between fluid and fixed width). Code any PHP if necessary (if using a CMS or Databases). Lastly insert any JS code you may need (but make sure your site will function without JS as well). Then test your site in all browsers. Fix errors. Take a break. Finish the project before the deadline. Validating is important, but to make CSS hacks work in some browsers, validation is not as important.

- Mason

[joejac]

Hello,

In my own experience, I use paper only on the first meeting with the customer, to record what he needs, but after that no paper, these tools are very practical:

1.- MySQL Workbench Visual Database Designer I document almost all the project requirements there.
2.- RealDraw incredible easy, powerful and fast to mockup the application screens, I even do a simulation in XHTML using jQuery, if the project requires RIA.
3.- After the first personal meeting I do a set of Web meetings using DimDim where I talk and show the customer my desktop with the DB EER Diagram and the the application screens, and adjust them to customer needs, then I make him to approve the EER Diagram and the screens by email.
4.- Then I develop the application using PHP/MySQL, XHTML, JS libraries, CSS, Flash for banners only.

That is all.

By the way I like the Idea of ConceptDraw for an application diagram, but few years ago I found it no so easy to grasp, I will look into it once again.

Best regads
joejac

[none_novik]

Every time thinking about a new site, I think it would be worthwhile to develop a plan. However, all confined to a sheet of paper and pen....

[Jessemn]

pencil & paper ftw!

[flooby]

Plan the Navigation first, then sketch on paper, Photo shop mock-ups then build the site and test in various browsers.

[headless1226]

Paper and pen wins the competition for me as well,

However with all the amazing software suites available at our fingertips, I have recently began integrating visio and business plan developers etc..

[L4DD13]

i tend to just stick to pen and paper however on my current personal project im starting to realise that pen and paper doesnt do the job so im goin to invest something more advanced. It gets a bit tedious trying to make revisions on paper, it gets messy with all the crossings out.

[ohsmilnme]

Pen and paper first, then an excel spreadsheet to set up the site blueprint.

[Jacotheron]

I have been doing a few projects lately (after each other). I use pen and paper just to get a layout structure of where what elements should be. After that I do everything digital. I then design a template. Throughout this design, I keep the client updated and the client should respond to approve of the template. I keep the client updated first by e-mail and later upload to my server with no links to the page, only a path. After the client finally approved the complete template, I duplicate the template to all the directories where the pages should be (keep links updated). Then I insert the information, images, etc. The client then have to approve the complete site before upload.

I am also new to Sitepoint forums, but everyone had to start sometime.
Jaco Theron