Today, I'm moving on to the cards challenge from the DesignCourse Learn UX/UI in 30 Days playlist on YouTube. Don't worry, I haven't forgotten about 100 days of UI, but this all links in very nicely to the next challenge of my 100 days.
Gary created some cards for the fake site that I made hero content for in the last challenge and then challenged us to create some for this fake website he made:
He mentioned that we should keep the cards on-brand and use the typefaces in the example as well as Icons from a Figma plugin.
Here's what I came up with for my cards:
My gut is telling me that the icons, buttons and text is too big and that the white borders on the cards distract from the CTA but I've stuck to my guns and gone with it.
Review
Entry 1
My Take
I like it, maybe the icons are a little big and the learn more buttons should be a bit more clear on what the user is learning about by clicking on them as it is relying on the gestalt principle of proximity that the user will assume the learn more button is for the topic that it's under which it shouldn't have to. Other than that, I think it's pretty good.
Gary's Take
He made the icons white as well as making them smaller and making the titles smaller and adding more white space around the text in the learn more buttons.
Entry 2
My Take
I like the purple colour they used and i like the half shapes but I think they should all be visible on the same corner. The titles are too big and the purple learn more button is hard to see with the contrast so I'd make it white instead or make the whole background of the button that colour and invert the text.
Gary's Take
He mentioned that there is too much white space between the cards which makes the page feel a bit sparse. All he did was extend the width of the cards and he made it more obvious that both top corners of the middle card were visible.
Entry 3
My Take
I like this one, especially the texture/gradient on the card backs. I don't know what I'd change.
Gary's Take
He just removed the gradient stroke and added white space around the text in the learn more buttons.
Entry 4
My Take
The learn more button isn't obvious that it's a button and would be more suitable if on hover the whole card turned into the learn more but maybe that's what they're going for. The cards feel a bit too over stylised with the gradients in the stroke and backgrounds and it feels like it takes away from the image of the bottle in the hero content but that might just be me.
Gary's Take
Gary agrees that it's a little bit too much in terms of colour and amount of gradients. He mentioned how much was going on in the hero section and how the next bit should bring it down a peg. He only changed the line height of the descriptive type though.
Entry 5
My Take
I like the simplicity of the card background as well as the icons but the cards feel a bit too square and low down as well as the descriptive text feeling a little too pushed in compared to the heading. I feel like the bounds need to be wider. The text on the learn more is very small and hard to read and the purpley pink colour is very harsh on the eyes.
Gary's Take
He also changed the learn more button as he felt it was too high contrast as it isn't trying to be a primary CTA where it really stands out.
Entry 5
My Take
I like the icons apart from the responsibly sourced one and I like the sprinkle of colour on them but I hate how the learn more buttons have an end missing.
Gary's Take
Gary took off the colour on the icons and made the learn more buttons equal and more subdued.
Entry Six
My Take
I quite like the different shape of these cards but I think the white background is a bit too high contrast on the eyes. I also don't know why the learn more buttons are different. I like the icons and the glow they all seem to have but I think Gary will tone them all down.
Gary's Take
Well he started using this as an example of what not to do so ouch. He mentioned that completely white backgrounds demand too much attention from the user and makes the design feel blocky and it's not great to have things looking like tombstones unless that's the goal. Gary made the backgrounds lighter purple and the icons white before making the learn more buttons a nice light purple.
Entry Seven
My Take
I like the simplicity of it but the curved corners on the learn more buttons feels out of place. The Icons are also slightly too big.
Gary's Take
He made the backgrounds of the cards lighter rather than darker so that they stand out more and he made the button backgrounds a lighter purple as well as making the icons smaller. He isn't a fan of an outline button with not much white space as it makes it feel cluttered, especially with a high contrast stroke.
Entry Eight
My Take
I mean it's pretty but personally I don't think it fits the brief. They are pictures not icons and the learn more arrows being in the corner cut out of the card just doesn't feel like it fits to me. The cards also feel too far down.
Gary's Take
Too many effects. A pass through, a gradient, a drop shadow, too much. He changed the card background to just the light purple from above and changed the learn more buttons to a brighter purple. He also took the gradient of the banner.
Entry Nine
My Take
I like it. I think the dark background of the cards will be more easily readable if they are lighter but I like the drop shadow of the lighter colour. I like the icons and their placement as well as the embedded one in the background of the cards. The learn buttons are good too!
Gary's Take
He kept the watermarks of the icons, moved the icons to the middle and made them slightly bigger. He removed the drop shadow and changed the learn more buttons to no outline and an arrow next to it.
Entry Ten
My Take
I like that the icons are placed slightly differently with this one. I also like the learn more buttons but it annoys me that they've just put about on the first two and then more about on the last one which is inconsistent. I think Gary will change the colour of the icons to white.
Gary's Take
Gary changed the icons to white as I thought he would and then made the white space between them smaller by giving wider boundaries to the text. He also made the headings smaller
Entry Eleven
My Take
Again, the white background has too much contrast and the pink colour is very in your face. I also feel like there isn't enough space between the text and the edge of the card on the third one and everything is very close together. I'd give everything a bit more space, change the colour of the background to the lighter purple and then change the buttons to just a white learn more with an arrow or invert the button with a less saturated purple colour.
Gary's Take
That is exactly what Gary did. He spaced everything out, changed the background to a light purple and made the learn more white with a lighter more subdued purple behind it.
Entry Twelve
My Take
I feel like they tried too hard with it somehow. It's just too much for my brain to take in. I don't like the unreadable font and colour of 'about frag' and I don't think the 'things you need to know' is necessary. The flowers in the stardust image have nothing to do with stardust. The images take your attention away from the text and the cards feel too much. I like the concept though.
Gary's Take
He also feels like there's too much going on with pictures on all of the backgrounds. He got rid of the backgrounds completely and changed the icons to white before making the learn more text a light purple. He didn't get time to finish his version but he could have used the moon picture at the top of the right one.
Entry Thirteen
My Take
I really like the smaller cards here. I'm not a fan of the bright purple punctuation after everything, I'd maybe either make it all the same or change it to the colour of the icons. I'd also make the learn more button on the bigger one have the same light purple background as the icons and make the card itself have the same background as the smaller cards.
Gary's Take
He made the smaller cards more simplified by making the icons white, smaller, and moving them to the left side of the card. He rounded all the corners and made all the cards slightly smaller. He did also change the background of the learn more button to the lighter purple and he kept the bright purple punctuation.
Entry Fourteen
My Take
I don't like all of the icons being the same, it makes it look like they haven't loaded yet or something. The font is a bit weird and thin for a heading and I think Gary will change the learn more to an actual button rather than an outline button. The text is also very small.
Gary's Take
Gary really liked this one but just scaled everything down slightly and made the headings bold.
Entry Fifteen
My Take
I like the idea behind this but I'm not a fan of having one pre-selected unless this is just to show what happens when the user hivers over the card. The icons are a bit childish but they can work. I think the gradient card backgrounds is a bit much and the outline buttons will be swapped for light purple background and the left learn more button will be a lower saturation.
Gary's Take
All Gary did with this one was change the learn more text to white in the left one and make the colour a little bit darker.
My Changes
This is my try after the changes I made. I made everything slightly smaller and changed the more about buttons to just text and arrows. I'm still not sure if I'm totally in love with it but I think I did an okay job.
For comparison:
Conclusion
This one was definitely tough and I'm trying to find a balance between simple and creative as well as thinking outside the box. I think I'm slowly getting better with my spacing. Still a long way to go!
Comments