Which one is easier and simpler to read?
Does group by "what is included" make a big difference?
41 Replies
it's better, but still very text heavy. I think you could improve it even further in another iteration.
1. I would consider axxing the bright green text, and the bright blue button colors
maybe use the orange again in both spots, or just a shade of blue that matches the bg color a bit better
2. If you have a list of options and you are comparing them, it makes sense to show what is 'missing', but when you are presenting products on a card, the card is saying 'pay this much, get this'
so I would really think about whether you actually need all the extra burden of the text that tells customers all the stuff they don't get
that's why on cards, you usually see something like 'all the options from the previous package + these additional features'
i find the blue text a bit too thin
and the button has very low contrast
the "updated about x time ago" is absolutely useless for a user
but the green is pretty
this is actually true, and the cards reduce in size and the user has less burden reading everything
Thanks for the valuable feedback @ghostmonkey @ἔρως, I updated based on your feedback, I think it is still challenging to make it perfect from all perspectives.
its not about making it perfect
it's about making it good and accessible with as little work as possible
for example, the tick mark on your nee version is absolutely invisible, but it doesnt matter
the circle is full with a bright light color
even someone that can only see in monochrome will be able to tell what's "checked"
however, your blue button is unacceptable
it's white on bright light blue
have you considered darkening the button?
I made the text darker
but I want the bg a bit bright to catch attention!
it's way too bright
you should only have 1 card with a brighter button
and that is the one you want to direct people into
is the button bg too bright? aren't you exaggerating?
It is #38bdf8 bg-sky-400
in context, a bit
can you try 300?
Not bad
but now it is brighter!
it is
try 590
500
i thought that 300 would be darker
looks so bad with the blue text
can you try white text?
much better
compare that button with the background at 400
the last one is more catchy!
and doesnt make my eyes feel like they are full of bees
should the color remain the same in light mode?
try it
too bright
It is not bad
try 600
to give the eyes some rest from all the white
sorry it is sky-400
that looks less painful
let's remove the pain completely
i dont know if that looks better
and now
the frontend and backend are too bright
that color is fine for that text, on dark mode
but on light mode, it is too dark
ight
light
is the checkout button fine?
yes, but can you try 500?
it is 500 on dark mode and 600 on light mode
i know, but im asking you for 500 on light mode, but showing the entire card
600 definitively fits better
Here are the final results live https://www.indie-starter.dev/#pricing
@ἔρως thank you for the feedback, Definitely now much better
you're welcome
tiny changes can have huge differences
and honestly, i do think it calls for attention a lot more
agree! but I have always problems with color contrast, in my laptop, second screen and iphone have all different look, which makes me struggle to find the right contrast ratio. most of the time colors I have low contrast colors
you probably pick colors that are too bright
try to crank the living shit out of your iphone's brightness and then lower it, and see if you can read it without pain