Photo by Sharon McCutcheon on Unsplash

Gravity 3, the latest version of buildit’s design system, has completely revamped how we apply colours when styling UI elements. Our new system makes all UI components chameleons that can automatically blend in with the colour scheme of their surroundings on a page, and it does so purely with CSS. This article covers the motivations for making this and how we did it.

Ye olden days

Like many UI frameworks and design systems, older versions of Gravity defined a number of color purposes — for example default page foreground and background colours, colours for different kinds of interactive controls, and so on. We…

Front-end web developers have a vast, amazing and constantly changing set of tools, approaches and frameworks available to them. Many therefore feel pressured to keep up with the latest and greatest. Are we all condemned to participate in this never-ending rat race though?

Crowds rushing across Shibuya crossing in Tokyo. Photo by Emran Yousof.

The world of web design and development often makes me think of time-lapse scenes from TV documentaries: Plants sprouting from the ground, growing up, flowering, wilting and crumbling back to the ground. Swarms of insects scurrying across the forest floor. Hundreds of people rushing across Tokyo’s Shibuya crossing when the lights turn green.

Everything is moving. Things…

Sometimes things seem complex in a design but turn out to be easy to implement in code. Other times, elements of a design that appear simple at first glance turn out to be very tricky to implement.

This is the story of one of the latter cases…

The challenge

A couple of years ago I was tasked with implementing a web page featuring an arrangement of images like this:

Much ink has been spilled about different approaches to styling UI elements on web pages and apps. The prevailing wisdom is for designers and developers to approach UI design and development in a modular way. While I wholeheartedly agree with this mindset (and have been advocating it for a long time), I fear that it is sometimes mistakenly used as an argument for avoiding one of CSS’s most powerful features: The cascade.

Modular UI code

In terms of ease of development and maintainability it makes a lot of sense to group the code that a UI component is comprised of. Typically that is…

(Original image credit: NASA / JPL-Caltech)

To support the creation of our recently redesigned Buildit @ Wipro Digital website, we have also created a nascent design system and its name is Gravity.

This is the story of how Gravity came to be and where it is headed next.

The motivation

Buildit has had a website and a small number of internal web applications for some time. All of them had been designed and built independently and consequently looked and behaved quite differently from each other. …

If my full-fat post about Design System Architecture is too long for your taste (Medium estimates it’s a 12 minute read), then you might prefer this summarised version…

At Buildit we’ve done a fair amount of work on design systems. We’ve noticed certain types of tools and integrations between them recur and figured it would be useful to call them out.

This is the overall architecture for a design system’s infrastructure that we’ve observed and used. Not every design system will contain all of these parts. However, the ones they do have will likely be connected in the same way.

Generic architecture of a design system’s infrastructure

UI Library

This ended up being a lengthy post. If you’re in a hurry you can check out the TL;DR version to get the gist of it and come back to this one later.

I recently attended WEBdeLDN’s “The Evolution of Design Systems” meet-up (great event, btw!), where I was fascinated by Alla Kholmatova’s talk. Having worked on and researched numerous design systems, she’s identified three dimensions, against which design systems can be analysed and compared: Strictness, modularity and centralisation.

I won’t delve into that particular topic today (but, if you’re curious, she’s working on a book about design systems, so keep…

Now that my clickbaity headline got your attention, I should qualify my inflammatory statement a little: “WYSIWYG (What You See Is What You Get) in the context of producing interactive user interfaces Must Die”.

Pixel Perfect Dreams

The idea that you could visually design your app or website in a tool and then, at the click of a button, have it export a fully functional, interactive user interface (UI) is a seductive one. Why wouldn’t you want that? Non-technical people could create simple apps by themselves without ever needing to write a line of code. …

I recently got a Samsung Gear 360 on loan courtesy of The Insiders. It’s a camera that can record 360º photos (up to 30 megapixels) and 360º videos (up to 4k 30fps). When viewed via appropriate software or online services, you can interactively pan around the photos or videos in all directions to observe the scene as though you were where the camera was. This is especially impressive and immersive, when you view them via a VR headset like Google Cardboard.

The camera’s official price is currently £349 in the UK. However, if you shop around you can find it…

Back in October I had the good fortune of being able to attend the excellent An Event Apart 2016 Orlando, a three day web design conference. The speakers were all well known and highly respected figures in the web design community. The kind of people who have literally written the book on everything from web standards over Responsive Web Design through to the latest CSS animation and layout techniques.

While all the talks were interesting in their own right, I couldn’t help but notice how a handful of underlying principles and themes emerged again and again. …

James Nash

Design system aficionado. Classically trained webmaster. Slayer of pixels. |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store