DEV Community

Cover image for Quick A/B Poll: Which card style you like better?

Quick A/B Poll: Which card style you like better?

Alvaro Saburido on August 05, 2020

UPDATE 10/08/2020: Thanks to everyone that took the time to vote and provide valuable feedback in this poll. You guys rock 🤘. I decided to use ...
Collapse
Ā 
daniel13rady profile image
Daniel Brady •

Tough choice, they both look good! But I’ll go with option B, because the design elements more closely align with Nintendo, in my mind: clean, slanted, character logos as shadows of the characters, etc.

One suggestion: try making the ā€œFinish Battleā€ text in ALL-CAPS and see how that changes the feel of it.

Collapse
Ā 
alvarosabu profile image
Alvaro Saburido •

Thanks for the feedback, really apprieciate it.

Collapse
Ā 
johntalamo profile image
JohnTalamo •

They're both good but I prefer A. My eyes went right to that one. The colors pop and the characters look like they're more 3-D versus looking more 2-D on white.

Collapse
Ā 
alvarosabu profile image
Alvaro Saburido •

I have the same feeling, I'm trying to step away from my overall romance with minimalistic white interfaces with something riskier

Collapse
Ā 
dabit_coder profile image
David Oliva Tirado •

They are both awesome! But I think that the white one looks a bit better. It's less overloaded with things (the logos behind the characters are SICK) and in general looks more clean and elegant.

Really good job!

Collapse
Ā 
horrorofpartybeach profile image
Emma •

I really like both designs but I went for Option A because I find it easier to read/see things against a darker background. I'd suggest increasing the contrast of some of the icons on the bottom black banner of Option A; from an accessibility point of view, this would be a great improvement.

I also really like the shadows behind Falco and Link on Option B and I agree with Daniel that this design is more closely aligned with Nintendo.

Great job on the designs, they're both awesome!

Collapse
Ā 
nombrekeff profile image
Keff •

I like B more, but would like A if they used the same styling (ie. rounder borders, shadows, and badge)

Collapse
Ā 
huncyrus profile image
huncyrus •

This is hard, because like elements from each side.

I like the format of the B:

  • Rounded corners
  • Full figures
  • Figure logo as background
  • Name written down

And I like from the "A":

  • Colors
  • "vs" artwork (i know, littlebit copied from street fighter)
  • The red rounded button from below for finishing a battle

The second one because focus more the important UI elements and has better call-to-action feelin' (e.g.: drive better the eye what to do, more intuitive).
The first one way cleaner by feeling.

Would be interesting to have both scheme for dark/light theme ;)

Collapse
Ā 
lmioco profile image
lmioco •

I prefer the second one

Collapse
Ā 
alvarosabu profile image
Alvaro Saburido •

Not a bad idea tho, thanks for replying

Collapse
Ā 
alexanderjanke profile image
Alex Janke •

šŸ¦„
(but reducing the shadow just a little bit)

Collapse
Ā 
patarapolw profile image
Pacharapol Withayasakpunt •

ā¤ļø

I do prefer light mode better, but Option A provides more colorfulness and contrast.

Collapse
Ā 
andrewbaisden profile image
Andrew Baisden •

A has more colour and B looks subdued and simple. Both look good however A looks like it belongs in a AAA game whereas B looks like it was made for a more simple clone of a AAA game in my opinion.

Collapse
Ā 
beard_corsini profile image
Andrew Corsini •

These both look amazing!! I'm a dark mode guy myself, so I'm more inclined towards A, but I think either one would be a great fit. Nice Work!

Collapse
Ā 
becoolie4u2 profile image
becoolie4u2 •

šŸ¦„ but make the "vs" a little bigger and I second a dark version as well.

Collapse
Ā 
xukinorris profile image
Xukinorris •

I always go for the clean that uses the least dark colors. Nice job btw!

Collapse
Ā 
fkhadra profile image
Fadi Khadra •

Both are gorgeous. But I would go for A. The "VS" is really eye-catching. Would you share the app when done ?

Collapse
Ā 
alvarosabu profile image
Alvaro Saburido •

Thank you very much, yes Im planning on having a demo version of the app with mock data on my portfolio site, :D.

Collapse
Ā 
alvarosabu profile image
Alvaro Saburido •

Hey thanks for the awesome feedback, I totally get your point actually I didn't put any names because I wasn't happy how the fonts looked on it, I still trying to find the correct font to it.

Collapse
Ā 
joelbonetr profile image
JoelBonetR šŸ„‡ •

I love the way characters goes out of the card and the darker "footer" on A, but I love the information about wins and character names, and also the finish battle style on B šŸ˜‚

Collapse
Ā 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø •

I'mma go with B, but not by much. They are both pretty cool :D

Collapse
Ā 
samwightt profile image
Sam Wight •

Option B with Option A's button looks esp good to me! Not sure the button design looks like a button or matches with the rounded corners.

Collapse
Ā 
gabrielrufino profile image
Gabriel Rufino •

ā¤ļø

Collapse
Ā 
didacsf profile image
DĆ­dac SementĆ© FernĆ”ndez •

A all the way!

Collapse
Ā 
lukeofficial profile image
Luke •

ā¤ļø

Collapse
Ā 
cromatikap profile image
cromatikap •

ā¤ļø

Collapse
Ā 
harikayedidi profile image
Harika Yedidi •

šŸ¦„ IMO B highlights the characters and is more neat looking than A, especially with the CTA.

Collapse
Ā 
dothtm profile image
dotHTM •

Depends entirely on the background, as presented on white, then A.

But on a dark background, I suspect B.

Collapse
Ā 
sarcasmappreciated profile image
Benson Li •

B is cleaner and more easily descipherable

Collapse
Ā 
virenb profile image
Viren B •

šŸ¦„

Collapse
Ā 
markoshiva profile image
Marko Shiva •

Option A is far better.