Website Mockup: Zumiez (School Project)

This was an assignment I worked on as a student in 2017. We were tasked to design or create a mockup website for a client. We had to consider the client's theme and its target audience. 

Disclaimer: ( This is not a real Zumiez project)

Progress #1

I had difficulty making or creating background for my website mock up. It was actually challenging for me to come up with a background that will compliment the dark theme in my navigation and with the images. I had to experiment with different types of background that will not take the attention away from the actual content of my website. I tried looking for backgrounds that are balanced enough and a pattern that is into fashion trend. I had the idea to try a camouflage pattern as a background because I feel like it suits the skater clothing theme of my client Zumiez. I am still finding and thinking ways how to not grab the attention from images and the content by having a busy patterned background.

Progress #2

These are the ideas that I had come up with. The problem of having and picking a camouflage or any patterned backgrounds is that it makes it look really busy and that there are a  lot of things going on. In addition, it does not only make it busy but it also grabs the attention away from the actual content. The solution I came up with is to play around with the saturation of the background. I experimented having a lighter colour and brighter background and also experimented having a darker background. At the end I decided to pick the darker background because it actually pairs up well with the dark navigation I have created. I also played a lot with the pen and brush tools. I made scratchy and sketchy graffiti look using the brushes to compliment the skater theme the website contains.

Progress #3 (Final Layout)

After I managed to make my patterned background to appear darker and more suitable for the client’s theme, I had a problem with the images. To me they felt flat and just floats everywhere inside the website. I wanted the images to appear more interactive to the viewers. I did not just want it to look like  blocks of images scattered around. Since the purpose of those images is to be clicked and navigate  to another page of the website. I put a smooth rectangle and faded the edge a bit to help grab more attention. I wanted the images to be the focal point and by putting those rectangle effect, it helped and made the images more stable and grounded. Furthermore, the image on the right is the final layout of my website mock up. I added some content and fill my navigation with more suitable tabs. I also added a footer section to put the important accessible information about Zumiez.