Looking for great UI and landing page design insparation
I'm currently looking for inspiration and ideas for interesting UI's. Ideally, web based SaaS products.
Just wondering what products stand out to you for their design/ UI? ...happy to see landing pages too.
I'm currently working on my own landing page, which I have tried to make as pretty as possible.
Feel free to have a look https://staging.wiseer.io
I took alot of inspiration from random pages linked on IH, toggl and stripe to name a few.
I'm on mobile right now but might be able to update the comment tomorrow with some more links if I think of some others.
Snygg tjänst! Hur länge har du jobbat på detta?
Tack! Från och till sedan Januari ungefär (har haft heltidsjobb hela tiden och ibland knappt jobbat alls under vissa månader), arbetade lite på den några månader innan dess men med helt annan inriktning. Börjar göra mig redo för att göra ett riktigt beta släpp! :)
Najs! Har du redan en lista på personer som signat upp på betan eller hur gjorde du där?
Yes jag har ett tag. Gjorde dock en tabbe. Drog igång betan, men märkte att folk ville ha användargränssnitt (inte bara API), så började jobba på det direkt. Så det har varit lite dött i typ 2 mån
Aah förstår. Hur många raggade du upp till betan? Och gjorde du det innan du började bygga?
Började med en liten presentations-sida och gjorde "reklam" för den här för andra devs. Fick kanske 14 addresser, så ingen höjdare.
Eftersom jag utvecklade tjänsten så hade jag inte riktigt tid att marknadsföra till rätt kanaler, men tänkt göra det nästa släpp :)
Spännande, lycka till!
Tack! Vad jobbar du på?
Jag är i tidigt skede av att bygga en tjänst som erbjuder företag att koppla in machine learning i deras tjänst för att ge dom insikt i alla aktiviteter för att kunna automatiskt se mönster / göra förutsägelser om framtiden. Inte så konkret nu jag vet, men jag är i undersökningsstadiet nu ;)
toggl and Stripe have got some awesome designers. Toggl kinda reminds me of one of my friends companies...
https://www.primotoys.com/
Best of luck with your project mate.
You are right, they do look similar :)
Thanks!
It looks really cool and I like your design. However, I'm not sure at what stage of development you are, but when I try to sign up, there is a typical "I have read and accept the terms of service and the privacy policy." checkbox with one drawback - the "terms of service" are nowhere to be found on the site :). At least I can't see it anywhere...
Yeah, sorry for that. I accidentally deployed a developer branch to prod, and since I have no visitors (outside when I link for reasons like this, which is not to gain users) I just left it as it is.
I am working on a full beta that is currently delayed by legal documents (hired a guy that couldn't deliver after a few days..). So sometime next week the site will go up and registration will work as it should!
Feel free to sign up for the product updates, I barely use that list so you wont be spammed. I would really like your impressions on the site once it's fully ready :)
EDIT: Actually though you were talking about the live site. The link I sent is the developer version (hence the subdomain staging), other than that everything I said still applies :D
https://www.land-book.com is my favourite source!
This has become my favourite too. I've spent too much time on this site now.
How about this one? Been hacking on it this weekend :)
https://progressionpack.com/
Very clean, with just enough unique style to separate yourself from a lot of other product sites. Nice! One copy note: "Stop costing yourself time and money" is a clunky line that I'm not sure flows very well. I'd rework that to something friendlier.
I agree with Peter. It's nice and clean design and the very subtle animations make it a little more engaging.
Best of luck with your launch.
Thanks all!
@PVan I removed that section in the end - the numbers in there were hard to get right (depends hugely on org size) so was easier not to use.
Very nice design, on trend with pastel colours and irregular background shapes.
I have a concept called the grammar of a landing page. An effective landing page does 4 things:
1.) Convey value
2.) Demonstrate social proof
3.) Call to Action
4.) Mitigate concerns.
While your design is strong, could you add some testimonials as social proof?
I understand you can't show the entire product, because it's what your selling. Yet masking it completely, mitigates against value demonstration. Can you find a middle ground, and show a small part of the product in the mock-ups - this is most effective type of value demonstration - value by demonstration. Indeed showing a mockup of a product is usually sufficient.
In your case, you have a complex product: could you include a video demo? This suits complex but useful products like this, i.e checkout tipe.io - a very useful product, where a video gives the best demonstration of the value which is hard to convey in mockups or screenshots alone.
Finally, your CTA does not pop out or demand attention. Can you increase it's contrast.
In terms of mitigating concerns, instead of a pre-order which is high commitment, why not take an email, and build a relationship and build demand for your project, just some ideas.
Did you design it yourself?
Thanks, loads of good advice in here.
The chicken and egg of social proof before launch is challenging- if it's not for the product but more for me personally does that help?
Re. Screenshots- I agree a video would be ideal. I'll think about how to put one together.
Re. Taking an email- I'd love to prove willingness to pay really. I might add an email option though for those people interested but not ready to go yet.
Yeah designed it myself.
This is lovely. I like how you mix messages and break up functional copy in the hero area.
Also love your .fyi site marketing around the problem.
Thanks! Got my first sale today - comments like yours and people putting money down is what makes all this worthwhile!
Additionally, on closer inspection, I see that a big part of your product is actually an Airtable base (?). I'm a big Airtable user, and am curious if you're seeing any particular challenges/concerns, eg. with offering customers a dashboard that isn't strictly your own software, any permissions issues etc (ie. will you be cloning a master base for each customer/how will you issue accounts to paying customers)? Thanks.
Yeah this is something I've been pondering.
As far as I see it, I have a few options:
a) Create a read-only link to my base and allow people to duplicate. Advantage: no work per sale for me. Disadvantage: nothing to stop them resharing, I'll lose sales. (TBH any info product carries this risk).
b) Ask people to create an account and add me as a user to one of their workspaces. I will then copy my base across and they can chuck me out. Advantages are it's much easier for them, kind of nice to have concierge service. Disadvantages: manual labour for every sale.
c) Download component parts as csv, provide a video alongside with instructions for setting up your base, zip it and send through plasso. Not tested how hard this is for the end user - I suspect it will lead to less usage and more headache for me post-purchase with support.
d) invest in building a proper login and db and abstracting away Airtable from the end user (my long term plan brought forwards). Disadvantages: costly and time intensive. Advantages: the only real way to scale properly. More tempted by this now as I've made sales and feel more validated in my direction. (Worth noting that I'm only semi-technical so would need help with this route)
I'd love any insight - possibly even 1:1, if you can spare the time?
How about nailing everything in a master base that only you can access.
Then, when you get a sale, you duplicate it and, from that, send emails to create user accounts that will give people access to it?
That way, there would be secure walls between customers' bases.
The main manual step seems to be the process of collecting email address/es of users and inviting them, I think?
Airtable has an API and a Zapier connection. The Zapier connection doesn't support addition/invite/creation of user accounts, and I'm not sure if the API does either. If it did, maybe your sign-up process/form could ping something to:
a) duplicate a base and
b) create a new Airtable user for a given email address.
Not actually sure whether a) exists either. The API seems to operate at the content level for a specific base, though I'm not certain.
I think some of your suggested options may seem complicated for a user. Going Airtable-free obviously the ultimate, but tricky. Would be great to think something is achievable with to approximate the workflow first.
Yeah I'm ok with some manual labour, especially at first. Also at $249 I need hundreds of sales, not hundreds of thousands, so I don't anticipate it ever being a massive hardship.
https://www.lapa.ninja/
The above is my favorite one for landing page inspiration. :)
Great resource. I sometimes use...
https://pttrns.com/
https://land-book.com/
lapa.ninja is a great addition to the list.
Thank you for your mention 🙌
try this: https://www.pages.xyz/
Great resources
I run a (paid) site that helps with this: https://pageflows.com
In terms of SaaS apps worth checking out: Slack, Airtable, Launchaco, Grammarly, and Shopify to name a few.
Cheers... I can see pageflows being a really useful resource here.
What stands out to you about the on-boarding from the products you've mentioned?
Here are a few resources for you to check out that I have been coming to consistently for the past months/years:
https://hyperpixel.io
https://verynicesites.com
https://onepagelove.com
And once you’ve finished design and build of your landing page, submit to https://roastmy.site to get feedback for yours 🙌
I think notion.so is pretty good in terms of UI design. It's a powerful application with a lot of permutations but it feels simple to use. The fact that they use system fonts and a mostly grayscale colour scheme tells you that their focus is really on the fundamental UX, not just being pretty. It's not perfect, but I think they've done a great job.
I feel like their team is exceptional. Notion is probably my favourite app of all time. Everything from their messaging to their concept has been spot on.
This design is kinda similar but they've added colour...
https://clarisights.com/
Man, I love the minimalism of this design. It works on so many levels.
Thank you for posting.
I often use https://hyperpixel.io/ for inspiration.
Function before form: think google.com or most google products. They aren't particularly good looking but very powerful tools.
People care more about the functionality than looks.
Having said that, here as some standout landing pages:
https://shutyourmouth.xyz
https://www.tribefive.me/
https://tipe.io/
https://javascriptweekly.com/
http://autopsy.io/
https://makerskitchen.xyz/
Notice a theme?
Some really interesting designs here.
I like the idea of thinking about Google's approach but I think it can be a double edged sword.
Much of their work has got lots of marketing content to convince you to play with their product before you hit the landing page so you know what you're getting. Also, they have a huge amount of trust.
As always, I guess you need to take your context into account. But I 100% agree - function before form. I kinda like @volkan's approach here. Simply get the content in there, then optimise it as you go along.
As an update, I re-aligned my landing page at zerotoherojs.com
And currently it’s
damn fast
and lickable
And I’m getting preeety good conversion out there.
Just wanted to share.
p.s.
There is a discussion about it down below, but back then I had limited time (I still do have limited time as an Indian Hacker) so the design was much much much plain vanilla.
The current design, is still lightweight, but it has some pig-lipsticking too ;)
Just wanted to share.
When the designer requested a few examples of what we want to look like, she recommended https://www.awwwards.com and abovementioned https://onepagelove.com.
I found Awwwards great; it contains thousands of great designs in different categories.
You can filter by industry/tag/technology.
Sharing mine because it works for me:
https://zerotoherojs.com/
It took just a couple of hours for me to create it: And maybe a few more hours to fine-tune it. So a day of work tops.
It’s plain (almost vanilla white),
simple,
loads damn fast,
and is getting the number of leads I want at the moment.
I am thinking of pig-lipstick the design a bit, but since it works, I'm reluctant to do so.
Not sure if it's great UI, though I can confidently say that it is not bad UI.
And works for me :)
Just wanted to share, in case someone might want to create a similar layout.
Great start. I think it's really easy to read and find the content you care about. Might be some room for working on your copy but I think your approach makes lots of sense to me, especially from an Indie Hacker with limited time/ resources perspective.