This is my second time to the larger-than-life digital creative conference. I’m stoked to get inspired, humbled, energized, and enlightened. As a web professional, my first MAX in 2014 was heavily focused on web tech. While I’m still looking forward to getting exposure to that (I hope the Adobe XD team has a presence on the pavilion floor), I’ve shaped my itinerary to have a creative bent. I’m overwhelmed by the talent available to see and meet at MAX this year. You can and should check out the live streams available on max.adobe.com. Maybe you’ll see me waving at the cameras. Here’s where you’ll find me:
9:30 AM – The Big Keynote
Probably some product reveals presented by Adobe CEO Shantanu Narayen. If Adobe is going to have a big giveaway, this is where it happens. My prediction? Probably a nice media-capture device, like a camera, hopefully a 360 camera. My wish? Tim Cook makes an appearance to giveaway new Macbook Pros. One can dream.
1:45 PM – Pretty Much Everything: Aaron Draplin
The quick-fire casually polished presentations by Aaron James Draplin of the Draplin Design Co. warm my heart. His work-your-ass-off ethic via his passion for good design clears minds of the noise and gets eyes to see the best in things. I’m bringing cash to buy some merch from his table because cash is king.
3:30 PM – Ten Designers That Changed My Life: Nick Sambrato
I know of Nick’s awesome print shop, Mama’s Sauce, and I don’t think this topic is going to fail. Lay it on me, Nick.
5:15 PM – The Difference Between Being Cute & Being Creepy Is One Emoji: Timothy Goodman
I have no idea what he’s going to talk about, but it should be both entertaining and insightful. Timothy is a very talented illustrator who’s collaborated with many other gifted designers. Pumped to hear this talk.
6:30 PM – Sponsor Night
There should be keynote presenters here showing off the latest Adobe tech. I’m excited to meet these experts in person and ask them questions one-on-one. Also, mingling with like-minds. Also also, apps+snacks+beer.
8:15 AM – Everything Your Mother Never Told You About Launching a Product Line: Rebecca Simpson
I don’t have any plans to make physical products at the moment, but I find the whole process fascinating (probably why I like Draplin so much). Looking forward to hearing a good story and some nuggets of knowledge from Becky.
10:00 AM – Second Keynote
This keynote features rockstar creatives making it happen in big ways. Scheduled to attend this year is artist Janet Echelman, fashion designer Zac Posen, photographer Lynsey Addario, and some filmmaker named Quentin Tarantino. This keynote usually involves inspiration overload.
12:45 PM – Telling My Stories, My Way: My Journey to Becoming a SelfMade Artist: Josiah Brooks
Josiah from Jazza Studios is a high-energy speaker. It should be full of positive vibes from a person making a buck from his passions.
2:30 PM – Masters of None: The Made Shop
I’ve been a generalist in nearly every job I’ve been paid for. This title speaks to me. Sounds like the entire Made Shop is going to be there.
6:00 PM – MAX Sneaks
Keegan-Michael Key to offer witty banter alongside some of the craziest late-breaking tech from Adobe engineers? GOLD.
7:30 PM – MAX Bash
The Mogli’s and the Alabama Shakes will rock among performance artists and fancy appsnacks. I saw the Alabama Shakes in Seattle the week after their appearance on Saturday Night Live. It was amazing and loud, even from the back row. I’ll be trying to get closer to the stage this go around.
8:30 AM – Crafting the Story: Storytelling Techniques That Capture the Audience: Christine Steele
I do a lot of work with user experiences. When outlining a journey online, with an interface, and, of course, in a seat at the movie theater, a story arc is essential to engagement. I’m interested in Christine’s take on storytelling.
10:15 AM – Users Are People Too: Meagan Fisher
Humanizing user experiences is a big deal all over the web and especially challenging in my current gig (web design for insurance). Meagan’s talk feels close to home.
12:45 PM – You Don’t Have to Start with a Good Idea — You Just Have to Finish with One: Dan Stiles
Dan hails from the PNW, he’s an excellent illustrator, and he’s speaking at MAX. I’m there.
2:30 PM – Adventures in Experiential Design: Jessi Arrington
I am very, very excited about this talk. I once spent a summer driving boats around and around Disneyland’s Jungle Cruise. It goes without saying, it was a fun job that a lot of people would do for free (I did it for minimum wage), but the main benefit for me was being immersed in virtual realities designed and built for in-person experiences. Jessi designs these kinds of experiences for pop-up shops, conferences, and other themed environments.
4:15 PM – What the Future Holds for Video Creatives: Dave Werner
I’m waitlisted on Dave’s character animation labs, so this session will have to do! I love video and I am pumped to hear from Dave, someone who routinely churns out cool video content. Great way to end MAX and look to tomorrow.
PEMCO Insurance is currently experiencing a renaissance, bringing levels of service to its customers that they’ve never before seen. In my short tenure (4.5 years) at PEMCO, we’ve added online access to policies, amendments, payment plans, documents, the ability to go paperless, an any-device responsive website, iOS and Android apps, among other fast and efficient features that provide direct access to PEMCO and their products.
It’s all quite exciting on the surface, but there’s also a ton of moving parts under the hood. Internal applications that drive the business and feed data to various systems are being retooled to be the most effective they can be. These challenges arrive at my desk in the form of usability and interface design tasks.
As all of these internal apps do different things and serve multiple departments, their connection to PEMCO can get off-the-rails a bit. Brand styles and patterns start to look and behave completely different depending on where you work. PEMCO has recognized this issue and has moved to adopt not only the organization’s brand standards, but also to go further and agree on digital style standards to bring its many tools into familiar territory, allowing users to get working rather than wasting time getting accustomed to new user interfaces when they switch apps.
My team took to the task and produced a style guide that was very well received by PEMCO in a short period of time. The (soon to not be) secret to our success lies in these lessons learned:
– Keep your audience in mind at all times
Take shortcuts in your writing when you can assume your readers already understand a concept, but always keep asking yourself if your audience will comprehend and be comfortably guided by what you’re trying to communicate.
An example is PEMCO’s type sizes. We wanted to present the look and feel of various styles of type very quickly without being bogged down with explicitly outlining each pixel size and font weight (the H1 is 20px, the H2 is 16px, the H3 …). Relying on the audience’s knowledge (developers) to inspect the document for CSS specifics, this approach worked for both tech and non-tech inclined and we found our audience’s sweet spot for detail.
– Fonts and colors are great, but what your developers need are patterns.
Style guides of the past have been heavy on fonts, colors, and logo treatments. While still important, these things are a given necessity. The real meat and potatoes lies within components; common U.I. elements, how they’re used, and how they’re styled.
– Adopt a framework to fill in the gaps
You may not come up with every pattern in a style guide. A framework can not only jumpstart your guide, but it can also offer excellent ongoing, “further reading,” if new and exciting U.I. concepts arrive in the future. I’ve relied on Bootstrap several times for this purpose. There are many other frameworks to consider.
The task was to make an ugly dropdown of values look better. Immediately I went into mobile-first mode and thought of a slider, but sliders have always been a sticking point for accessible browsers. After poking around, I found a stackexchange thread that suggested linking a slider alongside an accessible input (text field or dropdown). I liked the approach; I wouldn’t be eliminating the dropdown in the name of accessibility, but if you’re down (haha) with using the slider, you won’t open the dropdown and see the long list of values hidden within. Also, the double-up on UI will benefit each other, with the dropdown displaying a more specific value of where you are on the slider’s spectrum. The approach is full of win.
I liked how RangeTouch worked in a majority of browsers and linked it to a regular dropdown. Here it is in action:
Diamond ellipses are one of my favorite shapes. It’s a strong take on a square that’s a throwback to the shape of tube TV’s.
I recently tried using a SVG clip path to turn a Google Maps image into a diamond ellipse. It worked for the latest browsers, but fell apart on IE11. For the sake of progressive enhancement, I was OK with the map going square on IE11.
However, this SVG clip path lived on a bootstrap page that contained a checkbox button group and adding the SVG code made the button group disappear! With no time to debug the thousands of lines of bootstrap.css and .js, I sought another solution. What I came up with allowed me to bypass a large edit of the styles and opened up IE11 to the diamond ellipse. Score!
I used a fun CSS border-radius trick to draw the horizontal sides of the ellipse, then I stacked another div of the same image on top of the first with its vertical sides defined for the ellipse.
The CSS property border-radius can bend a div’s side by throwing a slash into the specified radiuses, like so:
border-radius: 80px/30px; /* horizontal radius/vertical radius */
The whole thing comes together like so:
When using artboards in Photoshop, your canvas appears white. On a regular PSD, this would be a blank white layer, but on artboards it is a blank transparent slate. Nothing is inside the artboard group. When sharing your PSD via Adobe Extract, you get a big, empty, hard to see canvas.
There are times when displaying the transparent alpha in your comp makes sense, but I find that most of the time, sharing artboards with blocks of transparency looks poor and is hard to work with.
My best practice: place a shape layer as a background. It doesn’t have to be precise, it just needs to cover the entire artboard. Remembering this simple step produces clean comps for your developers to Extract!
More on Photoshop layer syncing from InVision.