Thursday, September 29, 2016

Google design

Not sure how I've completely missed this, but Google has a Design site that is really amazing.  Their Material Design Icons are what brought me to their site initially, then I started browsing around and realized I could spend a week just consuming information and ideas they're providing.

This gets me thinking how badly we need a communications platform at our company so I can share with my coworker friend in India.  Email is lame, IM... well we're on oposite schedules.

Anyways, check it out.  I geek out on this stuff!

GOOGLE DESIGN

I spy material design, pattern design, G-design icons, etc.

Wednesday, September 28, 2016

In late August 2016, I had the opportunity to attend An Event Apart in Chicago, IL.
I’d like to summarize some of what I took away from each talk as it will help determine some of what I’d like to focus on in the next year.  I’ll share my reactions and key takeaways.

Overall, I heard themes emerge from the conference:
  • Performance matters
  • CSS grid and Flexbox will become the future of layout design
  • Show compassion and decency with your design and respect those that may be outlier cases
  • Atomic design - building design patterns instead of designing pages - iterative designs, not massive redesigns
It was really fantastic to get my head up from the daily toil and to take a break by learning from industry experts.  So much was talked about with great ideas flowing all around.  Basically, much of the discussion was really focused on Design Thinking, not just design, but about creating systems of design and creating user focused outcomes.  This involves multidisciplinary teams and restless iterative design modifications.  Complacency and comfort are the enemy.

DESIGNING WITH WEB STANDARDS IN 2016

JEFFREY ZELDMAN

We as designers and developers have progressed over the years to implement standardized web practices with separation between content and structure.  As we march on to that tune, frameworks have been introduced and utilized.  Much of that progression has been catch up work to implement responsive websites and fit our sites into the multitude of device variances.  Some of the questions we need to be discussing going forward are:
  • Frameworks and their bloated markup
  • When we design, mobile should always be our first screen
  • Progressive enhancement is the way we design up
  • Remove distractions, let people interact as directly as possible
  • Remove each detail of your design until it breaks
  • 90 percent of design is typography
  • Style is the servant of brand and content.  
  • Style without context is decoration.
  • Performance matters


DESIGNING DELIBERATELY

Yesenia Perez-Cruz

Yesenia talked about keeping our design within perspective of our goal.
We need to be asking what is the main goal of each project and keep unnecessary bloat out, while paying attention to how we load elements and page weight.  Part of our design perspective needs to focus on prioritizing performance by setting a performance budget and being deliberate about staying within that budget.  
Use tools like, webpagetest.org to analyse our pages.
References:  

Adapting to Input

Jason Grigsby

The variation of input devices has exploded.  We should now be thinking about other methods of input such as touch,  voice input (google voice search), sensors, geolocation and others.  When in doubt, default to touch.
Also, we should be creating website, apps, and forms with the latest helper code, such as browser autofill, autocomplete, app number displays, cameras  and other helper methods.
References:


Style Guide Best Practices

Brad Frost - Atomic Web Design

Brad touched on creating design systems instead of designing pages.  The idea is that with a page design, companies tend to do a lot of one-off design work.  There’s repeated work and labor that goes into those and the pages tend to lack consistency because they aren’t viewed as a larger design system.  With a design system approach, we can deliver a more congruent experience.  This can also help ease the user into a new system because we’re creating iterative design changes instead of monolithic master redesigns, which tend to be jarring.
Element collages (interface inventory - normalize it) are a great way to review and standardize your content.  
We should be creating tiny bootstraps for each separate project instead of relying on overweight large frameworks… but this takes much time and effort.
Some of the benefits that creating design systems offers to that it promotes consistency, offers faster production, utilizes a shared vocabulary, is easier to use by offering a DRY (don’t repeat yourself) approach and serves as a useful reference.  
References:


Designing for Understanding

Stephanie Hay

Stephanie talked about designing with intention for specifics.  She gave examples from Sesame Street because it targeted a specific audience and used test groups to understand how urban children could learn better (3 second alphabet recital by James Earl Jones - repeatable).
She touched on creating our designs in a real interface so we can focus on a promoting the real experience (design in html not Photoshop).  We should be involving different types of people in our design process for different types of thought.  Lastly, our content should define the structure.  

Art Direction

Jen Simmons

Jen’s talk about art direction revolved around what’s coming up next in the field of web design.  The focus mostly covered Flex box and CSS Grid.
She also introduced the idea of, looking at our content and then determining the order it should appear and rank.   Then we can  organize content, create html files and set source order, sketch ideas for page layout, design a custom grid and write our own grids.
A great way to design with flex box and css grid is to utilize it in our mockups.  This way we’re learning it and then when it’s fully integrated into modern browsers, we’ll be ahead of the pack.
References:

Animation in Design Systems

Val Head

Css animation was the topic and how to implement it.  There was discussion on should it be utilized and identifying the ‘for what’ should it be utilized.
We can start introducing it in subtle ways, but it can be referenced often and deliberately.  Animation should always inform and support the design, and not simply lead the design.  Don’t animated just to animate, but think through reasons it can be used.

Performance Under Pressure

Mat Marquis (bocoup)

Mat’s focus is on building fast sites.  If your site is inaccessible to the poor, it’s neither radical or revolutionary.  Think about the critical render path and prioritize it.  Possible ways to do that are to include critical css in the top of your page, so it renders faster, while keeping the less critical in the called stylesheets.
References:

CSS Grid Layout

Rachel Andrew

The next big thing in css is CSS Grid layout.  A great way to practice Grid is to prototype in Grid.  Grid can be layered using z-index.
Reference:

Extreme Design

Derek Featherstone

Extreme design consists of examining the extremes and finding the in-between that is most common shared characteristics.  We need to be grouping closely related items and possibly use the “straw test” to simulate low vision users.  When thinking about users we should view them as a color spectrum example instead of just a plain linear line.  Designing for better accessibility usually results in better designs for all.
We should utilize the “i-forget” test principle when designing forms.  Placeholder text should not be used as labels. People have extremely short attentions, so we should be designing for understanding by Heading Only Consumption.  Also, consider how to transform the digital experience into the physical, so we include a wider audience participation ability.

Compassionate Design

Eric Meyer

Who are our designs created for and how do we include others or mitigate wrong intentions if the user is outside that initial design audience.  Do a premortem - What if this goes wrong?  Then ask how should we respond or what should we do to avoid it?  Compassion in design asks us not to forget the urgent need case, and to consider the outlier cases and stress cases.
When we write copy, we should read it outloud to someone.  
When designing forms, we should ask our user’s for info because we need it, and maybe not waste their time with info that might just be nice to have.
Filling out a form can be dehumanizing, rude, and our designs might just be lazy.  Make them good and have empathy for your users.

The Physical Interface

Josh Clark

Josh’s talk was about thinking about how we get the technology out of our way and make it feel more natural.  The Internet of Things is here and we should start thinking along those lines.  The web is not just the browser any more.  Interfaces don’t always require a screens and input isn’t always from a mouse or even touch.  Sensors, voice, motion, geolocation and other methods of input can utilized.  How should or can we create, adapt and develop ideas around those new functional options? If I have to launch a separate app for every physical device, then have I failed as the designer?
Reference:


Idea highlights from the conference:
  • No longer create massive redesigns… it should all be iterative design implementations
  • Benefits of Pattern Libraries
    • Promotes UI consistency and cohesion = more conversions & $$$
    • Faster production = roll out more features and iterations faster than ever
    • Shared vocabulary = more time collaborating, performance and accessible experiences
    • Useful reference
    • Future friendly foundation
  • Show… don’t tell
  • Utilize interface inventory
  • Performance test!