My process of creating the Arriva web site

24 May 2016

Just a while ago I wrote about a cool project I finished for a small start up company called Arriva. I shared the logo design process back then. Today I’ll talk about the design of the web site and I’ll share how I get started with my coding, how I prepare the different assets, which tools I use, and how I organise my files, my CSS (or better put SCSS) in particular.

Short introduction

Arriva is all about cycling and coffee. It’s three things in one: a mobile coffee bar, a shop selling small but useful bike gadgets for cyclists, and it’s also a bike repair service. With their Arriva-caravan, ’Eddy’ (named after Eddy Merckx, best cyclist of all times), Arriva can be found on several cycling events serving coffee, or hosting an event themselves around cycling on different places.

Briefing

There wasn’t a huge briefing for this project since this is a rather small and straightforward project. Apart from the design style, which was discussed when I designed the logo, the need for the Arriva site came down to a small but very inviting site, with a blog to post regular updates about their events, and announcements on future events, with the option of a contact form to hire Arriva, and a way to subscribe to the Arriva newsletter to be in the loop about their future events, plus keeping in mind that the site could be expanded in a later phase with an online shop. The site needed to be mobile friendly, which I translated into a full responsive design.

Wireframes

Even though the site’s design would be pretty basic and straightforward, I decided to mockup a simple wireframe for the main page first in Adobe Illustrator before jumping directly into Photoshop. This always helps me in figuring out how all the elements of the page could be laid out. During this stage, I’m already a little bit (if you can call it that) in ’design’ mode. As a designer I can’t help myself visualising the whole picture in my head while doing this layout exercise, because that’s how I see this phase. Very simply put, I play around with lines and boxes on the page.

A few items such as the logo, and the social media icons in the footer are already in their final state since they’re designed earlier in the project. The only thing that needed a bit more thinking was the menu: how will it be laid out on mobile? I didn’t want to go for a sidebar menu, because I like the centered aligned flow. So I decided not to break this and go for something centered as well, collapsable, with an option to close it again. It would change into this type of menu as soon as the screen didn’t have enough room anymore to show all menu items. The 3 sections below with the circle present the 3 services Arriva offers. The text would flow centered below the circles at a point as soon as the text can’t flow nicely to the left or right of it. I envisioned 3 big icons for each service: mobile coffee bar, online shop and bike repair service placed into a circle.

Design

The caravan

I started with the most creative part, namely the illustration of the caravan. This illustration would then also be converted into a simplified version to use as an icon.

While I was working on this, the lettering of the caravan itself was in ‘production’. The lay-out of the lettering on the caravan was done by the lettering company, though I did deliver them the different design elements, such as the A symbol, the triangular background pattern with random red triangles in etc. They did a great job placing that A so prominently over the door of the caravan. So in a later phase I adopted this look into my illustration.

The icons

Then I moved on to the design of the icons. Initially I drew both the shop and the mobile coffee bar from the sideview of the caravan, with the coffee bar being the one from the front door view. That didn’t really work, since both icons looked too much alike, and since the side of the coffee bar, is actually the side of how I drew the shop icon.

So I decided to use that one for the mobile coffee bar and draw the shop icon from the back view of the caravan, adding the word ‘shop’. As for the bike repair service, I let myself be inspired by the great icon set by Vincent Le Moign called Streamline, by combining two icons into one and adding a ’bicycle’ touch to it. The more ‘generic’ looking caravan icon would also be used as a divider illustration in the design.

Homepage

Once I had these elements ready, I was all set to get started with the homepage design. Initially my client suggested the idea of using the caravan as a central element in the design, maybe in a pencil sketched kinda style, and have the navigation on the caravan itself. The user would click on the window or door etc. a bit like the type of interaction we used to know in the earlier days of the web where Flash would do the heavy lifting of all the interactions and animations needed. In a way I liked this idea, but reality told me this wouldn’t be a good option, not for this era of time. And frankly I wouldn’t have a clue of how to do (code) it either. I know you can do a lot with SVG and CSS these days, but we’re talking about rather complex animations and interactions. I considered there would be way too many obstacles to make it work for a full responsive design, and there was of course the budget too. It just seemed like an impossible job to me anyhow.

The look for the site I envisioned was light, and clean, with a playful touch and a subtle animation, using only red, black and different tones of grey. The illustration of the caravan and the icons would suit perfectly and I could also use the elements I already previously created for the t-shirt design and banner: the mountain landscape with the road and the triangular pattern.

Artboards, SmartObjects & Layercomps

In Photoshop I’ve used different artboards for each version: desktop, tablet and smartphone. Then I also used 2 Layercomps to show the menu in open and closed state on mobile. For the logo I used an (embedded) SmartObject placed from an Illustrator file. Same for the caravan illustration. The entire header illustration is one embedded SmartObject, which includes the caravan illustration as one linked SmartObject. Since I did small updates on the caravan during the design process, I only had to update it in the SmartObject of the header illustration, and also in the main Photoshop file where I also ‘placed’ this caravan. This way my Photoshop file stayed up-to-date with the right caravan illustration across all artboards.

You notice when a SmartObject needs to be updated when the SmartObject layer shows yellow warning triangle. Then you update this SmartObject via the Properties panel by using the 2nd mouse button to reveal the contextual menu and choose ‘update’. I usually use linked SmartObjects for more extended web site designs (or UX designs) where I need to create a lot of pages with repeating elements such as footer, header, etc. In some of them I create different Layercomps for different states, such as navigation or menu states.

I wrote an article about using linked SmartObjects in combination with Layercomps on my blog just a little while ago. These days I also use different artboards for each page, so in some cases you could use embedded SmartObjects instead. It all depends whether you’ll be using this same item in other files as well. Luckily you have the flexibility to convert a SmartObject from embedded into a linked one at all times.

Preparing files for coding

SVG icons

Before jumping into the CSS & HTMl markup, I’m preparing the different assets first. I’ve saved all the icons in SVG format, and made sure that all the paths are ‘cleaned’ up. I made sure that all compound paths were expanded into 1 single path. I also made sure the dimensions of the document has the size of the icon itself. Once all the icons are saved to SVG, I use Grumpicon to generate an SVG sprite to be used as CSS background images. All you have to do is drag and drop your SVG files, and Grumpicon generates all the necessary CSS code for you. Sara Soueidan’s chapter about Mastering SVG for Responsive Web Design helped me a lot in understanding SVG better. I can definitely recommend Smashing Book 5 by Smashing Magazine.

Illustrations

The logo, logo icon, all icons (social media, navigation arrow buttons…), the rebus items, clouds, pattern and divider elements, were all saved as SVGs. However for the illustration of the mountains and the caravan this was not the case. These illustrations are vector-based, but they are rather heavy and complex and not ideal to save as SVG. They would be way too heavy in size. I saved both the header illustration, which contains the mountains and the caravan into a PNG file, and also the illustration of just the caravan. Both were also saved in 3 different sizes. So I saved a x2 and x3 version of both.

Setting up the structure

What I also usually do right before starting to code is setting up my folders structure. While I save and export my assets, I create the necessary folders. I usually use this basic structure to start with:

  • IMG : contains all the images that are embedded as ‘img’ in my HTML markup
  • CSS : contains all my css files with ‘styles.css’ being my main file, but at the end of the job I ‘minify’ all the css files into one ‘styles-minified.css’ file
  • JS : stores all the javascript files, but also here I try to limit the amount of files to be loaded into the HTML
  • SCSS : contains all my SCSS (Sassy CSS) files (see further below for more)

The other folders in place are usually sections of the site, and are created during the coding phase.

Coding

Perch CMS

Since this is a small web site, I decided to choose Perch CMS again to make the site flexible for small updates. Perch also has a blog module, so I knew I would be fine with this light weight CMS. It’s the 2nd site I’ve used Perch so far. I’ve also used it for Tuinen De Korenbloem, but that was a couple of years ago already and since then things have been improved and expanded. The blog module for one, and the fact that you can work with a feature called ‘blocks’ is something that I really like.

Tools

Once the design was ready and approved I started with the front-end HTML & CSS coding work. These days I’ve been really focussed on pure design work, so working on this project brushed up my coding skills a bit. I’ve always been a huge fan of Espresso. I think it’s a fantastic app. It’s the application I’ve been using to code all my HTML & CSS in the past couple of years. This time however, I had my reasons to go off my beaten path and switch to Coda instead. It was with pain in my heart since I have a special bond with Espresso: it’s Belgian, and I personally ‘know’ the creator, plus I designed the application’s startup cover illustration.

Espresso & Coda

Since I use SCSS (Sassy CSS) to write my CSS, I use Codekit to compile my .scss files into CSS. Unfortunately (at least at that time) Espresso was slow in compiling and previewing the HTML pages. It always took a couple of seconds for each update and I just lost too much time. Not sure how Espresso deals with this action now since I’m talking months ago now, and I haven’t checked since then. So maybe this issue is solved, and it goes way smoother now. Coda previews the compiled page as good as instantly. It took me a bit to get used to the application. I really missed Espresso’s ’Web Preview with X-ray’ feature. As a designer, I can’t think of any better way to inspect padding, margins, borders,… on an element, to do edits on it and see it all live happening. This feature is just a ‘life’ saver for me. I hear you say, yeah you can do this too in Coda or in a browser even… but in Espresso it is so easy, so clean, and very self explanatory and user-friendly. It’s a totally different experience. I don’t have to deal with the ‘mambo jumbo’ of tabs and other stuff you get to see in a typical debugger. To me that’s all noise. Stuff I don’t need, and don’t have a clue what it does or what it’s for. It feels like I have to swim through an ocean of code, and functions to get to the part that I want. I always tend to open Espresso if I need to evaluate CSS or HTML markup. It’s just more focussed to my needs, it feels like a breeze of fresh air.

Organisation of my files

HTML files

Since this is (almost as good as) a ’one page’ design, I don’t have many HTML pages. Apart from the homepage, there is a contact page, and a couple of blog pages.

SCSS files

As I mentioned before I use SCSS which is compiled via CodeKit into regular CSS. My SCSS is split up in different files or so called SASS partials. Working with Sass partials makes it more flexible and easier to maintain. They’re named with a leading underscore. Working like this is a way to keep a good overview on things which makes it more efficient to maintain. After reading Harry Roberts’High-level advice and guidelines for writing sane, manageable, scalable CSS’ I learned a few things here and there, and tried to put them into practice for this project. I usually split things up like this (listed in alphabetical order):

  • _colors.scss
  • _global.scss
  • _helpers.scss
  • _modules.scss
  • _normalize.css
  • _typography.scss
  • styles.csss

My ‘main’ CSS file is styles.scss. The first lines of code in this file imports the other files. It starts with:

@import “normalize”;
@import “global”;
@import “helpers”;
@import “colors”;
@import “typography”;
@import “modules”;

The order of how these files are imported is important. ’normalise’ contains basic and rudimentary CSS code in case the web site would be viewed with a browser that supports as good as nothing of what the modern browsers support these days. It helps making the site accessible and browsable in these kind of browsers.

The ’helpers’ partial contains a set of code snippets that are used to help me solve a certain layout problem. One of them is usually this ’clear fix’ mixin:

@mixin clearfix() {
  &:before, &:after {
    display: table;
    content: “ “;
  }
  &:after {
    clear: both;
  }
}

Next is the ’global’ SCSS file containing a mixin that manages my responsive breakpoints written by Hugo Giraudel. It uses SASS maps where you can easily enter the breakpoint values that work best for your design and layout.

Then the ’colors’ SCSS is imported including all color values used in the site. First listed as variables, and then below all color related SCSS code ordered in a specific way so I can easily find my way. In case the red would change to orange, I only edit the hex number of $color-highlight and everywhere this color is used it will be automatically updated.

The ’typography’ file contains all my typographical code for the site. I use a responsive solution that uses SASS maps, based on this article about ’Responsive Typography With Sass Maps’ on Smashing Magazine.

The last partial that gets imported is named ’modules’. This contains special code that is needed to make the menu slide up and down on mobile devices, or the code needed for the animation of the rebus, the arrow on the bottom right that makes you jump back up again etc.

It might seem all a bit overkill for such a small site, but you would be amazed how fast your code grows once you start, and how fast you loose overview of things. I’m not a fan of using certain frameworks to get me started as I like to code from scratch so I ’know’ my code, and I don’t litter it with a lot of divs and extra classes. Though I’ve been using Susy for a project, by reading Zell Liew’s book Learning Susy. It’s not a framework, and it’s not a grid system, but it does help you in this area. It’s more like a toolset of code that gives you the freedom of how you want to write your code. You are in control, while the heavy lifting is done for you by Susy. Hope this inside look into my process was helpful in some way.

{aj-job}

Authentic Jobs my partner in crime helps you find a job.

{aj-job:aj-job-type}

{aj-job:title}

{aj-job:aj-company-name} - {aj-job:aj-location}

{/aj-job} {sponsor}{/sponsor}

Comments

  1. 1 Dave Beirne 31 May 2016

    Thanks for the post, always interesting to find out how the process of other designers.

    Also i used to use Coda but moved recently to Atom Editor, so many extensions, worth a look

  2. 2 Onoweb 01 Jun 2016

    Nice article!
    Do you do freelance webdesign gigs?
    I’m a web developer and I’m interested in working with a good web designer like yourself!

    Gr, Yordi