Why we need to challenge our design tools & assumptions

Written by Matt Keogh on 2nd February 2017

2 comments

Jumping for joy in layout nirvana. Maybe.

Many designers are already taking advantage of these CSS advancements. However many more are still waiting for browser support to reach a level that suits their user base.

There’s also an issue with the design tools we use.

Using design tools such as Photoshop for website layout is problematic. Creating a document with a fixed dimension when the web has no fixed dimensions makes little sense. How do we explore how these layouts adapt to different widths and heights when our canvas is fixed?

Creating a new document in Photoshop

The problem is that these tools are far removed from the raw materials that are used to make websites; CSS and HTML. In order to take advantage of advances in CSS, we need to get closer to these materials and currently none of these tools do so. How can we show a client how flexbox will work if flexbox isn’t built into our tools?

Designing in the browser gets the designer as close to the end material as they can possibly be. However, typing code into an editor invariably makes the designing process less immediate and it’s easy to get caught up in bugs and code writing.

A change in thinking

Design tools aside, in order to utilise these CSS advancements fully, we’ll need to challenge presumptions about what can be achieved when our designs hit the browser. We’re accustomed to adapting our designs to the limitations of CSS. This has become our default state of mind. This is even true in the early part of the design process where we make assumptions about layout and content order when sketching and wireframing.

Previously the web has been described as 'having no edges' because we don’t know where those edges are. There are simply too many screens sizes to know the dimensions and design accordingly. However, these new tools allow us to challenge this idea.

In print design there has always been a direct relationship between the size and aspect ratio of the canvas and the composition of the design that goes into it. Think about painting on a canvas; the canvas frames and restricts the painting so it makes sense that the composition takes a lead from the canvas dimensions. It’s said that there is no “fold” in web design. But maybe we should embrace the fold, using it to frame your designs.

On the web, canvas dimensions aren’t fixed but we now have tools that can adapt our designs to it. CSS advancements allow us to utilise the canvas dimensions to create a harmonious composition, we can arrange content in ways that could only be previously achieved on print.

How we're trying to embrace the possibilities

Powerful new CSS advancements, along with browser vendors' desire to support them has resulted in a fundamental shift in what can be achieved efficiently. This has affected our design process from the ground up. In order to get the most out of these new possibilities we're: 

  • Challenging our assumptions about content order in our wireframes.
  • Constantly trying new design tools. We're seeking a tool that behaves in a similar way to the web but gives us the immediacy of Photoshop.
  • We're pushing ourselves out of our comfort zone when designing key screens.
  • Keeping ourselves inspired by following other designers.

In what ways are you pushing layout in your designs? How has this affected your work flow? Are you dumping design tools such as Photoshop?

Further reading 

This article was posted in Design, Musings, Responsive, Tools by Matt Keogh

  • Matt Keogh

    Matt Keogh

    Matt is our Senior Designer who is perfect at pixel placement. At the weekend he likes to kick back, watch a film or two and spend time with his family (or so he tells us!). @matsaukeo

Comments

I think that one of the biggest benefits of working on prototype within the browser, is that allow us to create a bug-free application. In it, we can instantly check the design on different devices and screen sizes. Responsive design testing FTW.

Duke Vukadinovic02/02/2017 15:28

Hi Duke - Agreed! We get to see how things actually react in the real world, especially if we use real data in the prototypes. I'd be interested to know what you use for this?

Matt Keogh02/02/2017 16:01

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.