UIDW 21: Colors, Alignments, and Previews
Welcome!
Hello and welcome back to another issue of UI Designer Weekly!
I want to start by apologizing for the inconsistency of this newsletter so far. If you look back at our first 20 issues, you will find that there have been big chunks of time where the newsletter went missing and there weren't any new issues. This is my fault and has been a mix of thinking I could do once-a-week and simply not managing my time and effort well.
I really do look back on the first 20 issues with immense pride and I am always thinking about this newsletter—it's exactly the kind of small, collected design thoughts that I wanted to see available for myself. And, no matter how subtle, each detail or idea is one that I enjoy writing down and sharing with you so that you can mix the ideas into your own work.
So, going forward, there are two updates on UI Designer Weekly:
- It's back and on the same schedule after this issue: every Friday.
- I'm going to be evaluating whether this schedule is too often. If I need to go down to biweekly or monthly, I will let you know ahead of time in an issue before the schedule change.
If you wanted to help me out and support this newsletter, consider replying to this email with your thoughts on any of the following questions:
- Where else would you like to see the content of these issues? (e.g. shared as tweets, blog posts, TikToks, YouTube videos, etc)
- What's your favorite thing that you get from this newsletter?
I hope you're off to a great start in 2022 and are feeling ready for the new ideas and worlds of design that we will surely explore this year with the updates coming from Apple.
Happy to have you here!
UI Designer Weekly
Elements That Color Together Stay Together
A beautiful, compact stack of elements about an upcoming Apple event. Elements you can interact with all colored blue. This is a perhaps a great example of how you can group together elements in a design that have the same possibilities. "Add to your calendar" and the email icon can both be tapped and so they share the same color. This design might have worked if they were different colors, but making them both blue makes it easier to apply what we learn about one element to the other elements, all with a quick glance.
Gravity
Files on iOS 15 presents pictures within a folder in an airy and inviting grid. You can see here that two alignment styles are used: bottom alignment for the thumbnails and top baseline alignment for the names. With bottom-aligned thumbnails, each picture feels like a work of art that's real and sitting on a shelf. Almost like gravity brought each thumbnail down. Text, on the other hand, keeps the top baseline alignment ("baseline" here refers to the term baseline used in typography) so that each filename starts at the same height, no matter how many lines it needs. This makes it easier to scan filenames while looking from one side of the screen to the other. This is a great example of how you can use alignment styles in your designs to emphasize parts of your content and make collections easier to browse.
What You See Is What You Are Looking For
Sharing to Instagram presents a charming design with miniature screens that resemble and preview each choice. These previews feel light and useful, especially if you are already imagining how you want your story or post to look. This makes the long distance to travel from Share Sheet to Instagram feel like a connection that is intelligent, well-made, and reliable. It's also appropriately visual for an app that is itself so built on visuals. Perhaps, even, this helps remind of you of all the different ways you can share an image on Instagram.
A Harmony of Light Text and Color
Another example of light text looking amazing over a colorful image. There is something about this pairing that feels like it wouldn't work on paper, but in reality, truly helps draw you in and see both the message and the imagery clearly. If there is a part of your design that you want to make with this bold, attention-grabbing feeling, try starting with a colorful gradient or an image that lets light text stay readable.