Ardis Creative asked:
Last week, on the 21st, the Ardis team launched its biggest project yet: www.gimaex-usa.com, the website of GIMAEX of America. GIMAEX of America is a branch of the international manufacturer of firefighting technologies, GIMAEX (originating in Europe), that has recently stepped into the American market. This website is an important feature in the larger process of branding for the American market. GIMAEX also worked with Ardis in the production of some of their other advertising materials (print and web).
From Old to New
The company’s old website (still accessible), did not reflect GIMAEX’s expansion and development and certainly it did not appeal to the American market. Its dull, obsolete design, very deep hierarchy, poor structuring of the architecture, unprofessional translation of the original German copy text, and, overall, difficulty for the reader to reach relevant information called for more than a redesign.
Above: the old GIMAEX of America
The Ardis Creative team’s offer was based on:
A new website structure, based on an architectural logic to facilitate the visitor’s access to relevant information.
Fresh, modern design, with enough visual appeal to balance the textual information.
Dynamic content: the website is backed by a database and all the content information can be accessed for updating through a user-friendly control panel.
Professional copy writing/editing.
Â
Above: the new architecture
The Team
The entire Ardis team was involved in this project. Peter was the project manager and is accountable for the art direction, but he was also involved in the design part personally. Myself, I have carried out the majority of the design work and of the photo retouching, but also aided in the copy writing. Olivier mastered the technical aspects, the back end and most of the programming, including some of the Flash work. Kelsey worked her magic with Flash animation for the headers and other areas. And Petra handled many tasks related to the copy – translation, editing, writing news… and sometimes playing golf with the clients…
The GIMAEX team has its own delegates for this major project, with whom we have been in close contact at all times.
Plan Work. The Architecture
The architecture is the bone structure of a website: the design and the coding are built upon it, and the entire functionality of the website emerges from the way it is organized.
Due to the large size of this website (over 160 pages), we split the architecture in sub-architectures for different areas, organized in a logical manner. We used a “divide and conquer†plan that visually laid out the skeleton of the website and kept us on track during the building process.
Above: design drafts variations
The Design
After the client chose a design from the six we presented (practically, four with variations), we proceeded with a different approach than usual when building a website: we created templates for each different level of pages and for each subcategory. A total of 20 templates were designed, and individual designs for other special pages were created as well, based on the same design principles. Creating template pages was important not only for simplifying the coding process (and keeping Olivier sane), but also for the sake of organization: maintaining a similar visual aspect for similar pages (of the same level) helps the visitor better observe the hierarchy by visual aids.
The design was created with the content in mind, but also considering its flexibility: some of the text areas can be replaced by images and vice versa, as necessary, without damaging the balance of the elements in the page.
Above: templates designed for different sections of the website
Programming
Fully dynamic, backed by a database, all the information displayed in the website (exclusive of the menu and the header) can be edited, updated, replaced and even restored after an accidental modification, at any time, through a user-friendly control panel built in Flex.
One of the challenges was keeping the design and the functionality in symbiosis, especially considering that the website was built to be updated by non-web designers. The text boxes are restricting the number of characters to a certain number, and the picture boxes are restricting the size of the picture to be uploaded. As mentioned before, some of these are also interchangeable. All the text and the picture fields were assigned a unique ID number, to facilitate the updating process. Moreover, a manual was written to accompany the control panel, explaining how the updating process should be done and giving recommendations.
Above: the administration manual
Flash
The upper part of each page (the header with the menus) was built in Flash. It contains the menus, a special Flash animation movie for each different product category and a search function. The main menu leads to the main product categories, the secondary menu (at the top) leads to company information, and the contextual menu (at the bottom of the header) guides deeper into the architecture, it acts as a menu for each page in the main and secondary menus.
The animations were designed to be eye catching, to add interest to the page (the Wow factor), but also to load fast and to play for a short time only, so as the visitor can focus on the content of the page. The animation is fairy subtle, and the images show contextual illustrations of the product category represented. The pages linked in the secondary menu open up with static images instead of animations.
Above: animated Flash header
The Pictures
Illustrating over 160 web pages with pictures (between 3 and 6 pictures per page) was not an easy task. The images were selected from a large database and needed retouching ranging from color and lighting adjustments in the easier cases, to replacing backgrounds and removing reflections in the windows and the body metal parts, in the more difficult cases. At this point, the text in the pages was placeholder, so the task was not just to find the best looking pictures, but also the most relevant ones for illustrating the products. The challenge was familiarizing myself with the industry’s details in order to make the best decisions before presenting it to the client for review. At the end of the process, I knew more about firefighting apparatus than about my own car.
Above: original versus retouched photograph
The Text
It was important to populate the website with text that was not just informative, but spoke to the visitors in a style that they could relate to, that they could find familiar. Therefore, a writer was hired to edit the rough copy and to adapt the style of the language.
To offer the client a head start, we also populated all the news items with relevant information from the firefighting industry.
…And More
From Flash maps to display the locations of the international offices of the sales representatives, or to name each of the team members in a group picture, to downloadable v-cards, and to design-consistent PDF files ready for download of their main product lines’ brochures, there is more to this website than just pictures and text.
Above: photograph of the GIMAEX of America team. When rolling over, a note about the person appears.
Conclusions
Five and a half month
s in the making, the GIMAEX of America project is our biggest website yet. A milestone, and a portfolio piece to be very proud of.
We do not claim that our
way of doing our job is The Way, but it returned the desired results. It was a much bumpier ride than portrayed in this article. At times we made mistakes, but we learned how to fix them. At other times, we exceeded our own expectations. We all learned a lot in this process and we love sharing our experience. We encourage you to do the same and share your stories about working on a big project!
Note: stay tuned, as we plan to share our tricks and do-not’s in an upcoming series of articles!