Hey Harry,

Big thanks to Valentin, who submitted his Gridgames site to yesterday’s Live Redesign Session. It’s a site that hosts grid-based games, so my main thought going into the redesign was: stay away from “too boxy”.

How do you make something comprised of rectangles more interesting and appealing? It's a VERY applicable question to being a good designer 🤔

[📣: ​Learn UI Design​, ​Learn UX Design​ and Landing Page Academy close enrollment in 24 hours – at midnight Pacific. Join 5,000+ students from Apple, Google, Meta, Stripe, and more 🎉 (30-day refund if you’re on the fence)]

Here’s the BEFORE:

And here’s our AFTER:

Let’s break down some of these changes. (Yes, made in about 2 hours with 0 research, but you know the drill: take what’s useful, discard what’s not)

Start with good bones

I made a few subtle changes to the page layout (if it’s tough to see in a compressed image, see the Figma):

• I used the Beautiful Shadows plugin to create gorgeous, multi-layered shadows for each game’s card 💅
• I used corner rounding to make extra-friendly cards 😀

This gets things started off on a foot that says “this is considered, this is designed”. Observe:

No naked grids

Recognizing the failure mode is “boring grid of grid games” ☠️, I tried to spice up how the grids in each card were presented:

• 🗼Skewed at an angle
• 🏛️ Presented with without gridlines
• 🔘 Different container shapes, different border radii
• 🌈 Unique color schemes (see next section)

All 4 of these could have been boring, square, head-on, mono-palette visuals…

…but they aren’t 😉

For every card, a palette

I firmly believe the most useful color skill in UI design is creating variations, but this design required its more famous sibling: creating palettes. I arrived at these palettes in fairly different ways 😎

• Arukone’s palette was modified swatches from video game palettes
• Fifteen’s palette was from my Data Visualization Palette Generator​
• And a few had even different vibes, courtesy of AI 😉 (next section)

AI image generation

I also leaned on Midjourney for image generation. It took only a few prompts to get good “filler image” content. This helped mix up the grid-based presentation on the other cards 🙂

You may not be pumping out hero images with this, but it’s great for smaller-form supporting visuals 👍

All in all, this helped make a half-decent design in fairly little time:

Along the way, I used strategies from all 3 of my courses:

• 🎨 Learn UI Design: make sites & apps look great
• 📱 Learn UX Design: make apps usable
• 📣 Landing Page Academy: make sites that convert (and look snazzy)

…As well as grabbed copious fonts from The Good Fonts Table (a database of 100+ free fonts that comes with Learn UI Design)…

​

And used techniques from the Visual Interest Table (a database of dozens of ways to spice up your designs – from Landing Page Academy)...

​

These 2 resources, like the courses themselves, are lifetime access.

And since the courses and the resources are meant to be watched and used again and again, many students refer to them as investments – and astoundingly good ones at that:

​

​

I am so stoked to see quotes like these. Design isn't rocket science, and it definitely doesn't require 4 years of art school 🙈.

• Want to master visual design? Join Learn UI Design​
• Want to learn actually practical UX? Join Learn UX Design​
• Want to design high-converting, beautiful landing pages? Join Landing Page Academy​

All courses contain:

• 📽 Dozens of video-based lessons
• 📝 Figma resources & downloadable resources
• 🌎 A student community for learning & feedback
• 💯 Lifetime access to all course materials, including additions and improvements
• ♥️ A 30-day, no-questions-asked refund policy

​

Alright – any last-minute questions before enrollment closes? I’ll answer every one 😎

Best,
Erik D. Kennedy