How to Build Your Website Mockup

One of the things I really wanted to achieve when I started thinking about my website design was to see a full website mockup in the browser. There’s just something about seeing your design ideas come to life in the browser that makes you feel like you are making good progress.

When it comes to design skills I certainly wasn’t blessed in that department. There’s a rather legendary story of my artwork in high school that consistently got shown to the class as how not to do it. The funny thing was that I was actually trying, even though the teacher was convinced that I was taking the piss. My real art master moment came when I decided to do a full A3 picture of Sizewell F – a futuristic nuclear power plant that presumably was a few stages further forward (in every sense) than the existing Sizewell B power plant that really did exist.

The finished product was nothing short of a masterpiece with a helicopter, a car and, yes, the actual Sizewell F plant with smoke coming out of it (just in case you weren’t sure that this was a nuclear picture). A couple of years later I presented this masterpiece to my mate Ken for his birthday, which brought back the same sort of hysterical laughing fits that we used to have in art class.

Anyway, you can probably imagine just how difficult it is for me to get any sort of coherent web design together for my online efforts. The funny thing is though, I seem to really enjoy the challenge of it all. There is just something extremely creative about seeing your (albeit primary school art class level) designs come to life in the browser.

Of course you can palm this type of activity off to one far more qualified, but where’s the fun in that? If you’re anything like me then you’ve realised that this whole online game is probably not going to turn you into Tony Robbins or Mark Zuckerface. Best to get some creative satisfaction out of it along the way and just start enjoying it for what it is – learning, creating and sharing stories.

Anyhow, back to the matter at hand. After chucking a few images around in Microsoft PowerPoint (yeah, that’s no joke either – think you’re probably getting the full picture now of my design approach and skills) it was time to take it up a notch and get the mockups in the browser. Oh, as a little side story, I was quoted between $2k and $5k from various people to do my site. My branding mentor (that’s a whole other story – also, somewhat laughable) really convinced me to just go it solo and learn along the way.

My elementary GIMP image editing skills allowed me to effectively create all the images I needed at approx. 2000px wide by 900px high. This seemed to be all that I needed. Final step was simply stacking the images on top of each other and then throwing in a little css and html and away we go – a fully fledged mockup design that you can actually view in the browser and feel proud that you have created it.

It’s not Sizewell F, but then I doubt I will ever reach such futuristic design highs again.

I’ll ask Ken if he’s still got it. Maybe I could get it on the site. I’m assuming he’s sold it!

Anyway, check out the video.

Code copied below.

Get creating.