[James Mitchell]

I just finished reading a fantastic article on designing a website. I encourage anyone who designs or develops a website (should be all of us) to read this article. Like the article says, if you have any technique you use - feel free to share it here too.

Quote

I’d fallen into the trap of designing the website, but not the content. But the content is the website.

Article: Design Your Content - pt 1

[BigMike Sidelka]

Personaly I start off with inspiration. I put that inspiration on paper and then draw it in photoshop. I keep re-drawing till it looks as good as i like. each time i re draw it i look for critizism. Mostly when designing im looking for flow and readablity with simplicity. not 100 000 links and buttons. I then slice it up and start coding. I try different methods of coding till it looks right in all IE, FF and Opera and passed W3C validation.

when it comes to making big websites with alot of programing i do a method. First is the alpha versions. nothing fancy at all. no images just some rows and maybe a column or two, testing nothing but the functions and programing. then I do beta version. Not much design but now I layout some things. maybe add some simple css styling. but I place things where I think theyll fit. Next are the RC's. Now I add the GUI of the web site. until it looks good. I like to make the website work before I make it look good, cuz then its harder to trouble shoot.

This post has been edited by BigMike Sidelka: 26 March 2007 - 10:14 PM

[Ben Abrams]

BigMike Sidelka, on Mar 27 2007, 04:10 AM, said:

I then slice it up

im sorry, but as your design method, you lost me at that point. Why are we still following archaic sliced websites?

BigMike Sidelka, on Mar 27 2007, 04:10 AM, said:

when it comes to making big websites with alot of programing i do a method. First is the alpha versions. nothing fancy at all. no images just some rows and maybe a column or two, testing nothing but the functions and programing. then I do beta version. Not much design but now I layout some things. maybe add some simple css styling. but I place things where I think theyll fit. Next are the RC's. Now I add the GUI of the web site. until it looks good. I like to make the website work before I make it look good, cuz then its harder to trouble shoot.

that would make it hard to upgrade though? its not a bad method though

[benbacardi]

I always draw the design of one of the biggest content-filled pages in photoshop, create the design, then think how to code it validly with CSS and XHTML. Once I've done that I split it into the includes that I need, and create one template page to duplicate for all the others that need the same design, regardless of the development code each needs.

I think doing the development code functionality first would make the design much harder as you'd have to do it once, and again for every page you've already created the back end code for. Whereas doing the design the copying that and creating each page from that seems easier.

[Ben Abrams]

benbacardi, on Mar 27 2007, 01:05 PM, said:

I think doing the development code functionality first would make the design much harder as you'd have to do it once, and again for every page you've already created the back end code for. Whereas doing the design the copying that and creating each page from that seems easier.

not if mike too includes the right code..

[James Mitchell]

I tend to do a blend of what has already been mentioned.

• I sketch it on paper (even if it is very rough, but admittedly I use a ruler a lot).
  
• Once I am happy, I turn my sketch into a Photoshop document (PSD).
  
• I of course tweak, tweak, and tweak some more.
  
• Once I get something I am happy with, I ask my wife her opinion (and then tweak more).
  
• Then I usually export it as a .jpg to share with TJ (my business partner) and get his input (and tweak more).
  
• I typically at this point have a layered Photoshop file of exactly what I want. I then slice (extract) the image elements I'll need for the website. Trying to keep images to a few, I usually design with CSS in mind.
  
• At this point is when the XHTML framework and the CSS kick in to create a full fledged breathing website.

I hope people got from the article to start like Cardy said, with the "biggest content-filled page" and design your site around the content. Content IS your website, so make sure you design with it in mind.

[TJSingleton]

You say you start with inspiration, but where are you getting the inspiration from. Design should reinforce the content. Content out is the best approach.

[James Mitchell]

TJSingleton, on Mar 27 2007, 09:14 PM, said:

You say you start with inspiration, but where are you getting the inspiration from. Design should reinforce the content. Content out is the best approach.

I am guessing you are directing that at Big Mike, as I don't have the word inspiration in my last post . Content out is certainly the best approach (see bolded text in my last reply).

[TJSingleton]

Yeah sorry James.. If I were going to comment on your post I'd add... and get his input (and tweak more and more and more cause he is a perfectionist and won't leave good enough alone).

[James Mitchell]

HaHa - well that is the point in showing things to people. To get their feedback. Even if you don't accept it or modify based on it - input is another key to completing a website.

[BigMike Sidelka]

benbramz, on Mar 27 2007, 07:05 AM, said:

im sorry, but as your design method, you lost me at that point. Why are we still following archaic sliced websites?

When i say slice i dont accually mean use the slice tool. I use the selection tool and make the individual images so i can code with it. I rarely use the save for web or saving sliced.

benbramz, on Mar 27 2007, 07:05 AM, said:

that would make it hard to upgrade though? its not a bad method though

Not really. You get all the programming ready then just change the layout. Upgrading... maybe if you put the big program scripts in external files and use includes it shouldn't.

TJSingleton, on Mar 27 2007, 09:14 PM, said:

You say you start with inspiration, but where are you getting the inspiration from. Design should reinforce the content. Content out is the best approach.

Well i just browse around maybe look at a template site and put some ideas together. Make them my own.

This post has been edited by BigMike Sidelka: 29 March 2007 - 08:54 PM

[James Mitchell]

BigMike Sidelka, on Mar 29 2007, 09:52 PM, said:

When i say slice i dont accually mean use the slice tool. I use the selection tool and make the individual images so i can code with it. I rarely use the save for web or saving sliced.

I actually use the slice tool, and I use the save for web. It reduces the image size and that reduces the load time.

BigMike Sidelka, on Mar 29 2007, 09:52 PM, said:

Well i just browse around maybe look at a template site and put some ideas together. Make them my own.

I think TJ meant that the content should be the driving force that determines whether or not a design you see for inspiration actually works. Instead of saying - "hey that's a cool design, I think I'll mold mine in like fashion." I typically see elements on websites that give me inspiration on how to present my content better.