How do you design app demo images for your waitlist landing?
I am wondering how do you design demo images for your next not-yet-existing project when you want to validate an idea? Do you spend time trying to come up with some proper UI first?
I have some idea of a productivity tracker app, which I want to validate through a landing with some beta/dummy images. But I really struggle to draft a simple UI of the app.
I want to place such images because it feels that people tend to share their opinion and subscribe to updates more when they see some actual pictures. Tell me if I'm wrong.
I see a few possible options:
- hire a UX person and describe the idea in words
- spend a few days making napkin design and hire a designer to digitalize it
- run a landing page with generic low-fidelity mockups
- use stock images
What is your experience?
Trending on Indie Hackers
Mockups should be enough. Maybe use some premade components to make it look decent. Framer.com has a bunch and is free for personal projects. Instead of sharing just images, you could also link to the Framer.com prototype.
Thanks, will check those components
I am working on https://www.bucketscout.io. It will be a online tool to help DevOps and Sysadmins to track their cloud storage usage using visual tools and compare how usage changes over time.
That landing page was put up within few hours after receiving “brand blueprint” from https://yourenotadesigner.com. It costs 100 USD and I got everything I needed to get an idea out. This was the output for me: https://yourenotadesigner.com/projects/DGJpX9gqisVI2UC5QTNL
Hi Ahmed, thank you for sharing your experience. What was your input info for them? Did they design UI interface based just on the description you provided?
Yes, just the input form. Nothing else. In less than 72 hours I got the brand blueprint. It is not much, but for putting up a landing page it is great. I am already building the product, now I want to try to build audience.
That actually sounds really great, thank you!
There has already been a lot of good advice here.
Another option is to draw in detail only part of the interface. Show the rest without any details.
Or intentionally increase the most important parts of the UI. For example, as on the site https://amplitude.com
Right, I am thinking to show only one screen now, just to roughly explain what you can get from the app.
Hey Denis, it's also possible to have a landing page with no demo images, just text or video explaining the problem and your solution. That's what Hey did: https://web.archive.org/web/20200207101953/https://www.hey.com/
That said, I do think mockups and will be more effective at communicating your idea.
Good luck!
Such an interesting case, thanks. I see another benefit of this text-only approach is that users can say what they actually want to see in the app.
Yep! And you get it done sooner which means you can start the conversation with users sooner. 👍
This example of just using text is fantastic - who needs images these days? There's too many of them. Words speak louder, and when used right, leave a deeper impression on people. Instead of designer, maybe just run the copy by some people and get their feedback and keep iterating on the copy. Make sure you grab the visitors attention from the start. They need to keep reading. The design of the site, after all, will probably be designed in a "scroll" vertical format.
Any other examples of these @stevenkkim - I definitely want to check them out and use them as inspiration.
Hey is the only example I can think of off the top of my head. It's not very common, I think I've only seen this kind of pre-launch landing page a few times before - I don't recall what they were though.
If you're looking for copywriting ideas, the next best thing I think would be to look at good "about us" or "manifesto" pages that similarly explain the problem, why they exist, what their mission is, their unique value proposition, etc.
Hey Denis,
I highly recommend just creating some designs in Figma.
Before you build your app, it's a good idea to design the UI anyway and you can use these wireframes on your landing page.
Figma is completely free for independent users and I find that it's one of my most used tools these days.
Cheers!
Ashish
Thanks! Figma seems like the best choice for that so far.
Just adding on to this - you can also create prototypes by adding interactions and animations. I think this might be suitable for demo videos on your landing page as well.
Hi Denis! I would suggest running with your own mockups or wireframes (basically, no stock images). Since your idea is an application, I think people want to see exactly what you're offering or at least an idea of it.
For some pretty decent low-fidelity mockups, I would start with Balsamiq! It's a tool I used in design school to get across really quick ideas. From there, I think if you aren't confident with your design chops, hire a designer to digitalize it. I think with the low-fidelity mockups, you'll be able to get your idea across and the designer will be able to more accurately deliver what you're hoping for.
Good luck! Happy to give feedback on the wireframe or your future landing page :)
Thanks. I think you're right, I will try to define the main idea in a mockup and find someone to make it nice looking.
Hey Denis, we're making Stage , which is a design tool made for people without design experience. Unlike Figma, which requires you to have a design experience, if you want to create something decent. No need to hire a designer or learn pro-designing tools.
I think it'll be really useful in your case, you could create a high-fidelity prototype of your app using the pre-made library of components, then you could export it to PNG and put it on your website or put a link directly to the prototype.
Landing pages are very important. They set the tone of the product and helps to excite the users. As you put together your landing page, you will know the most important things to highlight. Maybe you don't need a full demo, maybe you just need to highlight that one core thing that delivers value.
Spend little time and effort on design. It always pays off.
Thank you, Deepa!
I think you don't always need to completely design some UI/UX Frames...Often it's just enough to inspire your users/to depict some snippets of a screen...Just try to visualize your idea. You could use any tool for that.
What is far more important is to choose the right text and features in order to communicate your real USPs, not reapeating something that is already out there.
I totally agree here! Choosing the right text is even more complicated, especially for a non-native speaker like I am. I want to come up with something simple, catchy, and well-describing. But at least I know what toolset to use :) (a joke about any text editor).