06: An hour of modern product design.
We’ll look at four broad areas of product design: Process, psychology, motion, and typography. Granted, there are over 14,000 words waiting to be read, mulled over, and debated in the posts below. If you add in all the extra links and distractions, it’s nearly a novel’s worth of study. I urge you to take your time to read these, though. Authors spend hours, days, even weeks considering how to construct a story and share their wealth of information with the world. Don’t forget to say mahalo to these writers!
Process: All the secrets of product design
My good friend and previous colleague Brad Soroka just did something I never expected: he just gave away all the secrets, all the links, all the resources to what a modern product designer does all day. It’s a great article to bookmark and keep coming back to, I suggest digging into as many of the links as you can. Understanding how to create ‘job stories’ and whiteboard flows can become incredibly handy for designers when kicking off a project.
Psychological tricks: Icing on the cake
The most powerful statement that NYT’s Noam Schieber makes isn’t about the psychological or behavioural social experiments Uber is making to keep drivers under its thumb. It’s how they are transforming the workforce industry and showing us a glimpse of what the future will be like: “Using big data and algorithms to manage workers will not simply be a niche phenomenon. It may become one of the most common ways of managing the American labor force.” Psychological tricks, like the ludic loop, are just icing on the cake.
On a related note: Google’s LukeW wrote some thoughts based on a recent talk in London he heard about the psychology behind mobile behaviours.
“Habitual products create dopamine loops: we seek more than we’re satisfied, anticipating rewards creates more response than when actually getting the reward. External triggers kickoff loops.”
Motion: The ultimate manifesto
Bookmark this article. For years to come, it’ll be seen as a fantastic reference in why and how animation should be used to create more seamless experiences. It can be neatly summarised by the author: The 12 “UI Animation Principles occur temporally and support usability through continuity, narrative, relationship, and expectation.” Way to go Issara Willenskomer, you just got yourself quoted in every article and book about motion from this point onward. Now, while parallax was on your list as principle 10, I wonder what you think of scroll-hijacking?
Typography: The screen grotesque
What does San Francisco, Roboto, Segoe UI all have in common? They have all been created screen-first, legible at small type sizes, and can scale to many different languages. They are also fantastic evolutions and examples of the the modern humanist grotesque. While Stuart Frisby gets quite technical about how to use these system fonts for their product, I think it would have been more interesting to learn why Booking.com decided not to purchase a similar font like ‘Circular’ or licence the creation of their own font, like we did at Trade Me (I love our new font Story Sans!).
I’ve heard many arguments for and against this — some say type brings great brand value and recognition. Some say that custom fonts are just another item for the users to load and should, therefore, not be used. At Webstock this year, Etsy’s Lara Hogan talked about how they dropped their custom brand font on mobile for performance issues. I’m interested in learning more here—any comments?
Shooooots — that’s awesome.
I can’t help but notice there is a huge disparity in the market with end-to-end software tools. Tools like Craft, AbstractApp, and even the new Sketch file format are all fragments of the flow. That’s why am excited for NZ’s own Atomic. They just added a ton of new features and I spent about 2 hours giving it a whirl. It’s a mix of Sketch, Axure, Invision, Principle, and XD all baked into one handy, cloud-based platform.
Here’s the prototype I created and played with to teach myself. I set up variables, imported data, and wrote custom CSS (like border-radius and gradient). I’m super impressed. https://app.atomic.io/d/fJzepTPMSdtX
Don’t forget…
Atomic’s Product Design Weekly
Muzli’s Weekly Inspiration for Designers
Curated posts from Designer News Email Digest
Mahalo Design Digest is a way to give thanks to those in the wonderful, awe-inspiring world of design, UX, and digital-experiences! I (along with periodic guests) will curate links from around the web for you to be stoked on. If you want me to check out what you’ve been up to or an article that inspired you, send me a message! — Cody Iddings
