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
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 “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.”
Polypane “Improve your web dev workflow. All the tools you need to build responsive, accessible and performant sites five times faster.”
Polypane 3.3 is out! 🎉
Overlay columns, grids & guides, detect and fix horizontal overflow-causing elements, new overlays, improved UI and faster page loads. Over 50 new features make this a release we’re very proud of. 🤩
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.
The latest Apple iPad Pro models, paired with Apple Pencil and Magic Keyboard, have helped move iPad OS toward being a viable standalone creative platform for designers and creative people on the go.
Here’s a roundup of iPad apps for Design (User Experience, User Interface, Graphic Layout) and Illustration.
Sometimes the analog approach is a quicker and easier way to achieve a particular design thinking task.
A classic example is the appropriately stereotypical use of sticky notes by User Experience designers to facilitate various design thinking workshop exercises such as card sorting and other ideation models. The ability to quickly write-out and rearrange notes keeps the ideas flowing.
After your effort has wrapped up, there’s often a desire to capture the analog results in a digital format. Transforming analog work to a digital copy allows a team to move toward the next phase of sharing or synthesis.
Here are some useful apps that can help quickly capture and convert photos of your hand written “Post-it®” sticky notes to editable text.
The Post-it® App
From the brand you know and love. “The Post-it® App brings the simplicity of the Post-it® Note to your Mac, iPhone and iPad. Whether you use Post-it® Notes for collaboration or for personal note taking, the Post-it® App helps you keep that momentum going.
Simply capture analog notes from a photo, or create new notes right on your device for those important reminders. Arrange, refine and organize notes and ideas on your board anyway you see fit. Then share your organized board with friends and co-workers, or export to your favorite applications and cloud services—including Trello, PowerPoint, Excel, PDF, Dropbox, iCloud and plenty more.”
Brill
Brill is an app that promises to help you digitize faster and work smarter “take photos of multiple handwritten sticky notes and instantly convert them to digital text in 100+ languages. Up to 200x faster than typing.”
“Save time when capturing your handwritten notes. Share to email, Slack, Jira, Trello and more!” With auto-detection and bulk uploading, Brill can “Take photos of multiple handwritten sticky notes and instantly convert them to digital text in 100+ languages. Up to 200x faster than typing.”
Miro
Miro is your team’s centralized platform for collaborating on user story and customer journey maps, workflows, and more.
One feature is a “Stickies Capture tool allows you to convert real stickies to fully editable Miro sticky notes. Share them and collaborate in real-time, turn them into Jira tasks or make a part of digital diagrams, templates, and more.”
Evernote
Evernote lets you “Take notes anywhere. Find information faster. Share ideas with anyone. Meeting notes, web pages, projects, to-do lists”
“The Evernote camera is specially designed to enhance and transform your Post-it® Notes into beautiful, digital replicas of all your notes.”
Stock Up on The Real Thing!
Post-it® Teamwork Tools are the actual Post-it notes, large notepads, and other physical supplies that can help you facilitate your UX and Design workshop sessions.
I’ve been intrigued by the potential endgame of a single environment that could satisfy the needs and modes of operation for both visual UI designers and developers. Convergence of tools has been a theme of my “Looking Ahead” new year blog entries for 2017 and 2018.
Typical UI Design tools still offer an excellent working model for quickly manifesting design ideas at any level of fidelity. Many of us know of situations where a well-executed mockup that took 30 minutes to render in a design tool (drawing pictures of screens) might get a dev estimate of many hours or days to execute (QA’d production code).
As long as that dynamic exists, many designers will continue to prefer WYSIWYG drawing tool interfaces over working directly in code – especially when they are early in the ideation process.
Popular tools like Figma, Sketch and AdobeXD continue to make moves toward exporting out to React and potentially other libraries. However, as of now, these are one-way, and the real deal will be bi-directional or zero-conversion options.
Here’s a roundup of new tools looking to shorten or even eliminate the distance between drawings of screens and production-ready code (in alphabetical order).
Alva
Alva – “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.”
Interplay – Fast prototyping that combines the power of design systems, production code components and live collaboration.”
Interplay announces early sign up: “Create delightful, responsive experiences. Fast prototyping that combines the power of design systems, production code components and live collaboration.” (React, Angular and Vue) https://t.co/5k4LExgxuJ via @interplayapppic.twitter.com/v0TEW5Rz27
Iterative.ly – “Iterate on top of your live app using your design system. Launch an experiment in under 10 minutes. Continuously improve your product.”
