Website Design - Mockup the Homepage

by BANG! Website Design • June 17, 2016

Getting the homepage design right and approved by the client is a critical step in the website design and development process. Here is how we handled a recent website project for a gated community development. The client came to us with a clear idea of the pages he wanted in the site and had great images he wanted to use for a homepage slideshow or carousel as some call it. What he didn't have was a clear picture in his mind of how all this would look as a finished website. Frankly, not many of our clients do and we nearly always create a design concept of what the finished website will look like and show it to the client for approval before we build out the entire website.

We went old school for this project and created the design concept in Photoshop. Each image of the slideshow, slider, carousel, whatever you want to call it was a different layer in Photoshop. We then exported the Photoshop file with the first slide of the slideshow visible as a .png file. Then turning off that layer in the Photoshop file we exposed the 2nd slide and exported that. We continued this process for the 3rd through 5th slides and when we were done we had 5 .png files that were all "registered" or "aligned" and ready to go. We then dropped them into PowerPoint, added a wipe effect as the transition between slides, then exported the PowerPoint to a MPEG video file. The resulting file was uploaded to YouTube and the client given the link to view it. The resulting video looks like this...
 
The biggest challenge was finding the right syntax for the YouTube embed code to get it to both autoplay and loop. Some trial and error and Googling led me to tacking on the following immediately after the Video ID and before the closing ":

?autoplay=1&loop=1&playlist=Your_Video_ID"

With that in place it loops, though not quite seamlessly, recreating a homepage with a slide show that repeats forever. Our website client could then visualize what the site would look like with his photos in place and the slide show running. Success!!!
 

Recent Blog Posts