One Pager - Glasses - Project

For my graphic design degree, we had to design a one-pager for the resources given. We got pictures of people wearing glasses and some placeholder text. I decided to recreate it with stock images, as my degree project is under copyright. At least two of the picture we got had these strong colours of orange and turquoise, which we were supposed to pick up on.

We were supposed to show the whole process from wireframes to designs to making the website in HTML/CSS. Responsiveness was important. Left to right: Wireframes, Desktop page and mobile page.

I decided to add a hamburger menu in the mobile site and have a nice opening animation where the hamburger changes into a close X and the orange consumes the page to make the menu background.

I thought about how the carousel would change slides by pushing each slide from the right when clicking the right arrow or pushing the slide from the left. Documented the hover states of the buttons and how the text field would slightly highlight when selected. How the message field that is already bigger to allow more text would scroll inside it's restrictions to allow for a longer message. Although this recreation isn't exactly like my project from back than it represents what I was going for back then in the restrictions I was given.