1 useful tool

​Learn Design Through Redesigns (By Creatorfuel)

I've just launched yet another free resource to help you refine your design process and creativity.

It's a very simple newsletter.

Here's how it works:

You send me something that you think I should redesign.

I redesign it and share my exact thought process with everyone.

Every single step.

I've published 3 examples on the website to give you an idea:

1. ​I redesigned a luxury candle business' homepage​
2. ​I redesigned a moving company's homepage​
3. ​I redesigned a local cupcake shop's homepage​

I used to do these for Flux Academy's Instagram stories (see highlights) in 2020 and 2021.

They were a smash hit.

Between 15,000 and 20,000 people would tune in every week!

I think people liked the raw thought process and loved discovering the techniques & tools used on a real layout.

A nice breath of fresh air from the usual "Top 7 web design tools of 2021" or "Never make these 8 web design mistakes".

Anyway, subscribe to get redesigns in your inbox.

Got something I should redesign?

Reply to this email with your submission (I'll take any type of layout – web design, mobile, marketing design, poster design etc).

You can also submit anonymously here.

First redesign coming next Tuesday!

1 effective tip

How to actually size & space everything in your layout

"How do I know what size to make elements?"

"How do I know exactly how much to space them out?"

"What's a grid and how do I size it?"

Let's answer these questions.

Deliberate sizing & spacing of your elements creates rhythm.

That rhythm and order creates visceral appeal and subconscious satisfaction.

Visceral appeal = "I'm not sure why, but this is nice!"

Here's what I mean:

Look closely.

The form on the right just looks and feels better doesn't it?

Now, how do we come up with the specific pixel numbers?

Well, it all starts with a spatial system.

Of course, this is after we've positioned our content, seen how it falls on the canvas, and settled on a layout & mood.

Now, establishing a spatial system simply involves picking a base unit and having all spacing and sizing numbers be multiples of that base unit.

Example: If we’re designing a website layout, we can pick a base unit of 8pt, and then decide to make all button heights 64pt (64 is divisible by 8).

All this does is create internal rules for your layout. It creates visual consistency, rhythm, and less decision-making / guesswork for designers.

8pt is the most popular because it’s an even number meaning you won’t be splitting pixels when centering elements and it gives you a good amount of sizing options (8, 16, 24, 32, 64 etc) that are distinct enough.

A smaller base unit like 4pt gives you more options. Do you need the extra spacing/sizing options (4, 8, 12, 16, 20, 24, 28, 32 etc)?

A bigger base unit like 16pt gives you fewer options and the sizing and spacing differences may be too big (16, 32, 48, 64, 80, 96 etc).

Now, what's a grid and how does it relate to all of this?

Grids are just a set of lines used to position content consistently. That's it.

Look at your layout and ask yourself:

“How am I dividing my space horizontally?”

"What flexibility do I want to have if this layout grows (more sections, more pages)?"

The 12-column grid is typically more than enough when you need consistent horizontal spacing for any digital and print project (web, app, posters, magazine, etc).

The 12 columns let you divide space into halves, thirds, fourths, sixths, which is plenty of options.

Now, let's tie in the idea of a spatial system:

Simply put, your grid's side-margin and gutter sizes should be multiples of your spatial system's base unit.

It seems that Bite Toothpaste chose a base unit of 8pt, a gutter size of 24pt and a margin of 40pt (24 and 40 are both divisible by 8!).

Remember, there are no hard rules in design. Take these concepts and make them yours.

1 idea to think about

Divergent thinking + Convergent thinking = Creativity

You already know how to do this.

I'm simply going to make you aware of it so that you can consciously and habitually call upon this ability when needed.

Any and all creative ideas require divergent and convergent thinking to occur.

Let's look at divergent thinking first.

Divergent Thinking = Solving a problem by coming up with as many different solutions/ideas as possible. Like brainstorming or a mind map.

Divergent thinking is just idea generation & exploration with minimal evaluation.

We're not trying to connect the dots just yet.

Some of the ideas can and should be quite unusual and far-fetched.

The best divergent thinkers are incredibly good foragers, tinkerers, researchers or observers.

"How so?" you ask.

Well, because you need readily available information (either already in your head or discoverable by you) to come up with ideas.

Even better is the divergent thinker that knows the context and rules beforehand.

In other words, you can't come up with decent ideas for a topic you don't understand.

And you certainly can't come up with novel "rule-breaking" solutions for a topic you don't understand.

This is why they say "The best creators know the rules before breaking them."

Example of divergent thinking in visual design:

Stimulus: Design a homepage hero section for a moving company.

Divergent thinking: Quickly sketching 8 different possible layouts. Some wild, some not-so-crazy. Let your mind wander. Move fast.

Convergent Thinking = Considering limitations, combining ideas, and testing ideas to narrow options down to a singular solution.

Convergent thinking involves reviewing the "rules", constraints, and contextualizing to see which ideas (and which parts of which ideas) are viable and meaningful.

After all, creativity isn't simply producing something that is new.

Creativity is producing something that is new AND meaningful.

Meaningful = Useful or delightful

For something to be considered creative, it needs to "click" in the mind of the audience. It needs to reveal something.

A door knob shaped like a frog is not creative. It's just new and different. It's not useful or all that delightful. It doesn't clearly reveal anything significantly meaningful.

On the other hand, a self-sanitizing door handle that harnesses kinetic energy from the door's movement is creative because it connects the dots in a novel and valuable way:

The door's movement is being used in a new way to generate energy and clean something that we typically view as dirty. This is new and useful. Useful creativity.

A door knob shaped like an open hand is also creative:

We open a door to enter a new space, so the door knob is acting as a handshake welcoming us into the space. This is creativity that delights.

Again, creativity makes us connect the dots.

Side-note: Innovation is just applied creativity. Creativity that has been brought to life.​

Shower thoughts

1) Walking around with your belt unbuckled feels inappropriate, but removing it completely makes it okay again.

2) If your food says "Enjoy" at the end of the cooking instructions, you can't complain to the company if you didn't like it, since you technically didn't follow the instructions.

3) As AI art becomes more and more indistinguishable from regular art, the most respected artists will end up being the ones who record themselves in the process.

Via Reddit