Get Paid to Participate - up to $1 per post!     Twitter     Facebook     Google+
Hosting Discussion
 

forgot password?



Reply


Old
  Post #1 (permalink)   04-08-2009, 09:16 AM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Everyone has "what works for them". Mine, I'm assuming like other's, has been determined over many years. Beginners spend 20x times more time designing/developing their site(s), or at least I did at first, simply because "My Process" wasn't yet perfected.

I'd like to hear how others work. Hopefully someone starting out will stumble upon this topic and save some trial and error time, and perhaps even proficient design/developers will get some ideas on how to better perfect their process, including me. So here's mine, if I were creating an entire site from the ground up:

1. I start with the business/domain name, review goals, and get a mental image/emotional sense of what the site should project.
2. Lay back in my bed, close my eyes and daydream, envision, and create the finished design on the back of my eyelids
3. Go to my notebook. Nothing special, bic pen, line paper and work out the layout. I usually sketch out minor elements, divs, etc.
4. Create a draft of the logo. Determine the color scheme.
5. Draft notebook items in Photoshop, navigation, & apply minor colors.
6. 2 Notepad++ windows, xhtml & css.
7. Basic xhtml markup, much with Lorem Ipsum, then link all css elements.
8. Revise logo(final), and any images(stock photos, icons, backgrounds)
9. Apply style to all css elements, going back and forth between color wheel. (this is where much of the design is done in my case)
10. Replace Lorem Ipsum with actual content. Populate links href, alt, titles, etc.

That's pretty much it I guess. There'd be additional steps if scripting/functionality were needed or if it needed to be integrated into an existing software, eg. Wordpress, WHMCS, etc. I'd simply split things up and rebuild the template files.

So 10 basic steps for the most part. If someone simply needs me to slice and code an existing PSD it would only be steps 6, 7, 9 & 10.

The only thing about my process that may differ from others and mite be surprising is that I don't design an entire PSD of the site before coding. I mite play with div colors, sizes, and the very basics of the layout, but anything more than that waists quite a bit of time.

Again, I'd like to hear how others do things.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #2 (permalink)   04-08-2009, 09:27 AM
HD Community Advisor
 
SenseiSteve's Avatar
 
Join Date: Mar 2009
Location: Saint Louis
Posts: 4,945
Send a message via MSN to SenseiSteve

Status: SenseiSteve is offline
Quote:
1. I start with the business/domain name, review goals, and get a mental image/emotional sense of what the site should project.
Before you even select a domain name, some research should be undertaken to determine keyword statistics that relate to your goals, and what you desire to project, or how you wish to monetize your site. I'd also suggest doing a trademark search.
__________________
ProlimeHost- Dedicated Server Hosting & KVM SSD VPS
Three Datacenter Locations: Los Angeles, Denver & Singapore
SuperMicro Hardware | Multiple Bandwidth Providers | 24/7 On Site Engineers
 
 
 


Old
  Post #3 (permalink)   04-08-2009, 09:38 AM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by SteveBloemer View Post
Before you even select a domain name, some research should be undertaken to determine keyword statistics that relate to your goals, and what you desire to project, or how you wish to monetize your site. I'd also suggest doing a trademark search.
Agreed, but many of my clients come to me with domain name, and dead set on their business name.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #4 (permalink)   04-08-2009, 09:45 AM
HD Community Advisor
 
SenseiSteve's Avatar
 
Join Date: Mar 2009
Location: Saint Louis
Posts: 4,945
Send a message via MSN to SenseiSteve

Status: SenseiSteve is offline
I understand. So you're already starting behind the eight ball. Evaluating keyword statistics as they relate to the content envisioned will still help to optimize the site. You don't build a site and hope they come. You build a site with content you know your prospects are already searching for.
__________________
ProlimeHost- Dedicated Server Hosting & KVM SSD VPS
Three Datacenter Locations: Los Angeles, Denver & Singapore
SuperMicro Hardware | Multiple Bandwidth Providers | 24/7 On Site Engineers
 
 
 


Old
  Post #5 (permalink)   04-08-2009, 10:07 AM
CSN-UK | Charlie
 
csn-uk's Avatar
 
Join Date: Mar 2009
Location: Swindon (UK)
Posts: 470
Send a message via MSN to csn-uk

Status: csn-uk is offline
If and when I design a site I tend to do things logically, as far as documentation goes its usually nonexistent unless the client requires or requests it (that is if Iím designing for a client). I like to however set some kind of brief, or goals as it where that id like the site to meet.

I personally would other than research into names, possible domain choices, age range, hardware/ software for both server and client side, logoís and some basic aesthetics. Start brain storming on a scrap of paper, often several, the pick one or two (for client) or one (for self) to carry forward.

I then usually map in heuristics and design guidelines dependant if I have done so already or not (W3C, Jakob Nielsen, Ben Schneiderman) and also start to divide the site ether on paper or more often in my head, thinking of where code is going to be reused (navigation, headers/footers etc) and usually go for .PHP thinking of includes and interactivity.

That done my 10 steps would be something like:
  1. Add flesh to the bones by writing some Pseudo code (basically, text and code combination Ė the equivalent of writing the code in English)
  2. Open Dreamweaver CS4 or Notepad, create a html file and start fleshing out the site/design placing divís
  3. Open Dreamweaver CS4 or Notepad, create a CSS file and start the styles using the naming already used.
  4. (Being no amazing graphics artist) Contact a member of my family (graphics artist) and send over some rough sketches /ideas/briefs for logoís or images I am not able to create.
  5. Tie the CSS and Graphics together with the html, fill with standard text if necessary and make adjustments before adding the final content.
  6. Adjust the styles accordingly to make the site aesthetically pleasing and fast loading.
  7. Place code in .PHP files formatting correctly adding code to change navigation styles and allow for as much code/content to be reused where possible. (often dividing the site to, header, body, footer)
  8. Check all links are fully functional updating them site wide where possible through the .PHP files.
  9. Put online (non public) to test and debug where necessary adding interactive through Java or integrated scripts where and if possible.
  10. Present to client, review, change, modify and repeat where required.

Thatís a quick overview of how I would go about building a website, a lot of people tend to have similar approach but mix and match the steps (take a look at the two names mentioned for guidelines for example) as there is a lot of overlap. There is no real right or wrong though thankfully although go to an exam board and they will tell you otherwise
__________________
CSN-UK | Shared Hosting | Dedicated | VPS | Custom Packages Avalible On Request | Quality SSL Certificates from COMODO CA
CSN-UK.net | Server Status | Client Area | Live Support
 
 
 


Old
  Post #6 (permalink)   04-08-2009, 06:59 PM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by csn-uk View Post
[*]Place code in .PHP files formatting correctly adding code to change navigation styles and allow for as much code/content to be reused where possible. (often dividing the site to, header, body, footer)
I do the same in many cases. IMO, the more you can reuse code/content the better.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #7 (permalink)   05-10-2009, 04:16 PM
HD Amateur
 
Join Date: Apr 2009
Posts: 56

Status: MH-Andy is offline
Good tips, thanks
 
 
 


Old
  Post #8 (permalink)   05-10-2009, 05:11 PM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
One step I left out that is extremely important to my process is to choose a color scheme. I mean, you can have a general idea of what colors you want to use, but without having some type of "chart" of 5-10 colors you'll use there's a good chance you'll fumble around for quite a while trying different combinations. And I don't mean "blue" I mean the actual hex values
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #9 (permalink)   05-13-2009, 04:20 AM
HD Master
 
Zagor's Avatar
 
Join Date: May 2009
Posts: 366

Status: Zagor is offline
1) Sketching and planning the design on a piece of paper
2) Photoshop, Fireworks, Illustrator, for designing and slicing
3) Dreamweaver for coding (I never use the design view WYSIWYG editor, I just like DW's options for tracking down changes throughout the site)
4) All work is checked in Firefox, IE6 and IE7 at the same time.
5) When the site it is finished I check it in Opera and Chrome.
6) Publishing with Dreamweaver or FileZilla or Total Commander.
 
 
 


Old
  Post #10 (permalink)   05-13-2009, 12:49 PM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by Amdinistrator View Post
1) Sketching and planning the design on a piece of paper
2) Photoshop, Fireworks, Illustrator, for designing and slicing
3) Dreamweaver for coding (I never use the design view WYSIWYG editor, I just like DW's options for tracking down changes throughout the site)
4) All work is checked in Firefox, IE6 and IE7 at the same time.
5) When the site it is finished I check it in Opera and Chrome.
6) Publishing with Dreamweaver or FileZilla or Total Commander.
Not bad. Welcome to the forums.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #11 (permalink)   05-13-2009, 03:39 PM
HD Guru
 
shockym's Avatar
 
Join Date: Jan 2008
Posts: 694

Status: shockym is offline
I am not a designer by any means but I fully get what you are saying. I am the type that can see it but can not make it, so I have other people for that. I like the way you process too, most people end up taking the easy way out and say "we need more time" but at least I can tell if I hired you, if you needed more time it would be worth the wait seeing as how you end up laying things out before you even start the project.
__________________
Please your clients & thank them from time to time.......they are just like groupies that keep the band going strong.
 
 
 


Old
  Post #12 (permalink)   05-13-2009, 08:27 PM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by shockym View Post
I am not a designer by any means but I fully get what you are saying. I am the type that can see it but can not make it, so I have other people for that. I like the way you process too, most people end up taking the easy way out and say "we need more time" but at least I can tell if I hired you, if you needed more time it would be worth the wait seeing as how you end up laying things out before you even start the project.
Thanks. If I ever "need more time" is usually due to not having everything I need from a client. Though obviously not getting back to me with "what color do you want the links to be" wouldn't keep me from much

I think one important aspect of things is to present a few options, let them choose which is best, then get consistent feedback until they are satisfied with the final result.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #13 (permalink)   05-14-2009, 09:42 AM
HD Community Advisor
 
SenseiSteve's Avatar
 
Join Date: Mar 2009
Location: Saint Louis
Posts: 4,945
Send a message via MSN to SenseiSteve

Status: SenseiSteve is offline
Quote:
Originally Posted by siforek View Post
Thanks. If I ever "need more time" is usually due to not having everything I need from a client. Though obviously not getting back to me with "what color do you want the links to be" wouldn't keep me from much

I think one important aspect of things is to present a few options, let them choose which is best, then get consistent feedback until they are satisfied with the final result.
One thing I haven't seen here is 'managing your client's expectations (before you even start).' If they know your process upfront (and agree to it in writing), there'll be less confusion down the line. Design can be incredibly subjective.
__________________
ProlimeHost- Dedicated Server Hosting & KVM SSD VPS
Three Datacenter Locations: Los Angeles, Denver & Singapore
SuperMicro Hardware | Multiple Bandwidth Providers | 24/7 On Site Engineers
 
 
 


Old
  Post #14 (permalink)   05-14-2009, 07:37 PM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by Steve-Hostirian View Post
One thing I haven't seen here is 'managing your client's expectations (before you even start).' If they know your process upfront (and agree to it in writing), there'll be less confusion down the line. Design can be incredibly subjective.
You're right. I guess started this thread to simply list the technical tasks, etc. There's much more to it considering communications, agreements, and an overall understanding of what the client wants.

Client's expectations is a very important, if not the most important aspect IMO. It can be a bit tricky. I've found a happy medium between a 10 page proposal and just covering the basics of what they want.
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #15 (permalink)   05-18-2009, 05:48 PM
HD Master
 
Zagor's Avatar
 
Join Date: May 2009
Posts: 366

Status: Zagor is offline
Quote:
Originally Posted by siforek View Post
Not bad. Welcome to the forums.
Thanks. I have very streamlined and fast workflow. I tend to keep all things organized, and all materials at hand. I can't emphasis enough how much this saves time that you can use later for something else.
 
 
 
Reply

Thread Tools

New Post New Post   Old Post Old Post
Posting Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Sponsored By: