After 2 months in the making, we are thrilled to unveil the new homepage for our website. In this post we would like to highlight the design process that went into making it a reality.
At the beginning of this year we launched a whole new version of our website, focused on showcasing our work with a simple and clean design. We have incrementally added to it with a blog, jobs page, and a new logo. But we never had a proper homepage (visitors landed on the Our Work page). So when we finally prepared to build one, we knew it had to be both effective and visually stunning. Below are four things we considered during the process.
1. Messaging is key.
The top priority for the homepage was to instantly convey to visitors what French Press is all about: high quality videos made by a team that cares deeply about capturing each client's goals. It was also important for the new homepage to provide an overview of the whole website—easily linking to other pages and offering a taste of our portfolio and recent news. What ever readers are looking for when they visit our site, it had to be immediately accessible on the homepage.
2. Let's make it sexy.
After 6 months with our new site, it was time to add some polish. We wanted to experiment with using new technologies to enhance the reader's experience and convey the tremendous care put into everything we make. There is one feature in particular that I want to highlight—we call it the "refocus" effect. Visitors using an iPhone, iPad, or Apple's Safari browser to access frenchpressfilms.com will be delighted by a banner image that focuses and refocuses like the lens on a camera. It is a nod to the medium of filmmaking and the first time we've seen this effect used on a website. Look out for more of the refocus effect on future pages!
3. It has to work for everyone.
Websites present an interesting challenge because of the almost infinite ways they can be viewed. Whether a visitor is using a 4-inch iPhone screen, a 15-inch laptop screen, or a 30-inch desktop screen; whether they are using a Mac or a PC; on Safari, Chrome, Firefox, Internet Explorer or other browsers, the experience must be as seamless and consistent as possible. This makes it difficult to use exciting new technologies, as they are often unsupported on older devices or web browsers. The solution ends up being a complex set of rules, constantly evaluating how to best present the website to each visitor*. (At the moment, we think the site looks and performs best in the Safari browser.)
*Nothing is ever perfect, especially in web design, so if you notice anything not working quite right, we want to hear about it!
4. Building an iconic brand.
It was essential for us to maintain the company's new brand identity throughout the site, regardless of what device or browser people used to visit it. The colors, fonts, layout, and heavy use of imagery allows the site to feel distinctly like French Press, even in the absence of our logo.
At the end of the day, our work speaks for us. A website should not be distracting or overpowering, uninspiring or confusing. It should let the content do the talking. As the designer, I only hope that the website reflects the same quality and attention to detail that French Press pours into every video.