Web Design Workflow – Little Richards Donuts



The first thing that I did for this project was drawing up a design layout. I drew up a design with a header, footer, and three columns.  Next I made a design in illustrator that had white boxes and a forest background. Not satisfied with that website and a need for simplification, I change the colors, fonts, and background of the website, as well as getting ride of the navigation bar. The new design had caramel colored boxes that were slightly translucent and a sprinkled donut for a background. The font was changed to a more bubble/ fun font as well.

Workflow Defined

  • The first thing that I did was draw a layout that was similar to the walrus website project
  • Next I made 3 templates for the websites (PC, Tablet, and Mobile)
  • After that I built the design for the PC website, using a forest background to symbolize Washington’s forest
  • Next I copied and transferred the PC design to the tablet, compressing it
  • Following that I moved the design to the mobile, making the rows horizontal vs. vertical
  • I didn’t feel satisfied with my design, so I redesigned a simpler concept
    • Got rid of the navigation bar at the top
    • Changed the boxes from white to a more caramel color
    • Made the background a sprinkled donut instead of a forest
    • Changed the menu box to a reviews box
    • Added link to yelp in Reviews box
    • Changed monthly specials box to a picture of a donut display case
    • Changed fonts to Bauhaus 93
    • Made the caramel boxes transparent

My Mock-Ups

AnakinScreen Shot 2015-05-04 at 10.19.30 AM

Screen Shot 2015-05-15 at 10.03.46 AM

My Final Web Page / Site


What I learned

I learned that designing a website is harder than expected, especially the keeping it simple part. I also learned more about how to code responsive websites, as well as how hard it is to transfer a design into code.

Leave a Reply

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