A weekly roundup of UX nuggets to stay up to date in the design industry. Want updates? Sign up for the UX newsletter here.
[ARTICLE HIGHLIGHTS]
UI Copy: Sign In vs Log In
“Button names should be verbs, while referencing the login experience should be a noun.”
If you’re looking to take your designs to the next level, don’t sleep on microcopy. Many designers seesaw between using lorem ipsum and too much detail in wireframes.
This article has a few great microcopy tips that can inform your future design decisions.
- Using Create Account implies an action to create an account that users can later return to and customize
- Use Sign In / Sign Up / Log In with a purpose and use the matching Sign Out / Log Out to juxtapose the action and minimize confusion
It’s important to design with concise, informative, and thoughtful language. Why? Because clear labels and information hierarchy inform how users will interact with your product.
[DESIGN TOOL]
Empty States
Browse a library full of curated empty states to inspire your next mobile or desktop designs with Empty States.
[DESIGN PODCAST]
When Everybody’s Watching
13 Letters is an accessibility podcast hosted by Will Butler from Be My Eyes and Cordelia McGee-Tubb from Salesforce. In this episode, they chat with Senior Outreach Manager for Accessibility, Petr Kucheryavy, to learn more about how he got into accessibility and what Spectrum is doing differently.
Knowing that Spectrum is a large internet, cable, and phone service company, it’s pretty amazing to see that they have a whole team dedicated to bettering the experience for their users. Check out their accessibility page to see some of the resources they provide online.
[ARTICLE HIGHLIGHTS]
Essential CSS concepts every designer should know
As a designer whose partner is a developer, I frequently hear his complaints where he was given a wireframe and expected to do some pixel-perfect magic to make an object appear a certain way. Here are five CSS concepts that help know how your design gets implemented:
- Parents and children
- Margin (personal space)
- Padding (fur)
- Flexbox (distribution)
- Relative vs. absolute
Note: UXB’s take on Should UX designers learn how to code? “only if you want to.” However, there is a difference between knowing how to code and code awareness. Of the list of CSS concepts, I’d say the easiest to remember are padding and margins because you should already be considering that consistency in your design. So start there and pick up some of the terminologies so you can explain how you’d like your design to look when it’s live.
[SOMETHING FUN]
”Read more books”
[UX QUOTE]
“A user interface is like a joke. If you have to explain it, it’s not that good.”
- Martin LeBlanc, CEO of Iconfinder
[WATCH THIS]
Love at First Sight in Eyetracking
Do you believe in love at first sight? I didn’t until I watched this video and realized how gullible I was to believe that the first results on a page yielded the complete answers I was looking for. Oftentimes, we do a “quick” Google search to look for information or affirmation. Our eyes will stop among the first results if we encounter what we’re looking for. How can we use this information to our advantage as UX designers?
[BOOK RECO]
No Filter: The Inside Story of Instagram
This is a behind-the-scenes look at comments, filters, algorithms, influencers, hashtags, stories, and the people who created it all — Instagram. Not only that, but readers also get to learn some of the inner workings of Facebook as well since Instagram was acquired by Facebook in 2012.
This isn’t your typical UX book recommendation but the interviews in the book convey the stories and thought processes in one of the most successful social media apps.
[DESIGN TOOL]
Kactus
A Mac-exclusive tool that helps you track your design through the similar experiences of using Git but with a more pleasant UI.
[DESIGN CASE STUDY SPOTLIGHT]
Header
Designer: Brian Morris
Case Study: Global header for mobile and desktop
This project is a redesign of the global header/user controls. Some of the main features that were to go in this header are the logo, search bar, user profile, notifications, and hamburger menu.
Why this case study is awesome:
- Side-by-side visuals — At the top of the case study, there is an image juxtaposition that compares the before and after design. Later, there are three mobile header comparisons — existing, interim, and final. This is awesome for visual readers who like to compare the designs.
- Collaboration — Because this is a real project, other teams are involved in the process. Seeing that there was communication with developers, project managers, and other users informs readers of the decision-making process with others while staying close to the redesign goals.
This case study concisely communicated the project’s desired outcome and how the designer got there. There are lots of great visual representations that support the design process and each visual is paired with a caption to explain what you’re looking at. If you’re someone looking to add projects to your portfolio, this is an approach to adding/redesigning a feature to an existing product.
[UXB TOP RECOMMENDATIONS: COURSES & RESOURCES]
HTML, CSS, JavaScript for Beginners: Modern Web Design Course
Are you looking to become a full-stack designer who codes, or can at least translate designs to HTML and CSS? This top-selling Udemy course will teach you how to create websites from scratch, from the basics of styling with CSS to creating interactive elements with Javascript.
