1 Kelci Henson-Forslund 15. February. 2017

Module 05

disclaimer While making the website mockup, I had trouble illustrating what each element (like a parallax image) is which, and what function it served. Each image has notes to describe this. Many aspects of the website have some type of movement (parallax scrolling, or a “frosted glass” effect). Further, the color theme used in the mock-up is not what I plan on using for the actual website. Full size images of each page are available at the end of the document.

homepage The home has a parallax image (orange) on the top of the page. As you scroll, the brand (the white circle) will move with the “home,” “experience,” “portfolio,” and “contact” buttons to the top of the page. This can be seen in Figure 3: Experience. My choice to have the parallax image at the top was driven by a wish to create a smooth transition on each page from the “welcome mat” that states the purpose of the page, and the actual information. Parallax images seem sleek and make the webpage flow. The homepage states the purpose of the website, and how I expected it to be used (for example, it is to display my portfolio, explain what XA is, and give employers a place to see my work, but also contact me). I plan to keep everything sleek and organized, with a fair balance between images and text. Further, the ‘home’ button, or whatever button is selected will be in black while the others are in grey.

Figure 1: Homepage

Parallax img w/ brand theme

Image w/ color theme Home

font/location will stay constant in placement throughout other pages

Menu bar & brand img scrolls to top

2

homepage w/ contact pop-up The contact pop-up is available on every page, which ideally push users to click on it, and fill it out. A send button will exist on the bottom of the pop-up. As seen in Figure 4: Portfolio, a contact button will be present on the portfolio page. The button on Figure 4: Portfolio will cause the same pop-up as seen on Figure 2: Homepage w/ contact pop-up to (for lack of a better term) pop-up.

Figure 2: Homepage w/ contact pop-up

3

experience The experience page will be relatively simple, but will be the page with the most text. To counteract the dullness of reading text on a screen, I chose to add two parallax images. Again, I chose to use parallax images to make scrolling process more fluid, fun, and sleek for users. Parallax images add a more interesting visual element than simple scrolling pages. This page will explain what XA is, and how it transfers to real life (and why people need to hire XA majors).

 Figure  3:  Experience

The parallax images scroll as readers look at the “what do I do” and “How can I help you?” sections

The brand is repeated on each page to give a sense of unity

The ‘experience’ part of the menu bar is highlighted

The information in these two sections are brief  

4

portfolio

 Figure  4:  Portfolio

Employees can download the resume. It will be encoded in the website, but not visible  

 

When users mouse over the description of the project, they can see the image of the product  

A button that takes users to the “contact” popup form exists on the bottom of the page  

When not scrolled over, the portfolio pieces are behind a frosted glass “filter” with text describing the purpose, date, and outcome, of the project  

5

Large-scale high-fidelity wireframes

6

7

Large-scale low-fidelity wireframes

8