Intro
I often get paralyzed deciding how to build ui elements and what to include.
So I’ve gone down a rabbit hole collecting some of the different patterns, elements, and features that designers implement.
Hot stuff
Reasonable effort-Impressiveness ratio:
- Scroll-triggered staggered reveals on your project grid
- Image-on-hover for project titles/links
- One section of large, confident display typography
- Smooth page transitions between project case studies
- A bento-style grid for your work
These are all well-documented patterns with libraries (GSAP, Framer Motion, AOS) that make them approachable as a dev.
The Mindset and Thought Process
Designers have a process, sometimes it’s not deliberate but it’s still a process.
They pull from a mentallibrary of elements that they’ve accumulated from being exposed to so many designs across various media formats.
The logic often boils down to key factors that need to be considered.
Content density
How much do you have to show?
- Lots of content items like several projects to be filtered or in a grid
- Select few items need to be featured in detail, this compliments case studies well
Narrative vs. browsing
Is the purpose to tell a story or explore the content?
Story and Narrative
Implement single scroll and sections that are revealed in sequence
Exploration
Grids, cards, and navigation elements.
Signal of craft
Elements that showcase attention to detail subtly.
These include but not limited to:
- Smooth transitions
- Micro-interactions
- Unexpected but coherent layout choices
Library and Mental Map
Layout Patterns
Single Scroll
A section fills an entire view-port’s area, scroll jumps / snaps to move between them. Can invoke a cinematic feel.
Asymmetric Grids
Content is asymmetrical, and off-center. Makes it feel editorial.
Bento Grid
A bento grid is a set of cards of varying sizes in a tight grid (popularized by Apple). Great for showing varied work types.
My favorite example is Manish Basargekar’s website
Horizontal Scroll
Make the page vertical by hijacking mouse scroll and move the page horizontal. Can be applied to sections and divs instead of the whole page.
Project / Work / Display
- Featured + grid: one or two hero projects big, rest in a smaller grid below // I like this should do
- Filterable grid: tag-based filtering with smooth reflow animation
- Case study teasers: cards that show just enough (title, a visual, one line of context) to make you want to click
Interaction & motion
- Scroll-linked animation: Elements fade/slide/scale as you scroll into them. All about how subtle you implement them
- Magnetic hover effects: This refers to buttons or elements that subtly pull toward the cursor
- Image reveal on hover: hover a project title, an image fades in. I see this a lot, it’s a classic
- Page transitions: animate the page change using smooth wipes or fades
- Staggered list reveals: list items animate in one after another on load
Typography
- Large Display Text: texts like names, roles, skills, etc that are standouts, scaled out to almost ridiculous sizes
- Kinetic or Animated Text: words that cycle through a set once per interval
- Outline / Stroke Text: stands out when paired with regular filled text and adds contrast without changing the color
Subtle and Impressive Details
- Custom cursors
- Noise/grain, gradients, and patterns in the background (bonus if animated patters)
- Light / Dark Mode toggles
- Scroll progress slider
Showcasing Projects
..
About and Bio Sections
I really struggle with these, and are my main gripe with my website. They’re hard to nail, since they’re very personal.
Unlike project showcases that are very practical and can be done with a purpose-driven approach, About sections aren’t super structured.
Suggested Layouts
- Split screen: left side is a fixed/sticky image or portrait, right side scrolls through your content. Invokes an editorial feeling and persistent presence.
- Full-width text-first, image secondary: leads with a big bold statement about who you are, image is smaller and off to the side or below. Puts voice before face.
- Stacked with a big pull quote: instead of prose, one large statement (Ex: “I build things that make staring at a screen less daunting…”) dominates, with supporting detail beneath. Massive confident energy.
- Two-column asymmetric: a narrow column with quick facts/stats, a wider column with the actual prose. Breaks the monotony of single-column text.
Content Suggestion
- Quick Facts: a sidebar or strip (tall card basically) that houses: Years of XP, location, current role, etc.
- Current Status Indicator: small element with some live effect to show what you’re currently up to.
- Numbers/stats: Even modest numbers add some context to your experiences and break the text heavy rhythm of this section. Ex: “5 years, 30+ projects, 3 countries.”
- Tabbed content: A single div/container with tabs switch between them in place. Reduces visual length, adds interaction. // I really like this
Design Elements
- Parallax on the image: On scroll the image moves at a different rate than the text.
- Text highlighting on scroll: each sentence or clause highlights/bolds as it enters the viewport, like an autocue. A clever trick that makes people read it.
- Image that reacts to section: one image that crossfades or transitions depending on which sub-section (Work, Interests) is active.
- Hover reveals on interests: list your interests as plain text, hover one and an image or short descriptor fades in nearby. Playful and compact.