Cover image
Cover image

Icons are just the best. I love them almost as much as I love buttons. But, one of the problems with icons is that we don’t really know how to speak about them. And this is especially hard for people who have little graphic design experience.

So, my focus for this cheat sheet will help give us all a common understanding of the different types, categories and styles of icons. Grouping icons is not an exact science, but this is my interpretation/suggestion on how best to do it.

In this cheat sheet we will cover:

Categorising icons:

  1. Defining icon categories

You like? You love? You favorite? You five stars? Well, whatever your love language is, let’s explore them together.

In this cheat sheet we will cover:

  1. Types of patterns
  2. Like
  3. Save
  4. Favorite
  5. Rate
  6. Views & listens
  7. Closing thoughts
  8. Further reading

Types of patterns

There are five ‘main’ types of patterns to show appreciation and they are:

Liking: Used for non-referenceable appreciation showing.

Favorite: To earmark content, to show its importance, or to reference easier.

Save: To bookmark content that isn’t yours to reference later.

Rate: To give users the opportunity to say they dislike something as well as like it.

Views: To track…

Cover
Cover

If you are designing a product with a social element, chances are — you’re going to need a notification center. So how do you go about creating this? That’s what we will be exploring in this cheat sheet.

In this cheat sheet we will cover:

  1. What is an in-app notification center?
  2. Types of notification centers
  3. Notification views
  4. Notification icon and badge
  5. Notification building blocks
  6. Notification center
  7. Follow up notifications
  8. Writing tone and template
  9. Notification settings
  10. Handing copy over to development
  11. Creating compulsive behavior
  12. Closing thoughts
  13. Further reading

1. What is an in-app notification center?

You will mostly deal with two types of notification centers, a) OS notification…

Cover
Cover

When you have a lot of content, you have to rely on one of these three patterns to load it. So, which is best? What will your users like? What do most platforms use? These are the questions we will explore today.

Before you start, I would recommend checking out my other two related cheat sheets, one on searching and browsing and the other on grids and lists. While these aren’t critical to understanding the three pattern types, they will give you some background and context.

In this cheat sheet we will cover:

1. Introduction

2. Pagination
2.1. Fact-ish sheet
2.2. How many items per page
2.3. Component: Navigation
2.4. Component…

Cover image
Cover image

Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, catalogs and newsfeeds. Making this choice will determine how your users interact with your content and what they will engage with.

In this cheat sheet we will cover the following:

1. Introduction

  1. The difference between grids and lists
  2. What mode your user is in and what is most important to them
  3. Working with images
  4. Cognitive load

2. Grid view

  1. What a grid looks like
  2. Standard grid
  3. Masonry grid
  4. Justified grid
  5. Best practices for grids

3. List…

Cover image
Cover image

Most of my regular readers know me as having an interest in UI. But what they don’t know is that I also have a special love for education. I have been in eLearning for almost two years, and while my understanding of lesson plans, content hierarchy, and content structure is limited (I am lucky enough to work with an awesome learning design & content team), I am interested in the way that people learn and how to improve their experience.

My overall opinion is that people learn in different ways. There is no perfect school, course, educator, etc. for everyone…

Cover image
Cover image

When designing search results and interest sites, you have to keep in mind what ‘mode’ your user is in. Are they in ‘searching mode’ or ‘browsing mode’? This will help you determine how to design your platform to best support your user’s journey.

A note on this cheat sheet: I call myself a UI designer, not a UX designer, just because I have limited experience in the field and my passion is focused more on ‘making pretty (usable) pictures’. …

Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and checkboxes) side by side for easier comparison — while also comparing them to a few others.

In this cheat sheet we will cover the following:

  1. What selectors are
  2. Anatomy of checkboxes and radio buttons
  3. What is the difference between radio buttons and checkboxes
  4. Common styles of selectors
  5. States
  6. Rules for label text
  7. When you should use them
  8. Accessibility checklist
  9. Closing thoughts

1. What selectors are

A selector…

Dropdowns get a lot of flak from the UI world – and if we are honest, it’s not without reason. Done badly, they become cumbersome, overwhelming, and ugly. But that’s not what this cheat sheet is about. Here we will talk about what to do when you have to use them.

I also want to clarify that there are two main types of dropdowns: those used for navigation and those used in forms. For this cheat sheet’s purpose, we will just be looking at the form variant.

In this cheat sheet, we will go over the following:

  1. Anatomy
  2. Dropdown types…

Apart from buttons, text fields are probably one of the most used user inputs. When you sign in to Friendface, or order a Nicholas Cage pillow online, or send your banking details to your new online pen-pal, chances are, you will use a text field.

In later cheat sheets, we will look at pre-determined text fields (aka dropdowns) and how to style forms, but for now, we will be looking at ye old humble text fields and how we should style them.

So what’s in this cheat sheet:

  1. Text field anatomy
  2. Text field structure
  3. Common text field styles
  4. Icons
  5. Text…

Tess Gadd

UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store