By James Hall •

Beyond Tellerrand 2015 – Part 1

This is a really quick rough and ready write up of the event done while we’re there. Come back in a few days to see a more polished version!

Design and Performance – Steve Souders & Mark Zeman

Steve and Mark delivered a fantastic talk on thinking about performance right from the very beginning of the project – during the design stage.

Tourism New Zealand

This website was a totally immersive experience. As you scroll down the page, lots of amazing time lapses play from diffrent locations.

The brief was to put people virtually in New Zealand.

They built huge scaffold towers, and attached motion control camera to them to capture all the footage.

They made this 30MB experience work even for the slowest devices by using a tiny sprite sheet. The tnitial experience was 100k, each frame was cut out of the sprite sheet then enlarged and blurred on to a canvas. This is similiar to how the Facebook profile page loading works on iOS

“We’re designing timelines not static pages.”

They highlighted the importance of stiking a balance between the desire for richness, and speed.

Use the language of film like ‘story boards’ to design the flow.

Useful takeaways:

  • Webpagetest.org and filmstrips.
  • Use Performance budgets.
  • Moving beyond window.onload() – W3C Timing Specs.
  • Develop custom metrics that matter to your users.

Styleguide Best Practices – Brad Frost

Great talk from Brad with some excellent comedy use of stock footage.

Useful tools/projects:

  • Frontify – brand style guides as a service
  • Design Language Guidelines
  • Mailchimp content style guide
  • Content styleguides – dal.ca/webteam/web_style_guide/writing_for_the_web
  • Code guidelines
  • GitHub Styleguide
  • Styleguides.io
  • CSS Stats (we ran this on our own website — the results were terrifying – cobblers children’s shoes and all that)

pattern lab

His pattern lab concept was extremely interesting, it takes the process right from the smallest parts, all the way up to what the client cares about.

Atoms – Molecules – Organisms – Templates – Pages

Telling Good From Bad – Martina Flor

This talk is difficult to sum up with words as it is very visual. She recommended sharing sketches with clients is a great way to quickly convey ideas.

She asked everyone to search for the hash tag #lettering on Instagram.

It’s important to have consistency – have a few design decisions that are consistent throughout.

Check out her behance page!