Stage One Landing Page
In this video you can view how the front page of the site works. The front panel uses a continuous scroll down through projects and specialty areas with the option to click right through sliding panels explaining more. The scroll suspends itself within the wireframe allowing you to simply scroll up or down to take you back to where you originally started. You can also see the flexibility of the pages in the responsive design as you resize the browser. The sizes are relative to different devices i.e. Phone and tablet. 
'Our story' begins with a full scale video about the company that plays automatically. You can view the video here -
This section in the site then takes you through the facilities, people and departments in the same way as the front page.
'Our Story'
'Our Story'
'Our Story'
'Skills' The skills page is a visual overview of all the skills Stage One provide with a scroll over description on each cover.
'Projects' The projects page now works as a portfolio style page allowing you to search or order projects and hover over covers for more information
Users can then open up a project whilst remaining in the project section and click through the information and images. From here you can see similar projects and download case studies.
'Kit' When you arrive on the kit page users can look through a simple list and head straight to the kit piece they are looking for and the site will automatically scroll to that position. Or users can scroll through all the kit at their leisure. 
'Kit' The kit page works in a similar format the front page with a continuous scroll function. The grid is now split in half allowing for a full bleed image and information on the piece of kit with additional images.
'News' The news section works in a similar way to the projects section, with a portfolio style layout with 'pop up' content. In this section the stories can either be small or big depending on the importance of the story. There is also a live twitter feed that automatically fills one of the smaller boxes once a tweet is sent.
'Contact' The contact page makes use of the continuous scroll and sliding panel pages. The call to actions are bold and simple paired with full bleed images.
'Contact' It was key to maintain a very visual asthetic across the site, even in the form fields. 
Stage One are a Creative construction and manufacturing company who work with designers, artists and architects.
Stage One approached me to redesign their website and bring it up to date. Their main issue was that people didn't understand what it is Stage One do. To solve this the website had to change dramatically and open up to allow viewers to see inside. 
The responsive design of the site works on two levels. The first being a short overview and quick continuous scroll through the basics. The second level being a simple click right to delve more into a project or specialty from here you can read more, and even go further as it leads you to specific project examples. This allows viewers to take in as much information as they like without overloading them.
As well as the design for the website I also Art Directed the photography for the site to enhance the experience of the site, Stage One are a very creative and visual company which is now emphasised with the use of full bleed photography. This allowed me to create more of a visual journey for Stage One and let viewers see what it's like 'behind the scenes' This can be seen in the 'Our story' section where you can view everything Stage One has to offer. In this section I also Directed a video that tells the story of Stage One and also the designers they work with.
Vist the Stage One website -
View the video here -
Art Direction - Laura Johnson
Web Design - Laura Johnson
Web development - Mike Carter -
Photography - Adrian Ray -
Video Production - Double8 -
Back to Top