Web design articles

Posted on Tue, 12 Feb 2019

Creating and maintaining patterns in PatternLab

I started writing this article a good while ago (two years ago now), and I was about to publish it at the beginning of 2019. But as it was nearing completion, life happened, and only now I'm picking it up again and finally publishing it. …
13 minutes read
Posted on Mon, 30 Jul 2018

Building the Buildit Website

Another website, another time to take a look at the journey to build one. In this article, I'll recount the whole journey we, a dedicated team of professionals within the Buildit group of Wipro Digital, decided to tackle. …
- Web Design
- Patterns
- Design Systems
- Development
- UX
- Case Study
18 minutes read
Posted on Tue, 28 Nov 2017

Installing and configuring PatternLab

In this second instalment of articles about PatternLab, I am going to cover some basics around installation and configuration that can hopefully clear out some confusion that some people have expressed to me recently. …
12 minutes read
Posted on Mon, 27 Nov 2017

Do you need a Design System?

Creating a Design System is difficult. The initial question “Do you need a design system?” has no immediate answer, there is no “20 seconds elevated pitch” to sell a design system. Let me explain why. …
- Web Design
- Design Systems
4 minutes read
Posted on Thu, 20 Jul 2017

Introduction to PatternLab, a pattern-driven UI tool

I do consider PatternLab a mature tool, but its complexity might be overwhelming to many, both developers and designers, and if you have not investigated the topic of pattern libraries enough, it can cause more problems than those it solves. This article is going to be the first of a series on PatternLab [PL], starting from the very basics and digging into much more detailed aspects of it. …
4 minutes read
Posted on Wed, 28 Jun 2017

Taking PatternLab modularity to the next level

This article is going to be the first of a series on PatternLab [PL], starting from the very basics and digging into much more detailed aspects of it, such as: What does PL do? How to use and configure PL. …
15 minutes read
Posted on Sun, 2 Apr 2017

Hurdles and joys of building a style guide

In my previous article, “CSS architectures for UI developers” I've tried to express how complicated is the situation surrounding the ideation, creation, and management of design systems for the web. I worked with Atomic Design and the PatternLab tool on at least 3 major projects, most notably during my period at Sainsbury’s in introducing and creating from scratch the style guide for the now defunct Sainsbury’s Entertainment on Demand, helped the Groceries Online team in getting their own style guide sorted, and supervised as a technical advisor the initial creation of the global Sainsbury’s style guide, project Luna. In this article, I’d like to highlight some of the problems we solved in using a pattern library, and more importantly, some of the problems I’ve encountered in the first of these projects, by creating a pattern library for a legacy project. …
10 minutes read
Posted on Thu, 24 Nov 2016

CSS Architectures for UI developers

Writing good CSS (or whichever sub-flavour) requires a good level of experience. In this moment of time, we are still trying to figure out the best way to scale CSS allowing maintainability and readability without sacrificing performance and ease of use. Some good practices first, then methodologies and systems have been created. Learning, if not mastering them will allow you to approach any CSS framework or library, being it legacy or open source and create new ones with - still relative, ease. …
- Web Design
- CSS
13 minutes read
Posted on Sun, 5 Jun 2016

Making a website shouldn't be that difficult

Or so I thought. What my website plan looked like - © NASA Archives: blueprint for the Personal Life Support System. I’ve just released my new portfolio at https://peach.smartart.it: this redesign started two years ago, with more or less 3 months non-stop of work during any spare time I had. I’ve tried to put into it as many good practices and methodologies I could, only those that were fit for purpose and could help me ship something that would be extensible and as much future-proof as possible. Do you want to build your website too? Read through before you lose your mind. …
9 minutes read
Posted on Wed, 30 Sep 2015

Design, develop, repeat

It's been a while since I've started learning and integrating UX and RWD into our products. I come from a graphic background, and my first passion when I stepped into the web development was what was then called web design. From there I’ve also been a lot into engineering and I’m currently employed as a position where front-end development has started to be deeply intertwined with visual design. UX and RWD being one of the most important movements, if you want to call them so, in getting things right. …
- UX
- Web Design
- RWD
- Development
- Project Management
7 minutes read
Posted on Mon, 18 Nov 2013

A little bump on the clown car

In this post I'm going to outline the effort, and see what are the pros and cons of using the Clown Car Technique to solve one of the biggest problems of the RWI , i.e. serve, with only one tag, more than one image depending on the media breakpoint. …
- CSS
- RWD
- SVG
- Android
- Web Design
3 minutes read