I have been using the very powerful website builder 'webflow' to develop the website for Propagation house. Although I would be happy to code a website myself, as I have done my own, there is no way that I would be able to include this much functionality as I have been able to with webflow. The other advantage is that I will be able to export this size as html and css to hand over to Mark when he takes control of the site and wants to make it live. The images in this post show a mixture of design features, interactive user interface options and the dynamic nature of this first page. The idea is to show my design as well as the functions that webflow has to offer.
Above is the home page, I have placed the logo with its background up here. It is important to note that at this point the website is in greyscale so that I can see the padding and position bars that webflow has visable on the page.
Further down the page I have placed these images which work as buttons at the moment. The nav bar follows the user in a fixed position so it can be accessed at all time. This is also linked to a smooth-scroll function.
If the user clicks on the facilities tab in the nav bar or scrolls down the main page they will end up here, this is where users can visit pages about the facilities that Propagation House has to offer....
.... When they scroll over the images they light up, illustrating the fact that they can be interacted with.
I have several images on each page which role across the full screen. As the user scrolls past them they act as background images and are in a fixed position, however allow content to roll over them. This section of the home page goes into detail about Mark and his experience as a sound engineer.
Continuing down the page, there is another fixed position image with a section about recent clients that the studio has bought in. During a discussion with Mark I discovered that this is one of the most important features that every studio must talk about, behind the qualifications of the sound engineer and the facilities, so I have included it on the front page.
The final section of the home page is also the contacts section. When users click on the contacts section they are taken to this with the smoothscroll function. It has a tlephone numner, email and full address. In addition to this I have added a working map embedded in the page. This ensures that users can see the legitimacy of the studios location close to the Cornish coastline.
No comments:
Post a Comment