Cross-Disciplinary workshop: letting visual designers build front-end!

Hervé Hubert

The conception of today’s digital products requires constant collaboration between disciplines. The quality of the dialog between visual or interactive designers and front-end developers is often in sync with the quality of the end-product. This idea is strongly implanted in Mirabeau’s DNA. We are aware that all disciplines need to understand the different aspects of the projects we are working on to be able to collaborate better with each other. As part of this effort we organized a front-end workshop for Mirabeau’s visual design guild (our knowledge-sharing community).

Why am I doing this?

I have been crossing borders between disciplines for most of my career. Today my professional life is very much focused on front-end development but I studied graphic design and photography. I've been a designer and a photographer for more than a decade while self-learning front-end development on the side. I believe technological barriers can be broken and doing so can power up creativity.

Through the years I helped less experienced developers and always enjoyed sharing my knowledge. This is also the way our front-end guild works. We are used to helping each other and learn from each other. I know from my experience that it requires a lot of determination to become a front-end developer. Especially when self-learning.

Considering my background and experience I felt I was in a good position to do the same with visual designers and that I could help them to learn about front-end in a non-painful way.

Front-end workshop with Visual Designers Front-end workshop with Visual Designers

The workshop

This two hours workshop occurred a few weeks back when we could still physically gather in the same office. The idea was to create curiosity and bring a little bit of front-end knowledge to the visual designers.

A few people within the 12 designers of the visual design guild had no previous experience with HTML or CSS. The challenge was to create an activity that would be visually attractive and simple enough so all participants of the workshop can potentially succeed.

While preparing the workshop we had a couple of calls with representatives from the guild to decide on the topics we should talk about.

The scope of HTML5 and CSS3 is vast. In fact, it seems immense when starting from zero. Our goal was more to create curiosity and awareness rather than making front-end developers out of the designers. We decided to concentrate on a couple of specific topics while giving the very minimum necessary knowledge required to complete the assignment.

During our conversations, we talked about the difficulty to understand responsive design. Designers are experienced in doing designs that adapt to different screen sizes. But the logic behind the HTML structure that explains the way the layout will behave on different screen sizes is mostly unknown to them. From that perspective, it seemed to be a good idea to talk about flexbox and fluid layout.

Codepen of the front-end workshop

HMTL5 + Flexbox in 15 minutes

To be able to talk about flexbox or styling I had to make a quick crash course in HTML5. I presented the few elements we would work with helped by a visual example. I divided a design into HTML elements to show where each element should be on the end result and which elements are containers.

So far so good. Everybody seemed to follow.

Once we had all these HTML elements ready on a Codepen we needed to add styling and to talk about flexbox. I decided to focus on the most commonly used flexbox properties. Trying to stay away from edge cases. Again I presented a few slides with some visual examples explaining flex properties. Then a few more slides to talk about absolute positioning which was necessary for the later assignment.

Now assuming that the crowd had a memorable first experience with flexbox and positioning I started to add styling to my Codepen example while explaining each line of CSS I was writing.

I could feel some tension growing in the room…

It was a lot of information at once and probably too much to integrate entirely. It seemed like a good moment to stop feeding the overheated brains with information and put into practice the freshly learned flexbox magic.

Codepen vs VD

The assignment was to complete the styling of a partially styled example on Codepen. A few blocks had the wrong placement and size. The participants needed to add some flex properties to make their prototype look like the example below.

Example to follow for the workshopExample to follow for the workshop

When I started to go around the table to answer questions and see the progress, I could see very different results. Some participants were close to the end result but most of them started to be creative with the original design and changed colours, backgrounds or add some hover animations.

Excitement quickly replaced tension…

At this point, people seemed to have appropriated themselves the tool and started to explore possibilities or even use their mistakes for creative purposes. CSS suddenly became very playful and free.

Result of front-end and visual design workshopResult of the workshop

The outcome

There is a general assumption that front-end development is complex. That is true, front-end can be very complex. But small bits of it can be understood by anyone. After a couple of hours playing around with code, visual designers experienced front-end development as a technique to produce a visual artwork in the browser. Naturally, not all designers have the ambition to work on HTML prototypes. The workshop nevertheless seemed to have sparked interest in all participants and hopefully broke a little bit of the mythology of an encrypted world within the browser. At the end of the workshop, I received very enthusiastic feedback when evocating the possibility of another workshop where motion would be the topic. I wish we can soon organize another offline workshop.

Here are a few of the prototypes that were build during the workshop: