One of the projects I've also been working on in the past couple of months, is the redesign of a web site for one of our longterm clients, Exonet, a Dutch Internet provider. Today I want to share my design process of this project, which involved my favourite mix: illustration work, combined with web site design & layout, and front-end coding.
Briefing
About 5 years ago I designed the Exonet logo, stationery, and the web site. It was time for a renewal, not only because a design refresh was needed, but also because the services and products offered by Exonet had evolved and changed a lot over the last few years. The scope of this project was to do a re-design of the web site, keeping the general brand style. We had to deliver the following set of static HTML template pages that they could work with to build the site:
Homepage
News overview page, and single news item page with comments option
Products overview page, and single product pages (6 in total)
Company info page
Client section & order pages: client login page, order page, shopping cart page, and Invoice page
A set of general example styles for text, headings, lists, tables…
Only these pages would be designed in Photoshop first: the homepage, the news pages, the cloud and VPS product page, the order page, shopping cart page, and invoice page. The rest would be directly done in the browser, via HTML/CSS, based on what's already defined. The structure of the web site was also properly briefed, and Exonet gave me a short description of each of the section pages, plus other information that could help me with the design.
Homepage design
First I started with the creation of the homepage to define the general look & feel of the site. I decided to skip the wireframe part that I usually do before jumping into the actual graphic design phase for this project. Some projects don't have a complex structure, and are just very straightforward, and so I often already have a clear picture in my mind to skip the wire framing part.
Call it an unstoppable itch to get started with the actual design, experimenting straight away with color and elements. It's what I like most because it sets my mind free. Unlike some people I don't always stick to the exact same methodology for every single project. Most projects are just too different. It depends on a few variable factors, such as: how big and complex is the project, what is already defined in terms of branding and styling, also content-wise (it's extra hard or maybe even impossible to start if there is hardly any content yet), what has been discussed with the client in terms of direction,… The single red line is that a basic idea is formed in my head that I translate, either into a sketch, a wireframe, a basic mockup, or I jump right into Photoshop or Illustrator to create it. But if this basic idea isn't there yet I try to find inspiration.
One of the first design experiments for the homepage: using a colored banner to the left and right of the content, red on the right and grey on the left.
The basic idea here, was to use a 3 column grid, logo on the left, navigation at the top, and a big visual area to introduce and present the different products or services. Having their focus entirely on quality and service, I thought it would be a good idea to add a tagline at the top below the logo and navigation, right above the big visual area. As for typography, my choice went to Proxima Nova as suitable typeface.
One of the other first design experiments of the homepage: using a landscape as a background for the visual area to present the products/services.
Feedback
It seemed I was basically on the right track, but the visual area needed some work. The colored banner wasn't a good idea as it drew too much attention away from the content, while the idea of using a landscape as a background to present the products felt a bit too playful. It was important to keep the look pragmatic without it becoming boring. So we decided to go back to the first design, adding in a different kind of background.
Final design
One of the first homepage designs with the basic idea of using a carousel animation to present the different products/services.
After discussing things a bit further, we both thought using a carousel animation would be a good idea to present the different products. This basic design would stick to the end, even after delivering the files. However, right before the launch this area had a serious update as it didn't deliver the expected impact. During this design phase we also discussed how to present the content below the visual, and so this got finalised as well. We moved the column containing the news items from the left to the right and used the left area to point the 4 main reasons why to choose for Exonet, with a call to action button at the bottom linking to the products section.
Product page & illustrations
As for visualisation there weren't any photos provided by my client, and using stock photography wouldn't be an obvious choice either as finding images that represent their storage rack facilities is as good as impossible. Besides, I didn't really see a way of using these type of images in an attractive or interesting way. It would collide with the brand image we already had in place, and we didn't want to change that.
Some of the icons I created for Exonet since the previous web site design
For the previous design of the site I created a set of illustrative icons that supported the brand, and so for this new design we didn't want to loose this typical look. It was obvious from the start we would use illustrations to represent the different products.
We first discussed the layout and interaction of the product page before I started on the design. We both liked the idea of using a left navigation, similar to the one I've used on the features page of the Acturent web site, where the content of each menu item appears after clicking without a page reload. Only we would probably go for a subtle fade-in effect instead of a sliding effect.
While I was working on the design of the product page, I was also simultaneously creating the product illustrations. It was good to be able to switch between both. If I got stuck on one thing I was able to switch to the other. For each of the products I created a big illustration, supporting the exact same background of clouds, and saved as transparent PNGs. All illustrations were also fully vector-based, and saved in both 'regular' and 'Retina' @2x versions.
The 'Domain registration' and hosting header illustration.
The 'Webhosting' header illustration.
The 'Cloud Server' header illustration.
The 'Virtual Datacenter' header illustration, which will be dropped as a separate product later on.
The 'Virtual Solution' header illustration which was changed into 'Load Balancing' in a later stage.
The 'SSL Certification' header illustration.
The 'Cloud Platform' header illustration, used in a separate section of the site.
News section pages
In the following phase I designed the other section pages starting with the news page. Here I moved the sidebar to the right as it felt more natural to me to have the main content on the left side. I presented both left and right versions, but Exonet agreed with me that having a sidebar on the right felt better than on the left. For the header illustration of this section I thought it would be fun to use the icon of the logo to symbolise the person reporting the news.
The design of the news article page with comments section.
Client section & order pages
For these pages I had to make sure to provide the necessary styling elements so that Exonet could use these to build the site on. The order page, shopping cart page, and invoice page were the ones I created in Photoshop before jumping into HTML. Here I decided to use a 4 column grid, where I could use 3 columns for the content area and 1 for the navigation menu on the left. In a later phase we decided to make the sidebar a bit smaller as we could use more room for the content area. These pages all required lots of horizontal space, as most pages would show tables with a lot of columns.
The design of the order page ('Bestellen' in Dutch), taking special care of the styling of tables and forms.
I payed extra attention to how tables and forms could be styled on these pages.
The design of the invoice page ('Factuur' in Dutch), using a small sidebar for the navigation to leave as much horizontal space as possible for the content area.
CSS & HTML
I mentioned in my introduction paragraph that the CSS & HTML front-end coding was part of the scope of this project. While I was actually looking forward to do this part myself, I decided to outsource it instead due to lack of time. Exonet gave me all the time I need to finish this project, for which I'm eternally grateful. Still I figured I needed an extra hand if I wanted to deliver the project within a reasonable period, as my days were getting more and more filled with work for Fab.
So I reached out to Ben Bodien for help. He has done a fabulous job turning my design into these perfect template web pages, that adapt to mobile devices as well. We chose to go for an adaptive approach instead of a fully responsive one for the site, with the exception of the client section pages. This was outside the scope of this project. Considering the complexity of these pages, it would have been a difficult job to do.
The headings
For the headings we decided to use multiple backgrounds in a stacking order. Each header used the same textured lined background with a blue gradient, and on top of that a composition of transparent clouds, which is at the exact same position on each page. So this setup felt like a logical obvious choice. It also kept things flexible for the mobile version.
An illustration showing how the headers are built up in different 3 layers in the HTML/CSS markup.
For this part of the article, I asked Ben if he could write about something that is typical for this project, and so he decided to write about Building vertical rhythm in Sass. I couldn't think of any better subject. So I'm turning things over to Ben:
Building vertical rhythm in Sass
One of the main challenges in Veerle's design for Exonet was the implementation of a vertical rhythm, to a visible background grid. The fact that the lined grid would be visible meant that elements on the page had to conform to it as closely as possible, or the design aesthetic would be broken.
The obvious but antiquated approach would have been to size and position each individual element manually, but this would not be a maintainable solution. Anybody taking over the site's code would also inherit the headaches of having to measure and maintain specific pixel values each time they made a change to the site. After all, it's always better to deliver a working, extensible system, not just a site.
So instead, I chose to implement a rudimentary vertical grid system in Sass, which made fitting elements to the grid a breeze. Here I shall explain how the system works. The exact code was written some time ago, and there may be shortcuts to some of this using newer Sass syntax, but the basic principles are still sound.
The basic variables
First, we declare a couple of variables:
The baseline value is the height of one unit of our vertical grid. In the case of the Exonet design, there are 20 pixels between the lines on the grid, so that's our value. An element that spans the height of three of our grid units would therefore need to end up being 60px tall.
The base font size is simply the font size for our body text, and our basis for sizing and proportioning text.
Function to convert pixel values to ems
Next, we'll have a small utility function to convert pixel values to ems, so that we can specify values in absolute pixels in our code, but have the browser work in em units.
Our em function takes the target size we're aiming for in pixels, and the context size we're working within. Because ems are relative to their parent context size, we need to make sure we take this into account when calculating our output value. We can default the context size to the base size, but if we're determining a size for something inside an element where we've already specified a different font size, we'll need to tell our function what that font size is via the context size paramter here.
The function then just returns 0 as a safety mechanism if we're trying to size something to 0px, and otherwise will simply return an em value equal to our target size divided by the context size.
This means that a 13px target with no context specified (using our base size of 13px) would return 1em, which is what we'd hope it would do. Similarly, a 26px target based on the same context would return 2em, or twice our base size. However if we wanted 13px within a context of 26px, it would return 0.5em, or half the context size. Simple, right?
An example use of this function would be as follows:
In this case, we have a link that we want to be 18px tall. The resulting value is 1.38462em, so you can see that this function already keeps the values in our CSS a little bit cleaner.
Baseline multiplier function
Now we'll get to the real vertical rhythm stuff with another function that gives us a size value in ems based on some amount of grid units. For example, if I want the height of something to span two grid units, I'll want it to be the equivalent of 40px on the page, based on our grid baseline of 20px.
This function takes an amount of gridlines (defaulting to 1), and a size for context. All it does is call our first em function to give us a value for how many ems we need to make our element fit to our specified amount of grid lines.
And that is essentially all we need to get started! We can now start doing things like this:
This puts a margin under our primary navigation which is exactly two grid lines tall.
This specifies the top padding for an unordered list item as 3 grid lines worth of space.
This sizes paragraphs in our hero block at 16px, and applies a line height of two grid lines (while specifying 16px as the context to work with, instead of our default base size of 13px).
Imagine how cluttered our code would be if we'd start defining all vertical dimensions specified in our CSS with absolute pixel values! Now we can refer to dimensions in terms of our grid, and if we ever need to adjust the size of our grid, all we have to do is replace a background image for the visible grid itself, and update our baseline value.
Pixel perfection fine-tuning
I did run into some headaches with how various browsers round values up or down, resulting in some things sitting off the grid by 1 single frustrating pixel, but only in some browsers. I also had to introduce a bit of a hack in the form of a nudge function which would pull or push an element up or down the page by a given distance, in case I'd done something like apply a horizontal border which throws out the grid alignment:
You'd then use this to nudge something down 1 pixel like this:
It's not ideal, and I'd only use it sparingly, but it does help keep things pretty.
So that's a quick run down of aligning things to a vertical grid using some very basic Sass! I hope it's helpful, and if you can improve or extend it then please let me know.