In Control Conference (Day 1 & 2 notes)

Daniel Ryan: Keynote

  • Design doesn’t equal Aesthetics
  • what is design?
  • frictionless is better than funneled
  • don’t just test, optimize
  • humans are more important than business goals
  • being where users are is better than trying to get them where you want them to be
  • be smarter is better than being “perfect”
  • “human first web design”
  • humans are better than business goals

Estelle Weyl: CSS Selectors

  • Slides: https://estelle.github.io/selectors
  • ~ general sibling selector matches later siblings, but not nested
  • form related UI pseudo-classes
  • structural selectors
  • structural selectors
  • :not – negation pseudo-class
  • :target pseudo-class
  • pseudo-elements

Christopher Schmitt: Adaptive Images in RWD

Val Head: CSS Animations

  • helpful places to add animation

Moments of Change (aka opportunities)

  • hiding and revealing content (www.wacom.com, google+)
  • Cues and clues
  • guiding tasks (grocery list ex, flexing pagination lab.hakim.se)
  • level up hierarchy

3 things to never do:

  • Be inflexible (Mammothbooth.com)
  • Create obstacles (Square – modal navigation)
  • Be too slow

One thing to always remember is that all your animations always means something.

Sam Richard: Complex RWD Layouts

  • Singularity (no “push” and “pull”)
  • https://snugug.github.io/responsive-grids
  • sassmeister.com
  • sache.in
  • snugug.com/presentations

Dave Rupert: Automating your Tools

  • Skills of web publishing comes from different angles – designer, front-end, developer
  • atomization
  • grunt.js

Scott McCloud: Comics and Visual Communications

  • we’ve been living in an information age
  • visual communication is a two way streak
  • we are writing with pictures, there is plot, characterizations…
  • body language, height cues, just like faces expressions are a form of visual expressions
  • “Grimace Project” (created in Vienna)
  • all pictures are words – the real secret
  • “Do comics count as real reading for kids?”
  • language can be expressive also informative
  • pictures have multiplicity of uses
  • comics are an outlet for people to visually express themselves
  • If I don’t need to think it, I don’t need to see it
  • Form and content must never apologize for one another (when you treat a content as a bitter pill. This idea that somehow no one wants to learn something so there fore you need to “dress” it up, which undervalues it it all in the end)
  • comics have a unique rhythm
  • imagination is mortar between the bricks that holds it together (like between each comic illustration)
  • comics are a sequential art
  • since 1993 with digital media, strips went into long pages
  • single unbroken reading line, seems to be the one thing that looking into history, narratives has in common
  • publishers are crating limitations where they restrain you by fitting your art to one or two devices
  • all content should be ready to leap from device to device successfully. We have a problem how it shapes itself traveling in between
  • you have to know which end is up, when the technology is changing as fast as it is
  • it’s our human right to escape world from time to time.

Tim Kadlec: Speed Matters

  • the web is getting fat
  • we are going backwards because of performance issue
  • lack of performance = lack of planning
  • going from beautiful, robust and fast from beautiful done on time.
  • pre-optimization is supposedly the root of the evil if you don’t know what to optimize but then the same can be said about post-optimization, which a lot of times doesn’t even happen because there is no time for it.
  • www.webpagetest.org – free web page speed test
  • slower sites puts you at an immediate market disadvantage
  • speed is a requirement that is often undervalued and overlooked
  • set a performance budget (like set a goal for the page to load under 3 seconds on DSL connection)
  • how fast is fast enough?
  • 100 ms: Instantaneous
    1 sec: uninterrupted flow
  • use the 20% rule to be faster than your competitors
  • setting a budget is easy, sticking to it is the hard part. you can enforce it and put in into your build process and have it fail when it goes over some set criteria.
  • “let’s add a carousel”
    1. optimize
    2. remove
    3. don’t add it
  • not considering speed in web it’s like in print not considering how your colors will print
  • “Bad performance is bad business”
  • 60% is less likely to come back to your site and 40% is more likely to go to a competitor
  • faster networks aren’t going to save us higher bandwidth cca 1ooo% =.9s
  • bad performance has to hurt to developers just like to the users
  • channel your inner “Performance masochist”
  • perception = reality (user isn’t using a stopwatch to time the page load, it’s more about how it feels to them)
  • cognitive load time – it comes down to task completion as fast as possible, which will end up in making the user to feel like the overall experience is quicker
  • involve everyone, it’s not just developers responsibility
  • grunt, yslow, browser extensions for built-in testing page load speed
  • mod page speed that will do optimization for you by itself like image compression
  • Gomez & Keynote – provide industry metrics

Clarissa Peterson: Responsive typography

  • text is your message so make sure you have type that easy to read and doesn’t just look pretty.
  • to make it readable, you need to pay attention to font size, line height (leading) and line length
  • start with html
  • use font sizes sparingly, only when you need things to change

Line Height:

  • according to studies, line height of 1.4 is the easiest one to read (30em)
  • you can go to 1.3 on a smaller screen to save some space
  • line height 1.5 at min-width: 60em;

Line Length:

  • optimal line length is 45-75 characters
  • testing line length by adding span or check out https://codepen.io/chriscoyier/atebf
  • margins & font-size
  • percentage or ems for margins (mqtest.io)
  • it’s ok to go with bigger font and increased line-height on bigger screens
  • use different typeface if needed on smaller screens (wearyoubelong.com)
  • hyphenation helps to make things little smoother, it’s like progressive enhancements on those browsers that do support it
  • you need to have language specified in , otherwise hyphenation won’t work
  • if it’s a multilingual site, you can apply language just to a <p>, if needed.

Phil Coffman: Photoshop Web Design Tips and Tricks

Contrast & Clarity

  • logo (smart object where you can adjust its clarity by moving edges to remove fuzziness)
  • icon fonts
  • crisp edges on photographs
  • Shadow management – could apply to add some contrast (90degrees) but look at the adjacency of the element when using it

Color – harmonious palettes

  • how to choose your colors?
  • apply a foreground color to your palette and apply multiply or light mode to change the feel of the palette

Flexibility – combine vector shapes

  • layer styles help you to prevent from using too many layers like creating a shadow for line separator, instead of having two lines- you can duplicate layers within one file but also within files that will be then dropped in the same location as its origin
  • turn your type into paragraph text

Linked Smart Objects (*.psb)

  • 2x bitmaps
  • vector vs bitmap masks

Workspace

  • layer management
  • Layer – sort order – reverse (when you want to reverse the order of layers in photoshop)
  • quick layer access (right-click the layer to access any layer available)
  • 2-up windows (Window – )

Pet peeves:

  • turn off “copy” from duplicate layers
  • disable auto-select, transform controls, scabby zoom, animated zoom, pixel grid snapping but have it on for vector layers
  • locked layers
  • unnecessary layers

Extending Photoshop:

  • actions & scripts
  • www.bjango.com/articles/actions/
  • www.guideguide.com
  • Skalla Preview (great for app development)

Louis Rosendfeld: Redesigning Must Die

  • University of Michigan
    “Insanity is doing the same thing over and over again bit expecting different results.”
  • Who is to blame? No one and everyone.
  • we tend to be “trend followers”
  • moving from process to cadence (so you learn to balance a schedule by doing things weekly, quarterly or yearly)
  • pace layering (graph of what changes the least (nature) to most (fashion))

Brad Frost: Atomic Design

What is an interface made of?

We’re not designing pages, we’re designing systems of components.—Stephen Hay

  • led to responsive pattern library
  • are we just going to give up on fashion, do we all do the same. We are a diverse bunch, so why do we try to standardize the web?

Framework potential pitfalls:

  • one size fits all
  • looking like everyone else
  • potential for bloat/unneeded stuff
  • might not do everything you need
  • compatibility with existing sites
  • subscribe to someone else’s structure, naming, style

Benefits of front-end style guide:

  • time consuming to create
  • treated as an auxiliary project
  • often too abstract
  • seen only as a designer/developer tool
  • often created after a project launches
  • often incomplete/only serving present cases
  • lacking a clear methodology
  • www.joshduck.com/periodic-table.html

atoms – molecules – organisms – templates – pages

ATOMS – HTML elements:

  • headings, fonts, colors

MOLECULES

  • search molecule (label, input, button)

ORGANISMS (ie. header) – logo, nav, search

TEMPLATES

  • this is where we break the analogy
  • page-level blocks that create a home page or interior page
  • atoms are used as reference and pages are for review

“You can create a good experience without knowing your content. What you can’t do is create good experience without knowing your content structure. What is your content made from, not your content is.” -Mark Bolton

“There is a symbiotic relationship between content ” -Mark Bolton

Atomic design promotes consistency and cohesion, easily traverse from abstract to concrete, provides methodology or crafting an effective design system and it deconstructs the system.

Pattern Lab

What it is:

  • a design system builder
  • a comprehensive custom component library
  • a pattern starter kit
  • a practical viewport
  • an annotation tool

What it’s not:

  • it’s not ui framework
  • not a language library or style dependent
  • incredibly rigid
  • not “just” a pattern a library, but also not a production-ready static site generator

“Mustache”

Annotations:

  • also delivered via JSON
  • Lineage, code view, auto-refresh, page follow, future: pattern status, plugins

“When you are finished changing, you are finished.”