Responses by Adrien Pasquet, art director; and Sam Minton, web developer, M Prez.
Background: The purpose was super basic: a website which presents exactly what we do daily. We are a PowerPoint-designing agency; we do graphic and motion design on PowerPoint presentations. We don’t like agency websites that give too much information just to show off or for SEO purposes. We have designed a website based on what we had to tell, not regarding what we imagine our clients want to know. This website targets people who already know our brand, so we didn’t need to oversell. We really consider our website as an elegant portfolio that uses landing pages as business satellites for acquisition. Last but not least, it was also a stylistic exercise to show our vision of graphic design as a creative agency.
Design core: Like every agency website, we were faced with the major ”splash screen” issue. When you are an agency, you want to show some examples directly on the splash screen to confirm with visitors that they are in the right place. And this is very tricky because different clients’ graphic environments must coexist. This “preview” problem was solved thanks to a stroboscopic animation that reveals different references and use cases following mouse hover. You can’t see two different cases at the same time, and every reference fits with our identity by adding colors and life to that big black somber screen.
Process: Our case is quite particular, because the process is very different when you create your own website compared to a client’s—or, at least, it seems different. The main thing is to reconcile your quality requirements with your daily business outlook: Daily life often overcomes your own project. You don’t plan the different steps as you do for a client. You don’t attribute roles as strictly as for a client—although you actually should. We understood that one year later.
As an aside, we finally launched our new website and our communication campaign exactly when the “coronavirus-gate” started. You can imagine it hasn’t been as powerful as expected. Life...
Navigation system: As with our purpose, our navigation system is super basic and super efficient. It works with a vertical static menu, which is a nod to old school but very efficient lateral navigation. It appears just after your very first “move” on the website: either you scroll or you click on the splash screen (step one). You enter in the portfolio overview page (step two) where you’re able to choose between all of our projects to navigate. You can filter by clients or by types of service—we didn't put any additional information on the switch button to create curiosity for our visitors. We consider that after those two steps, 80 to 90 percent of the visitors have enough information to get into contact with us. Then everything happens by and from our lateral navigation system, which supports you during your entire stay on our website. As you can read, the visitor is 100-percent driven during their visit. This system is easy to use for anyone.
Technology: The site’s content is managed by Wordpress, enabling easy modifications on the fly. For the front end, we are using a custom-tailored theme. The only libraries used are barba.js to allow fluid transitions between pages and anime.js to power most of the animations on the site. An interesting feature is the use of different scroll behaviors including a smoothed scroll, a scroll that snaps to specific sections and an imitation of Apple’s messenger app’s scroll, where items on the page take time to catch up with one another.