For phase 4 of our Designed Experience project, I am proud to present the preliminary interface design for the PAC website, which I previously had wireframed on paper for phase 3 of this project.  Check it out below!  View the entire story for an explanation of the interface’s components, as well as to see previous iterations of this design.

P.A.C. Website Interface Design (Final Draft)

Click here to see a version labeled with SIZES!

So, all in all, not my favorite, but not my worst either (you can see my earlier designs at the end of this post).  The title/logo area will be a link back to the home page.  The 4 blocks of text to the right of the logo make up the navigation menu links, where the first link (the button) being the main call to action on the menu bar, while the other three are links to other informative pages (but we really want to emphasize the “Tell Me More!” page to the user).  The main call to action on the entire website is the “Reserve Now” button below the navigation menu above the content area.

All of the content on the website will be no more than 1000px wide (tentative size, depending on execution), which is the size of the main content area as well as all of the navigation elements put together.  The content area is of variable height, depending on the content that it contains.

In terms of the layout of the actual content on a page-to-page basis, I hope to implement some awesome parallax scrolling techniques on at least 2 sections of the website (namely the

This site is intended to be viewed on any kind of non-mobile sized screen (although iPhones will usually work-ish), and while the content area and menu content width will be constrained to 1000px, the ribbons in the layout (behind the navigation links and behind the copyright footer) will extend to fit the width of any size screen, and the ribbons will shrink appropriately (up to 1000px) to accommodate smaller screen sizes.  The layout will have responsive elements, but the number of which depend on the amount of time I have to work on this project!

Check out some of my previous iterations of this interface design below.  They’re really not that good, I just included them to show the steps I took along the way that resulted in the final layout draft you see above!