Transcript
Process WebDesign
[email protected] metacomdesign.com
My Breakdown of the Web Design Process:
This is a downloadable PDF version of my Web Design Process outline available at:
http://www.metacomdesign.com/blog/2010/07/my-breakdown-of-the-web-design-process/
If you think I missed anything, visit the post and let me know!
Concept / Ideas / Research:
The frst stage, if approached correctly, can save you a lot of time and frustration down
the road. Get as much information as you can and do as much research as you can.
Talk with client and gather all ideas
You should always keep a healthy line of communication open between yourself and
your client. Don’t be afraid to ask questions. I have a questionnaire I ask clients to fll
out to help narrow down and defne their ideas.
Clearly defne the website goals
What is the purpose and goal of the website? (i.e. to sell a widget, to advertise a wid-
get repair service, to create brand awareness, to provide people with information about
widgets). What will the end users’ goal be? (i.e. To buy a widget, to compare prices of
widget repair, to learn information about widgets?) Always keep the goal, and your end
user in mind. I could go a lot more in depth with this, but I think you can get the basic
idea.
Existing Logos / Color Scheme / Imagery
If the client already has an existing look, make sure you get all of the material re-
garding it before you start work on the design. This can include anything from a logo to
a tagline. Ask them to provide you with everything they would like to include in regards
to their company/business image. You can also defne your color scheme. I usually put
together a few sets of colors swatches at this stage.
Research
You should do as much research as you can throughout the entire process. Research
is a broad term that encompasses learning about the client / company you are doing
work for, learning about their competition, analyzing design trends for their industry,
what works, what doesn’t work, etc. The more well informed you are, the easier it will
be for you to understand what the client wants.
Process WebDesign
[email protected] metacomdesign.com
Do they need dynamic content?
Dynamic content covers a lot of things, such as a blog, shopping cart with products
from a database, an admin section from which they can update their website from. Not
only will this be refected in the quote, but it can also determine a few design and setup
aspects as well.
What is the basic layout they would like?
Web design doesn’t look like the boxy, table based websites from 1999 anymore.
However, even if the design itself is not based on square objects, the overall appearance
should ft some basic structure. ( i.e. One column with a horizontal navigation, two col-
umn with horizontal navigation and submenu in left column, etc etc)*
Ask the client to provide you with all necessary content
This includes everything; pictures, text, logo’s. If you get all of the content in the
beginning of the project, it will be a lot easier to work with. Try to avoid piece mailing
text and pictures, as this will save time and you will have a good idea of what the client
is looking for. If you are planning on a simple gallery with 10 pictures and the client ends
up sending 50, you might not have accounted for it in your quote.
Domain Name and Hosting
You are also going to need to know if the client already has a domain name and host-
ing. If so, gather all information needed for a transfer. If not, ask the client for domain
name ideas and see if they would like to host their website with you. If so, register the
domain and set up hosting. Don’t forget, this is a billable time.
Review and Quote
After reviewing all of the information that I have, I usually provide the client with a
ranged quote. I try to break down each step, and estimate how many hours it will take
for each.
For example:
• Project Management : 2 hours x $X/Hour = $2X
• PSD to XHTML/CSS : 5-6 hours x $Y/HR = $5-6Y
• Custom photo gallery : 4-5 hours x $Z/HR = $4-5Z
• Total estimate: $2X + $5-6Y + $4-5Z = $XYZ
These numbers are completely fctional; I pulled them out of thin air, but hopefully
you can get an idea of my system of breaking things down.
Process WebDesign
[email protected] metacomdesign.com
Initial Designing
Sketching
I don’t know how many notebooks of lined paper I have flled up with just basic
sketches. Sketch basic layout ideas, right down any thoughts that come to your mind,
brain storm. I also sketch out navigation paths for the end user. For example, I will
sketch out a homepage. Then I imagine the user clicking on a link that says “Products”
and sketch out a product page. From there I will sketch out a “Check Out” page and so
on. These can be really basic sketches, but in my mind they are really helpful.
Use a grid system
I fnd using a grid really does help keep my design organized and on point. I prefer
using the 960 Grid System. Although this this isn’t the solution to every design problem,
it is a good starting point. There are a lot of tutorials out there in regards to designing
with a grid that are probably more capable of explaining how to use them than I am.
However, if there is a demand, perhaps I can write up my approach to the grid. I’m sure
you can talk me into it by leaving a comment!
Mock up a few different variations of the design in Photoshop or Illustrator
Finally! I get into Photoshop or Illustrator! Now that I have all of these wonderfully
great ideas on paper in front of me, I open up my grid template in either Photoshop or
Illustrator and start laying out the basics. I start to block off the different sections for
each page element. I won’t get into too much depth in regards to the design process
either, as this will be different for everyone and again, there are so many other great
tutorials out there. I realize this is only one step in my guide, but this is a very lengthy
process. Regardless, put together your concepts and designs.
Show client mock ups and ask for feedback
I fnd sending your client a nice PDF with all of your concepts, and any additional
information, is a nice way to present your designs. Ask the client to provide you with as
much feedback as they can. After you hear back from them, start making the revisions.
Show the client the updated designs and repeat this process until the design is fnalized.
Process WebDesign
[email protected] metacomdesign.com
Development:
Code basic structure in HTML/CSS
For some reason I can’t quite fgure out, I really enjoy PSD to HTML/CSS conver-
sions. Regardless, there are a few ways to go about this. You can always hire a pro-
grammer to do the technical work. Myself, I usually dive into a nice text editor, like
Komodo Edit, and start coding the basic structure of the page. I chop up the PSD fle
and put it together again as Standards Compliant, Accessible, HTML/CSS. Again, this
isn’t a tutorial on PSD to HTML conversions, but perhaps I can write one in the future
if there is a demand.
Layout homepage with dummy text
Now that I have my structure put together, I usually use some dummy text to
mock up a homepage. Some Lorem Ipsum text will work just fne.
Code additional elements
Every page is going to have some additional elements, such as Contact Forms,
Photo Galleries, Dynamic Content, etc. I start to code these now as well. This step
includes any additional scripting. If I am adding jQuery Validation to a Contact Form,
this is the step. If I am adding a Lightbox/Fancybox script, this is the step.
Test and Validate – Round 1
Now I usually go through my frst rounds of testing. I run my code through the
W3C Validator and check my results. If there is invalid code, I will correct and make
it valid. I will also make corrections if necessary. I will check the current design in the
most common browsers to check cross browser compatibility at this point as well. I
use BrowserShots and Adobe BrowserLab for this step. If there are inconsistencies, I
will correct those now.
Add Page Content
Now I will remove all of that dummy content and replace it with the content sup-
plied by the client, starting with the homepage.
Additional Pages
If the homepage and the remaining pages on the site have the same basic struc-
ture, I will just duplicate the homepage and add the content for each page. My CSS
will be kept in an external stylesheet, so if I do need to make any cosmetic change in
the future, it will be a lot easier.
Process WebDesign
[email protected] metacomdesign.com
Non-visible code elements
When each page has taken form I will now add the nonvisible elements. For exam-
ple, I will add Meta Tags, Analytics, etc.
Testing / Delivery:
Upload all of the site fles to a test server
I have a restricted directory on my own web server where I can test things out. You
can set up a directory that will disallow robots and indexing, with exceptions for sites
you might need. For example, you might need to allow BrowserShots to access your
page, so you can edit your robots.txt fle to allow it.
Check all of the pages in available browsers on computer
I have several browsers on my computer and frst I check over the site in each of
them and make sure everything is consistent and functional.
Validate HTML/CSS
Now, I will check the validation again, using the W3C Validator. I know this may be
redundant, but after making additional changes I check again.
Another Round of Browser Shots
I will again use BrowserShots and Adobe Browserlab to test in remaining browsers.
This won’t show every cross browser issue, but both sites can give you a nice start.
Correct any cross browser compatibility issues
Well, this is a pretty logical next step. Once you have pinpointed and issues, it’s
time to dive back into the code and correct them. Also, don’t get transparent PNG’s
won’t show correctly in older versions of IE!
Test all forms, scripts, etc
If you have any parts of the site that offer user interaction, then you need to test
these as well. It could be a simple email contact form, or a complex product design
application. Either way, they all need to be tested
Finalize and upload
You may need to repeat the previous steps several times before getting to this
point, but when you do, it’s rewarding! After everything is tested, you can now show
Process WebDesign
[email protected] metacomdesign.com
the client the live version of their website. They may request some changes, but don’t
get discouraged. Repeat any necessary steps and be sure to keep track of your time.
When the client approves the site and gives you the go ahead then you can upload the
fnalized website. Make sure your web server is confgured correctly, and also make
sure you upload all of the necessary fles such as images, scripts, etc.
Check live site
Once all of the fles are uploaded and the new site is live, you need to give it an-
other thorough check. Again, go through all of the pages and make sure everything is
functional and consistent.
Additional steps after publication
If you use a service like Google Analytics, check to see that the tracking code is in-
stalled correctly. You can also submit the website to search engines and if applicable,
start doing your promotional work!
Share your thoughts and also check out a list of additional resources at:
http://www.metacomdesign.com/blog/2010/07/my-breakdown-of-the-web-design-process/
© 2010 Ryan Cowles