De Voorhoede

front-end developers

De Voorhoede works with a clear and interactive front-end guide: one online portal, which all the involved parties can use as their library.

The Relevance of a Solid Front-end Guide

Ever experienced inconsistencies when different disciplines interacted in the same project? At De Voorhoede we have realised that the solution is the use of a solid front-end guide.

Q: What the heck is a front-end guide? A: A front-end guide is an online portal where the styles and interactivity of the front-end project are displayed. The involved parties can use it as their shared library, making sure all parties are on the same page.

There are several advantages: faster workflow, better communication, clear overview, independent visualisation per web component, solid & universal documentation, investing more time on production, one common workspace for all parties... Overall what you gain is consistency, consistency and consistency.

In this article we will explain the following:

  • Benefits of a front-end guide
  • Practical cases in which we have used our front-end guide.
  • Workflow with a front-end guide.

Benefits

Building a website is a process which is never done independently. Different parties are involved: marketers, SEO specialists, content writers, designers, front-end developers, back-end developers… a delightful mix of mindsets working together, with strong opinions regarding the building of a website. For this reason, De Voorhoede works with a clear and interactive front-end guide: one online portal, which all the involved parties can use as their library.

Style guide vs. front-end guide

There is a clear distinction between a design style guide and a front-end guide. The main difference is that the design style guide covers the visual aspect of a website and is a static document. The front-end guide is interactive and dynamic and covers, besides the visual aspect, other elements as well.

Elements

To describe the different elements of our front-end guide, we will use two example cases, Pols Potten and PostNL Drukwerkservice.

Style guide

We start out by documenting all the design and corporative rules which will be consistent throughout the project. This information is inserted into the style guide section of our front-end guide. In most projects we use a CSS pre-processor like Sass, for several reasons. One basic advantage is that we can use variables for our colors, so if there are any changes in the future it is easier to modify them. In our style guide section of our front-end guide template we display the hex color code, a visual representation of the color and the variable name assigned to the color. In the style guide, we also define typographic elements, icon fonts and logo characteristics. All necessary details are provided for the effectivity of the developers.

styleguide

Modules

A website is basically an interaction of small 'pieces' which together construct the experience of a website. This interaction of pieces is called the front-end architecture of your project. Working with a front-end guide helps you to have a clear overview of the front-end architecture. This in turn, helps to keep the code simple to use and easy to maintain. De Voorhoede has created a division into two groups of interacting pieces: components and views.

Components

Components can be seen as the building blocks of a website: it is an independent reusable structure, self-contained and easy to integrate. A component has it’s own presentation and behaviour, with it's own snippet of HTML, CSS and possible JavaScript. Since a component is reusable, it can appear on multiple places in the layout. Since it is self-contained you can, as it were, pick it up and put it in a different place, without it breaking.

This is an example of a list of components from our front-end guide:

list of components

If the user clicks on one of the links they will be directed to the preview of the component. You will be able to see the component and the code it is built of. Below you can see a real case preview of how the component is displayed in our front-end guide. It provides the developer a microscopic view of each component.

Working with components induces the team to a much simpler method of working, filtering all the data into a one page display.

Views

In a view we combine our components and display them in a complete web page. The views are basically the pages which the website will have.

This is an example of a list of views, from our front-end guide:

list of views

Workflow & front-end guide

The majority of web projects are handled by different companies, therefore a correct workflow between all parties is essential.

De Voorhoede is a front-end specialized company so in every project we work with different companies of other disciplines, like design and back-end development. In De Voorhoede we promote working agile, e.g. with the (http://voorhoede.nl/blog/scrummen-in-vier-smaken/) method, due to its efficiency. But for now the reality is that a lot of companies follow a classic waterfall workflow. Either of these work scenarios reach the same objective, but with a different approach.

The average project has three parties in the project, providing a higher need for a solid style guide and front-end guide.

These are the commons steps you would find in a waterfall workflow:

  1. Back-end provides us requirements to take into consideration with the front-end development.
  2. The design is delivered.
  3. We complete and deliver the front-end guide to the back-end party.
  4. Back-end uses the front-end guide to complete their tasks.

Lessons learned

In conclusion, the front-end guide is pretty handy! Back-end parties are able to work faster with our front-end material. They wouldn’t need to dive in our code files or need regular guidance from De Voorhoede as the front-end guide provides a clear overview. This makes the project more effective, economical, compact and overall consistent.

De Voorhoede has created a front-end guide template which has already given us great results. All companies involved feel confident with it. The parties involved can spend less time on communication and more on production.

Another gained value its the ease of modification. If the front-end guide needs a modification or an additional element, it can be done instantly due to it’s system based on components.

Overall advantages

  • Easily correct or enhance any element of the front-end guide.
  • Consistency created by a solid & universal shared documentation.
  • More emphasis on production due to an effective communication.
  • Independent visualisation per view and component.
  • Relevant information (HTML, CSS and javascript) for the developer, separated per component and per view.
  • A new developer can adapt smoothly to the team using the shared front-end guide documentation.

I want to know more!

If you wish to know more about front-end guides, we can recommend the following reading: