The Start of a Design Evolution

Design Driven AI with The Grid


In the Beginning…


A little over 18 months ago I received an email for a stealth startup called “The Grid”. Dan Tocchini introduced himself and the then small team of himself, Brian Axe and Henri Bergius, then just dropped a link to 30 minute video. Well 28 minutes and 32 seconds but… come on!

I ended up watching it four times.

The premise was quite simple; outside our industry, no-one wants to build a website. They only want the benefit of a website!

There are literally hundreds of solutions out there that offer a beautiful looking website. Offering solutions that enable and facilitate you getting your own piece of the internet. Yet, there is a common flaw with all of them; the bar to entry is too damn high. To get a true representation of your ideal outcome there is still a great deal of domain knowledge needed. From understanding the admin system, the capabilities, the limitations, code, asset generation, plugins, baby-photoshop editors, the list goes on. It is intimidating, frustrating and above all else when you are in amongst it, it feels like work!

These guys wanted to build a website by simply copying and pasting a link to content. Done in minutes — a true focus on content led design.

Diving into the Unknown


There was no real hesitation in getting involved. The idea, the team and the vision all stacked up.

The vision to empower people in making more meaningful connections and contributions on the web was noble. Make it easier and remove the barriers of entry so more people can. Then allow individuals to benefit from the web, benefit from their own content with their own corner of the web —make it how it was intended, how it should be.

Admittedly, the challenge was and still is nothing short of monumental.

It feels like a rabbit-hole of epic proportions. Can we really make a site that is as easy as copy and paste? Is it possible? How do we deliver an individual website that is truly based on the content? Make it unique to the individual? A platform that provides an experience that automates the mundane tasks we have unwillingly become accustomed to — of which there are simply too many.

Many more questions came but the more I thought about it the more it made sense. Currently there is a tiny percentage of people that can build, maintain and evolve a site. What happens if everyone has the ability to have a presence on the web? What then?

The limitations of yesterday started to peel away to the possibilities of tomorrow.

Then I realised, “Shit! How do I design all of this?”

Rethinking Everything

It became very apparent that to do this a new approach was needed. Question everything that is considered the norm with “how should it be done?” We had to build the Grid from the ground up.

First there was the UI layer for NoFlo which you can read more about here:

NoFlo is a JavaScript implementation of Flow-Based Programming (FBP). Separating the control flow of software from the actual software logic. Helping you organize large applications easier than traditional OOP paradigms, especially when importing and modifying large data sets.

Which led to Flowhub from our very successful Kickstarter campaign.

Designing a new way to build software & manage complexity — a visual development environment for all. A Peer-to-peer full-stack visual programming for your fingers.

Then came the launch of GSS (Grid Style Sheets).

GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.

Independently, these are really powerful tools, with a purpose to making technology more accessible and useful for everyone. Together they form a platform that will finally allow us to branch out into exploring auto-design, where content dictates form. A site that can change, adapt and evolve with you! An AI that helps you find and deliver your purpose.

Here is a sketch I did nearly a year ago visualising how the big jigsaw comes together:

Visualising the Grid stack

All of this is centered around delivering a site in minutes; focus on the content, empower an individual's purpose and allow everyone to benefit from their own contributions — the rest should feel like magic!

However, there is absolutely no question that we need a community to grow a platform that realises the potential of The Grid. In tandem, our effort has and always will be to enhance and support the value we, as makers and creators, give to others.

As can be seen in the picture above there is a role for us all. The aim of the AI is to remove more and more of the minutiae we deal with on a daily basis but keeping you in-the-loop. For example, if we did not have to generate a multitude of versions of the same image for optimal quality, size, placement et al think of the time we can save and apply to delivering worthwhile solutions.

So, how does it work? What is the role of the designer if the AI does all of it for you? Can I just click a button and it will generate a site for me, my partners and my clients?

Yes. Kind of. Maybe. Most importantly, only if you want to!

Our goal is to provide an optimal balance of automation, assistive AI and human touch. We also understand that this is different for different people and are continually working on the right entry levels for all roles contributing to The Grid, whether customer, designer or developer.

A selection of designs for thegrid.io site

Entropic Design


entropic
adjective
1. The definition of entropic is having a tendency to change from a state of order to a state of disorder.

Here is a quick glimpse into the design process as it is today.

Firstly, when starting out designing a site that adapts to content there is an obvious area lacking — the content. Traditionally you establish the content up front in order to direct the design and presentation. Without it the possibilities and permutations are endless.

We have deep dived into the potential permutations of content types; small text, large text, titles, subtitles, video, imagery, media and all the combinations that are possible by mixing a few or all the elements together. It is both laborious and seemingly endless.

This is what many of the design frameworks, themes and UI kits provide, to an extent, today. A laborious list of workable templates that can accommodate content in a presentable fashion. Unique, unorthodox or unexpecting content then has to be retro-fitted which then quickly starts shaping sites that look ‘samey’.

The focus is in the wrong area. Currently we focus on containers for design. Not the forces that drive the design.

This shift in focus revealed that a few fundamental laws and adding more and more constraints can produce remarkable results. Yet, still accommodate more unforeseen permutations that is simply not available with current design kits or design frameworks.

When designing for a site like thegrid.io there is still the same job of generating a lot of mockups but there is a big difference in intention. They are not meant for replication or colour by number in developers

Full designs on behance.net

Firstly, the designs are purely for the purpose of research and development. A communication and investigation tool to extrapolate the core fundamentals and highlight the constraints implicitly being applied to the designs.

Secondly, there is a job of articulating those fundamentals, intentions and constraints into a format that the AI can understand. We translate design intention into an algorithmic format that can then be used to generate desired outputs based upon highlighted constraints.

We channel the designs using GSS (Grid Style Sheets) to produce thousands of variations of content presentations based on the combinations of our explicit constraints. Producing in minutes what a single designer could do in, at best, months.

Thirdly, for the designer, there is an art direction phase of looking through the output generated. There is an inevitable move from low to high entropy as we generate thousands of variations. However, we can add more constraints again to mark which outputs are required, which are strong and which are weak. Over time, this process becomes more and more refined letting the best presentations bubble to the surface.

Lastly, we take our findings and feed that back into the AI; adding more constraints, more refinement and more polish until we are left with a layout filter that can accommodate more content types and variation than any UI kit could offer.

The job of the designer and developer are not going away. They are evolving, adapting and changing to become even more relevant to the unique requirements and needs of every individual.

Human-in-the-loop


At the core, humans are needed to drive the AI, drive the direction and the vision for each persons unique slice of the internet. If you are interested in helping or wanting to know more, let me know.

In the meantime here are some key changes in approach that I have already noticed in the last twelve months.

  • The designer workload is not reduced. It is refocused. Time is saved from menial tasks and applied directly to efforts of significance and value to the project in hand.
  • A healthy acceptance to giving up absolute control of the output. Not to be confused with compromise or total control. Nor pixel perfection.
  • There is less focus on a traditional website “page” and more focus on the elements, components and sections that come together to make up these pages. Ultimately, a purer focus on the content and how it leads design.
  • Strengths in relationships between elements, components and sections are much more important to be explicitly expressed. Are they required, strong or weak — just like in GSS. Think beyond media queries, break points and viewports. It becomes more granular and focused around the content.
  • The ability to articulate and communicate design intention in an algorithmic way is essential. This stems more from the ability to really understand why you design the way you do, not the ability to code. Those colours, typefaces, grids, white-space, layout — keep asking yourself “why?”.
  • A deeper understanding of colour, type, geometry; in fact all aspects of design and how they impact human emotion, mood and reactions are hugely beneficial.
  • Focus and foresight are needed in the constraints we use, guide and provide. Understand the ripples you create with edits, additions and changes. These ripples become the foundations on which we scale design exponentially.
  • Perceived small tweaks i.e. change in typeface, can cause the most drastic change in tone and mood conveyed. Be purposeful and extremely selective.
  • A mind shift in providing systems beyond sets (or absolute values) for colour, type, grids, shape, affordance, icons et al.

Fundamentally we are providing a solution, not a result. A framework not a static site. A guideline not a rulebook.

The main focus is to set a stage so you can compose an orchestra — rather than play each instrument individually. A way to deliver music that feels magical, to the masses.

Yes, the approach is different, the focus is different, it is a paradigm shift beyond the norm of today. To alter our approach and focus is no small feat yet the potential is once again exciting, intoxicating and full of possibilities.

At the heart of it though, it is still human-centred; by humans for humans. The potential with assistive AI is that together we can raise the bar for everyone online — not just for the select few that can.



This is a brief ‘behind the scenes’ introduction of The Grid. For more information visit thegrid.io or follow us on twitter @thegridio.

Interested in going deeper down the rabbit hole? Feel free to suggest areas of interest, in the comments, and we will keep digging.