2. Observe and deconstruct apps and websites you love

2. Observe and deconstruct apps and websites you love

My personal design collection of screenshots and recordings from apps and websites I love
My personal design collection of screenshots and recordings from apps and websites I love

To be honest this is 50% of how I learned to design. The rest 50% was practice and coaching from fellow designers.

The idea here is simple. All the well-designed apps and websites that are out there, can be used as learn-by-example tutorials. If you start observing and analyze them, you will start learning from them.

So don't just use them to get your job done, treat them as a source of knowledge and try to de-construct them and understand what makes them so nice to use.

Some examples

Are you building an e-commerce website?

Then check out how Apple presents the iPhone in their website. The use very high-quality animated renders to emphasize on the beauty of product, they have playful bold copy, animations to guide your attention, and many more.

Also you can check how the checkout flow works in the websites built with Shopify. This flow is already optimized and battle-tested to have great UX and high-convertion rate since it's used from thousands of websites and Shopify doesn't allow you to tweak it.

Are you building a SaaS product and thinking how to display a list of data?

Find an app/website that you love and see how they do it. My favourite examples are Github repositories and the Shopify admin panel.

Are you building a learning platform and designing the screen where people can buy a course?

Check out how Udemy or Egghead do it. Observe and understand what kind of information they show to users and try to find the why behind it.

Am I stealing their design?

No. You are not stealing anybody's designs. Instead you learn and adopt their best practices. Many products out there have been designed and tested by teams of multi-year experienced designers who spent years iterating on them.

Using these as source of inspiration and using what works for your product is not stealing in any case. That's what we all do with coding as well. A good code architecture is meant to be shared and used by as many engineers as possible. Same goes with the design.

Create your own personal design collection

Great design is subjective. What's great for me doesn't mean is great for you too. For example, I love the style and approach of iOS but you may hate it and love Android instead.

Both of them are great in terms of design and usability. There is no good or bad.

That's why it's important to build your own design collection instead of only trying to find pre-made collections online like this one.

This way you can have a point of reference for good design and use it as a starter point when you create something new. In your collection you can save UI interactions, landing pages, great marketing headlines, UI elements like buttons, navigation components and so on. There is no limit.

This is something that I've been doing for the last 5 years and has been really helpful. I update my collection weekly and it gives me lots of confidence and speed when I design new things.

Tools to use:

  • The truth is that there is only one tool that is built for this exact use-case. It's made by me and Scotty and is called pandasnap.io. The reason we decided to built Pandasnap was because there was no tool to use and we wanted to solve our own problems. Pandasnap is consisted of a browser extension that allows you to screenshot and record your screen, and a web dashboard where you can access and search all of your screenshots and recordings. It's currently in beta and any feedback is much appreciated it! Check it out here
  • Before we start pandasnap I experimented with the following tools but all of them at some point didn't work for me. They didn't support video recording and adding items into my collection was always taking too much time. Pinterest, Milanote, Eagle app