Background

This was a 7 day series covering essential web design principles:

1. Typography
2. Colors
3. Grids & Layouts
4. Animations
5. Inspiration
6. Practice
7. The Journey

If you want to read quality posts & guides early, follow me on my LinkedIn

Typography

Typography sets the foundation of any creative website. Its what shapes first impressions and carries your message before anything else does. If your type doesn’t match your story and identity, the whole design falls apart.

Font families (know these first)

1. Serif
2. Sans-serif
3. Mono

Serif fonts are characterized by small decorative lines or "feet" (serifs) attached to the ends of its letters. Usually used to evoke a sense of sophistication, elegance, or traditional.

Sans-serif fonts are characterized by the absence of small decorative lines (serifs) at the ends of its letters. They're more clean, readable, and minimal.

Mono(space) fonts is a typeface where every character (letters, numbers, symbols, spaces) occupies the exact same horizontal space. Ideal for code / terminals.

Font settings

1. Font weight (how thick / heavy a font is)
2. Font size
3. Leading / Line height (vertical distance between lines in a paragraph)
4. Tracking / Letter spacing (horizontal space between letters; kerning)

Adjusting these properly is what creates a clear visual hierarchy.

I use Typescale to reference and design my website’s typography.

Contrast (2 types)

1. Color contrast

Ensuring your text is readable but doesn’t hurt the user’s eyes.

I use the a11y contrast checker plugin on Figma. You can also check the contrast directly on the website using dev tools.

2. Form contrast

Size contrast between text.

Try to pick 3~5 font sizes for the whole project. The steps between font sizes should be BIG.

Alignment

1. Left Align
2. Center Align
3. Right Align

Left align is the most common because its very easy to read since the text doesn’t have inconsistencies at the start of each line.

Center align can be more visually balanced, but center & right align is harder to read if overused. Keep text short.

My rule of thumb:

• Headings: Max 2~3 lines, very few words
• Body text: More words, still 2~3 lines

WHERE DO I FIND GOOD FONTS?

My top picks:

• Free: Fontshare, Google Fonts, Uncut.wtf
• Premium: Find some type foundries (e.g. Pangram Pangram, Swiss Typefaces)

Good typography shapes first impressions.

Different type styles evoke different emotions — whether you intend them to or not.

Colors

Award-winning websites don’t use color to decorate.

They use it to evoke emotion, direct attention, and tell a story.

Color is one of the fastest signals your site sends. Before a user reads a word, color has already set expectations about trust, energy, seriousness, or playfulness. When color choices are unintentional, the entire experience feels noisy or confused.

Good color systems are deliberate, restrained, and purposeful.

Color & Emotion

Different color temperatures naturally evoke different feelings:

• Cool tones: calm, sophistication, trust
• Warm tones: energy, passion, intensity

The right choice depends on what you want the site to communicate and how you want users to feel while interacting with it.

Color Categories (by usage)

Dominant color
The color that occupies the most visual space and sets the overall mood of the site.

Supporting colors
Colors that work alongside the dominant color to add contrast, depth, and rhythm.

Accent color
Used sparingly to draw attention and guide the eye — CTAs, links, highlights, key moments.

A common guideline is the 60/30/10 split, but treat this as a reference, not a rule.

Color categories (by identity)

Primary color: the main brand color
Secondary colors: additional brand colors that support the identity

A brand’s primary color does not have to be the dominant color on the site.

A quick checklist before you ship

Before calling a color system “done,” ask yourself:

• Does this represent my brand?
• Is it readable and easy on the eyes? (contrast)
• Does it create clear visual hierarchy?

Grids & Layouts

Grids & Layouts

The prettiest elements mean nothing if they’re misplaced.

Grids help you decide where elements belong — and why. They’re not there to limit creativity, but to give structure to it. A good grid makes layouts feel intentional, balanced, and easy to navigate, even when the design itself feels expressive.

4 Types of Grids

1. Column grids

There are many variations, but the 12-column grid is the most commonly used because of its flexibility.

A practical way to set one up:

• Start by setting margins from the left and right edges of the screen
• Define gutters (the space between columns). Gutters can be reduced or removed entirely for tighter, more graphic layouts

Columns can also be subdivided further (e.g. 12 → 16 or 24) when you need more precision and control.

Column grids work especially well for responsive layouts and content-heavy pages.

2. Van de Graaf (Golden Canon) grid

This grid is based on the proportions of the canvas itself, rather than predefined columns. It’s especially useful for more unusual or editorial-style designs.

A simplified way to construct it:

• Start from the main diagonals of the screen
• Draw lines at their intersections
• Continue until you reach comfortable margins from the edges (roughly 40–100px, depending on screen size)

You don’t need to use every line. Instead, pick a few strong power lines to align key elements.

This grid is less about structure and more about composition and balance.

3. Rectangular (modular) grids

Rectangular grids are highly structured and made up of repeating modules.

• Decide the module size and proportion first
• The module defines both horizontal and vertical rhythm
• Smaller modules work better for dense content
• Larger modules suit minimal, spacious layouts

These grids are great when consistency and clarity matter most, such as dashboards, galleries, or data-heavy interfaces.

4. Other / experimental grids

This category includes asymmetric, diagonal, circular, or custom grids — often a combination of multiple systems.

A useful mindset here:

• Idea first: start with the concept, not the grid
• Think differently: non-standard grids can create personality and memorability
• Combine systems: mixing standard and experimental grids often leads to creative yet usable results

The grid should support the idea, not overpower it.

Grids are guidelines, not rules.

Breaking out of a grid — intentionally — can create emphasis, tension, or surprise. Some of the most interesting layouts come from knowing the grid well enough to bend or ignore it at the right moments.

Idea and composition first.
Use the grid as a tool to structure that idea.

JUST MAKE COOL UX FRIENDLY DESIGNS

For a more visual exploration, check out Grids by Obys Agency

Animations

How do you bring a website to life?

Animations, when used well, enhance the user experience by guiding attention, reinforcing intent, and setting the overall feel of a site.

Designing Natural Motion

To create animations that feel natural and intentional, focus on:

• Delays — control when motion begins
• Staggers — sequence elements to create rhythm
• Easing — define how motion accelerates and decelerates

Just like in nature, nothing moves in straight lines. Every movement influences the next. These small details turn isolated animations into a cohesive flow.

Well-crafted interactions can transform a plain interface into something engaging and memorable — making every click, hover, and scroll feel smoother and more satisfying.

Animation Techniques

Most great websites rely on the same small set of techniques. You don’t need dozens of effects. Master a few, and reuse them consistently. This follows the Pareto Principle (80/20 rule): a small number of techniques produce most of the impact.

Here's my top 5:

1. Scroll Tracking (track scroll progress — usually between 0 and 1 — and map it to motion)
2. Viewport Detection (trigger animations when elements enter the viewport)
3. Sticky Position
4. Easing
5. Text Splitting (splitting text into lines, words, or characters)

Animation Resources

For a deep, visual dive into interaction design, Motion by Zajno is an excellent resource

Also shoutout to Codrops and Olivier Larose's YT vidoes. They were some of my favourite resources starting out.

Inspiration

Don’t look for design inspiration until you can answer these two questions:

1. Who are you — or what is your product / business?
2. Who are you designing for? (your target audience)

If you can’t answer them clearly, inspiration becomes a trap. You’ll scroll for hours, save dozens of references, and still feel stuck.

That’s because a design’s main purpose isn’t to look cool — it’s to communicate value to the user. A visually impressive site that fails to communicate its intent is still a bad design.

There are endless websites you could pull inspiration from.

But not all inspiration is relevant.

Your design needs to fit your message — not the other way around. If you start with visuals instead of intent, you’ll end up forcing ideas into a context they don’t belong in.

For example:

Scenario: You’re a photographer building a portfolio site.

• Goal: How can I showcase my photos in a unique and engaging way?
• Inspiration focus:
  galleries, marquees, minimaps, transitions, immersive layouts

Only after defining purpose do references become useful.

My Inspiration

I keep a curated list (not endless scrolling), here are a some worth bookmarking:

• Awwwards — You can check out other awards websites too (CSSDA, FWA, GSAP Showcase to name a few) BUT if one website is featured on one award website, there’s a 95% chance it’s on every other awards website (the showcases are pretty much the same)

• Minimal Gallery — For specifically minimal websites

• Dark Mode Design — Only dark mode websites

• Stack Sorted — Kinda like Refero but for interactive components

• Inspo.page

• Footer Design

• Grids by Obys Agency

• Browsing Mode

• Klikk En Theke

• Godly Website

• Load More

• Hoverstates

• Internet Gems (I Love Creatives)

• Landing Love

• Land-book

• Made in Webflow – Portfolio

• Lapa Ninja

• One Page Love

• Seesaw

• A Fresh Website

• Unbound by Default

• BOOKS & MAGAZINES

Personally I don’t use Behance or Dribbble. In my opinion, it’s too much noise & hard to find exactly what you’re looking for

Practice

No one can spend 100,000 hours doing something and not get better at it.

So why do so many people feel like they never improve?

I’m bad at failing. Even when no one’s watching, failure knots my stomach.
When people are watching, it’s worse.

Which is ironic — because this mindset directly contradicts the advice I already know is right.

Psychologist Carol Dweck calls this a fixed mindset
The belief that your skill level is capped by some invisible ceiling you were born with.

• Every mistake feels like proof
• Every loss feels like exposure
• Every struggle sounds like: “Maybe I’m just not cut out for this.”

But think about it

No one can put in:

• 100,000 hours
• or 10,000
• or 1,000
• or even 10

Come think of it, it seems like any amount of practice is going to be an improvement

Practice ALWAYS changes you, just not always in ways that feel good

When you’re “stuck,” you’re still learning.
When something doesn’t work, you’ve ruled out an entire path.

The best developers I know didn’t get there because they’re naturals. They got there because they failed over and over and kept going anyway

If someone makes something look effortless, you’re not watching their first attempt.
You’re watching their 100th

So if you feel like you’re not improving, ask yourself this instead:

Are you actually stuck or are you just in the uncomfortable part where learning is happening?

Because that feeling?
That’s not a signal to stop

It’s the signal that it’s working

The Journey

Here’s one year of my web development journey summarized — and more importantly, the framework I use to learn things. This isn’t a “perfect path.” It’s just what worked for me.

Months 1~2: Fundamentals First

I focused entirely on the basics: HTML, CSS, and JavaScript.

No frameworks. No shortcuts.

It’s tempting to jump straight into React or whatever’s trending, but fundamentals compound. Building without them is like building a house on weak foundations — everything you stack on top eventually collapses.

At this stage, the goal wasn’t speed.
It was understanding.

Months 3~8: Build industry skills

Once the fundamentals were solid, I moved on to tools and skills that matter in real projects and industry:

• React
• TypeScript
• Animation libraries
• CMSs

The key shift here was how I learned.

Instead of passively following tutorials, I:

• built lots of projects
• broke things
• fixed them
• contributed to open-source repos

That’s how you escape tutorial hell. Progress only becomes obvious when you’re forced to make decisions without someone holding your hand.

Months 9~12: Specialise and stand out

At this point, I started specialising.

For me (as a frontend developer), that meant diving into more advanced topics:

• Three.js
• WebGL
• Shaders

I also started posting online — not to “teach,” but to document my growth. That process alone forced clarity, reflection, and consistency. Over time, it also helped build a personal brand.

If you're just starting out

If you don’t know where to begin, I put together the roadmap I’d follow if I had to start over from scratch:

• Roadmap: LINK
• YouTube breakdown: LINK

Use it as a reference, not a rulebook.

Everyone’s journey looks different — but progress comes from the same place:
showing up, learning deeply, and sticking around long enough for it to compound.