How to use web browsers and JavaScript to create product screenshots & mockups
There are constantly new products by fresh startups as well as big corporations coming to the market. Some of them took years to build while others have been built in a couple of weeks. In an environment where the only constant is change (e.g. in the tech industry) you may not be able to afford to take too long to enter the market. But great products can take years to build and can cost a lot of money and resources. Some companies can afford this but many can’t.
This brings us to the idea of prototyping and creating a MVP.
Why can Prototyping be helpful?
According to Wikipedia, a minimum viable product (MVP) is a version of a product with just enough features to satisfy early customers and provide feedback for future product development. Unlike a MVP, prototypes usually do not make it to the market, but they still get to be in the customer’s hands. Building a prototype helps you get a sneak-peek at how real people will interact with your product. The development team can gather the customers’ feedback and make changes to the prototype or just create a new one. With a prototype, you can attract investors and potential customers and later build a MVP based on it.
Now that you realize the benefits, you are probably interested how to create a prototype in the first place. In general, you should use tools you like to work with. If you don’t have UI development experience then you could use something like PowerPoint or Webflow. On the other hand, a CSS wizard may be able to create better and faster prototypes using web technologies than trying to do the same in PowerPoint.
It should be clear that a MVP is able to be used by people. But a prototype does not necessarily have to be a proper application or website yet. A PowerPoint presentation or a click dummy can be a good choice especially if you don’t have a lot of UI development experience. Still, even a PowerPoint presentation should not feel like a drag so we’d need to fill it with life.
Product images give interested users a better view how the final product based could look like. But where do you get good product screenshots from, especially if you are building something completely new?
Unsurprisingly, web browsers are not only good for viewing websites. Modern web browsers like Google Chrome or Mozilla Firefox can help us to create good prototypes of websites or applications. We can easily modify a website to look however we want which is useful when taking product screenshots. Let’s have a look at some common ways to create good prototypes with the help of browsers.
Take Node Screenshots in Browser Development Tools
An image says more than thousand words. Therefore, websites and applications use images to convey information in a way that visitors understand. Some browsers like Opera or Firefox allow you to create screenshots of websites. In addition, operating systems like Windows and MacOS support shortcuts to create screenshots as well. A common problem: you’re only interested in a part of a website or an image. It can be cumbersome to create the perfect screenshot.
Both Chrome (starting from version 86) and Firefox allow you to take screenshots of any DOM element.
Enable Text Editing in Websites
Sometimes, we create the general layout first before thinking about concrete details like what text to put in there. Finding the right wording is often tricky as there’s a lot of factors to consider. Some examples:
- Who is my audience? Shall I write more formally or informally?
- Should the text be short and concise or long and detailed?
Hence, we might want to test the same layout with different text to see how users react. All web browsers provide a property designMode which is disabled by default. Once enabled you can type new text and change or remove existing text. Of course, the changes will be gone when leaving the page. To enable this mode, you just need to open the development tools of your web browser and execute the following JavaScript command in the console:
document.designMode = "on";You can disable this behavior by either reloading the page or by executing the following command:
document.designMode = "off"; // this is the defaultEdit HTML & CSS directly in the Browser
Changing text on the fly is nice but sometimes we need more. Suppose you have a good looking chart but you don’t like the labels: they’re too small and the font color does not look good on a dark background. With the browser development tools we can easily fix this by using CSS.
Even better, we can change the HTML structure as well to get our desired layout. Don’t need the two bars in the middle? You can remove them completely. Do you want to see two charts instead of one? Easy — just copy the DOM element and paste it wherever you want.
Conclusion
Thanks for reading this post. There’s a lot to write about this topic but the gist is: if done correctly, prototyping can be a great way to create a good product.
Let’s do a quick recap. By prototyping, we iterate quickly and make adjustments in response to customer feedback while keeping the costs down. Web browsers have great functionality to create prototypes like changing texts, taking screenshots and manipulating existing content directly in the browser.
What are your experiences with creating prototypes and MVPs? Let me know in the comments. I am planning to write a follow-up post soon so stay tuned.
