Physical & Digital Product Mockup Tools

Physical & Digital Product Mockup Tools

Updated April 29, 2021. See this twitter thread for details.

Not long ago, it was somewhat challenging to create simulated renderings of product mockups.

For example, visualizing what a cool new app would look like on an iPhone 3G or what your branding campaign might look like across mugs, boxes, apparel and more. Eventually, things got easier thanks to Adobe Photoshop (PSD) templates for static images and other video solutions.

Well, such design tasks have gotten even simpler thanks to a growing batch of apps that streamline workflows and offer powerful new layout features. This roundup of relatively new tools now makes the task of creating mockups for software and physical merchandise ridiculously easy.

Here are some notable characteristics of these modern solutions

  • Many are web apps
  • They include a library of different product mockups
  • There’s a variety of digital devices alongside packaging or clothing imagery
  • Some are for still images, while others offer motion
  • Some offer easy sharing or even team collaboration features

Let me know if I missed any apps that belong on this list.

Illustrations: Smile by AomAm, t-shirt by Kmg Design, application by Three Six Five, Package by Eucalyp, and Laptop by Visual Glow from the Noun Project

The Dogmatics Back Catalogue Artwork

The Dogmatics Back Catalogue Artwork

Over the last decade or so, I’ve had the chance to work with the band The Dogmatics on different illustration and design projects.

These have included things like show posters, “merch” graphics (t-shirts, clothing, stickers, pins, etc.), and album artwork.

Here’s a cool picture of Dicky Barrett, lead vocalist of The Mighty Mighty BossToneS & Jimmy Kimmel Live! announcer, wearing a “Thayer St.” t-shirt from 2019.

The Dogmatics Merchandise Graphics

To celebrate New Year’s Eve 2020, The Dogmatics band re-released a compilation that includes 21 of their classic songs, on Rum Bar Records. The cover includes a guitar pick illustration that I had originally created for merchandise use.

Rumor has it that the band hopes to record some more new music in 2021 to follow up on their 2019 EP “She’s the One“. In the meantime, give their classic 80’s Boston garage rock tracks a listen.

The Dogmatics streaming music

Chatbot & Voice Interface Tools Roundup

Chatbot & Voice Interface Tools Roundup

Updated January 2, 2021. See this twitter thread for details.

Love them or not – chatbots, virtual assistants and other Conversational Interfaces (CUIs) are out there. Some are finding traction where use cases emerge that can unlock their potential.

Here’s a roundup of tools that cover everything from simple prototypes, to #nocode implementations, to development platforms for rolling out sophisticated and secure Enterprise-grade CUIs for both voice and chat.

Illustration: chat bot by Souvik Bhattacharjee from the Noun Project

Band Logo Reboot and CD Label Design for The Lemon Drop Gang

Band Logo Reboot and CD Label Design for The Lemon Drop Gang

I collaborated with The Lemon Drop Gang on some of the design assets related to their recent full album and single releases on Rum Bar Records.

I redesigned their band logo based on some past concepts, did some hand lettering for their single release “Georgie”, and designed the CD Label artwork for the full release to look like a vintage paper label inspired by historical vinyl releases from Atlantic and others.

The Lemon Drop Gang CD Label

Listen to their tracks above, or grab their full album from Rum Bar Records.

Web Browsers for Responsive Front-End Development & Testing

Web Browsers for Responsive Front-End Development & Testing

Updated January 14, 2021. See this twitter thread for details.

Several Web Browser apps want to make it easier for people & teams to test and develop Responsive Websites and Web applications iteratively.

These apps are different from services that offer static screen captures of web pages across various popular browser versions and operating systems. Such browser snapshot services have been around for a while and are certainly a helpful tool – especially when trying to do QA for legacy browsers that you plan to support.

In contrast, these specialized Web Browser DevTools focus on allowing Front-end devs to see a realtime synchronized view of responsive web content scrolling within multiple viewport ‘panes’ simultaneously.

This approach enables a website builder to review and compare the same design across various screen dimensions. Scanning multiple renderings all at once can help a developer iteratively fine-tune their layout to perform well on different device sizes.

While this multi-view in a single app approach may never truly replicate testing on the native target devices, such a browser can help you improve your coded results much quicker than a device lab alone.

Here’s a roundup of these unique web content viewing solutions.

Blisk

Blisk is the first developer-oriented browser. It provides businesses with a development workspace for the teams and freelancers to develop and test modern web applications twice faster.”

Emmet Re:view

Emmet Re:view “A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.”

LT Browser by LambdaTest

LT Browser “Perform free automated and live interactive cross browser testing on 2000+ real browsers and real devices online.”

Polypane

Polypane “Improve your web dev workflow. All the tools you need to build responsive, accessible and performant sites five times faster.”

Responsively App

Responsively App “A dev-tool that helps with faster responsive web apps development. A must-have tool for all web developers. Free and Open Source!”

Sizzy

Sizzy “The browser for developers. Stop wasting time and speed up your development workflow.”

Here’s a copy of this list in an Airtable database that you can bookmark, follow or copy. If I missed any, please let me know or reply to this Twitter thread.