I always start first with some good old research. After I have a good idea of what's out there I then move to creating some really quick sketches. This opens the conversation of what features or sections we are going to add to the website/product.  

sp sketch
 

After I know what features to include or remove, I then move to some quick wireframes. I add images from my research to validate why each section is being added to the wireframes. 

Screen Shot 2014-02-24 at 9.54.18 PM.png
 

If the site or product is complex, I will create more high fidelity wireframes and validate them with my research. For this case, it is simple website so I move to create some mock ups and iterate based on feedback.

SP_web_V4.jpg
 

Then I move to pixel pushing. I make sure everything flows. I create styles and rules for users to identify with. 

SP_web_V6.jpg
 
SP_Web_July19_V17.jpg
 

After the mock ups are pixel perfect, the next step is to code the website or product and test it. Below are some notes after the first test. 

Screen Shot 2014-02-24 at 10.58.08 PM.png

Once the website or product has been tested and everything is pixel perfect the next step is to make it live or ship it, my favourite words :)