In this post, we are going to talk about the design of Inexor integration. As usually, I start answering a series of questions before going into the design…
Who is the client and what are they doing ?
Inexor Integration is a London Based company, specialized in bringing seamless add-ons for EPiServer CMS, like Flash video management, on-the-fly translator and many others.
Values of Inexor Integration
Technology, internet, specialists, innovation.
More about the design analysis in the Inexor Integration logo design case study.
Goal of the website
The website is a source of information about the products, so it should show in a very positive manner technical products (EPiServer add-ons), and incite to buy or try.
The visitor should quickly get detailed informations about the products, browse the products by category, watch some demos / videos, order a trial version, contact the selling team.
Mood board
The mood board I collected focusing on the client´s values: technology, EPiServer, specialists, Internet and innovation. And also products. So I have choosen leading and inspiring websites like Apple, Corel, Siba, Wacom etc…
Excerpt from the mood board
Insights from the mood board / benchmark
The designs are presenting a picture of the product, with a variation in colours (Adobe, Corel …) that follows the different products range (easy visual identifier). Big grafic / vectors / icons are used to enhance usability. Grid designs are very clear.
White / light colors are used as body background and dark grey / black regular and multiplatform fonts (arial, verdana) are displayed.
Last but not least, the product is always the star ! Catchy slogans, technical descriptions, high quality photos, subtle effects put the product forward and make it appealing to the visitors.
Technical requirements
This is a BtoB client, aiming at the EPiServer community : decision makers, developpers, and so on, so we can go for a 1024 * 768 screen resolution.
Initial sketches and wireframing…
The user lands on a start page showing all the different products Inexor Integration has to offer: translator, video module… On click, you are redirected to the template showing the full details to the products (video…).
You can see the navigation flow :
On the start page, we would have the products area, and also a column showing special offers, contacts, partners and various other infos, a header and a footer. It is always good to discuss the structure with integrators / developpers ahead of time, of time frames and feasability, to avoid any bad surprise.
Your team will tell you immediately if your sketch has to be modified BEFORE you sent it for client validation. This would prevent you to have your client validating a design your team cannot set up, and then to call your client saying that you cannot implement it. Preparation, anticipation and discussion are KEYS TO SUCCESS in webdesign.
So while talking with my developpers, we positioned our big blocks in the start page structure :
On the product page, the client would like to display more information, so there will be a left column, a content area and a right column.
Graphic design
There were two grids used to devide the design area (start page / product page), so that the structure becomes clear, more readable, easier to understand, as you can see in the screenshot.
It is both a great help for the designer, and the grid can be used to guide your visitor through your information hierarchy.
The grid system used on a product page
My suggestion fot those interested in grid design : Josef-Müller Brockmann´s book “Grid Systems” is the reference.
Regarding colors
The basic Idea I had was to use dark grey and wavy patterns in the start page and to use then a color for each product (red, blue, green, yellow…) but to keep the same structure and patterns, so that we can see the common root / parent on any product page.
As regards the fonts, I would use dark greys and blacks for regular text, and the regular blue for the links, so that it looks very familiar for the user and goes to the point.
A preview of the start page and some reworks / comments by the client.
Feedback from the client is fundamental. Without discussion, there is no design. So I have been changing a bit the mockup, and added here and there icons or items that would make the design a bit more interesting.
At the same time, I was designing the logo for Inexor Integration that looks like this :
I have always been keen on Myriad Pro, a very interesting typefont, with lots of variations. This versatile font would be used in the logo on the website, business cards and roll-ups too (I have choosen Arial on the website for normal text, as it would look really neat and pro – like a seamless integration).
The reworked version of the start page, featuring the logo, the social medias that could be developped in the future, and the expandable list of products.
And now we have the color variations of the product pages. Note that they have all the same structure.
Blue for the flash cms integration module
Yellow for the integrated translation module
Red for the integrated video module
As you have probably noticed, there is a product carousel in Jquery that was included in the left column so that the visitors easily switch from one product to the other, and a search engine, that the client eventually dropped.
Now, you can see the implemented inexor integration website online.
I hope you liked this post, and there will be more case study to come, so stay tuned and feel free to leave a comment or to read other related post.
Related posts:
Click here 
I am a french webbdesigner/graphic designer working for
That was a superb read,You discover something totally new each day.
Brilliant all round information on all the site very helpful everyone