Real Art Direction on the Web

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities.

She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page — any page.

slides [https://speakerdeck.com/jensimmons/real-art-direction-on-the-web]

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design.

 

Art direction allows brands to be depicted with as much thought for fashion design as tech design, eg the Apple Watch.

 

Layout for print uses design to convey ideas and support content – much of that is lost on the web as we restrict ourselves to lines and boxes.

 

We’re letting our design thinking be limited instead of expanded, despite the available and emerging tools.

 

Libraries like Bootstrap can turn layout into a multiple choice of templates, stifling originality and creativity. To address that, tooling needs to be separated from the design process.

Limiting whitsepace made sense for print on paper – the web is not like that. Use whitespace as a positive design element.

 

Use the emerging tools for fine detail control, like drop cap initial letters, @supports, viewport units, object fit, clip path and CSS shapes.

 

Other tools help to control the big picture, like Flexbox, CSS Grid and circular layout.

 

To manage all this, establish a process. For example: organise content, write HTML to set source order, sketch layout options, design a grid, and apply CSS to control the design.

 

Look beyond straight lines, columns and rows, uniform sizes.

 

You don’t have to use every trick in the book. Make choices and use what makes the most sense.

 

Let your design be different in different browsers. You don’t have to supply exactly the same experience to all users.

 

Flexbox requires still thinking about the page, while Grid fits content into any available space in an ordered way.

 

Don’t be shackled by browsers – use new features now that work in some browsers and don’t in others, with progressive enhancement.