What’s up Product Hacks fam. It’s your favorite product email of the week where we cheer on the builders! The product managers or entrepreneurs that are grinding daily to build great products that SELL! Let’s dive in!

‍

‍

Special Ben Statement

I’ve been at this every weekend for almost a month now collecting thoughts, notes, and trying to put together a banger newsletter that you all can enjoy. Have some thoughts on what could make this better? I’d love to hear them! Email me at: newsletter@theproducthacks.com

What are the best design and prototyping tools for Product Managers and Entrepreneurs?

Prototyping. Some of us love it like freshly cooked waffles on Saturday morning. Others dread it like the annual flu shot where I faint and collapse in the local Walgreens. Just me?!

‍

‍

Whatever your feelings are towards the subject matter, prototyping for UI/UX designers and developers is a critical part of the role of a product manager or an entrepreneur.

Why is it so important? It is the best way to convey your product ideas to the team without confusion. It eliminates cycles and cycles of design review and then potentially even more cycles of development. What happens when we eliminate cycles? We save MONEY! And more importantly time. It also gets us to real-world testing faster with our products.

I get a lot of questions about tools for prototyping so I composed a list of my top 5 and gave my reasons why I like them. There are a lot of prototyping tools out there. These are just my favorites but if I missed yours, message me on Twitter and tell me why you like it so much!

Figma — Figma is definitely the bee’s knees in the product and design world right now. Figma is a collaborative browser-based interface design tool, with additional offline features enabled by desktop applications for macOS and Windows. I love the collaborative nature of Figma. Developers and designers can easily jump in with the PM to work on prototypes or full-on designs.

Pros:

• Highly collaborative. Really easy to work with developers, designers, and astronauts with this tool.
• Easy to use. Unlike other options I have below like Sketch, XD and Photoshop, it is really easy to get up to speed and using Figma. No more watching 10 YouTube videos on how to copy an image over.

‍

‍

Cons:

• You don’t get the full range of customization and detail that you get with Photoshop or Adobe XD. Do you need that level of detail at the prototyping stage? Probably not!

Price: Free for your first 3 Figma files. To get unlimited Figma files, it’s $15 / month. Really cool though, Figma is free for students and educators. So get off Instagram in the back of the class and get on Figma! Here’s the full pricing table if you need it.

InVision — InVision use to be my goto prototyping tool. It has changed a lot over the years to be more like a collaboration tool incorporating partners like Figma into its workflow. That being said, InVision has still kept its robust wireframing tool and ability to upload designs, link them together (similar to Figma) and test them in desktop and mobile environments. I love pairing InVision and Photoshop together, taking rich mockups of a product and then linking the UX together in InVision to test.

Pros:

• Gives you the ability to do really detailed prototypes. Especially when you pair InVision with something like Sketch or Photoshop.
• Low cost. If tools like Figma or Photoshop are a stretch on the pocketbook, InVision may be a good fit for you.
• Awesome for documenting the workflow of the entire product.
• Great collaboration tools!

Cons:

• Not as robust of a prototyping tool anymore as it use to be. Get’s the job done and has some really awesome collaboration features but if you’re looking for raw prototyping, Figma definitely takes the cake.
• Not as easy to use in comparison to some other prototyping tools. Give yourself some time to learn.

Price: The free version is super similar to Figma in the sense that you get 3 free design files as an individual. To upgrade, it’s $5.00 / month for unlimited.

Photoshop — Love me some Photoshop! Full disclaimer I may be a bit biased in this write-up because I really do love Photoshop. It’s pretty much my go-to for any mockup, prototype, logo, etc. It’s an addiction. I’m getting help.

On a serious note, I love the level of detail I can get to with Photoshop. Down to the last pixel. The tool is so robust and there is almost nothing it can’t do. Do you need this powerful of a tool for early-stage prototypes? Probably not but it can still be an amazing tool to have in your gear box.

Pros:

• Tons of control. As detailed as you want to be.
• Can get to a final version of a design and many designers love working in Photoshop.
• Helpful for professional designers to take over after prototype approval.

Cons:

• Very challenging to learn how to use.
• Can be too robust of a tool for simple prototypes.

Price: Photoshop is definitely on the more expensive side. Like getting leather seats in your new ride kind of pricey compared to the other options on the table. It’s free for 7 days (no time pressure at all to learn this tool) and then it’s $20.99 per month. Still have that old .edu email laying around? Plug that in for some savings!

Adobe XD — I like to call this the HUB! It ties in everything Adobe together. It’s like Figma but with even another level of detail.

Pros:

• You can literally start with wireframes and then get all the way to passing code off to developers.
• Amazing level of detail. Pixel perfect. Exactly how you want it.
• Collaboration tools are really nice in this when working with teams.

Cons:

• Takes some serious CPUs to make all this run. I wouldn’t try doing this on your refurbished 2018 Mac book air that your grandmother got you for Christmas.
• The most expensive of all the options.

Pricing: If you’re going to do XD you’re going to want Photoshop and all the other tools that go with it so a Creative Cloud membership is kind of a must. You can do just XD for $9.99 a month but again, you’ll probably want all the apps that tie in with this for $54.99 a month.

Sketch — Do we like Sketch? I think so? In all honesty here Product Hacks fam, I haven’t used that much Sketch because I spend a lot of time in Adobe products so I’d love your take. Why I’m adding Sketch though, is because I do know lots of friends in the PM community that like using it.

Sketch is another all-in-one digital design platform used for creating static designs and prototypes, and for developer handoff (just like most of the tools we’re discussing above).

Pros:

• Sketch is web based, unlike Photoshop and XD which makes it a touch easier to get started.
• It’s lightweight but really robust, similar to Photoshop and XD. It gives you that extreme level of detail that you might be looking for.

Cons:

• It can be challenging to collaborate with other team members on the tool.
• The Sketch community can be kind of sketchy… It isn’t very large making it tough to find support.

Price: $9 per editor/month with the Standard plan (for individuals and teams)

Design Matters

It’s that time when I get to share my favorite design find of the week! Flat has been the name of the game for almost every UI/UX designer, but not for Kuba Horna. Check out this amazing UI he’s designed!

‍

‍

There’s almost this nostalgia you get when you look at Kuba’s designs. Remember the first version of the iPhone UI? In a way, it kind of reminds me of the modern version of that with the shadows and three-dimensional nature of the design.

‍

‍

Other things I love:

• This UI overemphasizes where there are clickable items and where there are not.
• I personally love loud colors that pop off the screen and have good contrast.
• This UI feels alive.

‍

‍

Will 3 dimensional like this make a comeback? Probably not for a long time but I think with the work of progressives like Kuba, we could see these designs make a serious comeback.

Check out the project on Behance!

Product Love

I took a look at the apps I’ve been using a lot on my phone recently and a new one stood out to me: Marriott Bonvoy. Now, I know that may sound silly. Why is Ben highlighting a legacy hotel chain as a product for inspiration?

‍

‍

Why I like this product:

1. I think it’s incredibly impressive that Marriott was able to bring so many hotel chains under the same umbrella in a really easy-to-use app.
2. Most travel booking apps and websites are pretty janky in my opinion and are UI stuffed like a pizza with too many toppings. Expedia is a good example. They’ve come a long way and have made their app somewhat easy to use but Marriott has really taken it to another level.
3. Marriott has seamlessly integrated its travel partners (like Hertz) to be native in the app. This creates a one-stop shop for travel and allows them to compete with other booking providers like Booking.com or Expedia.
4. The app is just super clean and well-designed. Hats off to the product team that was able to bring this all together. So much easier to build a new product from scratch than to integrate so many businesses together in one product.

‍

‍

This Edition Of Product Hacks Is Brought To You By:

Me! No cool sponsors this week for the dozens of readers. So you all get our hero, Mr. Elon Musk, because his products go to space and that’s where our logo is from.

‍

‍

About The Writer:

Ben Sampson is a product nerd and current co-founder at WeHero. He has built 4 companies in the past 10 years, and worked as a consultant for 4 years helping some of the largest companies in the world like Bloomberg, Dun & Bradstreet, etc. make some of the best products in company history.

Yes, I wrote this in 2nd person because it just sounds sooo much cooler! See you all on Twitter or LinkedIn.