10/31/16 and 11/1/16
#aeasf
[https://aneventapart.com/event/san-francisco-2016](Event Information)
http://slides.aneventapart.com/san-francisco-2016/
Jeffrey Zeldman - A List Apart, A Book Apart, An Event Apart
It’s been thirteen years since the first edition of Designing With Web Standards turned our industry on its ear, changing the way we design and develop websites. In a web ruled by Flash, table layouts, and sites coded to work in only one browser or another, DWWS showed how to make web content and experiences available to all people, browsers, devices, and search engines. It was heady stuff back in 2003. But how well do the tactics and strategies the book and subsequent editions recommended hold up in our multi-device, framework- and app-driven web of 2016? Is it time to discard progressive enhancement, semantic markup, and accessibility? Or can these techniques still help us master today’s complex design and development challenges? Survey the state of the art, and learn how to ensure that your site will work everywhere—today and tomorrow.
- Learn grid. The future of proper CSS layout is near.
- Today's web issues and discussions are very similar to the discussions and issues of the late 90's.
- There's nothing new under the sun. Different browsers and devices are still a thing, just as they were back in the early web days.
- Adaptive Web Design - Aaron Gustafson - Progressive Enhancement.
- Apps that don't connect to the web are dead.
- Your brand happens between devices. I.e., finishing checkout on a different device.
- No one wants to download your app when they go to your website.
- We shouldn't be building separate mobile and desktop experiences anymore.
- Never underestimate the power of HTML. It'll be around for a long time.
- Design your system to serve your content, not the other way around.
Sarah Parmenter - Founder, You Know Who
Over the past few years our skill sets have been firmly planted in understanding this new era of multi-faceted web design. While we’ve all been busy making sure our designs adhere to the latest flat trend and performance specifications, we’ve forgotten that what once got us all talking, before we looked under the hood at the code, was visually striking websites. We’ve come to believe that simply re-designing to increase visual pleasure and memorability is somehow not okay. In this talk, Sarah will discuss what designing brands (including personal brands) looks like in 2016 and the social ecosystems that accompany them—without a “golden ratio” overlay in sight.
- Designing without purpose is noise.
- Branding is not a pattern library, it's a connection to a company.
- Pattern libraries should explain why something is designed.
- Facebook Audience Insights for brand research.
- FontsInUse.com
- Logo.
- Color.
- Type.
- Story Telling.
- Art Direction.
- Voice and Tone.
- Slogans.
- Social Ecosystem.
Krystal Higgins
First impressions matter. A good first-time user experience establishes a foundation for future engagement, while a bad one can mean abandonment. What kind of first impression is your product giving? This presentation is for anyone who designs products and wants to create an experience that better engages and informs new users. You’ll get an overview of best practices as they relate to learning and engagement, including patterns and anti-patterns. You’ll also get suggestions for next steps, regardless of whether you’re starting on a fresh new site or product, or revising an existing one.
- What's the first thing your site does to greet new users? Now greet your seat neighbor that way!
- Users have already been traversed and found site. Don't make onboarding more difficult.
- When we force users how to use site, we're too restrictive.
- We also don't want to leave new users helpless.
- Provide new users with actionable next steps.
- Inline Cues:
- Top Stories, Tags, Categories help the user decide what to do next.
- Other shop categories in the middle of a product listing page.
- Predefined top categories.
- New users aren't dumb, they know what they want, just give them an initial push.
- Best for displaying within content.
- User-guided tutorial:
- 1 time hints to show how to use a feature.
- Best for task instruction.
- Playthrough:
- Protected space to learn core skills, playfully.
- Playthroughs are good for new interaction models.
- Avoid wasting time and blocking interaction with modals or popups.
- Give users the option to escape an experience. Don't force experiences.
- Exercise: What's your coaching cadence?
- Draw a left to right line. Draw a dialogue between site and the user.
- If product is overweighted and steals all the dialogue, you might be over-coaching.
- Play the role of the site and the user. Act it out.
- kryshiggins.com/coach
- Demanding users to sign up puts users in a defensive state.
- Lets users try before committing to the service.
- Free Sample Pattern:
- A portion of product is accessible without signing up.
- Prompt users by offering value to them first.
- Measure retention and engagement, not just signups.
- "A wealth of information creates a poverty of attention" - Herbert Simon.
- Learn by requesting or learn by inferring.
- Personal Focus Wizard Pattern:
- A series of steps in which users build their experience.
- Ask users about stores, personal taste, and mood board style "wizards".
- smooch.io
- Learn by inferring location, time, referrer, and device use standard technology.
- What is the most meaningful questions to ask users?
- Exercise: What is first question to ask a user?
- Dolores Landingham Slack Bot for Slackbot onboarding.
- Reach lapsing users via email.
- Onboarding shouldn't be a one-off experience. Create continued engagement.
- Move away from telling people how to experience site. Let users interact.
Jen Simmons - Desinger
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.
- Art Direction aka Editorial Design.
- Art Direction - the idea of communicating a story through art, words, and text.
- Layout design with pure CSS will push Art Direction.
- Grids and Page Layouts book for layout inspiration to bring to the web.
- Layout Essentials book for more inspiration.
- labs.jensimmons.com
::first-letterenables us to use drop cap in articles.- Use
@supportsfeature query for newer CSS features, like::first-letter. - Feature queries will be used to support new features like grid layout.
object-fit,clip-path, CSS Shapes and others will push Art Direction forward on the web.- CSS Shapes Editor extension to receive math needed for shape values.
- Grid alignment are similar to Flexbox alignment spec. Same property names.
- flexboxdefense.com and flexboxfroggy.com for flexbox learning.
- Download Firefox Nightly and Firefox grid plugin to play with grid layout.
- Use progressive enhancement to embrace new CSS features.
- jensimmons.com/presentation/progressing-our-layout
- www.layout.land
Rachel Andrew - Co-founder, Perch
In a world of evergreen, automatically updating browsers we need to change the way we think about browser support. It makes little sense to sign off on a brief mentioning target browsers when new features may become usable during the course of a project build. To be truly future friendly, we need to build with that future in mind—adding enhancements that our users’ browsers will grow into, release by release, our work getting better without us doing any more work on it. In this session, Rachel will demonstrate with practical examples how to embrace the new layout methods in CSS, without needing to cut off people who are using browsers that haven’t caught up yet, and show you how to get the best from the magic of Flexbox and Grid—without needing to lean on JavaScript and polyfills to get there.
- Flexbox, CSS Grid, Box Alignment, CSS Shapes, CSS Feature Queries are all pushing the limits of web layout.
- Use Fractal or pattern libraries to test and build features at a component level.
- Design for the extreme edges of the experience.
- Start with great basic experience and great markup, then add shiny new features.
- Use Feature Queries for all new CSS features.
- All flex and grid items inherit and override float behavior.
- Use both flex and grid in conjunction with float fall backs.
- See how to create media object with grids.
- Experiment: Use CSS grid to build a CSS "Media Object".
- Refer to slides for examples and use-cases for new CSS features to use to enhance layouts.
- Vendor prefixes are going away and new features are hidden behind experimental flags within browsers.
Brad Frost - Web Designer
We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.
- Design should be done iteratively to not confuse existing users.
- UI's aren't pages. We aren't designing pages. We're designing components.
- When half the internet is using the same tool, we all start looking alike.
- Responsive deliverables should like a lot like fully functioning Twitter Bootstraps.
- "Front End Guidelines Questionnaire".
- Material Design is good at explaining the philosophy of design decisions.
- Design language should answer the why's to people who are consuming instruction.
- styleguide.mailchimp.com
- "Writing for the Web" for basic writing guidelines.
- Promotes UI consistency.
- When things behave the same users don't have to worry what will happen.
- Promotes faster production.
- Shared vocabulary.
- More time collaborating and less time in meetings.
- Easier to test.
- Easier to debug.
- More responsive, performance, and accessible experiences.
- Useful reference.
- An essential resource and hub for best practices.
- Future-friendly foundation.
- How to show the importance of a pattern library:
- Show managers tools like CSS stats.
- Do an interface inventory to show inconsistency. Search for Brad's interface template.
- Establish scope of work.
- Plant the seeds of share vocabulary.
- Lay groundwork for future pattern library.
- If boss still says no, do it anyways.
- In order to make the whole, you need to make the parts.
- See Lego analogy in slideshow.
- Atomic Design - Mental model to think of our UI's as smaller components to builder larger pages.
- Bridge gap between design, front end design, and development.
- Use includes in pattern library so ensure changes are only made in one template. Keep it DRY.
- Front End developers should be prep-chefs by setting up patterns early on that are adaptable.
- Building smaller components makes it easier to build and design in an iterative process.
- Design and develop for the design system first then implement into site and pattern library.
- A design system is living a breathing.
- "Getting Vanilla Ready For v1 The Roadmap" - Flow chart for pattern library usage.
- Make pattern library, design process, and development process:
- Adaptable.
- Maintainable.
- Approachable.
- Visible and Public.
- Agnostic - Name components in an agnostic way. Don't name based on context.
- Contextual - Show where they're used.
- Show What's New - Send notifications to Slack.
- Atomic Design book coming out soon.
Jeremy Keith - Clearleft
We work with technology every day. And every day it seems like there's more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that? This talk will help you evaluate tools and technologies in a way that best benefits the people who use the websites that we are designing and developing. Let's take a look at some of the hottest new web technologies like service workers and web components. Together we will dig beneath the hype to find out whether they will really change life on the web for the better.
- Chindogu - useless and useful ideas.
- "Humans are allergic to change." - Grace Hopper
- principles.adactio.com
- Prioritize users over authors, over technical purity.
- "Software, like all technologies, is inherently political."
- Connections TV show.
- "Technology is neither good, nor bad, nor neutral."
- How well does it work?
- How well does it fail?
- Who benefits?
Val Head - Author, The Pocket Guide to CSS Animations
Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work. In this session, Val will cover guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use. All the things you need to make web animation work for you and your team.
- Improve communication for animation.
- Develop a shared vocabulary around animation.
- Establish animation values.
- Document animation.
- Good UI animation takes the whole team.
- Storyboard and sketch where animation can be useful within a UI.
- How could animation make a specific UI easier to understand?
- How could we animate between views?
- Anyone on the team can make a animation storyboard by drawing it out.
- How to draw a storyboard:
- Trigger: What starts the action? Draw or describe in words.
- Action: What takes place? Draw in as many frames as needed.
- Quality: How does it happen? Describe in words.
- Motion Comps are a short movie to see how things move.
- Create motion comps with After Effects and Tumult Hype.
- Define easing pallet for different actions up front within a style guide.
Jason Grigsby - Co-Founder, Cloud Four
Responsive Web Design has forced us to accept that we don't know the size of our canvas, and we've learned to embrace the squishiness of the web. Input, it turns out, is every bit as challenging as screen size. We have tablets with keyboards, laptops that become tablets, laptops with touch screens, phones with physical keyboards, and even phones that become desktop computers. In this session, Jason will guide you through the input landscape, showing you new forms of input like sensors and voice control, as well as new lessons about old input standbys. You'll learn the design principles necessary to build web sites that respond and adapt to whatever input people use.
- Four truths of computing input:
- Input is exploding.
- Input is transient.
- Input is a continuum.
- Input is undetectable.
- Design for the largest target by default. Design for touch.. for now.
- Remember to support browser auto-fill with Payment Request API.
- Don't make assumptions about user's devices.
Derek Featherstone - Founder, Simply Accessible
How can we be sure we’re creating the best design experiences possible? It turns out that creating great experiences for a particular subset of our users—people with disabilities—results in better designs for everyone. Focusing relentlessly on accessibility helps us think of extreme scenarios and ask questions like “how can we make this work eyes free?” and “how can we make this work with the least amount of typing?” Explore multiple methods of extremifying your designs—stressing them in ways they haven’t been stressed before—to illuminate opportunities for innovation, efficiency, and excellence that lead to great designs for everyone.
- Design for users with low vision. Use the "straw test".
- Addressing accessibility concerns helps everyone, not just the disabled.
- examples.simplyaccessible.com/cellheaders
- sateach.es/cards
- Design for Dory.
- Clone placeholder reminder text into the label if users may forget. E.g., date formats.
- How easily could Andre the Giant use your site?
- Provide the minimum viable interaction by providing the most valuable piece of information as early as possible.
- Design for people with zero confidence.
Eric Meyer - Author, CSS: The Definitive Guide
Designers are skilled at creating an ideal experience for idealized users. But what happens when our idealized experience collides with messy, human reality? Designs can frustrate, alienate, or even offend; form options can exclude; on-boarding processes can turn away; interactions can reject or even endanger. The more we build websites and digital products that touch every aspect of our lives, the more critical it becomes for us to start designing for imperfect, distressed, and vulnerable situations—designing interfaces that don’t attempt to make everything seamless, but instead embrace and accommodate the rough edges of the human experience. In this talk, Eric will explore a wide variety of failure modes, from the small to the life-changing, and show how reorienting your perspective and making simple additions to your process can help anticipate and avoid these failures, leading to more humane, and ultimately more compassionate, outcomes.
- It's common to idealize an outcome and shoot for that only, when that's hardly ever the case.
- Thinking Fast And Slow book.
- Think of the worst possible outcome before making design decisions.
- How to design for the worst case:
- Prioritize helpful, realistic estimates.
- Provide at-a-glance help.
- Use plain language.
- Write for the urgent case.
- Communicate intent early on.
- Consider the context of the situation.
- Have intention when asking for users information. What do you want to do with it?
Gerry McGovern - CEO, Customer Carewords
In an age of increasing complexity, prioritizing will be a key skill. Anybody can add features or content. In fact, in this age of glut it’s the easiest thing in the world to do. Top Tasks Management helps you identify the top tasks in your projects (what really matters). Just as importantly, you'll discover the tiny tasks, the low-level tasks that flood designs and content pages, smothering simplicity and confusing your users with an ocean of features and content. Top Tasks Management is a method, developed over ten years of research, that will help you focus on what really matters in your projects, giving you the evidence to remove that which doesn't. It’s been used to great effect by organizations such as Cisco, Microsoft, Lenovo, Google, and the European Commission. Gerry will teach you how to identify the top and tiny tasks in your projects and you'll walk away with a strategy, giving you the ability to defend your decisions to your team and to management.
- We're still shaping the new world of the web.
- Design for real users, not idealized design.
- Design for what is most important to our users.
- Simple words can have a dramatic effect on users.
- Stop creating crap.
- If your product was really simple to use you shouldn't need to say so.
- If you solve the customers problem, they'll solve your problem. Stop asking for money and you'll get money. Start helping people with their needs.
- Help people do what they want to do first! People know what they want to do.
- Measure task completion and the time-on-task.