Final Project - Mock-up Web Page

For our final project we wee to create a "mock-up" web page in Photoshop, utilizing a number of the skills learned throughout the semester. I had planned on an elaborate design that used a rather detailed 3D model that was based on the ridge equipment originally found on the starship Voyager from the Star Trek franchise. I had several dozen hours put into the project, and was nearing completion when a sudden glitch in PS caused me to have to abandon that project or risk not having a finished product to turn in. What I ended up making instead took me all of an hour and a half, and it was clearly not what I had originally intendd, but it turned out well enough, so I thought I would share it here.

The project rules were simple. We were to first "storyboard" the intended design, then do a layout mock-up, add text, then put together two separate "pages" from within the intended site. Here, in that order, is what I came up with:

First, the storyboard. I decided to keep this as simple as possible, since when I "pitch" a site I provide the visual details during the presentation. This is a simple 2-column layout with a header and footer. All elements of the page are completely static except for the main content panel (as you will see in a moment). This saves on bandwidth, making the page load faster and perform more smoothly for people with slower internet connections or mobile devices with metered bandwidth. though this layout is in desktop/laptop format (1366x768 pixels), the site would be making use of a responsive layout, meaning that mobile or tablet users wouldn't miss out on any functionality or presentation.

Next comes the page background. Through the use of CSS Media Queries, this image will be selected to match the screen size of the device accessing it (or the closest match, in cases of non-standard displays), thus allowing for improved user experience on smaller devices.

this scene depicts the various "panels" that will be used in the page. Though it's not immediately obvious, there are colors applied to the header and footer panels that serve to improve readability of the text contained in each. Here's what those panels look like without the background image:

As you can see, the coloring is VERY subtle, but it makes the text within them a LOT easier to read.

Here's what the News page is meant to look like. You'll notice that you have to look very hard to see the coloring in the header and footer, but it's still there, and it helps the text to stand out, making it easier to read. This, incidentally, is why the left navigation and main content panels are white, with only a small amount of transparency added. You can still see the background image, but the text isn't getting lost in the background.

And finally, the blog page. As mentioned earlier, only the main content of the page changes when a link is clicked. Not only does this save on bandwidth, it also takes advantage of "repetition" to make the site feel more uniform and professional.

while this was the most "quick & dirty" project I've made this semester, it's also one of the most fun to do (my favorite is still the movie poster, though). This has been an incredible class, and I've learned a lot.I hope that the rest of my time at WNC is this enjoyable. I'm going to make one more post, probably tomorrow, showing off a few of the things I've made in my Art 101 drawing class. Infinite kudos and humble thanks to my instructor, Lee Stokes, and to my fellow classmates, especially Dowain, Suzanne and Denise, who were a joy to be around, and have inspired me to push even harder to create some quality works. May you all enjoy great success in the future.


Ok, enough rambling. Till next time!