Visual Design Elements

💎 Accessibility For Designers Checklist (PDF: https://lnkd.in/e9Z2G2kF), a practical set of cards on WCAG accessibility guidelines, from accessible color, typography, animations, media, layout and development — to kick-off accessibility conversations early on. Kindly put together by Geri Reid. WCAG for Designers Checklist, by Geri Reid Article: https://lnkd.in/ef8-Yy9E PDF: https://lnkd.in/e9Z2G2kF WCAG 2.2 Guidelines: https://lnkd.in/eYmzrNh7 Accessibility isn’t about compliance. It’s not about ticking off checkboxes. And it’s not about plugging in accessibility overlays or AI engines either. It’s about *designing* with a wide range of people in mind — from the very start, independent of their skills and preferences. In my experience, the most impactful way to embed accessibility in your work is to bring a handful of people with different needs early into design process and usability testing. It’s making these test sessions accessible to the entire team, and showing real impact of design and code on real people using a real product. Teams usually don’t get time to work on features which don’t have a clear business case. But no manager really wants to be seen publicly ignoring their prospect customers. Visualize accessibility to everyone on the team and try to make an argument about potential reach and potential income. Don’t ask for big commitments: embed accessibility in your work by default. Account for accessibility needs in your estimates. Create accessibility tickets and flag accessibility issues. Don’t mistake smiling and nodding for support — establish timelines, roles, specifics, objectives. And most importantly: measure the impact of your work by repeatedly conducting accessibility testing with real people. Build a strong before/after case to show the change that the team has enabled and contributed to, and celebrate small and big accessibility wins. It might not sound like much, but it can start changing the culture faster than you think. Useful resources: Giving A Damn About Accessibility, by Sheri Byrne-Haber (disabled) https://lnkd.in/eCeFutuJ Accessibility For Designers: Where Do I Start?, by Stéphanie Walter https://lnkd.in/ecG5qASY Web Accessibility In Plain Language (Free Book), by Charlie Triplett https://lnkd.in/e2AMAwyt Building Accessibility Research Practices, by Maya Alvarado https://lnkd.in/eq_3zSPJ How To Build A Strong Case For Accessibility, ↳ https://lnkd.in/ehGivAdY, by 🦞 Todd Libby ↳ https://lnkd.in/eC4jehMX, by Yichan Wang #ux #accessibility

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

Sensory Architecture: A Journey Through the Senses A client approached us with the vision of creating a wellness retreat that transcended the conventional. As with all our projects, we began with Land Studies, exploring its natural systems and understanding that the users were not the only guests but also the flora, fauna, and ecosystems of the place. This research led us to question: What if architecture did not only adapt to nature but co-created with it? More than a physical space, a wellness retreat is an experience. Designing in harmony with nature means creating a living, responsive architecture that interacts with its surroundings and strengthens the connection between people and the natural world. To achieve this, we studied light, sound, wind, vegetation, temperature, smells, and the metaphysical features of the site, asking key questions like: How can sensory experiences promote healing? Each site visit revealed new aspects, allowing us to map natural rhythms—light movement, wind patterns, biodiversity, influenced by the time of day and the season of the year. Studying the senses can seem overwhelming due to their subjective nature, so it was essential to understand how to measure and quantify the effects of these sensory elements on well-being. •⁠ ⁠Sight and Light: Light, essential for visual perception, influences emotions and biological rhythms. Orange light (582-620 nm) stimulates vitality, while blue light enhances concentration but can disrupt sleep. Based on these effects, one can design lighting strategies that respond to the physical and emotional needs of users at different times of the day. •⁠ ⁠Sound and Frequencies: Sound travels in waves and affects mood. Low frequencies induce relaxation, while high frequencies create alertness. Mapping natural sounds—wind, water, birds—allows us to define zones of tranquility and areas with greater sensory stimulation.  - Touch and Textures: Tactile perception involves pressure, temperature, and texture. Smooth wooden surfaces convey warmth, while rough stone evokes stability. By analyzing local materials, we design spaces that foster relaxation and a connection with nature through touch. •⁠ ⁠Smell: Smell is linked to the limbic system, influencing emotions and memories. We identified natural fragrances—like citrus & wood—to integrate them into architecture and enhance well-being. For example, we aim to design an experience where guests wake up to the invigorating scent of citrus, promoting energy and alertness, and wind down at night with the calming aroma of lavender, encouraging restful sleep. To bring this vision to life, we are working with experts from various disciplines, focusing on ecology, environmental conservation, neuroscience, and the use of local materials and construction techniques. Sensory architecture transforms design into a living organism that breathes, listens, and responds.

𝐘𝐨𝐮’𝐫𝐞 𝐬𝐞𝐞𝐢𝐧𝐠 𝐚 𝐜𝐨𝐥𝐨𝐫 𝐭𝐡𝐚𝐭 𝐢𝐬𝐧’𝐭 𝐭𝐡𝐞𝐫𝐞. 𝐀𝐧𝐝 𝐭𝐡𝐚𝐭’𝐬 𝐭𝐡𝐞 𝐩𝐨𝐢𝐧𝐭. At first glance, this image seems to contain red. It doesn’t. Not a single red pixel exists. The image is composed entirely of blue, black, and white. So why do so many of us confidently perceive red? Because human vision isn’t a passive camera. It’s a prediction engine. Your visual system doesn’t process color in isolation. It continuously integrates 𝐜𝐨𝐧𝐭𝐫𝐚𝐬𝐭, 𝐬𝐩𝐚𝐭𝐢𝐚𝐥 𝐜𝐨𝐧𝐭𝐞𝐱𝐭, 𝐩𝐫𝐢𝐨𝐫 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞, 𝐚𝐧𝐝 𝐥𝐞𝐚𝐫𝐧𝐞𝐝 𝐩𝐚𝐭𝐭𝐞𝐫𝐧𝐬. When certain luminance relationships and textures align, the brain infers the most likely explanation based on past exposure, then fills in the gaps automatically. This process is known as 𝐜𝐨𝐧𝐭𝐞𝐱𝐭-𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐭 𝐩𝐞𝐫𝐜𝐞𝐩𝐭𝐢𝐨𝐧. It’s efficient. It’s adaptive. And sometimes, it’s wrong. Neuroscientifically speaking, perception is less about what enters the eyes and more about what the brain expects to see. Sensory input is just one ingredient; interpretation does the heavy lifting. The takeaway goes beyond optical illusions. In work, leadership, and decision-making, we often believe we’re responding to “objective reality.” In truth, we’re responding to 𝐢𝐧𝐭𝐞𝐫𝐧𝐚𝐥𝐥𝐲 𝐜𝐨𝐧𝐬𝐭𝐫𝐮𝐜𝐭𝐞𝐝 𝐦𝐨𝐝𝐞𝐥𝐬 shaped by assumptions, experience, and bias. What feels obvious isn’t always accurate. What feels real isn’t always present. Before reacting, deciding, or judging: pause and ask: Am I seeing what’s there …. or what my brain expects to see?

Playful Visuals: The secret sauce of viral brands. Your customers will lose interest on your product if you communicate through dry, instructional visuals and static product presentations. But what if discovering a product felt as engaging and delightful as playing on a playground? +60,000x faster – Visuals are processed far more quickly than text. +2x more likely to be shared – Playful content spreads faster. +48% higher engagement – Gamified experiences captivate audiences. >>Your Product is an Experience<< Play evokes joy and triggers dopamine release, enhancing memory, motivation, and emotional connection. When beauty products are presented in a fun and interactive way, they transform from simple cosmetics into immersive self-care rituals. Imagine a vibrant scene: a user’s hands gleefully applying a rich, textured cream, colors swirling in motion, a splash of shimmer catching the light. The product is no longer just a cosmetic; it’s an invitation to creativity, emotion, and self-expression. This visual storytelling captivates the imagination, making beauty routines feel effortless and exciting. + 23% better recall – Learning by doing beats passive learning. + 89% engagement boost – Game-like elements keep users invested. + 22 x stronger memory retention – Story-driven visuals leave lasting impressions. → Hands: The Ultimate Storytellers. Hands express personality, movement, and playfulness, making them powerful tools in beauty marketing. + Hands delicately blending makeup create a sense of artistry and skill. + A playful splash of cream on the skin conveys freedom and fun. + Interactive gestures, swiping, dabbing, or mixing, draw viewers into the experience. By showcasing hands in action, brands create an instant connection between the product and the consumer, making beauty feel tangible, inviting, and alive. + 5% retention – Of what we hear. + 10% retention – Of what we read. + 75% retention – Of what we practice. → Visual Playfulness Sparks Curiosity Don’t be afraid to infuse whimsy into your beauty visuals. + Stop-motion animations can make beauty products come to life. + Bold, colorful visuals grab attention and inspire experimentation. + Gamification, badges, challenges, interactive features, creates excitement. + Humor, memes, and quirky animations make brands feel approachable. + Community engagement through challenges, stickers, and shared content. Final thoughts. Playful visual communication isn’t just about fun, it’s a strategic tool for engagement, brand loyalty, and virality. Whether through dynamic animations, interactive design, or immersive storytelling, beauty brands that encourage customers to play, experiment, and explore are the ones that stand out. Find my curated search of examples and get inspired for your next Hit. Featured Brands: Belif BigLip From This Island Glossier Glowery Ksuu Laniege Purpur Quick beauty Rhode Sundae Vaay #beautybusiness #beautyprofessionals #beautycommunication #beautymarketing

Designer Wraps, Consumer Traps. Ever found yourself drawn to a luxury brand, or catching yourself judging a product purely by its packaging? If so, Wheat is Wheat is Wheat by Peddy Mergui is likely to change how you see the shelf next time you shop. Packaging has an extraordinary ability to shape how we value things, often before we realise it's happening. Long before a label is read or a price is compared, a judgement has already formed, nudged into place by visual cues rather than rational thought. That's exactly what Mergui sets out to examine. The exhibition takes everyday staples and dresses them in the visual language of luxury. Flour appears wrapped like Prada, eggs are branded by Versace, baby formula wears Gucci. The contents stay the same, yet perception shifts instantly. The contrast is deliberate. Nothing about the product changes, but its perceived value does. The work lands because it exposes something the industry rarely says out loud. Perception is not an extra layer applied to a product. It's the engine behind the entire read. Design codes begin shaping meaning long before a word is read. Finish, typography, colour and balance all carry signals that guide interpretation. Matte surfaces suggest premium. Serif typography leans on heritage. Gold accents imply worth. Together they form a visual language that works faster than conscious thought. Behavioural science backs this. Research shows that colour, texture and typography influence how we judge quality, price and even taste. Metallic tones are linked with craftsmanship. Lighter palettes suggest purity. Balanced layouts signal trust. These stories form quickly, often without us noticing. Mergui amplifies that mechanism by making it impossible to ignore. His work visualises the halo effect, where a single strong cue shapes overall judgement. When flour carries a luxury logo, the prestige transfers automatically, driven by instinct rather than logic. That's where the tension sits. Packaging does far more than protect or inform. Identity, aspiration and belonging sit at the heart of its influence, using the same shortcuts luxury branding has perfected for decades. Everyday products become desirable not because they've changed, but because their wrapper has. Wheat is Wheat is Wheat holds up a mirror to that system. It shows how easily meaning outweighs material, and how narrow the line can be between persuasion and manipulation. Next time a beautifully designed pack catches your eye, it might be worth asking whether you are choosing the product, or the story wrapped around it. Wheat is still wheat. Design just knows how to dress it. 📷Peddy Mergui

Happy Global Accessibility Awareness Day everyone! It's a great day to remind people, that, accessibility is the responsibility of the whole team, including designers! A couple of things designers can do: - Use sufficient color contrast (text + UI elements) and don’t rely on color alone to convey meaning. - Ensure readable typography: support text resizing, avoid hard-to-read styles, maintain hierarchy. - Make links and buttons clear and distinguishable (label, size, states). - Design accessible forms: clear labels, error help, no duplicate input, document states. - Support keyboard navigation: tab order, skip links, focus indicators, keyboard interaction. - Structure content with headings and landmarks: use proper H1–Hn, semantic order, regions. - Provide text alternatives for images, icons, audio, and video. - Avoid motion triggers: respect reduced motion settings, allow pause on auto-play. - Design with flexibility: support orientation change, allow text selection, avoid fixed-height elements. - Document accessibly and communicate: annotate designs, collaborate with devs, QA, and content teams. Need to learn more? I got a couple of resources on my blog: - A Designer’s Guide to Documenting Accessibility & User Interactions: https://lnkd.in/eUh8Jvvn - How to check and document design accessibility in your mockups: a conference on how to use Figma plugins and annotation kits to shift accessibility left https://lnkd.in/eu8YuWyF - Accessibility for designer: where do I start? Articles, resources, checklists, tools, plugins, and books to design accessible products https://lnkd.in/ejeC_QpH - Neurodiversity and UX: Essential Resources for Cognitive Accessibility, Guidelines to understand and design for Dyslexia, Dyscalculia, Autism and ADHD https://lnkd.in/efXaRwgF - Color accessibility: tools and resources to help you design inclusive products https://lnkd.in/dRrwFJ5 #Accessibility #ShiftLeft #GAAD

The way colors interact with each other can make or break your brand’s perception. Yet, it’s one of the most overlooked aspects of branding. Many brands fall into the trap of relying on broad, generalized meanings for colors, like red for passion or blue for trust. ↓↓↓ While these are helpful, they aren’t the FULL story. The real power lies in how colors interact with each other within a palette. For instance, vibrant red and green appeal to the holidays, but pair that same red with deeper, muted reds, and you get a luxurious vibe. Hot pink might feel fun or feminine on its own, but combine it with black, and it suddenly exudes confidence and bold energy. The interplay of hues can subtly shift how customers emotionally connect with your brand. But don’t overlook trends either! Take Pantone’s recent Color of the Year, Mocha Mousse. While it might initially seem bland, its ties to sustainability make it a valuable accent for eco-conscious brands. I used it strategically for a high-end chocolate brand, not as the main color, but as an accent. Combined with richer hues, it told a deeper story about sustainable production and high-quality craft, steering away from overused color palettes in the industry. 💡 What’s the key takeaway? Your brand is more than JUST a color. Color is one of the first forms of communication. And how those colors interact, tell a story, and connect emotionally with your audience. Look at how your hues interact across visuals, packaging, and marketing touchpoints. Subtle shifts in contrast or tone can make a big difference in how your audience connects emotionally. Always test your palette as a whole. One approach I love to use when designing brand identities comes from the principles of Joseph Albers, who studied how our brains perceive colors differently depending on their surroundings. For brands, testing how your colors interact with one another is vital. These combinations tell a story about your brand’s tone, energy, and message. Which colors are driving your brand today? Have you considered what story they are telling? #LIpostingdayJune

There’s something almost magical about watching an idea come alive on a big board or wall. I first experienced this in a workshop many years ago, when instead of PowerPoint slides and endless talking, a facilitator picked up a pen and began sketching what we were saying. Within minutes, the noise in the room turned into clarity. Arguments softened. Ideas grew. Patterns emerged. Suddenly, we weren’t just talking at each other, we were thinking together. That’s the power of graphical facilitation. I've found that visuals create shared understanding. When people see their ideas drawn out, it feels tangible, real, and owned. Visuals cut through complexity. A messy conversation can be captured into a simple diagram that shows how the pieces fit together. Visuals open space for creativity. They invite people to build, adapt, and challenge without getting lost in jargon. It’s not about art. Stick figures and simple shapes are enough. It’s about capturing meaning, making the invisible visible. Here’s where leadership comes in. Graphical facilitation is really powerful when you combine it with the right questions. imagine a leader asking: “What does success look like for us?” and the group sketch the answers into a shared picture. “Where are the bottlenecks in our system?” and mapping them visually with the team. “If this project were a journey, where are we on the map?” and drawing a road with milestones. "What do our customers really experience?" and mapping out the end to end customer journey. This simple combination does something slides never can: it invites people in. It shows them their voice matters, that leadership is not about having the answer but creating the conditions for the best answers to emerge. Try this to get started...: 1. Grab a flipchart or whiteboard. The bigger, the better. 2. Frame a powerful question. Something open, generative, and focused on possibilities. 3. Draw as you listen. Use arrows, boxes, circles, stick people nothing fancy. Capture the flow of ideas. 4. Step back together. Ask: “What do we notice?” or “What stands out?” This is where new insights often spark. 5. Co-create the next step. The group’s picture becomes the group’s plan. In times of complexity, speed, and change, leaders can no longer rely on being the person with the answer. The role has shifted: leaders must become facilitators of thinking, collaboration, and creativity. Graphical facilitation is a leadership skill for the future. It's a way to make ideas visible, align people quickly, and engage teams in solving problems together. And here’s the truth: once people have seen their ideas come to life on the wall, they rarely forget it. It creates ownership, energy, and momentum that words alone can’t achieve. If you want better collaboration, don’t just talk at your team. Draw with them. Ask the right questions. Sketch the answers. Make the invisible visible. You’ll be surprised at what emerges when the pens are in play!

Here's something that surprises people: WCAG has no minimum font size requirements. Your site could use 8px text and still technically pass accessibility standards. But real users with low vision? They're struggling to read anything on your site. "But users can just zoom in or resize text in their browser," you might think. Sure, they can. But most people don't know that's even an option. And even if they do, why should we make them work harder to access basic content? This is exactly why compliance ≠ accessibility. I see this gap all the time when working with teams. They'll run automated scans, fix the flagged issues, and think they're done. But accessibility isn't just about passing tests – it's about real people having real experiences with your content. The best accessible sites go beyond technical requirements. They ask: "Can someone actually use this?" Not just "Does this validate?" Some other compliance gaps I see regularly: • Keyboard navigation that technically works but feels clunky or confusing • Alt text that describes images but misses the context or purpose • Color contrast that meets ratios but still feels hard to read in real conditions • Forms that are properly labeled but have unclear error messages True accessibility happens when we design for humans, not just validators. What compliance gaps have you noticed in your work? I'm curious what patterns others are seeing out there. #Accessibility