Smarter Patterns is an interaction pattern library that provides solutions for common AI challenges.
What are Smarter Patterns?
Born out of extensive research into how artificial intelligence is being used and understood today, it is an evolving resource that considers the form and function of the patterns as well as the ethical challenges AI poses.
Features
Transparency & Trust
Without a clear concept of what it actually is, AI can be confusing and scary to users. How can we help them understand what the AI is being used for, how it’s being leveraged in their applications, and why it should matter to them?
Autonomy & Control
Users don’t necessarily want to use AI all the time. How can we empower them to choose the amount of AI they interact with, allowing them to decide when to enjoy the benefits of hands-off automation and when to take manual control?
Fairness & Inclusiveness
How an application deals with users is just as important as how users deal with AI. Issues around dignity, respect, and how we value people deserve contemplation. How can we safeguard against harmful practices while building meaningful experiences?
We came across Namika Hamasaki’s work on her Dribbble portfolio while collecting inspiration from daily UI challenges. Designers are attracted to daily UI challenges because they provide a creative exercise without the constraints of client or management expectations. While the idea and practice of daily UI challenges aren’t new, they often focus on common UI elements like sign up forms or mobile apps. So when we discovered Namika’s daily pattern challenge, it stood out as unique. Her approach around creating patterns was unusual too. She uses atypical color palettes and geometric shapes to create patterns with a distinct look and feel. We reached out to learn more about Namika and her process of creating patterns in Figma. And, keep reading to watch a video that shows how Namika brings her patterns to life. Here is what she had to say, as well as a video of her work in action:
I love making patterns. So much so, that recently, I challenged myself to create a new pattern every day. While the definition of pattern is “a repeated decorative design,” none of my daily designs look the same. Because of that, people often ask me how I find inspiration, especially when I’m creating something new every day. But really, it’s not that difficult. I tell them to look around. There’s inspiration around every corner of life. If you keep your eyes open, you’ll soon notice unique details in food, architecture, furniture, nature, on your walk to work — inspiration is everywhere. Once you start picking up on those little details, it’s easy to translate them into whatever you’re working on, which for me, is patterns.
I come across so many ideas that I want to make sure I keep track of all of them. Whenever something catches my eye, whether it’s shapes or colors or composition, I take a photograph to reference later as I’m sitting down to design. This habit also ensures I’ve got a library of starting points so that I’m never facing the dreaded blank page.
This pattern challenge was a great excuse to try new color combinations I was interested in but hadn’t had the chance to use in other work. At work, I’m often restricted to brand color palettes, so for this challenge, I decided to get far outside of the box with my color choices. I’ll often look to photographs for ideas, and once I find an image that inspires me, I use this Figma image palette plugin to extract colors from my photos and generate a color palette.
Once my color palette is figured out, I move onto the next step in my process, which is to set up my grid. This is especially important when you’re working with patterns because you want to make sure your pattern repeats correctly and that you can organize your pattern elements easily. With Figma, I can quickly set up my preferred grid using Layout grid.
Now it’s time to have some fun! When I first started the daily pattern challenge, I was drawing my patterns by hand but switched to digital when I became interested in composing patterns using basic geometric shapes. By the end of my pattern designing process, some of the patterns look quite complicated, but they started out as simple shapes like circles, rectangles, and triangles that I strategically placed on my grid. Though I start with the basics, I play around with the shapes to see how different approaches yield different visual results.
For example, I might make a circle and then rotate it by 45 degrees to see how that feels.
Or maybe I’ll get a little more adventurous and play with rotating each semi-circle by a different angle. This is the point in my pattern designing when I get to play and see what feels right.
Here is another exploration of me shifting the circle, to see how that looks and feels.
I will also explore tweaking the color combinations of the pattern, seeing what new & interesting outcomes I might stumble upon along the way.
Once I settle on a pattern I’m happy with, I turn it into a component. Next is a super important step that you can’t forget — turn the clip content option off. Once that’s done, I copy the component and arrange them to fill the frame. Moving the elements within the master component is a great way to explore layouts and lets you quickly figure what you like best.
Duplicate this file for a peek into the entire process used to create Daily Pattern #028. You will get a better look at my exploration of placing my original copied component into my desired pattern.
Namika Hamasaki is a Brand & Product Designer based in San Francisco, currently working at All Turtles, a technology company that develops AI products. Her current focus is on creating and fostering brands through visual and interaction design. In her spare time, she likes playing video games, watching anime, and drinking green tea. Find her on Twitter, @haiji505.
