UX/UI Cheat Sheets to Save

Everyone needs a little help sometimes, even the pros. It’s hard to remember every single little detail. Every once in a while you end up searching for basics that you have momentarily forgotten. What a waste of time that can be. So, we searched for and collected some popular design cheat sheets to help you through your day and help you have the best UX strategies.

If these strategies are helpful, don’t forget to also check out these tips when improving your website’s UX design.

1. iOS 7 Design Cheat Sheet

The release of iOS 7 brought many changes to the interface and designers will need to adapt their visual language to fit the iOS’ new flat design. The grid systems, dimensions, typography, and iconography have all been updated by Apple. Ivo Mynttinen has been gracious enough to create a cheat sheet (updated) for developers and designers covering all the information you will need to know for the iOS 7 including:

    • Resolutions across all devices
    • Display information  across all devices
    • App icon dimensions (including information on changes for the rounded corner design and where to get a template as Apple has yet to release one for iOS7)
    • Details on changes in the user interface
    • A shortlist of other  resources you will find helpful while you are designing an app

This will save you time and effort now that you will not have to go and search for each little detail. Using this you won’t have to compile your own list. Besides, it’s one of the most extensive sheets on the topic and it’s wonderfully organized.

Resolution and Display Specifications

2. Android Design Cheat Sheet

Of course, we are also including a similar Android design cheat sheet for you. This is a gorgeous infographic designed by Meghan Dever, a Mobile Designer at Double Encore, Inc. The design guide for Android has this information available but it’s much easier to find and read it in this sweet cheat sheet.

It was created for internal use in the company but they thought it was such a useful time-saver that they wanted to share it with the whole community. This comes with:

    • Android text fields, seek bars, spinners, pickers, switches, and their use cases
    • 9-patch assets, with the addition of optical bounds layout capabilities
    • Android device sizes and their associated element sizes
    • The proper padding for UI elements
    • Action bar, contextual, and launcher icon specifics
    • Dp to px conversions

Android Design Cheat Sheet

3. Psychology of Color Infographic

Ok, so there are more than enough charts that cover color psychology but this is my favorite as it is much more extensive than the others. Instead of just covering the basics (red, yellow, blue, purple, green), it gives you a description of 50 different colors. It also not only covers positive emotions and ideas but also the negative ones that various colors can be associated with.

The Color Of Psychology

4. HTML5 Cheat Sheet

Update 9/9/16: This sheet is not available anymore. 

This is a great reference sheet in case you are just learning HTML5 or just happened to have a brain fart and forgot a tag. This is an extensive list and really gives you quite a bit of useful information besides the tags. It goes into extra detail regarding where the tags can be used and what browsers support what, even on devices. It comes with:

    • New tags that came out for HTML5
    • Existing tags from HTML4 that are still available for HTML5
    • Old tags that are obsolete in HTML5
    • Attributes and what is old and new for them too
    • A browser readiness chart

HTML5 Cheatsheet

5. Ninja UX Cheat Sheet

For the research stage of the UX process, you can take a look at this cool cheat sheet made by Hilary Little for her CodeFest keynote. They are a few best practices to keep in mind when testing users.

This is another great reminder of the basics for the pros and perfect for anyone new and in need of some good advice and tips. You can also check out her presentation from the keynote here. This will complement the cheat sheet quite well and give the first UX designer or entrepreneur some great direction.

Ninja UX Infographic

6. Cheat Sheet Web Form Design

Smashing Magazine has brought this beauty to us so we can use and share it. It is a descriptive cheat sheet for designing great forms. The designers of this crib sheet are well versed in designing and testing forms.

They decided to find the most common problems and describe how they fix them, then put it all into this great designer cheat sheet. They wanted to create something to make everyone’s forms better. It contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download. It comes with excellent advice, do’s and don’ts, and some layout examples you can use.

Form Design

7. jQuery Cheat Sheet

This is an awesome organized list of jQuery elements that you can use as a reference when you can’t remember something. It was made by Oscar Otero, a web designer and developer who knows how handy these things can be. It comes with:

  • Selectors
  • Attributes/CSS
  • Manipulation
  • Traversing
  • Events
  • Effects
  • Ajax
  • Core

Jquery

This particular design cheat sheet also comes with an awesome search feature. You can select the version of jQuery you are looking for and search for specific options. This is a great tool to have on hand as a quick easy reference.

8. UX Terminology

As a UX designer, you interact with many different people within an organization and not everyone knows the lingo. Wouldn’t it be great if you didn’t have to constantly explain yourself? This is for you to hand out to your colleagues to help them understand what you are talking about. It was brought to you by Bride Trozelli and it includes:

  • UX practice
  • UX roles
  • UX activities
  • User interface terms
  • UX deliverables

UX/UI Guidelines

9. JQuery Icons Cheat Sheet

This is an incredible quick list of icons you can make with jQuery. Many of you may know a bunch of these already but come on!

Not all of us can memorize every single one of them. This will come in handy for those of us that have a hard time recalling information off the top of our heads. It is also great for beginners.

This was brought to you by Pete Freitag from Foundeo Inc. Personally, this is my favorite of all the designer cheat sheets.

JQueryUI Icons Cheatsheet

10. WordPress Cheat Sheets

Reader Mike Wallagher from Startbloggingonline.com has shared these WordPress Cheat Sheets he developed. These are great for both beginners and advanced users since he offers both versions. Check them out! And if you need some technical assistance, get some WordPress help from WP Buffs!

WORDPRESS CHEAT SHEET
Source: http://startbloggingonline.com/advanced-wordpress-cheat-sheet/

Got any cool design cheat sheets you want to share? Let us know in the comments below.



Easter Templates are Hatching
Eggsplore our Festive Collection
Browse All Templates
12 CommentsClose Comments

12 Comments

  • Guest
    Posted at 4:21 pm 0Likes

    Font Awesome Cheat Sheet

  • Ivo Mynttinen
    Posted at 8:08 pm 0Likes

    Thanks for featuring my iOS design cheat sheet here. By the way, a massive update is incoming, for all the new specs of the new devices released some weeks ago.

    • Karla
      Posted at 3:21 pm 0Likes

      No problem! We thought it was super handy, you should let us know if you make a new one and we can update it here too. 🙂

  • hans horst
    Posted at 4:32 pm 0Likes

    nice work!

  • Steve Crawford
    Posted at 1:11 pm 0Likes

    I’m sorry, but having this many moving/scrolling items in one relatively small page is horrible. Have I woken up in 1997 this morning or something? For an article about UX it’s kind of ironic

    • Tanzir Rahman
      Posted at 8:01 pm 0Likes

      my thoughts exactly…

  • Nathan Jenks
    Posted at 1:40 pm 0Likes

    Oh, no. The persona checklist pulled up a 404 for me…

    • Posted at 8:47 pm 0Likes

      Thanks for notifying us! Modified it. Seems like the original poster took it down.

  • Gregory Dworak
    Posted at 10:42 am 0Likes

    Please disable the autoscroll in img – it is horribly distracting, can’t read a word! Not good UX in a UX how-to article.

  • Bev
    Posted at 2:04 am 0Likes

    Very nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog
    posts. In any case I’ll be subscribing to your feed and I
    hope you write again very soon!

  • Larryduh
    Posted at 6:14 am 0Likes

    Thank you, useful material

  • Jamesjer
    Posted at 5:28 pm 0Likes

    You are so cool! I don’t suppose I’ve read something like this before. So great to find someone with a few unique thoughts on this issue.

Leave a comment

Scroll Up