Web Design Workflow


For this project I had to create a website for Little Richard’s House of Donuts. I began planning this project by creating a paper sketch of the website. I then created a digital mock up based on the sketch. Then I created the website using HTML and CSS coding. I had to redesign the digital mock up many times. At first I had the website be blue, but then I realized the website looked too depressing. I then made it orange with donuts in the background to stimulate hunger. When creating the website, I used vector graphics because they look great no matter what size they are, which was perfect for the ever adjusting responsive design. I got all of my images from the Creative Commons so that way I can use the images without any restrictions.

Workflow Defined

  1. Research doughnut websites to see what the most appealing features are.
  2. Create a paper mockup of website to get a rough idea of what the website will look like.
  3. Create a digital mockup using Adobe Illustrator.
  4. Research color theory to determine the best colors for the website.
  5. Redesign digital mockup to incorporate doughnuts in the background and the color orange.
  6. Create website using HTML and CSS.
  7. Publish to the web using Cyberduck and the Hulk server.

My Mockups

This is my paper mock up.

This is my Illustrator mock up.

This is the HTML version of my website.

My Final Webpage

Here is the link to my website. http://hulk.osd.wednet.edu/~chaserp/Donut%20Website/LIttle%20Richards.html

What I Learned

In this project, I learned a lot about how div boxes work in HTML. I was able to adjust these boxes to fit my needs for the website. By learning about how the div boxes work, I was able to analyze how parts of a whole interact with each other to create complex systems. In this case, the div boxes were the parts and the complex system was the website as a whole. In this project, I couldn’t remember how to insert a link in the form of an image, so I looked up a tutorial on how to do so and I was able to do it. Here is the link to the tutorial. http://www.w3schools.com/HTML/html_links.asp

Leave a Reply

Your email address will not be published. Required fields are marked *