I developed this mockup website for a ficticious chain of coffee shops in Upstate New York primarily in order to practice my skills in wireframing and prototyping.
To get started, I first developed a series of very low-fidelity wireframes in Balsamiq Wireframes in order to create the basic layout of the website to be constructed. Upon completing the first series of wireframes in Balsamiq, I then used WireframeSketcher to develop slightly more detailed wireframes using components from the open-source Foundation CSS framework that was intially developed by Zurb Technologies. (WireframeSketcher’s integration of Foundation UI stencils made it fairly easy to accomlish this task.)
After this, I then coded the front-end interface in HTML and CSS, integrating the Foundation XY grid system with the various Foundation UI components from the wireframes. I also used jQuery to do some basic DOM manipulating. After completing a full static prototype, I then converted the site to WordPress using the JointsWP theme, which is an empty boilerplate starter theme that utilizes the Foundation framework.
