Visual Hierarchy in Layout Design

In my former life, I was a graphic designer. I spent years obsessing over layouts, grids, color palettes, and the tiny details that make a design feel right. When I moved into learning design, I realized those same skills gave me an edge. The PARC principles I had been using for years—Proximity, Alignment, Repetition, and Contrast—translated perfectly into creating clearer, more engaging learning experiences. Proximity Group related content so learners instantly understand what belongs together. Alignment Position elements with purpose. Consistency in placement makes content easier to follow and trust. Repetition Repeat visual cues like colors, fonts, and layouts. Predictability helps learners focus on the message instead of figuring out the interface. Contrast Highlight what matters most. Use size, color, and whitespace to create a clear visual hierarchy. This simple system works in both worlds—graphic design and learning design—because it’s all about reducing friction, improving clarity, and guiding attention. What principles have you borrowed from another field that’s improved the way you create learning experiences?

Many junior website portfolios fail because of this: (To be clear: I'm referring to websites not slide decks) They read like internal documentation: Sticky notes Personas Wireframes Excessive paragraphs They explain the the entire process. But they forget to sell the work. Senior portfolios? They feel like product marketing. Quick to scan. Heavy on outcomes. Sharp visuals. Clear business value. You don’t need 2,000 words. You need 5 seconds of clarity. Here’s what senior-level portfolios do differently: 1/ Start with the result Don’t make them dig to find impact 2/ Lead with visuals Show the solution before the process 3/ Skip the fluff Only explain what influenced the final result 4/ Make it glanceable Use spacing, hierarchy, and clean formatting 5/ Treat it like a pitch Not a research archive Want to stand out fast? Design your portfolio like you design a product. Consider the actual user. Use clarity, structure, outcomes. That’s what makes people want to talk to you.

An important dimension of learning design is communication through the elements on the slide, screen, and page—the images, text, and graphic space. The arrangement of these elements transmits a secondary message through its visual hierarchy. A visual hierarchy establishes the relative importance of each object on display. It controls where a viewer looks first, second, and third. Step back and determine what is most important for the learner or viewer to see first, second, and third. Then use one or more of these strategies to establish a visual hierarchy. 1) Use size to emphasize the most important element first. Larger sized elements draw attention. Save the smaller elements for lower levels of the hierarchy. 2) Use bright and vivid colors at the top of the visual hierarchy and more muted colors for the second and third levels. 3) Position on the screen affects hierarchy. People who read from left to right enter a screen or page at the upper left, making it prime real estate. 4) Users typically follow a Z-shaped reading pattern (for simpler layouts) or F-shaped pattern (for text-heavy pages), so place key elements along one of these paths to maximize visual impact. 5) Use high-contrast colors, shapes, or textures to grab attention and create a focal point at the top of the hierarchy. 6) Use white space to isolate and highlight important elements to create a visual hierarchy. 7) Use leading lines and arrows to guide the viewer's eye to key visual elements. Tomorrow: Establishing a Typographical Hierarchy

Typography is more than just picking fonts—it can shape how people read, understand, and feel about your content. Great typography creates hierarchy, clarity, and emotion—but here’s the twist: Sometimes breaking the rules leads to powerful, impactful designs. Here are the typography rules designers should (usually) follow—and when breaking them can elevate your work: 1️⃣ Limit your typeface variety. Too many typefaces makes a design feel disjointed. It's better to stick with 2 to *occasionally* 3 fonts and, instead of additional typefaces, using font weight, size, and style to broaden your typographic hierarchy without losing cohesion. TIP: Pairing a serif with a sans-serif gives you a lot of potential for contrast. When needed, your third typeface should be a display font used sparingly for headlines. 2️⃣ Prioritize legibility. Ornate fonts might look cool, but you lose readability. If your audience has to squint or guess, then they probably won’t bother trying. Instead, focus on nailing down your line height, kerning, and contrast to maximize readability across devices. TIP: Be sure to test legibility on smaller screens—mobile users make up the majority of most audiences. 3️⃣ Build clear hierarchies. The idea behind typography is to guide the reader’s attention through the content in order of importance. By adjusting size, weight, and spacing, we can create areas of emphasis to highlight what’s important or create a flow. Headline > subhead > body: Each level distinct yet cohesive. NOTE: Your hierarchy needs to work even when someone scans the page in 5 seconds. All that said, here are some examples of when it's okay to break the rules: 1️⃣ Grabbing attention. • Bold, oversized headers or unexpected type choices are meant to stop users mid-scroll. • Exaggerated letter spacing or massive font sizes for a single word or phrase establishes a clear visual anchor. 2️⃣ To provoke or disrupt. • When the goal is to challenge conventions (e.g., brutalist or experimental design), bending or breaking the rules becomes part of the message. • Think of designs where text overlaps, breaks grids, or feels intentionally chaotic—it’s about creating emotion, not perfection. 3️⃣ Enhancing usability. • Breaking typography conventions is sometimes necessary to make a design accessible—like using larger fonts for users with low vision or higher contrast ratios to improve readability for all users. Typography isn’t just decoration—it’s communication. Before you break a rule, you should understand why it exists so you're breaking them with purpose, leading to greater impact. What’s one typography rule you always follow—or love to break? 🤔👇 #typography #designthinking #graphicdesign #uxdesign #creativity ---------------- 👋 Hi, I’m Dane—sharing daily design tools & tips. ❤️ Found this helpful? 'Like’ it to spread the word. 🔄 Share to help others (& to keep for later). ➕ Want more? Follow me for daily insights.

Stop treating design case studies like documentation. Start treating them like movies. The best design case studies I've reviewed follow a visual-first narrative: - Start with the money shot: Show the final product in context, hero images that make an impact - Set the scene: Visual problem statement showing the before state - Build tension: Key challenges visualized through early explorations - Show the journey: Process shots that highlight pivotal decisions - Reveal the payoff: Results and impact through before/after comparisons Keep text minimal. Let visuals do 80% of the storytelling. Your portfolio should feel like a gallery walk, not a reading assignment. For early-career designers: - Document everything while designing - Capture work-in-progress screenshots - Take photos of whiteboard sessions - Record user testing sessions A great case study shows the story of change - from chaos to clarity, from problem to solution. Make that transformation visible.

Principle 7: Create a Visual Hierarchy This is the seventh in a series of 24 principles we use at Hatch Duo to craft visually compelling, timeless products. Visual hierarchy organizes a product’s elements to guide attention, clarify actions, and create an intuitive first impression. Visual Hierarchy Matters Hierarchy defines focus and flow: - Color draws the eye to key actions or logos - Form and scale highlight controls over passive surfaces - Subtle textures or tones can separate primary and secondary elements - Lack of hierarchy makes products feel confusing, busy, or unrefined Strong hierarchy creates clarity. Users know where to look, what to touch, and how to trust the object. Hierarchy Enhances Usability and Brand Recognition - Important actions feel obvious and inviting - Branding feels purposeful, not intrusive - Surfaces feel organized, not cluttered - Clear flow builds product confidence and brand recall Visual Hierarchy in Practice Products that master hierarchy balance boldness with subtlety: - Pixel Buds use a small pop of color on the touch surface for intuitive control - Teenage Engineering’s OP-1 uses color-coded knobs and a clean layout to guide interaction - Logitech POP Keys highlights interactive zones with playful color contrast and emoji buttons Good hierarchy isn’t loud, it’s confident, clean, and deliberate. Applying Hierarchy with Purpose Highlight with Form and Contrast: → Elevate key features by adjusting size, shape, or color saturation Subdue Secondary Elements: → Use muted tones, minimal detailing, or simple geometry for less important areas Guide the User's Eye: → Lead attention naturally from primary to secondary zones through visual weight Maintain Consistency Across Touchpoints: → Apply the same rules across every view, surface, and interaction Hierarchy shapes how users experience a product without needing instructions. When crafted with care, it builds trust, improves usability, and elevates a product’s presence in every environment. This is just one of 24 principles we use at Hatch Duo to craft elegant aesthetics in physical product design. Stay tuned for the next principle in our Aesthetic Principles Series. #design #visualhierarchy #industrialdesign #hatchduo #productdesign

Your email design isn't about looking pretty. It's about making money. Here's what most brands get wrong: They focus on: - Fancy templates - Complex layouts - Flashy graphics While ignoring what actually drives clicks: - Clear hierarchy (eyes follow value) - White space (makes key points pop) - Mobile-first design (85% of emails are opened on phones) Think about your own inbox: When was the last time you clicked a cluttered email? The brands crushing it do this instead: - One clear message - One clear CTA - One clear path for the eyes to follow Because great email design isn't about winning awards. It's about winning clicks. Easy test: If you can't scan your email in 3 seconds and know exactly what it's about, It's too complicated. Remember: Beautiful emails don't convert. Clear emails do.

Email design isn't just about aesthetics—it's about driving results. In today's cluttered inbox, your email needs to do more than just look good. It needs to convert subscribers into customers. Let's break down what makes a modern email template truly effective... RESPONSIVE DESIGN The majority of email opens happen on mobile devices, which means your email must look good and function seamlessly across all screen sizes. Choose templates that resize well, use fonts that are easy to read, and make buttons large enough to tap without frustration. A poor mobile experience leads to unsubscribes and missed opportunities. A SIMPLE, SCANNABLE LAYOUT Your audience isn't reading every word—they're scanning for key information. Use a single-column layout, plenty of white space, and clear section headings. Break up long blocks of text into short paragraphs or bulleted/numbered lists to make them easier to consume. Reducing cognitive load always increases conversions. A STRONG CALL-TO-ACTION Your CTA is the star of the show—it's what drives clicks and conversions. Use a button for your CTA, placed prominently above the fold and repeated at the end. Choose action-oriented language like "Shop Now" or "Get Started" –– and use size and color to direct the reader's attention. A CLEAR VISUAL HIERARCHY Good design tells the reader where to look first, second, and third. Use bold headlines, bright colors, and strategically placed images to guide the reader's eye to the most important content first. The decision between "I'll read this" and "Archive it" happens in a matter of seconds. Having a strong visual hierarchy maximizes your chances of getting read, not ignored. BALANCED AESTHETICS AND FUNCTIONALITY While beauty matters, functionality should always take precedence. After all, design awards don't pay the bills –– purchases do. Test your emails across multiple devices and email clients to make sure they're looking good and functioning properly. Creativity is great, but if it comes at the expense of functionality, you're going to regret choosing cleverness over clarity. The best email designs marry form and function to deliver outstanding results. Run every email through this checklist before you click "Publish," and you'll make sure they don't just catch the eye of subscribers, but also drive engagement and boost conversions. Need help? Drop me a comment or a DM.

Your email design needs to be C.R.A.P (and it’s not what you think it is… 👀) Does this mean your emails need to be intentionally hard to look at? No, of course not! It means that when designing emails which have generated nearly $40M in revenue for our clients so far, we follow a simple framework to generate high clickthrough rates, and a great customer experience. So how does it work? We break email design down into four core categories: C - Contrast - This means using different colours & sections to help your customer scan or read the email easily and understand your message. R - Repetition - Have more than one button to click and ~2 core sections to create similarity. A - Alignment - Centre-align your emails - copy & design elements, and you will guide the reader towards a button they can click far easier. P - Proximity - Space elements out so they can be read far easier. If you cram too much in, it fatigues the eyes and leads to them clicking away. Below is a great example of how we re-designed an email using these principles, and had the following results with a weaker offer! Clickthrough Rate: 5% → 12% Placed Order Rate: 4% → 9% Even with less of a discount, the framework just works. Hope you enjoyed, and stay C.R.A.P.P.Y out there 😉

Here’s my hot take on #portfolios: we need to stop telling designers to focus on showcasing their process over their final concept. Of course demonstrating your design process is important - but in this job market, strong key visuals are crucial to getting hired. Having reviewed quite a few portfolios recently, I’ve noticed that this final polish is something a lot of designers, especially students or new grads, really struggle with. So here are some tips that might help - 1. Use High-Quality Photography: Engaging, high-definition photos can instantly elevate your UI. There are fantastic, free photo resources (my favourite is the Unsplash plugin in Figma) that will bring so much brightness and professionalism to your work. Just make sure the photos generally complement your color palette. 2. Choose a Cohesive Color Palette: Following on from my last point, try to avoid using too many different colors. I recommend sticking to three main color groups: off-blacks for text, off-whites for backgrounds, and one accent color for buttons, links, gradients etc. Bright, vibrant tones make your work pop on screen, so steer clear of dull colors that are better suited for print. 3. Play with Drop Shadows and Gradients: Light drop shadows and subtle gradients can give a UI a fresh, modern feel. Just make sure not to overdo it! Keep it simple with linear gradients and light, blurred shadows for a clean finish. 4. Create Visual Hierarchy: Avoid making every element in your UI the same size and color. Step back and consider what information you want users to notice first. In the example below, I guide the user's attention to the hero image first, then key details like the product name and price, then finally to additional information. Highlight important details and separate them visually using tags, icons and buttons. 5. Embrace Negative Space: Give elements room to breathe! Remember, users can scroll or click for more—there’s no need to fit everything into one screen. Add padding between elements and avoid large background blocks of flat color. You'll see the difference straight away! These are tips I’ve gathered throughout my career that have helped me land exciting projects. But ultimately, design is totally subjective and your portfolio should represent you as a designer. So take these tips with a grain of salt and trust your instincts! #productdesigner #portfoliotips