Mockup Website Part 1 - Custom Banners

As part of this module, I’m going to create a mockup of a few pages of a website. The purpose of these mockups will be to give an idea of the overall style which I would like to use when it comes to creating my own online portfolio. I’ve taken my inspiration for these mockups from some of the better portfolios I’ve found during my research into them.

One of my favourite elements I’ve found on someone’s portfolio is the use of custom banners and graphics on the website found here, https://sharonsmith.carbonmade.com/. On most of the portfolios I’ve viewed, the banners linking to each section of work featured one of the work screenshots with just some basic text on top. However, on this portfolio, custom banners have been creating using a better quality render of the work with custom text, often with a genuine film or company logo used. These banners look so much more impressive than those found on other portfolio pages and instantly tell anybody viewing it that plenty of time and effort has been put into the website to make it look as sleek and professional as possible. When one of these banners is clicked, it takes you to a page dedicated to that particular project of work. At the top of each page there is a larger version of the banner which is used on the homepage.

I’ve decided that these custom banners are one element that I definitely want to include on my own portfolio so I’ve created a few simple banners for pieces of work I’ve done in the past. All three feature a scenic render of the environment and custom text over the top. For the Mad Max and the Le Mans environment, I’ve actually used the official logos of both in a similar way to the portfolio I took inspiration from. I’ve created two banners for each project, a small one which will appear on the homepage and a larger version for the top of the individual work pages.

The three thinner banners which will be put on the homepage. I've made sure to position the text consistently so that it all the looks the same when shown together on the same page.

The three large banners with the text repositioned to individually compliment each render as well as possible. The top two feature the official logos, combined with the text I'ved added.

I’ve also begun work on the style of the web pages. The style I’m going to go for will feature a dark gray or black background, with the text and any other features likely to be in a lighter shade of grey. The theory is that this more refined style will help the website to look professional, and also push the emphasis onto the work itself.