Forem: Shashwat Pritish

Your UI Isn’t Ugly — It’s Inconsistent (Here’s How to Fix That)”

Shashwat Pritish — Thu, 12 Feb 2026 02:59:16 +0000

Most developers think their UI looks bad because they’re “not good at design”.

That’s rarely the real problem.

More often, the UI feels off because it’s inconsistent.

Not ugly.

Not broken.

Just quietly inconsistent — and your users feel it instantly.

Inconsistency Is Invisible (Until It’s Not)

Users usually can’t explain why your product feels uncomfortable.

But they notice things like:

Buttons that don’t behave the same
Spacing that randomly changes
Fonts that almost match, but not quite
Colors that mean different things in different places

Their brain keeps asking:

“Wait… is this the same thing or not?”

That mental friction is what makes a UI feel amateur.

The Real Cost of Inconsistency

Inconsistent UI doesn’t just look bad — it slows users down.

Users hesitate before clicking
Trust drops subconsciously
Learning time increases
Your product feels harder than it actually is

Good UI reduces thinking.

Inconsistent UI demands it.

5 Places Where Inconsistency Sneaks In

1. Spacing

Margins and padding change screen to screen.

Fix:

Pick a spacing scale (4, 8, 16, 24, 32)
Never eyeball spacing again

2. Typography

Same text type, different font size or weight.

Fix:

Define text roles: heading, subheading, body, caption
Use them everywhere — no exceptions

3. Colors

The same color means different things.

Fix:

One color = one purpose
Success, warning, error, primary — be strict

4. Buttons

Different shapes, sizes, or hover behaviors.

Fix:

Create button variants (primary, secondary, danger)
Reuse, don’t redesign

5. Interaction Patterns

Same action behaves differently across pages.

Fix:

Decide patterns once
Apply them everywhere

Consistency Is a Design Skill — Not Talent

Great designers aren’t magically creative.

They’re boringly consistent.

They:

Repeat decisions
Reuse components
Avoid clever one-offs
Prefer systems over screens

That’s why their UI feels calm.

How to Fix Your UI (Practically)

Start small:

Audit one screen
List all spacing values used
Normalize them
Repeat for typography and buttons

You don’t need a redesign.
You need discipline.

Final Thought

Your UI probably isn’t ugly.

It’s just:

Trying to be helpful
Making too many decisions
Asking users to think too much

Consistency removes that burden.

And suddenly —

your UI feels professional.

What’s one area of UI consistency you struggle with the most?

Is Learning CSS a Waste of Time in 2026?

Shashwat Pritish — Tue, 03 Feb 2026 14:20:17 +0000

With AI-generated UIs, component libraries, and design systems everywhere,

a real question is starting to appear:

Is learning CSS still worth it in 2026?

Short answer: yes.

But probably not for the reason you think.

Why people think CSS is becoming irrelevant

Today, you can build UIs using:

component libraries
prebuilt design systems
AI-generated layouts

Without writing much CSS at all.

So it feels like CSS is optional.

And for shipping something quickly — it often is.

The uncomfortable truth

Tools don’t remove CSS.

They hide it.

Every component library, every AI-generated UI, every design system

is still powered by CSS underneath.

When something looks wrong, breaks, or feels “off” —

you don’t debug the tool.

You debug CSS.

What changes in 2026 isn’t CSS — it’s why you learn it

You don’t learn CSS to:

memorize properties
write everything from scratch
avoid libraries

You learn CSS to:

understand layout behavior
control spacing and hierarchy
reason about UI problems
make intentional design decisions

CSS becomes a thinking skill, not a syntax skill.

The developers who struggle the most

In 2026, the weakest frontend developers won’t be the ones who don’t know React.

They’ll be the ones who:

rely blindly on components
can’t fix layout issues
can’t customize design systems
don’t understand why UIs feel bad

They ship faster — until something breaks.

The developers who stand out

They don’t write more CSS.

They write less, but with confidence.

They understand:

flow vs positioning
intrinsic sizing
responsive constraints
visual hierarchy

So when tools fail, they don’t panic.

Final thought

Learning CSS in 2026 isn’t about writing more styles.

It’s about understanding the language of the web.

You can ignore CSS for a while.

But eventually, every UI problem leads back to it.

And when it does,

you’ll either understand what’s happening — or you won’t.

My UI Looked Fine — But It Was Asking Users to Think Too Much

Shashwat Pritish — Wed, 21 Jan 2026 14:48:01 +0000

Nothing was broken.

Buttons worked.

Layouts were clean.

The UI even looked good.

And yet — users hesitated.

Not because they were confused,

but because the UI kept asking them questions.

What should I click first?
Is this important?
Can I ignore this?

Every extra choice added friction.

That’s when I realized something uncomfortable:

Good UI doesn’t ask users to think.

It decides for them.

When an interface feels “off”,

it’s often because it’s making users do mental work

they never signed up for.

Once you notice this,

you’ll start seeing it everywhere.

In your apps.

In polished products.

In UIs you thought were well-designed.

3 Mistakes Most Beginner Developers Make

Shashwat Pritish — Tue, 20 Jan 2026 04:12:08 +0000

Everyone talks about frameworks, tools, and tutorials.

But most beginner developers don’t struggle because of a lack of knowledge.

They struggle because of how they think while building.

Here are three mistakes almost every beginner makes — often without realizing it.

1. Trying to be “advanced” too early

Beginners often chase:

complex architectures
premature abstractions
“industry-level” patterns

Before they’ve built enough simple things.

The result isn’t better code.

It’s slower progress and more confusion.

Simple code that works beats clever code you can’t explain.

2. Treating tutorials as understanding

Finishing a tutorial feels productive.

But copying code isn’t the same as understanding it.

If you can’t:

rebuild it without looking
explain why something exists
break it and fix it

You haven’t really learned it yet.

Tutorials should be a starting point — not the finish line.

3. Ignoring fundamentals while chasing tools

Frameworks change.

Libraries evolve.

Trends fade.

But fundamentals don’t.

Beginners often skip:

core JavaScript concepts
basic CSS layout understanding
how data flows in an app

And rely too much on tools to “handle it”.

Tools help.

Fundamentals carry you.

Final thought

Most beginner mistakes aren’t about writing bad code.

They’re about learning in the wrong order.

Slow down.

Build smaller.

Understand deeper.

That’s how real progress happens.

Why Your UI Looks “Off” -- Part 2

Shashwat Pritish — Tue, 23 Dec 2025 17:04:06 +0000

You’re Probably Doing This

Be honest.

Your UI isn’t bad.

It’s not broken.

It’s not ugly.

But you know something’s wrong.

And chances are — you caused it without realizing.

You keep adding instead of removing

When something feels wrong, you add:

another border
another color
another shadow
another animation

Reality

More UI never fixes bad UI.

It only hides the problem.

You don’t trust whitespace

You feel uncomfortable leaving space empty.

So you fill it.

Text. Icons. Lines. Boxes.

Reality

Whitespace isn’t empty.

It’s what makes everything else look intentional.

None of these decisions felt wrong at the time.

You treat everything as equally important

Every button looks primary.

Every card wants attention.

Reality

Good UI has hierarchy.

Bad UI has democracy.

You change styles “just this once”

Different radius here.

Different shadow there.

Reality

That “just once” happens 20 times.

That’s why your UI feels messy.

You design screens, not experiences

Each screen looks fine alone.

Together, they don’t belong.

Reality

Good UI feels familiar across screens.

Truth

If your UI looks off, it’s rarely the framework.

It’s usually:

too much added
too little removed
no hierarchy
broken consistency

If you think these are the real problems — they’re not.

Those are just the symptoms.

The real issue lives one layer deeper.

It has nothing to do with colors.
Or spacing.
Or components.

Once you see it,
you’ll start noticing it everywhere.

In apps you admire.
In products you thought were “well designed”.

And uncomfortably —
in your own UI.

To be continued....

Our UI Is Fine — So Why Does It Feel Bad?

Shashwat Pritish — Fri, 19 Dec 2025 13:24:10 +0000

Your app works.

No bugs.

No broken layouts.

Yet… it doesn’t feel right.

Here’s why 👇

1. Everything is competing for attention

When everything is “important”, nothing is.

Fix

Pick one primary action per screen.

Everything else should quietly support it.

2. There’s no visual rhythm

Your UI has content, but no flow.

Fix

Repeat patterns:

Same spacing
Same card styles
Same button sizes

Consistency creates comfort.

3. Too much information at once

Users feel overwhelmed — even if nothing is technically wrong.

Fix

Hide details by default.

Reveal only when needed.

Less visible ≠ less powerful.

4. UI elements feel heavy

Large borders, dark shadows, strong colors = visual weight.

Fix

Soften everything:

Lighter shadows
Fewer borders
Muted backgrounds

Light UI = calm UI.

5. No clear starting point

Users don’t know where to look first.

Fix

Use hierarchy:

One strong heading
One clear action
Everything else secondary

Guide the eyes.

6. Not enough breathing room

Even a good layout feels bad when it’s cramped.

Fix

Add more spacing than feels necessary.

Whitespace is not wasted space.

In short

Your UI feels bad because of:

Too many priorities
No rhythm
Too much information
Heavy visuals
Weak hierarchy
Lack of whitespace

None of these are bugs.

But fixing them changes everything.

Why Your UI Looks “Off” (And How to Fix It)

Shashwat Pritish — Fri, 12 Dec 2025 15:23:12 +0000

Sometimes your UI looks fine… but still feels weird. Off. Not polished.

Here’s why — and how to fix it fast 👇

1. Spacing is all over the place

If your UI feels messy, it’s usually the spacing.

Fix

Use one scale everywhere: 8 / 12 / 16 / 24 / 32.

Just doing this makes the whole design cleaner instantly.

2. No clear text hierarchy

If all text looks the same, nothing stands out.

Fix

Think simple:

Big = important
Medium = supportive
Small = details

3. Colors are too strong

Bright colors everywhere make your UI feel “beginner”.

Fix

Use soft neutrals.

Save bright colors only for ONE thing: actions.

4. Things don’t align

Even a good UI looks amateur if items don’t line up.

Fix

Left-align. Use a grid.

Your entire UI looks 2× more professional immediately.

5. Shadows are heavy

Harsh shadows = cheap UI feel.

Fix

Use soft, barely-there shadows.

Or skip shadows and use spacing instead.

6. Too many borders

Borders everywhere create noise.

Fix

Use contrast instead:

Slightly darker background
More spacing
Light shadows

7. Not enough breathing room

If your UI feels cramped, this is why.

Fix

Add more padding than you think you need.

Whitespace = premium.

Quick summary

If your UI looks “off”, fix these:

Spacing
Text hierarchy
Color saturation
Alignment
Shadows
Borders
Whitespace

Small changes → 90% UI problems fixed✅

For 10%, wait for part II

100x Your UI with One Simple Trick

Shashwat Pritish — Fri, 05 Dec 2025 06:40:38 +0000

When it comes to UI, less is often more. Negative spacing—strategic use of empty space—can transform cluttered designs into clean, user-friendly experiences.

Why it works

Focus attention: Users naturally gravitate to what’s important
Create hierarchy: Whitespace separates sections without extra lines or borders
Feel premium: Clean, airy interfaces feel modern and professional

Quick Tips

Increase padding around key elements
Remove buttons, icons, or text that aren’t essential
Let whitespace guide the eye instead of cramming everything in

💡 Negative spacing isn’t “empty”—it’s intentional design breathing room that makes your UI feel effortless.

3 UI Styles for your Next Project

Shashwat Pritish — Wed, 26 Nov 2025 15:17:37 +0000

Modern UI design evolves fast — but some styles stay timeless because they are versatile, beautiful, and easy to implement.

In this post, let’s explore three UI styles you can try in your next project

1. Glassmorphism

Glassmorphism is inspired by frosted glass. It uses blur, transparency, and soft highlights to give elements a floating glass-like appearance.Recently it was made popular by apple

Key Characteristics

Transparency (usually 10–40%)
Background blur
Soft borders with high contrast
Vibrant, layered backgrounds

Use Cases

Dashboards
Cards
Login screens
Widgets overlaying colorful backgrounds

Quick CSS Sample

.glass {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

2. Neumorphism

Neumorphism combines flat design and skeuomorphism. It focuses on soft shadows that create elements that look “pressed” into the background.

Key Characteristics

Same background color as the element
Soft inner & outer shadows
Minimalist look
Smooth, tactile feel

Use Cases

Buttons
Toggles
Cards
Music or utility apps

Quick CSS Sample

.neumorph {
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 
      8px 8px 16px #bebebe,
      -8px -8px 16px #ffffff;
}

3. Claymorphism

A fun, friendly, modern style with thick shadows and rounded shapes.

Key Characteristics

Extra rounded corners
Thick, solid shadows
Bright and playful colors
“Soft toy” look

Use Cases

Landing pages
Avatar cards
Feature blocks
Mobile apps for kids or creative tools

Quick CSS Sample

.clay {
  background: #ffb74d;
  border-radius: 30px;
  box-shadow: 10px 10px 0px #e69a3e;
}

Conclusion

Different UI styles suit different types of apps — and experimenting with them can improve both your creativity and UI skills.

Try mixing them or applying each one in small components to see what fits your project best.

Unlock Better AI Outputs with These 3 Prompt Engineering Secrets

Shashwat Pritish — Mon, 24 Nov 2025 12:39:54 +0000

⭐ 1. Give Context + Goal + Constraints

LLMs perform best when they understand:

Who you are (role)
What you want (goal)
How to behave (constraints)

Example:

“You are a senior React mentor. Explain React Server Components in simple language, in under 150 words, with 1 example.”

⭐ 2. Use Step-by-Step Instructions

Break the task into explicit steps.

Clear steps = predictable, controllable output.

Example:

“Rewrite this code.

Step 1: Explain the issue.

Step 2: Give the corrected version.

Step 3: Provide 2 alternative solutions.”

⭐ 3. Give Examples (Few-Shot Prompting)

Showing the model the structure or style you want dramatically improves results.

Example:

“Write a bug report in this format:

Title: …

Steps to Reproduce: …

Next.JS Authentication with Clerk

Shashwat Pritish — Fri, 21 Nov 2025 15:06:07 +0000

Authentication is usually the most time-consuming part of any app… but it doesn’t have to be.

With Clerk, you can add a fully secure auth system to Next.js (App Router) in minutes — and in this guide, we’ll build a custom Sign-In / Sign-Up UI plus a protected dashboard route.

🚀 What we'll build

🔐 Sign In page (custom UI)
🆕 Sign Up page (custom UI)
🛡 Protected route: /dashboard (only logged-in users can open it)
⚡ Using Clerk hooks (useSignIn, useSignUp, useUser)

1️⃣ Install Clerk in Next.js (App Router)

npm install @clerk/nextjs

In .env.local:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXX

2️⃣ Wrap the app with ClerkProvider — `app/layout.tsx`

import { ClerkProvider } from "@clerk/nextjs";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

3️⃣ Build custom Sign-In page — `app/sign-in/page.tsx`

"use client";
import { useSignIn } from "@clerk/nextjs";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function SignInPage() {
  const { isLoaded, signIn } = useSignIn();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  if (!isLoaded) return null;

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const res = await signIn.create({ identifier: email, password });
    if (res.status === "complete") router.push("/dashboard");
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-sm mx-auto mt-20 flex flex-col gap-3">
      <h2 className="text-2xl font-semibold text-center">Sign In</h2>
      <input className="border px-3 py-2 rounded" placeholder="Email" onChange={e => setEmail(e.target.value)} />
      <input className="border px-3 py-2 rounded" placeholder="Password" type="password" onChange={e => setPassword(e.target.value)} />
      <button className="bg-black text-white py-2 rounded">Continue</button>
    </form>
  );
}

4️⃣ Build custom Sign-Up page — `app/sign-up/page.tsx`

"use client";
import { useSignUp } from "@clerk/nextjs";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function SignUpPage() {
  const { isLoaded, signUp } = useSignUp();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  if (!isLoaded) return null;

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const res = await signUp.create({ emailAddress: email, password });
    if (res.status === "complete") router.push("/dashboard");
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-sm mx-auto mt-20 flex flex-col gap-3">
      <h2 className="text-2xl font-semibold text-center">Create Account</h2>
      <input className="border px-3 py-2 rounded" placeholder="Email" onChange={e => setEmail(e.target.value)} />
      <input className="border px-3 py-2 rounded" placeholder="Password" type="password" onChange={e => setPassword(e.target.value)} />
      <button className="bg-black text-white py-2 rounded">Sign Up</button>
    </form>
  );
}

5️⃣ Create the protected Dashboard route — `app/dashboard/page.tsx`

import { auth, UserButton } from "@clerk/nextjs";

export default function DashboardPage() {
  const { userId } = auth();
  if (!userId) return <div className="text-center mt-20">Unauthorized</div>;

  return (
    <div className="max-w-xl mx-auto mt-20 text-center">
      <UserButton afterSignOutUrl="/" />
      <h1 className="text-3xl font-bold mt-6">Welcome to Dashboard 🎉</h1>
    </div>
  );
}

6️⃣ Protect the route with middleware — `middleware.ts`

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const isProtectedRoute = createRouteMatcher(["/dashboard(.*)"]);

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect();
});

export const config = {
  matcher: ["/((?!_next|.*\\..*).*)"],
};

🎉 Done!

You now have:

🔐 Custom Sign-In page
🆕 Custom Sign-Up page
🛡 Protected Dashboard route
🚫 Automatic access blocking via middleware

Improve Your UI with These 3 Simple Changes

Shashwat Pritish — Fri, 21 Nov 2025 14:07:38 +0000

Ever look at your UI and feel like something's just... off? You've followed the specs, the logic works, but it just doesn't feel good. Chances are, you're falling for a few subtle design traps.

Forget boring theory. Let's fix it. Here are three tiny changes that make a massive impact.

Tip 1: Let It Breathe!

Does your UI feel like a crowded room where everyone's shouting? That's what happens when you don't use enough whitespace. Your content can't breathe, and your users feel stressed trying to find what they need.

The Trap: Jamming elements together or using random margin: 11px; values.

The Magic Fix: Treat empty space as the most important element on the page. Create a simple spacing system and stick to it.

Think of it like this:

8px for small gaps (like between an icon and text).
16px for medium gaps (like separating items in a list).
32px for big gaps (like separating whole sections).

Use these consistently, and your UI will instantly feel more organized, calm, and professional.

Tip 2: Use Color Like a Pro, Not a Rainbow

Remember using every color in the crayon box on a drawing? It was fun, but it was also a mess. The same thing happens in UI. When every element is a different color, nothing stands out.

The Trap: Using a bunch of colors because you can. Your "Sign Up" button is blue, your "Learn More" is green, your nav bar is orange... Help!

The Magic Fix: The 60-30-10 rule. It’s a secret recipe for perfect color balance.

60% of your UI should be your main, neutral color (like a light gray or white).
30% should be your secondary color, adding some personality.
10% is your HERO color. This is your accent, your star player. Use it only for the most important things, like your main call-to-action button.

This tells your user's brain exactly where to look.

Tip 3: Soften Up! (Lose the Sharp Edges)

Think about the real world. Very few things have perfect, razor-sharp 90-degree corners. Our brains are wired to see rounded shapes as safer and more friendly.

The Trap: Every button, card, and input field is a perfect, sharp rectangle. It can make your whole site feel a bit... aggressive and dated.

The Magic Fix: A tiny border-radius. Seriously, that's it.
You don't need giant, bubbly circles. Just a little softness goes a long way.

.button {
  /* Just a touch of friendliness */
  border-radius: 6px;
}

It’s a simple change that makes your entire interface feel more modern and approachable. It’s like saying "Hey, come on in!" instead of "DO NOT TRESPASS."

You're Not Just a Coder, You're a Designer

See? No complex theory needed. By giving your layout space, using color with purpose, and softening your corners, you're already thinking like a designer. Try these out—your users (and your eyes) will thank you.