Hi everyone,
I’m going to firstly say that I haven’t done web design for very long in comparison to a lot of people on this forum. That said I’d like you to keep it in mind when reading this, because I know it won’t be fool proof until it gets reviewed quite a few times.
The Idea
Alright, so you might be asking yourself, why am I writing this? When designing a website, I’ve always been thinking about the design process and what logical steps to take when designing a website. Basically, I’m trying to work out a good list or set of steps to follow when designing a website from scratch. Now I know this can vary massively from site to site, so this will really focus on a basic site built from HTML and CSS. With that in mind…
The Process (subject to an absolute load of changes 
)
So I’ve come up with a small guide which people on here may or may not find useful. The idea to this guide is to get as many steps and processes covered as I can so this can be useful to all the newcomers to web design.
Here we go!
This is the process I follow when creating a website step by step.
• Gather information and ideas – Gathering information on a website will help you when it comes to designing the website. Information such as images, if there’s a previous website, information about the company etc.
• Gather ideas about different features for the site – That is to say different elements on the site such as lightbox image galleries, image sliders, javascript modules, contact form ideas and anything else to improve the site. Work out which ideas suit best and then continue on.
• Design the site on paper – Using the grid system design a few different layouts of the website. Try including as much detail as possible for the design, including navigation options and various image placements, colours, backgrounds, number of pages and even textures. Including a lot of information is key to successful implementation. Also include other features of the site (lightbox, image slider, javascript which is included, php etc).
• Review the site on paper – Check the site on paper to make sure you and/or the client is happy with the design and take note of accessibility and whether the layout is sound.
• Take the paper design and move it to Photoshop – This way on designing in Photoshop, you can get the ideas of what each element on the page can be called (such as div id=”banner”). You can map out each element on the page and also include colour codes or textures where necessary.
• Review the Photoshop PSD – This way, you can finalise changes and also include anything else which you may not have placed into the design yet. You can get a good idea of what will and won’t work during this process too.
• Create the HTML - Remember to keep content and design separate. The CSS will control the design layout. The HTML will mainly be providing the content. Once you’re happy with the HTML side of things, continue on. Remember to have alt tags for images and accessibility is key.
• Validate the HTML – Using The (X)HTML validator, check the code for errors. This can be done here - http://validator.w3.org/. Clean up any invalid code or errors.
• Check the spelling on the text – Pretty simple, check the spelling to eliminate errors in the paragraphs and text.
• Create the CSS – Create the Cascading Style Sheet for the website, specify all the rules which you need to for the site.
• Validate the CSS – Using the CSS validator tool, check the code for errors once again. This can be done here - http://jigsaw.w3.org/css-validator/. Clean up any errors or invalid code.
• Validate the links – Using the link validation tool, check every link on the site for errors. This can be done here - http://validator.w3.org/checklink/. Fix any broken links.
• Create the meta tags and site description and page titles – Using the google keyword tool, find appropriate keywords for the site to use for meta tags. This can be done here - https://adwords.google.com/o/Targeting/Explorer?__u=1000000000&__c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none
Create the site description, try to make the description short but also to explain what the site is about. Same idea for each page title, include a very brief note for example:
Home | Design – Web design Melbourne. This should increase the google search ranking.
• Add the site to google analytics (or which ever service you would use to keep these statistics). - Google’s can be found here - http://www.google.com/analytics/
• Add the site to google webmaster tools (optional). - This can be done here - http://www.google.com/webmasters/
• Test the site in as many browsers as possible – These days we have a huge range of browsers available to use. Google Chrome, Mozilla Firefox, Apple Safari, Opera, Internet Explorer and others. Test your site in all browsers and try to get the accessibility spot on.
• Fix any issues with browser compatibility – self explanatory.
• Re-validate – Revalidate the code for HTML, CSS and link checking (and feeds if required). Fix any errors which come up.
• Ensure all the directory structure of the website is sound.
• Meet with the client and show the result, confirm any last changes or alterations.
• Run past a website checklist to be sure – I’d recommend this site http://lite.launchlist.net/
• Make the website live - Once you’re completely happy and the client is too, make it live.
Post Note
Once again I’ll say that this isn’t complete, I’m sure that I’ve probably missed steps, got them in the incorrect order, even included ones which probably aren’t required.
Hopefully the community here can help work on this list, provided recommendations and alterations to make this better.
I’ve posted this because I want to help the community out in a way which I think will help and want to become a better web designer. Apologies if there’s any links which are not allowed in that list.
Ok go nuts!
One thing I learned over the years is that nothing is clear-cut. You learn more and more as you go along the way. The longer you have been into this whole website design business, you’ll find yourself adding to your list of pointers, and maybe omitting certain items. Web designers follow different methods, styles, and processes, but there are always the basics =) And we all find ourselves coming back to them.