- art direction on the web is a recurring theme
- at last we have the tools to do proper art direction
- after two decades Jen gets design, it’s only recently Jen has understood art direction
- art direction is a deliberate choice: this is what I want to convey
- the Apple Watch logo is not a tech logo, it’s a fashion logo
- when Apple launched the watched, they used art direction from the launch to position the product as a fashion item
- in editorial design there is a lot available to communicate your idea
- placement is part of communication
- we’ve had art direction in print reporting, often it’s lost on the website
- the web is boring, everyone is making the same designs: large header, three dots
- the web became uniform when we started using grids, eg 960 grid
- the twelve column grid was great when we were infants finding our feet on the web
- prefab grids helped back when the box model was inconsistent, shout out IE6
- since 2012 we’ve been able to define the box model, but we still use the same grids
- we’ve moved on from grids to bootstrap
- we override the type but we keep the same layouts: 12% of the web uses bootstrap layouts
- it’s like we’re all using the same WordPress theme
- layout should be based on your site, not prefab multiple choice
- there are a ton of resources on layout out a page, not grids but graphic design books on using grids
- communicate using white space, it sets up the message
- on the web white space is free, we can afford to leave it
- the web no longer needs to be straight lines
- visit labs.jensimmons.com for plenty of layout examples
- browser inconsistencies have broken things, drop caps for eg. This is a solved problem.
- we can use
@supportsto detect if browsers support a feature. Browsers that don’t support feature queries skips the query - viewport units change the web
- using viewport units allow us to control what appears above/below the fold
object-fitallows you to crop images in the browser, similar tobackground-sizein CSS- part of the reason were bored on the web is everything is a perfect rectangle, not the case in print
clip-pathallows us to move away from perfect rectangles on the web, as do CSS shapes- Shape outside allows you to set how a text flows around another element, there is a Chrome extension to create polygons.
- all of these things are available today using progressive enhancement
- flex box, grid layout and alignment are going to change our lives
- floats make boring galleries, the float drop problem, we made everything a square.
- With flex box we can make items different widths and fix the height, each row is the full width
- same with flex box columns and a fixed width, variable heights
- multi-column layouts are more flexible that flex box columns, they can avoid side ways scrolling
- grid layout allows you to define both columns and rows, content can be multiple cells wide/tall.
- the browser will lay things out and move content around to fill in the holes: dense layout. Think Masonry but without jank.
- Flexbox and Grid are a time to open our minds, mess around with them and see what’s possible
- Flexbox lays things out in a single dimension (either row or column) and wraps when it runs out of space
- CSS Grids lays things out in two dimensions, it considers the entire space
- experiment with layouts by translating print items to the web. try things out
- Grid frameworks are fixed numbers of cells, grid layout is depends on the content. We need to drop out mental model
- Grids are in the nightly browsers (sometimes behind a flag), in other browsers design with a fallback
- use floats for regular browser, wrap grids in feature queries.
- Good html is important, grid and flex box allow you to do this.
- Grid is not the end of things, there are many specs on layout to come.
- Rounds is being worked on: viewports can be round now we have smart watches
- Jen’s process:
- organise content
- create an HTML file and set the source order
- sketch ideas for page layout (sometimes this happens 1st)
- design a custom grid
- apply css, write your own layout
- new features work and don’t work at the same time, we don’t need to wait two, three, four or five years to new features
- progressive enhancement is built into the web, shape outside falls back to a traditional float
- grids will be a long, slow transition but it will be significant, it will be as big as RWD or tables to CSS layouts
- now is the time to learn CSS Grids, it will take time to learn now. It will be important and your new knowledge will be in demand.
Written by
in Notes.
Leave a Reply