ADOBE MAX 11/2-4, 2016 • San Diego

Here's my report summarized to share with agency. 3 days of inspirational and educational experience from Adobe MAX.

Adobe MAX: Tips • New Innovation • New Knowledge • Creative Inspiration
Over 10,000 attendees from 60 different countries.
Long lines everywhere 😱
  • Graphic, web and multidisciplinary designer
  • Art and creative director
  • Video, film and motion graphics professionali
  • Photographer
  • Tech and business strategist

Day 1 Keynote: Highlight

Image: Adobe Newsroom

Adobe XD - Vector base prototyping tool. Window's version available end of 2016. "Spec" features coming early 2017, making it easier to hand off design specs and assets to developers.

Image: Adobe Blogs

Adobe Felix - 3D tool for graphic designer

Image: Adobe Spark

Adobe Spark - Easily create and share visual stories on mobile, tablet, and desktop. (Social graphics | Web stories | Animated videos)

  • Adobe Stock - "Search similar image" function within Photoshop. More integration with Adobe Apps.
  • Adobe Cloud - making project collaborations easier
  • Adobe Typekit - adding premium fonts for purchase
  • Adobe Sensei - Adobe is now more committed to develop artificial intelligent
  • ... and more

Day 2 Keynote: Highlight

Lynsey Addhario - The Pulitzer Prize winner - photographer and Journalist, shares moving, inspirational story. She spent years risking her life for the truth. It was very powerful.

Quentin Tarantino - surprise! 😳❤️👍🏻

  • Two more amazing and inspirational creator:
  • Zac Posen - Fashion Designer, shares the fiber-optic dress
  • Janet Echelman - Sculptor and Artist. She creates living, breathing sculpture environments that respond to the forces of nature.
Community Pavilion - Sponsor booths, playground, and more
Themed lounges
VR experience
Your brain on MAX - shows your brain activity in 3D
3D printed selfie
Wacom Tablets and Microsoft Surface
Type Directors Club Winner's Showcase
"Flipping' good time" animated book
Sponsors, Print Lab, Pantone, Paper Companies etc...
Netflix
Drawing wall and instagram wall
Adobe Store
Adobe Bash

Sessions Overview

Some of the sessions are available online

  1. Hacking Illustrator: solving every day graphic problems
  2. Responsive design: beyond devices
  3. Creating Better Together
  4. Doing more with MUSE- top 10 tips & tricks
  5. Designing design system
  6. Overcoming a good girl myth to achieve creative and business growth
  7. Surviving your next responsive web design workflow shakeup (for Photoshop designer)
  8. I didn't know illustrator could do that! (Plug in demo)
  9. Using design to raise awareness around social issue
  10. Responsive Design in 2017 (Video not available, but there's transcript & PDF presentation)
  11. Reinventing your design process with Adobe XD
  12. Composing secret for ad campaign imagery

Sessions Notes & References (Web Design)

Image: http://www.space538.org/events/ethan-marcotte

Responsive design: beyond devices

Ethan Marcotte

  • We are moving from page design to pattern design
  • Using: flexible grids, flexible images, and media queries not a page
  • A network of content that can be rearranged at any screen size
  • Design the priority not the layout
  • Building responsive layout is not the hard part
  • The hard part is documenting and communicating how, why, and when our responsive design adapt
  • The rise of style guide - living style guide (Reference session: Designing Design System)
  • Shared understanding: remove redundant, share inventory of how and what it does
  • Pattern design
  • Most important - Pattern naming and organization
  • Use flexbox - ex. theguardian.com

Responsive Design in 2017

Justin Avery

  • Fundamental of website is sharing information
  • Now 50% of people in the world can access to internet (June 2016)
  • Many of them are still in 2G environment - slow downloading time

Slower site reduce site access and interaction

Latest approaches: (1) Responsive images (2) Layout with Grid & Flexbox (3) CSS Image Shapes (4) Fluid Typography

Use Responsive Images on your site

  • Responsivebreakpoints.com - Easily generate the optimal responsive image dimensions
  • Down with tables. In with CSS float based layouts.

Take advantage of Flex

  • Grid VS Flex - Known VS Unknown
  • Flexbox is great for the unknown: when you are not sure how much content you might have or how many items that might occupy an area (think navigation items, article lists, search results — smaller confined components)
  • Flexbos browser support > caniuse.com
  • Grid is great for the known: this is your page layout. If we're building modules instead of pages, think of the grid as something that lays out those modules in a sensible fashion.
  • Start creating your layouts in Grid
  • Embrace flexible Typography
  • Web Fonts: Size over 500k is too much. 150k or below is better. Keep it minimum.

CSS Image shape

Ensure performance across devices: (1) Facts about performance (2) HTTP2 (3) Images (4) Offline First (AMP)

Page loadtime reduction increase the sales

  • We want people to perceive it is faster
  • Load time vs Perceived Load Time
  • HTTP2 reduce loading time
  • Pros and cons of Google AMP
  • AMP pages indexed by Google are not redirecting visitors to your site. Anyone who links to your page might instead being linking to Google.
  • AMP if you need, but focus on your own site

Implementing AMP (DIY)

  • Make it readable offline
  • Accelerated Mobile Pages (AMP)

Demo: Page load time of max.adobe.com VS His version

  • (1) Optimize images (2) Resize images (3) Apply GZIP & Browser caching etc...
  • Try load off a few seconds off your site, improve constantly
  • Responsive design 2017: There will be less mobile app • Speech • Immersive storytelling
  • Work out how to deal with giant screens
  • Move your website offline
  • By 2019, 20% of brands will abandon their mobile apps
  • By 2020, 30% of web browsing sessions will be done without a screen

Reinventing your design process with Adobe XD

Caroline Williams

  • Stop guessing start testing
  • Adobe XD is prototype and design combined
  • You can make wire frame, design, and make a prototype
  • XD is worth learning - Easier than any other Adobe products
  • Only takes a day to learn the program
  • You can copy and paste vector icons from illustrator, make edits in XD
  • Symbols - copy and paste to another art board, if you make a edit, it will be applied to all pages
  • Repeat grid - easily repeat content. If you and to make edits, they'll be applied to all easily
  • Preview - you can do what InVision app can do and more
  • Library is now available with latest version
  • Layer is also available
  • This app will streamline website projects
  • Adobe is listening - it is still in demo version, but they are really committed to this
  • Online forum - submit request, online poll to decide what function to add next
Created By
Hiroko Suyama
Appreciate

Credits:

Credits are noted below each photography. If not noted, they are credited to the creator of this page.

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.