We bring to you the new website of Bernard Mallat Architects (www.bernardmallat.com), designed by George Rouhana. What follows is the story behind the project, written by the designer himself:
Bernard Mallat Architects
Subject: Website design
Bernard Mallat came to me saying: "I need a website with simple elements that could lead to our work and reflect it; we are somewhat unconventional and would like the website to represent that."
I usually start a new project with a thinking process, combining things together, considering the brief and revisiting previous projects.
I proposed to Bernard a Circle, a Square, a Triangle and a Hexagon on a black background as representations of the four areas of expertise of Bernard Mallat architects: Interiors, Architecture, Stage Design and Urban Planning.
Bernard liked the idea but had some doubts about the proposed elements, actually so did I. Bernard then suggested replacing the circle by a point, the square by a line, the triangle by a square (surface) and the hexagon remained as is (volume).
I had already planned the functioning of the elements when I first proposed their designs. The idea was to transform each element into a shape that could relate to each category according to user interactivity. The remaining pages would be based on a simple scrollable set of images.
For the landing page, the effect was created by tracking the position of the mouse pointer relative to the objects in order to manipulate the 3 axes for each object (XYZ) along with rotation and easing effects.
On roll over, the animation that is inside of the target objects starts, highlighting the section it represents.
The projects' section sequentially loads external images and information to provide an enjoyable experience for the website’s visitors.
The coding was done by Hicham Hajj who used Action Script 3.0 for this project.
Working closely with Bernard and his team and sharing ideas for this project was a pleasure.
For more samples of George Rouhana's work, please visit: http://www.georgerouhana.com/