Fluent Makeover: Photo Editor
Learn the why and the how behind applying Fluent Design with the Fluent Design team
Senior Design Lead Lynnette Reed and her team of designers, Ani Akopyan and Vladimir Nogan, focus on incorporating Fluent Design in third-party partner app experiences. They recently redesigned PhotoLab, a UWP sample app created by the Windows 10 documentation team, to demonstrate how to apply Fluent Design principles and elements.
“When looking for common examples of design patterns for Fluent, we often look at our internal first-party apps as a base (Microsoft Photos, Microsoft Edge, OneNote, etc.),” Lynnette explains. “We then consider the structure, patterns, and needs of our partners and look for how we can adapt and align the first-party app experiences to our third-party app partner experiences.”
With common design patterns for all app experiences, we’re able to create a cohesive ecosystem that feels natural, intuitive, and engaging — Microsoft’s Fluent Design System.
Here’s a look at the app’s complete makeover, and the team’s main takeaways about working with Fluent Design:
On controls
Vladimir: When we first saw the app, the biggest thing we needed to address were the controls, the building blocks of the Fluent Design System. A lot of the controls in the app aren’t in our library. We saw places where we could use existing controls to replace the custom code they were using. It’s easier for developers and users, who can understand what the controls do because they’re already in the Windows UX.
Lynnette: In some instances, creating custom controls can be great, but in others, it may not be the best for your end user or for development. Before creating new custom controls, see if there are already common controls within the Fluent toolkit that you can use throughout your experience. It might be best to align to the common controls that already exist.
For example, take the sliders:
Ani: It doesn’t make sense. It’s not about the maximum.
Lynnette: This is a great example of where you can align to Fluent common controls. Before, there was a mish mash of custom slider controls with image backgrounds and dashes, which is a style of its own. Instead, stick with using the Fluent common slider control, modify the slider’s line color, and maintain a solid line to keep it consistent, as we did.
On using Fluent elements purposefully
V: The panel is using acrylic because that’s where the eyes gravitate. Acrylic is for anything that you can interact with, like transient UI.
A: You shouldn’t use acrylic as a visual treatment just because it looks cool, but because it makes sense functionally. Light serves a purpose.
V: When looking at an app, consider where acrylic can make the experience richer. The same applies to other Fluent elements: where can depth show the hierarchy visually, and where can motion guide someone through the flow of navigation? If you can’t find a place to put certain elements in, don’t.
On keeping it intuitive
L: Ideally, you want to strip out extraneous design noise and focus on what’s most purposeful and appropriate. Be intentional with your design, and allow elements to take focus only as they need to. For a photo app, it’s obvious that images are the primary focus, and controls are secondary.
V: Looking at the image itself is enough information to navigate to it. You don’t need to know the name or size.
A: Don’t add anything that doesn’t serve a purpose. As long as it has a purpose…
L: …it becomes intuitive then. When you see a page, you should automatically understand the expected outcome of the experience.
On good design
L: Before applying Fluent elements to new or existing apps, think about the core design fundamentals. What kind of app you are trying to create or modify? How will it flow best? Who are your core users? What’s the best way to layout the user experience? Once you have the basics covered, you can consider how to apply color, depth and light properly. Ultimately, the fundamentals are key. If you don’t have a good foundation for your app, you may never achieve an ideal user experience, regardless of how many elements you put in it.
Thank you so much, Lynnette, Ani, and Vladimir!
To see the code behind the re-designed app, head over to the Photo Editor repo on GitHub.
To learn more about the Fluent Design System, check out our Fluent Design guidelines, join our LinkedIn Group, and Microsoft Design on Dribbble, Twitter, and Medium.
And don’t forget to check out #FluentFridays on Twitter!
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
