10 Essential Cheat Sheets For Practical Web Designers

Smart designers are smart about their time. Effective referencing leads to saved hours and constant information renewal. Image credit: Design+Code.

Good designers try to remember everything. Great designers have a broad understanding of the main principles and reference the rest. Think about it; it’s impossible to remember everything. New tools, techniques, standards and trends.

Smart designers are smart about their time. Effective referencing leads to saved hours and constant information renewal. That’s why I love using cheat sheets. It’s not about knowing everything. It’s about knowing where to look for help when you’re stuck.

Today, I’d like to share ten essential cheat sheets for practical web designers and developers. Whether you want to learn keyboard shortcuts or check if a certain browser supports one or the other technology, these cheat sheets will give you just that and more.

Sketch Keyboard Shortcuts and Tricks

Image credit: Design+Code.

Boost up your productivity while designing with over 80 keyboard shortcuts. Save a few seconds per action, which adds up as you perform them hundreds of times per day.

Responsive Web Design Cheat Sheet

Image credit: UXPin.

No need to search the web for the proper breakpoint dimensions every time you design for responsive. This simple graph with all the breakpoint dimensions visualized will solve all your problems.

The Ultimate Adobe Creative Cloud Keyboard Shortcuts Cheat Sheet

Image credit: makeawebsitehub.com

Adobe without a doubt is the undisputed conqueror in the creative industry. If you spend hours using Adobe’s software, learning these shortcuts will save you tons of time in the long run.

UX Project Checklist

Image credit: UX Project Checklist.

UX designer and researcher Andrea Soverini created the ultimate UX project checklist to help you nail every project you work on.

Flat UI Color Picker

Image credit: Vasilis Baimas.

Flat design continues its domination. Web designer and developer, Vasilis Baimas created this simple yet useful color picker for your projects.

Can I Use

Image credit: caniuse.com

Can I Use is a brilliant tool for web designers and developers. Essentially, it showcases compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.


Image credit: Cheetyr.

Cheetyr is a handy collection of cheat sheets and shortcuts to speed up the work of designers and developers.

Bootstrap 4 Cheat Sheet

Image credit: Alexander Rechsteiner.

Alexander Rechsteiner created a quick reference for Bootstrap. Design in the browser or create functional prototypes to speed up your development process.


Image credit: mediaatelier.com

CheatSheet is a super useful assistant helping you become more efficient using your Mac. It’s especially handy for those transitioning from Windows to the Mac.

Usability Checklist

Image credit: Userium.

Usability is a huge issue in today’s web design. Most companies don’t set aside a budget for usability testing and optimization that may lead to loss of customers and ultimately revenue. This simple checklist will help you ensure you’re not risking your success.

Do you use cheat sheets?

There are tons of cheat sheets out there. Do you use any in your web design and development process?

Originally published at forbes.com on June 29, 2016.

The Digital Age

Thoughts on tech, startups, internet and people.

Tomas Laurinavicius

Written by

Entrepreneur and lifestyle blogger from Lithuania helping people work independently and live better. 👉 Blog: tomaslau.com

The Digital Age

Thoughts on tech, startups, internet and people.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade