Many design leaders find themselves in an impossible situation. On one side, senior management have read articles trumpeting the incredible ROI of user experience design. McKinsey tells us that design-led companies achieve 56% higher returns to shareholders. Forrester reports that every dollar invested in UX brings 100 dollars in return.Yet the reality I encounter when talking to design leaders is very different. Most are desperately under-resourced, with tiny teams expected to support hundreds of projects across their organizations. The result? Were spread so thin that we can barely scratch the surface of what needs doing.The problem isnt just about resources. Its about expectations and how we define our role. Too often, we position ourselves (or are positioned by others) as implementors the people who do the user research, create the prototypes, and run the usability tests. But with the scale of digital touching every corner of our organizations, thats simply not sustainable.Time For A New ApproachWe need to stop trying to do everything ourselves and instead focus on empowering others across the organization to improve the user experience. In other words, we need to become true leaders rather than just practitioners.This isnt about giving up control or lowering standards. Its about maximizing our impact by working through others. Think about it: would you rather be directly involved in 10% of projects or have some influence over 90% of them?What Does This Look Like In Practice?First, we need to shift our mindset from doing to enabling. This means:Offering targeted services rather than trying to be involved in everything;Providing coaching and mentoring to help others understand UX principles;Creating resources that empower others to make better UX decisions;Setting standards and guidelines that can scale across the organization.Lets break down each of these areas.Targeted ServicesInstead of trying to be involved in every project, focus on providing specific, high-value services that can make the biggest impact. This might include:Running discovery phases for major initiativesBy strategically initiating discovery phases for critical projects, you ensure that they start with a strong, user-focused foundation. This can involve tools like the Strategic User-Driven Project Assessment (SUPA), which helps validate ideas by assessing audience value, user needs, feasibility, and risks before committing to major investments. SUPA ensures projects are not just built right but are the right ones to build.Project-Specific UX GuidanceRegular feedback on design assets throughout a project keeps UX principles front and center. This can be achieved by offering UX audits, periodic check-ins to assess progress, or design reviews at key milestones.Facilitating workshops and problem-solving sessionsLeading targeted workshops or brainstorming sessions empowers teams to overcome design challenges on their own with your guidance. These tailored sessions help teams understand how to make better user-centered decisions and solve issues themselves, spreading UX capabilities beyond your team.The key is to be strategic about where you spend your time, focusing on activities that will have the greatest ripple effect across the organization.Coaching And MentoringOne of the most effective ways to scale your impact is through coaching. This could include:UX Office HoursDesignate times where anyone in the organization can drop in to get quick UX advice. This informal setting can solve small issues before they snowball and helps stakeholders learn as they go.One-on-One or Group CoachingScheduled check-ins with individuals or teams are great opportunities to address challenges directly, mentor those who need extra support, and ensure alignment with best practices. Regular 1:1 or group coaching keeps UX priorities on track and provides valuable guidance when and where its needed most.Tailored Problem-Solving SessionsProviding bespoke guidance for specific challenges that teams encounter empowers them to tackle design obstacles while internalizing the principles of good UX. These problem-solving sessions can be invaluable in ensuring teams can autonomously address future problems.The goal isnt to turn everyone into UX experts but to help them understand enough to make better decisions in their daily work.Its also important to recognize that others might not initially deliver work at the same level of quality that you would. This is okay. The primary goal is to get people engaged and excited about UX. If we criticize them every time they fall short of perfection, we risk undermining their enthusiasm. Instead, we need to foster a supportive environment where improvement happens over time.Creating ResourcesDevelop tools and resources that help others apply UX principles independently. For example:Design SystemsCreate and maintain a comprehensive design system that integrates UX best practices into the UI across the organization. A well-crafted design system ensures that everyone, from developers to designers, aligns on consistent best practices, making it easier for teams to work independently while still maintaining high standards. This includes reusable code components, clear documentation, and alignment between design and development.UX Tool SuiteProviding teams with pre-selected tools for user research, prototyping, and user testing helps maintain quality and saves time. With tools for everything from user research to usability testing, you provide the resources teams need to conduct UX activities on their own without extensive onboarding.Research RepositoryMaintain a centralized repository of user research findings that can be accessed by anyone across the organization. A well-organized research repository can reduce duplication of effort, provide insights across different initiatives, and allow teams to learn from each others findings. This promotes consistent application of user insights across projects.Supplier ListsProviding a vetted list of suppliers and external agencies helps ensure consistency when work is outsourced. It provides quick access to high-quality resources, mitigates risk, and builds trust with suppliers who understand your standards.Self-Service Training ResourcesCreate a library of on-demand training materials that teams can access when needed. This should include video tutorials, interactive exercises, case studies, and step-by-step guides for common UX tasks like conducting user interviews, creating personas, or running usability tests. Unlike scheduled workshops, self-paced learning allows people to access knowledge exactly when they need it, leading to better retention and practical application.These resources should be practical and accessible, making it easy for teams to do the right thing.Setting StandardsCreate a framework that guides UX decisions across the organization:Design PrinciplesEstablish core design principles that align with your organizations values and user-centered goals. These principles help ensure consistency and clarity in decision-making. For example, define around six to ten principles that stakeholders across the organization have voted on and agreed upon, ensuring broader buy-in and consistent decision-making.Policies for UXDevelop clear policies that standardize processes like work requests, user research and testing, and stakeholder involvement. These policies help set expectations, keep efforts aligned with organizational goals, and make it easier for non-UX professionals to understand and comply with best practices.Project Prioritization PoliciesHaving clear guidelines on how projects are prioritized ensures that UX gets the attention it needs in the planning stages, preventing it from being overlooked or marginalized. Establish policies that align project value to user needs and organizational priorities.The key is to make these standards helpful rather than bureaucratic they should enable better work, not create unnecessary obstacles.Bringing It All TogetherAll of these elements should come together in what I call a UX Playbook a single source of truth that contains everything teams need to deliver better user experiences. This isnt just another document to gather dust; its a living resource that demonstrates your value as a leader and helps others get started on their UX journey.The shift from practitioner to leader isnt easy. It requires letting go of some control and trusting others to carry forward UX principles. But its the only way to create lasting change at scale.If youre struggling with this transition, I am running a workshop on design leadership in February. I would love to discuss your situation there.

What makes an incredible project? Is it the client? The type of project? An exorbitant budget? While those things help to create the environment in which a great project can thrive, what truly makes a project something powerful is you.No, this isnt some pep talk on why you are the ultimate weapon but yes, you are if you want to be. I am simply a web and product designer writing down my observations in order to give others the tools to make their project experiences all the better for it.Still with me? Let me tell you about what Ive discovered over the years working as an agency designer.There are three approaches that have completely changed the way my projects run from start to finish. I have found that since implementing all three, my work and my interactions with clients and coworkers have blossomed. Here they are:Unlearn previous experiences through Reframing.Tap into your background with Connection Paths.Take up your own space. Period.In this article, you will find explanations of each approach and connected practical examples as well as real-life ones from my project work at Fueled + 10up to show you how they can be applied to projects. With that said, lets dive in.Approach 1: Unlearn Previous Experiences Through ReframingWhile some of the things that we have learned over the years spent in design are invaluable, amidst those previous experiences, there are also the ones that hold us back.Unlearning ingrained lessons is not an easy thing to do. Rather, I challenge you to reframe them and get into the habit of asking yourself, Am I stopping short creatively because I have always gone this far? or Am I associating an implied response from others due to a previous experience and therefore not doing enough for the project?Let me give you some examples of thoughts that may arise on a given project and how you can reframe them in a better way.Initial ThoughtIve designed cards thousands of times. Therefore, there are only so many ways you can do it.As you know, in 99.9% of website design projects, a card design is required. It may seem that every possible design ever imagined has been created up to this point a fair reasoning, isnt it? However, stifling yourself from the very get-go with this mentality will only serve to produce expected and too-well-known results.Reframed ThoughtInstead, you could approach this scenario with the following reframed thought: Ive designed cards thousands of times, so let me take what Ive learned, do some more exploration, and iterate on what could push these cards further for this particular project.With this new outlook, you may find yourself digging deeper to pull on creative threads, inevitably resulting in adaptive thinking. A good exercise to promote this is the Crazy 8s design exercise. In this format, you can pull forth rapid ideas some good, some not so good and see what sticks. This method is meant to get your brain working through a simple solution by tackling it from multiple angles.Real-Life ExampleHere is a real-life example from one of my projects in which I had to explore cards on a deeper level. This clients website was primarily made up of cards of varying content and complexity. In the initial stages of design, I worked to define how we could differentiate cards, with prominence in size, imagery, and color, as well as motion and hover effects.What I landed on was a flexible system that had three tiers and harmonized well together. Knowing they had content that they wanted to be highlighted in a distinctive way, I created a Featured Card and tied it to the brand identity with the cutout shape in the image masking. I also included the glass effect on top to allude to the brands science background and ensure the text was accessible. For the Stacked Card, I introduced a unique hover effect pattern: depending on where the card was in a given grid, it would determine the cards hover color. Lastly, for the Horizontal Card, I wanted to create something that had equal emphasis on the image and content and that could also stand alone well, even without an image.While these cards include what most cards usually do, the approach I took and the visual language used was unique to the client. Instead of working on these too quickly, I ventured down a different path that took a little more thought, which led me to a result that felt in tune with the clients needs. It also pushed me outside of what I knew to be the standard, straightforward approach.Initial ThoughtFast is better. Clients and project teams want me to be fast, so its okay if I cut down on exploration.In most projects, speed is indeed rewarded. It keeps the project within its budget constraints, the project managers are happy, and ultimately, the clients are happy, too. However, what it can end up doing instead is generating errors in the process and hindering design exploration.Reframed ThoughtIn this scenario, you can reframe this like so:I like to work fast because I want the team to be successful. In addition, I want to make sure I have not only produced high-quality work but also explored whether this is the best and most creative solution for the project.With this new outlook, you are still looking out for what clients and project teams want (successful outcomes), but you have also enriched the experience by fully executing your design expertise rather than just churning out work. One recommendation here is to always ensure you are communicating with your project team about the budget and timelines. Keeping yourself aware of these key goals will allow you to pace when to push for more exploration and when to dial it in.Real-Life ExampleI experienced this on a project of mine when a clients piece of feedback seemed clear-cut, but as we entered a third round of design surrounding it, it revealed that it was much more complicated.The client, Cleveland Public Library, had approved a set of wireframes for their homepage that illustrated a very content-heavy hero, but when it came to the design phase, they were delighted by a simpler, more bold design for a block that I created in my preliminary design explorations. At first, I thought it was obvious: lets just give them a dialed-in, simple hero design and be done with it. I knew the hours were precious on this project, and I wanted to save time for later on as we got into the finer design details of the pages. However, this was an error on my part.After taking a step back and removing speed as a key factor during this phase of the project, I found the solution they actually needed: a content-heavy hero showcasing the breadth of their offerings, melded with the boldness of the more pared-down design. And guess what? This variant was approved instantly!Now that I have shown you two examples of how to unlearn previous experiences, I hope you can see the value of reframing those moments in order to tap into a more uninhibited and unexplored creative path. Of course, you should expect that it will take several implementations to start feeling the shift towards inherent thinking even I need to remind myself to pause and reframe, like in the last example. Rome wasnt built in a day, as they say!Try ThisI challenge you to identify a few moments on a recent project where you could have paused, reflected, and used more creativity. What would you have done differently?Approach 2: Tap Into Your Background With Connection PathsI know I just talked about unlearning some of our previous experiences to unlock creativity, but what about the ones we may want to tap into to push us even further? Every designer has an array of passions, memories, and experiences that have culminated into what makes us who we are today. We often have a work self professional and poised, and a personal self exploding with hobbies. How can we take those unique facets of our personalities and apply them to our projects?Creating connections with projects and clients on a deeper level is a major way to make use of our personal experiences and knowledge. It can help to add inspiration where you otherwise may not have found that same spark on a project or subject matter.Let me walk you through what I like to call the Three Connection Paths. Ill also show you how you can pull from these and apply them to your projects.Direct PathThis connection path is one in which you have overlapping interests with the client or subject matter.An example of this is a client from the video game industry, and you play their video games. Seems like an obvious connection! You can bring in your knowledge and love for the game industry and their work. You could propose easter eggs and tie-ins to their games on their website. Its a match made in heaven.Cross PathThis connection path is one in which you cross at a singular point with the client or subject matter.An example of this is a client, which is a major restaurant chain, and you used to work in the food industry. With your background, you understand what it is like to work at a restaurant, so you might suggest what CTAs or fun graphics would be important for a staff-centric site.Network PathThis connection path is one in which you are tethered to the client or subject matter through who you know.An example of this is a client in the engineering field, and one of your family members is an engineer. You can then ask your family members for insights or what would be a good user experience for them on a redesigned website.Sometimes, you wont be so lucky as to align with a client in one of the Three Connection Paths, but you can still find ways to add a layered experience through other means, such as your skillset and research. In the last example, say you know nothing about engineering nor have a connection to someone who does, but you are an excellent copy editor outside of work. You can propose tweaking the verbiage on their hero section to emphasize their goals all the more. This shows care and thoughtfulness, giving the client an experience they are sure to appreciate.Real-Life ExampleA real-life example in which I implemented a Direct Connection Path on a project was for Comics Kingdoms website redesign. When I was younger, I wanted to be a manga creator, so this client being an intermediary between comic readers and creators resonated with me. Not only that, but I still practice illustration, so I knew I had to bring this skill set to the table, even though it was not part of the original scope of work.I allowed myself to lean into that spark I felt. I hand-sketched a few illustrations in Procreate for their website that felt personal and tied to the joy that comics evoke. Beyond that, I found a way to incorporate my knowledge of manga into a background pattern that pulled inspiration from nawa-ami (a traditional cross-hatching style to denote deep thought) and mixed it with the motif of fingerprints the idea of identity and the artists own mark on their work.Due to my deep passion, I was able to cultivate an excellent collaborative relationship with the client, which led to a very successful launch and being invited to speak on their podcast. This experience solidified my belief that through tapping into Connection Paths, you can forge not only amazing projects but also partnerships.Try ThisLook at what projects you currently have and see which of the Three Connection Paths you could use to build that bond with the client or the subject matter. If you dont see one of the Three Connection Paths aligning, then what skills or research could you bring to the table instead?Approach 3: Take Up Your Own SpaceThe last and arguably most important approach to leveling up your projects is taking up your own space. Im not referring to physical space like strong-arming those around you. What Im referring to is the space in which designers take to be vocal about their design decisions.A lot of designers find this practice uncomfortable. Whether it stems from having not been given that space to practice as a beginner designer, higher ranking designers not leaving the room for those less vocal, or even you yourself feeling like someone else might be better suited to talk to a particular point.Dont RetreatSimilarly, some designers find themselves retreating when receiving feedback. Instead of standing behind the reasoning of their designs or asking follow-up questions, it seems easier to simply go along with the requested change in order to make the client or team member providing the feedback happy. Even if you disagree with the request, does it feel like you need to execute it just because the client or someone you feel outranks you told you to?You Are The ExpertThere is another option, one in which you can mark yourself as the design expert you are and get comfortable in the discomfort.Saying you dont agree and explaining why helps solidify you as a strong decision-maker and confident designer. Tying it back to why you made the decision in the first place is key.Illuminating your opinions and reasoning in conversations is what will get those around you to trust in your decisions. Hiding them away or conceding to client whims isnt going to show those around you that you have the knowledge to make the proper recommendations for a project.The Middle GroundNow, Im not saying that you will need to always disagree with the provided feedback to show that you have a backbone. Far from it. I think there is a time and place for when you need to lean into your expertise, and a time and place for when you need to find a middle ground and/or collaborate. Collaborating with coworkers and clients lets them peek into the why behind the design decisions being made.ExampleA great example of this is a client questioning you on a particular font size, saying it feels too large and out of place.You have two options:You could say that you will make it smaller.Or you could dig deeper.If you have been paying attention thus far, youd know that option 2. is the route I would suggest. So, instead of just changing the font size, you should ask for specifics. For example, is the type hierarchy feeling off the relationship of that heading to the body font it is paired with? You can ask if the size feels large in other instances since perhaps this is your H2 font, so it would need to be changed across the board. Calling attention to why you chose this size using data-informed UX design, accessibility, brand, or storytelling reasons all amplify your decision-making skills before the client, so including that information here helps.If, after the discussion, the client still wants to go with changing the font size, at least you have given your reasoning and shown that you didnt thoughtlessly make a decision you made the design choice after taking into consideration multiple factors and putting in a lot of thought. Over time, this will build trust in you as the design expert on projects.Real-Life ExampleAn example in which I showcased taking up my own space was from a recent project I worked on for Hilton Stories in their collaboration with Wicked. After conceptualizing a grand takeover experience complete with a storytelling undertone, one of the clients wanted to remove the page-loading animation with the idea of having more branded elements elsewhere.While most of my team was ready to execute this, I read between the lines and realized that we could solve the issue by including clear verbiage of the collaboration on the loading animation as well as adding logos and a video spot to the interior pages. By sticking up for a key piece of my designs, I was able to show that I was aligned with not only my design decisions but the major goals of the project. This solution made the clients happy and allowed for a successful launch with the loading animation that the Fueled + 10up team and I worked so hard on.Try ThisThe next time you receive feedback, pause for a moment. Take in carefully what is being said and ask questions before responding. Analyze if it makes sense to go against the design decisions you made. If it doesnt, tell the client why. Have that open dialogue and see where you land. This will be uncomfortable at first, but over time, it will get easier.Remember, you made your decisions for a reason. Now is the time to back up your design work and ultimately back up yourself and your decisions. So, take up your own space unapologetically.ConclusionNow that you have learned all about the three approaches, there is nothing stopping you from trialing these on your next project. From unlearning previous experiences through Reframing to tapping into your background with Connection Paths, you can lay the groundwork for how your past can be used to shape your future interactions. When taking up your own space, start small as you begin to advocate for your designs, and always try to connect to the whys so you instill trust in your clients and members of your design team.As Robin Williams so eloquently delivered in the Dead Poets Society, No matter what anybody tells you, words and ideas can change the world. In this case, you dont need to apply it so widely as the entire world, maybe just to your workplace for now.

You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though youll need to enable a flag. Safari? Not yet, but dont worry you can still offer a seamless experience across all browsers with a polyfill. Just keep in mind that adding a polyfill involves a JavaScript library, so you wont get the same performance boost.There are plenty of valuable resources to dive into scroll-driven animations, which Ill be linking throughout the article. My starting point was Bramus video tutorial, which pairs nicely with Geoffs in-depth notes Graham that build on the tutorial.In this article, well walk through the latest published version by the W3C and explore the two types of scroll-driven timelines scroll progress timelines and view progress timelines. By the end, I hope that you are familiar with both timelines, not only being able to tell them apart but also feeling confident enough to use them in your work.Note: All demos in this article only work in Chrome 116 or later at the time of writing.Scroll Progress TimelinesThe scroll progress timeline links an animations timeline to the scroll position of a scroll container along a specific axis. So, the animation is tied directly to scrolling. As you scroll forward, so does the animation. Youll see me refer to them as scroll-timeline animations in addition to calling them scroll progress timelines.Just as we have two types of scroll-driven animations, we have two types of scroll-timeline animations: anonymous timelines and named timelines.Anonymous scroll-timelineLets start with a classic example: creating a scroll progress bar at the top of a blog post to track your reading progress.See the Pen Scroll Progress Timeline example - before animation-timeline scroll() [forked] by Mariana Beldi. In this example, theres a <div> with the ID progress. At the end of the CSS file, youll see it has a background color, a defined width and height, and its fixed at the top of the page. Theres also an animation that scales it from 0 to 1 along the x-axis pretty standard if youre familiar with CSS animations!Heres the relevant part of the styles:#progress { /* ... */ animation: progressBar 1s linear;}@keyframes progressBar { from { transform: scaleX(0); }}The progressBar animation runs once and lasts one second with a linear timing function. Linking this animation scrolling is just a single line in CSS:animation-timeline: scroll();No need to specify seconds for the durationthe scrolling behavior itself will dictate the timing. And thats it! Youve just created your first scroll-driven animation! Notice how the animations direction is directly tied to the scrolling direction scroll down, and the progress indicator grows wider; scroll up, and it becomes narrower.See the Pen Scroll Progress Timeline example - animation-timeline scroll() [forked] by Mariana Beldi.scroll-timeline Property ParametersIn a scroll-timeline animation, the scroll() function is used inside the animation-timeline property. It only takes two parameters: <scroller> and <axis>.<scroller> refers to the scroll container, which can be set as nearest (the default), root, or self.<axis> refers to the scroll axis, which can be block (the default), inline, x, or y.In the reading progress example above, we didnt declare any of these because we used the defaults. But we could achieve the same result with:animation-timeline: scroll(nearest block);Here, the nearest scroll container is the root scroll of the HTML element. So, we could also write it this way instead:animation-timeline: scroll(root block);The block axis confirms that the scroll moves top to bottom in a left-to-right writing mode. If the page has a wide horizontal scroll, and we want to animate along that axis, we could use the inline or x values (depending on whether we want the scrolling direction to always be left-to-right or adapt based on the writing mode).Well dive into self and inline in more examples later, but the best way to learn is to play around with all the combinations, and this tool by Bramus lets you do exactly that. Spend a few minutes before we jump into the next property associated with scroll timelines.The animation-range PropertyThe animation-range for scroll-timeline defines which part of the scrollable content controls the start and end of an animations progress based on the scroll position. It allows you to decide when the animation starts or ends while scrolling through the container.By default, the animation-range is set to normal, which is shorthand for the following:animation-range-start: normal;animation-range-end: normal;This translates to 0% (start) and 100% (end) in a scroll-timeline animation:animation-range: normal normal;which is the same as:animation-range: 0% 100%;You can declare any CSS length units or even calculations. For example, lets say I have a footer thats 500px tall. Its filled with banners, ads, and related posts. I dont want the scroll progress bar to include any of that as part of the reading progress. What I want is for the animation to start at the top and end 500px before the bottom. Here we go:animation-range: 0% calc(100% - 500px);See the Pen Scroll Progress Timeline example - animation-timeline, animation-range [forked] by Mariana Beldi.Just like that, weve covered the key properties of scroll-timeline animations. Ready to take it a step further?Named scroll-timelineLets say I want to use the scroll position of a different scroll container for the same animation. The scroll-timeline-name property allows you to specify which scroll container the scroll animation should be linked to. You give it a name (a dashed-ident, e.g., --my-scroll-timeline) that maps to the scroll container you want to use. This container will then control the animations progress as the user scrolls through it.Next, we need to define the scroll axis for this new container by using the scroll-timeline-axis, which tells the animation which axis will trigger the motion. Heres how it looks in the code:.my-class { /* This is my new scroll-container */ scroll-timeline-name: --my-custom-name; scroll-timeline-axis: inline;}If you omit the axis, then the default block value will be used. However, you can also use the shorthand scroll-timeline property to combine both the name and axis in a single declaration:.my-class { /* Shorthand for scroll-container with axis */ scroll-timeline: --my-custom-name inline;}I think its easier to understand all this with a practical example. Heres the same progress indicator weve been working with, but with inline scrolling (i.e., along the x-axis):See the Pen Named Scroll Progress Timeline [forked] by Mariana Beldi.We have two animations running:A progress bar grows wider when scrolling in an inline direction.The containers background color changes the further you scroll.The HTML structure looks like the following:<div class="gallery"> <div class="gallery-scroll-container"> <div class="gallery-progress" role="progressbar" aria-label="progress"></div> <img src="image1.svg" alt="Alt text" draggable="false" width="500"> <img src="image2.svg" alt="Alt text" draggable="false" width="500"> <img src="image3.svg" alt="Alt text" draggable="false" width="500"> </div></div>In this case, the gallery-scroll-container has horizontal scrolling and changes its background color as you scroll. Normally, we could just use animation-timeline: scroll(self inline) to achieve this. However, we also want the gallery-progress element to use the same scroll for its animation.The gallery-progress element is the first inside gallery-scroll-container, and we will lose it when scrolling unless its absolutely positioned. But when we do this, the element no longer occupies space in the normal document flow, and that affects how the element behaves with its parent and siblings. We need to specify which scroll container we want it to listen to.Thats where naming the scroll container comes in handy. By giving gallery-scroll-container a scroll-timeline-name and scroll-timeline-axis, we can ensure both animations sync to the same scroll:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline;}And is using that scrolling to define its own animation-timeline:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline; animation-timeline: --scroller;}Now we can scale this name to the progress bar that is using a different animation but listening to the same scroll:.gallery-progress { /* ... */ animation: progressBar linear; animation-timeline: --scroller;}This allows both animations (the growing progress bar and changing background color) to follow the same scroll behavior, even though they are separate elements and animations.The timeline-scope PropertyWhat happens if we want to animate something based on the scroll position of a sibling or even a higher ancestor? This is where the timeline-scope property comes into play. It allows us to extend the scope of a scroll-timeline beyond the current elements subtree. The value of timeline-scope must be a custom identifier, which again is a dashed-ident.Lets illustrate this with a new example. This time, scrolling in one container runs an animation inside another container:See the Pen Scroll Driven Animations - timeline-scope [forked] by Mariana Beldi.We can play the animation on the image when scrolling the text container because they are siblings in the HTML structure:<div class="main-container"> <div class="sardinas-container"> <img ...> </div> <div class="scroll-container"> <p>Long text...</p> </div></div>Here, only the .scroll-container has scrollable content, so lets start by naming this:.scroll-container { /* ... */ overflow-y: scroll; scroll-timeline: --containerText;}Notice that I havent specified the scroll axis, as it defaults to block (vertical scrolling), and thats the value I want.Lets move on to the image inside the sardinas-container. We want this image to animate as we scroll through the scroll-container. Ive added a scroll-timeline-name to its animation-timeline property:.sardinas-container img { /* ... */ animation: moveUp steps(6) both; animation-timeline: --containerText;}At this point, however, the animation still wont work because the scroll-container is not directly related to the images. To make this work, we need to extend the scroll-timeline-name so it becomes reachable. This is done by adding the timeline-scope to the parent element (or a higher ancestor) shared by both elements:.main-container { /* ... */ timeline-scope: --containerText;}With this setup, the scroll of the scroll-container will now control the animation of the image inside the sardinas-container!Now that weve covered how to use timeline-scope, were ready to move on to the next type of scroll-driven animations, where the same properties will apply but with slight differences in how they behave.View Progress TimelinesWe just looked at scroll progress animations. Thats the first type of scroll-driven animation of the two. Next, were turning our attention to view progress animations. Theres a lot of similarities between the two! But theyre different enough to warrant their own section for us to explore how they work. Youll see me refer to these as view-timeline animations in addition to calling them view progress animations, as they revolve around a view() function.The view progress timeline is the second type of type of scroll-driven animation that were looking at. It tracks an element as it enters or exits the scrollport (the visible area of the scrollable content). This behavior is quite similar to how an IntersectionObserver works in JavaScript but can be done entirely in CSS.We have anonymous and named view progress timelines, just as we have anonymous and named scroll progress animations. Lets unpack those.Anonymous View TimelineHeres a simple example to help us see the basic idea of anonymous view timelines. Notice how the image fades into view when you scroll down to a certain point on the page:See the Pen View Timeline Animation - view() [forked] by Mariana Beldi.Lets say we want to animate an image that fades in as it appears in the scrollport. The images opacity will go from 0 to 1. This is how you might write that same animation in classic CSS using @keyframes:img { /* ... */ animation: fadeIn 1s;}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}Thats great, but we want the image to fadeIn when its in view. Otherwise, the animation is sort of like a tree that falls in a forest with no one there to witness it did the animation ever happen? Well never know!We have a view() function that makes this a view progress animation with a single line of CSS:img { /* ... */ animation: fadeIn; animation-timeline: view();}And notice how we no longer need to declare an animation-duration like we did in classic CSS. The animation is no longer tied by time but by space. The animation is triggered as the image becomes visible in the scrollport.View Timeline ParametersJust like the scroll-timeline property, the view-timeline property accepts parameters that allow for more customization:animation-timeline: view( );<inset>Controls when the animation starts and ends relative to the elements visibility within the scrollport. It defines the margin between the edges of the scrollport and the element being tracked. The default value is auto, but it can also take length percentages as well as start and end values.<axis>This is similar to the scroll-timelines axis parameter. It defines which axis (horizontal or vertical) the animation is tied to. The default is block, which means it tracks the vertical movement. You can also use inline to track horizontal movement or simple x or y.Heres an example that uses both inset and axis to customize when and how the animation starts:img { animation-timeline: view(20% block);}In this case:The animation starts when the image is 20% visible in the scrollport.The animation is triggered by vertical scrolling (block axis).Parallax EffectWith the view() function, its also easy to create parallax effects by simply adjusting the animation properties. For example, you can have an element move or scale as it enters the scrollport without any JavaScript:img { animation: parallaxMove 1s; animation-timeline: view();}@keyframes parallaxMove { to { transform: translateY(-50px); }}This makes it incredibly simple to create dynamic and engaging scroll animations with just a few lines of CSS.See the Pen Parallax effect with CSS Scroll driven animations - view() [forked] by Mariana Beldi.The animation-range PropertyUsing the CSS animation-range property with view timelines defines how much of an elements visibility within the scrollport controls the start and end points of the animations progress. This can be used to fine-tune when the animation begins and ends based on the elements visibility in the viewport.While the default value is normal, in view timelines, it translates to tracking the full visibility of the element from the moment it starts entering the scrollport until it fully leaves. This is represented by the following:animation-range: normal normal;/* Equivalent to */animation-range: cover 0% cover 100%;Or, more simply:animation-range: cover;There are six possible values or timeline-range-names:coverTracks the full visibility of the element, from when it starts entering the scrollport to when it completely leaves it.containTracks when the element is fully visible inside the scrollport, from the moment its fully contained until it no longer is.entryTracks the element from the point it starts entering the scrollport until its fully inside.exitTracks the element from the point it starts, leaving the scrollport until its fully outside.entry-crossingTracks the element as it crosses the starting edge of the scrollport, from start to full crossing.exit-crossingTracks the element as it crosses the end edge of the scrollport, from start to full crossing.You can mix different timeline-range-names to control the start and end points of the animation range. For example, you could make the animation start when the element enters the scrollport and end when it exits:animation-range: entry exit;You can also combine these values with percentages to define more custom behavior, such as starting the animation halfway through the elements entry and ending it halfway through its exit:animation-range: entry 50% exit 50%;Exploring all these values and combinations is best done interactively. Tools like Bramus view-timeline range visualizer make it easier to understand.Target Range Inside @keyframesOne of the powerful features of timeline-range-names is their ability to be used inside @keyframes:See the Pen target range inside @keyframes - view-timeline, timeline-range-name [forked] by Mariana Beldi.Two different animations are happening in that demo:slideInWhen the element enters the scrollport, it scales up and becomes visible.slideOutWhen the element leaves, it scales down and fades out.@keyframes slideIn { from { transform: scale(.8) translateY(100px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; }}@keyframes slideOut { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(.8) translateY(-100px); opacity: 0 }}The new thing is that now we can merge these two animations using the entry and exit timeline-range-names, simplifying it into one animation that handles both cases:@keyframes slideInOut { /* Animation for when the element enters the scrollport */ entry 0% { transform: scale(.8) translateY(100px); opacity: 0; } entry 100% { transform: scale(1) translateY(0); opacity: 1; } /* Animation for when the element exits the scrollport */ exit 0% { transform: scale(1) translateY(0); opacity: 1; } exit 100% { transform: scale(.8) translateY(-100px); opacity: 0; }}entry 0%Defines the state of the element at the beginning of its entry into the scrollport (scaled down and transparent).entry 100%Defines the state when the element has fully entered the scrollport (fully visible and scaled up).exit 0%Starts tracking the element as it begins to leave the scrollport (visible and scaled up).exit 100%Defines the state when the element has fully left the scrollport (scaled down and transparent).This approach allows us to animate the elements behavior smoothly as it both enters and leaves the scrollport, all within a single @keyframes block.Named view-timeline And timeline-scopeThe concept of using view-timeline with named timelines and linking them across different elements can truly expand the possibilities for scroll-driven animations. In this case, we are linking the scroll-driven animation of images with the animations of unrelated paragraphs in the DOM structure by using a named view-timeline and timeline-scope.The view-timeline property works similarly to the scroll-timeline property. Its the shorthand for declaring the view-timeline-name and view-timeline-axis properties in one line. However, the difference from scroll-timeline is that we can link the animation of an element when the linked elements enter the scrollport. I took the previous demo and added an animation to the paragraphs so you can see how the opacity of the text is animated when scrolling the images on the left:See the Pen View-timeline, timeline-scope [forked] by Mariana Beldi.This one looks a bit verbose, but I found it hard to come up with a better example to show the power of it. Each image in the vertical scroll container is assigned a named view-timeline with a unique identifier:.vertical-scroll-container img:nth-of-type(1) { view-timeline: --one; }.vertical-scroll-container img:nth-of-type(2) { view-timeline: --two; }.vertical-scroll-container img:nth-of-type(3) { view-timeline: --three; }.vertical-scroll-container img:nth-of-type(4) { view-timeline: --four; }This makes the scroll timeline of each image have its own custom name, such as --one for the first image, --two for the second, and so on.Next, we connect the animations of the paragraphs to the named timelines of the images. The corresponding paragraph should animate when the images enter the scrollport:.vertical-text p:nth-of-type(1) { animation-timeline: --one; }.vertical-text p:nth-of-type(2) { animation-timeline: --two; }.vertical-text p:nth-of-type(3) { animation-timeline: --three; }.vertical-text p:nth-of-type(4) { animation-timeline: --four; }However, since the images and paragraphs are not directly related in the DOM, we need to declare a timeline-scope on their common ancestor. This ensures that the named timelines (--one, --two, and so on) can be referenced and shared between the elements:.porto { /* ... */ timeline-scope: --one, --two, --three, --four;}By declaring the timeline-scope with all the named timelines (--one, two, --three, --four), both the images and the paragraphs can participate in the same scroll-timeline logic, despite being in separate parts of the DOM tree.Final NotesWeve covered the vast majority of whats currently defined in the CSS Scroll-Driven Animations Module Leve 1 specification today in December 2024. But I want to highlight a few key takeaways that helped me better understand these new rules that you may not get directly from the spec:Scroll container essentialsIt may seem obvious, but a scroll container is necessary for scroll-driven animations to work. Issues often arise when elements like text or containers are resized or when animations are tested on larger screens, causing the scrollable area to disappear.Impact of position: absoluteUsing absolute positioning can sometimes interfere with the intended behavior of scroll-driven animations. The relationship between elements and their parent elements gets tricky when position: absolute is applied.Tracking an elements initial stateThe browser evaluates the elements state before any transformations (like translate) are applied. This affects when animations, particularly view timelines, begin. Your animation might trigger earlier or later than expected due to the initial state.Avoid hiding overflowUsing overflow: hidden can disrupt the scroll-seeking mechanism in scroll-driven animations. The recommended solution is to switch to overflow: clip. Bramus has a great article about this and a video from Kevin Powell also suggests that we may no longer need overflow: hidden.PerformanceFor the best results, stick to animating GPU-friendly properties like transforms, opacity, and some filters. These skip the heavy lifting of recalculating layout and repainting. On the other hand, animating things like width, height, or box-shadow can slow things down since they require re-rendering. Bramus mentioned that soon, more propertieslike background-color, clip-path, width, and heightwill be animatable on the compositor, making the performance even better.Use will-change wiselyLeverage this property to promote elements to the GPU, but use it sparingly. Overusing will-change can lead to excessive memory usage since the browser reserves resources even if the animations dont frequently change.The order mattersIf you are using the animation shorthand, always place the animation-timeline after it.Progressive enhancement and accessibilityCombine media queries for reduced motion preferences with the @supports rule to ensure animations only apply when the user has no motion restrictions, and the browser supports them.For example:@media screen and (prefers-reduce-motion: no-preference) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { .my-class { animation: moveCard linear both; animation-timeline: view(); } } }My main struggle while trying to build the demos was more about CSS itself than the scroll animations. Sometimes, building the layout and generating the scroll was more difficult than applying the scroll animation. Also, some things that confused me at the beginning as the spec keeps evolving, and some of these are not there anymore (remember, it has been under development for more than five years now!):x and y axesThese used to be called the horizontal and vertical axes, and while Firefox may still support the old terminology, it has been updated.Old @scroll-timeline syntaxIn the past, @scroll-timeline was used to declare scroll timelines, but this has changed in the most recent version of the spec.Scroll-driven vs. scroll-linked animationsScroll-driven animations were originally called scroll-linked animations. If you come across this older term in articles, double-check whether the content has been updated to reflect the latest spec, particularly with features like timeline-scope.ResourcesAll demos from this article can be found in this collection, and I might include more as I experiment further.A collection of demos from CodePen that I find interesting (send me yours, and Ill include it!)This GitHub repo is where you can report issues or join discussions about scroll-driven animations.Demos, tools, videos, and (even) more information from BramusGoogle Chrome video tutorial

So, I love drawing birds with code. Inspired by my brothers love for birdwatching, I admire the uniqueness of their feathers, colors, and sounds. But what I notice most is the way their bodies curve and different birds can have dramatically different curves! So, I took my love for drawing with SVG graphics and used it to experiment with bird shapes. Over time, Ive drawn enough to become incredibly adept at working with arc shapes.Here are a few of my recent works. Inspired by designs I came across on Dribbble, I created my versions with code. You can browse through the code for each on my CodePen.But before we dive into creating curves with arcs, please pause here and check out Myriam Frisanos recent article, SVG Coding Examples: Useful Recipes For Writing Vectors By Hand. Its an excellent primer to the SVG syntax and it will give you solid context heading into the concepts were covering here when it comes to mastering SVG arcs.A Quick SVG RefresherYou probably know that SVGs are crisp, infinitely scalable illustrations without pixelated degradation vectors for the win! What you might not know is that few developers write SVG code. Why? Well, the syntax looks complicated and unfamiliar compared to, say, HTML. But trust me, once you break it down, its not only possible to hand-code SVG but also quite a bit of fun.Lets make sure youre up to speed on the SVG viewBox because its a key concept when it comes to the scalable part of *SVG. Well use the analogy of a camera, lens, and canvas to explain this concept. Think of your browser window as a camera and the SVG viewBox as the camera lens focusing on the painting of a bird youve created (the SVG). Imagine the painting on a large canvas that may stretch far beyond what the camera captures. The viewBox defines which part of this canvas is visible through the camera.Lets say we have an SVG element that were sizing at 600px square with width and height attributes directly on the <svg> element. <svg width="600px" height="600px">Lets turn our attention to the viewBox attribute:<svg width="600px" height="600px" viewBox="-300 -300 600 600">The viewBox attribute defines the internal coordinate system for the SVG, with four values mapping to the SVGs x, y, width, and height in that order. Heres how this relates to our analogy:Camera Position and SizeThe -300, -300 represents the camera lens left and top edge position. Meanwhile, 600 x 600 is like the cameras frame size, showing a specific portion of that space.Unchanging Canvas SizeChanging the x and y values adjusts where the camera points, and width and height govern how much of the canvas it frames. It doesnt resize the actual canvas (the SVG element itself, which remains at 600600 pixels). No matter where the camera is positioned or zoomed, the canvas itself remains fixed.So, when you adjust the viewBox coordinates, youre simply choosing a new area of the canvas to focus on without resizing the canvas itself. This lets you control the visible area without changing the SVGs actual display dimensions.You now have the context you need to learn how to work with <path> elements in SVG, which is where we start working with arcs!The <path> ElementWe have an <svg> element. And were viewing the elements contents through the lens of a viewBox.A <path> allows us to draw shapes. We have other elements for drawing shapes namely <circle>, <line>, and <polygon> but imagine being restricted to strict geometrical shapes as an artist. Thats where the custom <path> element comes in. Its used to draw complex shapes that cannot be created with the basic ones. Think of <path> as a flexible container that lets you mix and match different drawing commands.With a single <path>, you can combine multiple drawing commands into one smooth, elegant design. Today, were focusing on a super specific path command: arcs. In other words, what were doing is drawing arc shapes with <path>.Heres a quick, no-frills example that places a <path> inside the <svg> example we looked at earlier:<svg width="600px" height="600px" viewBox="-300 -300 600 600"> <path d="M 0 0 A 100 100 0 1 1 200 0" fill="transparent" stroke="black" stroke-width="24" /></svg>Lets take this information and start playing with values to see how it behaves.Visualizing The PossibilitiesAgain, if this is the <path> were starting with:<path d="M 0 0 A 100 100 0 1 1 200 0"/>Then, we can manipulate it in myriad ways. Mathematically speaking, you can create an infinite number of arcs between any two points by adjusting the parameters. Here are a few variations of an arc that we get when all we do is change the arcs endpoints in the X (<ex>) and Y (<ey>) directions.See the Pen Arc Possibilities b/w 2 points [forked] by akshaygpt.Or, lets control the arcs width and height by updating its radius in the X direction (<rx>) and the Y direction (<ry>). If we play around with the <rx> value, we can manipulate the arcs height:See the Pen Rx [forked] by akshaygpt.Similarly, we can manipulate the arcs width by updating the <ry> value:See the Pen Rx [forked] by akshaygpt.Lets see what happens when we rotate the arc along its X-axis (<rotation>). This parameter rotates the arcs ellipse around its center. It wont affect circles, but its a game-changer for ellipses.See the Pen x-axis-rotation [forked] by akshaygpt.Even with a fixed set of endpoints and radii (<rx> and <ry>), and a given angle of rotation, four distinct arcs can connect them. Thats because we have the <arc> flag value that can be one of two values, as well as the <sweep> flag that is also one of two values. Two boolean values, each with two arguments, give us four distinct possibilities.See the Pen 4 cases [forked] by akshaygpt.And lastly, adjusting the arcs endpoint along the X (<ex>) and Y (<ey>) directions shifts the arcs location without changing the overall shape.See the Pen endx, endy [forked] by akshaygpt.Wrapping UpAnd there you have it, SVG arcs demystified! Whether youre manipulating radii, rotation, or arc direction, you now have all the tools to master these beautiful curves. With practice, arcs will become just another part of your SVG toolkit, one that gives you the power to create more dynamic, intricate designs with confidence.So keep playing, keep experimenting, and soon youll be bending arcs like a pro making your SVGs not just functional but beautifully artistic. If you enjoyed this dive into arcs, drop a like or share it with your friends. Lets keep pushing the boundaries of what SVG can do!

Graceful degradation is a design approach that ensures the basics of a website will still function even if specific individual parts of it stop working. The approach removes single points of failure: just because one thing stops working doesnt mean the system as a whole fails. A site following this principle fails in pieces instead of all at once, so the most important features remain available when some components encounter an error.The idea or the concept of single points of failure is well known in the manufacturing sector. Its one of the most common resilience strategies in manufacturing and supply chain operations. A factory with multiple sources of material can keep working even when one supplier becomes unavailable. However, its become increasingly crucial to web development as user expectations around availability and functionality rise.Data center redundancy is a common example of graceful degradation in web development. By using multiple server components, websites ensure theyll stay up when one or more servers fail. In a design context, it may look like guaranteeing the lack of support for a given feature in a users browser or device doesnt render an app unusable.Escalators are a familiar real-world example of the same concept. When they stop working, they can still get people from one floor to the next by acting as stairs. They may not be as functional as they normally are, but theyre not entirely useless.The BBC News webpage is a good example of graceful degradation in web design. As this screenshot shows, the site prioritizes loading navigation and the text within a news story over images. Consequently, slow speeds or old, incompatible browser plugins may make pictures unavailable, but the sites core function sharing the news is still accessible.In contrast, the Adobe Express website is an example of what happens without graceful degradation. Instead of making some features unavailable or dropping load times, the entire site is inaccessible on some browsers. Consequently, users have to update or switch software to use the web app, which isnt great for accessibility.Graceful Degradation vs. Progressive EnhancementThe graceful degradation approach acts as the opposite of progressive enhancement an approach in which a designer builds the basics of a website and progressively adds features that are turned on only if a browser is capable of running them. Each layer of features is turned off by default, allowing for one seamless user experience designed to work for everyone.There is much debate between designers about whether graceful degradation or progressive enhancement is the best way to build site functionality. In reality, though, both are important. Each method has unique pros and cons, so the two can complement each other to provide the most resilience.Progressive enhancement is a good strategy when building a new site or app because you ensure a functional experience for everyone from the start. However, new standards and issues can emerge in the future, which is where graceful degradation comes in. This approach helps you adjust an existing website to comply with new accessibility standards or resolve a compatibility problem you didnt notice earlier.Focusing solely on one design principle or the other will limit accessibility. Progressive enhancement alone struggles to account for post-launch functionality issues, while graceful degradation alone may fail to provide the most feature-rich baseline experience. Combining both will produce the best result.How Graceful Degradation Impacts AccessibilityEnsuring your site or app remains functional is crucial for accessibility. When core functions become unavailable, the platform is no longer accessible to anyone. On a smaller scale, if features like text-to-speech readers or video closed captioning stop working, users with sight difficulties may be unable to enjoy the site.Graceful degradations impact on accessibility is all the larger when considering varying device capabilities. As the average person spends 3.6 hours each day on their phone, failing to ensure a site supports less powerful mobile browsers will alienate a considerable chunk of your audience. Even if some complex functions may not work on mobile, sacrificing those to keep the bulk of the website available on phones ensures broader accessibility.Outdated browsers are another common accessibility issue you can address with graceful degradation. Consider this example from Fairleigh Dickinson University about Adobe Flash, which most modern browsers no longer support.Software still using Flash cannot use the multi-factor authentication feature in question. As a result, users with older programs cant log in. Graceful degradation may compromise by making some functionality unavailable to Flash-supporting browsers while still allowing general access. That way, people dont need to upgrade to use the service.How to Incorporate Graceful Degradation Into Your SiteGraceful degradation removes technological barriers to accessibility. In a broader sense, it also keeps your site or app running at all times, even amid unforeseen technical difficulties. While there are many ways you can achieve that, here are some general best practices to follow.Identify Mission-Critical FunctionsThe first step in ensuring graceful degradation is determining what your core functions are. You can only guarantee the availability of mission-critical features once you know whats essential and what isnt.Review your user data to see what your audience interacts with most these are generally elements worth prioritizing. Anything related to site security, transactions, and readability is also crucial. Infrequently used features or elements like video players and interactive maps are nice to have but okay to sacrifice if you must to ensure mission-critical components remain available.Build RedundancyOnce youve categorized site functions by criticality, you can ensure redundancy for the most important ones. That may mean replicating elements in a few forms to work on varying browsers or devices. Alternatively, you could provide multiple services to carry out important functions, like supporting alternate payment methods or providing both video and text versions of content.Remember that redundancy applies to the hardware your platform runs on, too. The Uptime Institute classifies data centers into tiers, which you can use to determine what redundant systems you need. Similarly, make sure you can run your site on multiple servers to avoid a crash should one go down.Accommodate All BrowsersRemember that graceful degradation is also about supporting software and hardware of varying capabilities. One of the most important considerations under that umbrella for web design is to accommodate outdated browsers.While mobile devices dont support Flash, some older versions of desktop browsers still use it. You can work with both by avoiding Flash you can often use HTML5 instead but not requiring users to have a non-Flash-supporting browser. Similarly, you can offer low-bandwidth, simple alternatives to any features that take up considerable processing power to keep things accessible on older systems.Remember to pay attention to newer softwares security settings, too. Error messages like this one a Microsoft user posted about can appear if a site does not support some browsers updated security protocols. Always keep up with updates from popular platforms like Chrome and Safari to meet these standards and avoid such access issues.Employ Load Balancing and CachingLoad balancing is another crucial step in graceful degradation. Many cloud services automatically distribute traffic between server resources to prevent overloading. Enabling this also ensures that requests can be processed on a different part of the system if another fails.Caching is similar. By storing critical data, you build a fallback plan if an external service or application program interface (API) doesnt work. When the API doesnt respond, you can load the cached data instead. As a result, caches significantly reduce latency in many cases, but you should be aware that you cant cache everything. Focus on the most critical functions.Test Before PublishingFinally, be sure to test your website for accessibility issues before taking it live. Access it from multiple devices, including various browser versions. See if you can run it on a single server to test its ability to balance loads.You likely wont discover all possible errors in testing, but its better to catch some than none. Remember to test your sites functionality before any updates or redesigns, too.Getting Started With Graceful DegradationDesigners, both big and small, can start their graceful degradation journey by tweaking some settings with their web hosting service. AWS offers guidance for managing failures you can use to build degradation into your sites architecture. Hosting providers should also allow you to upgrade your storage plan and configure your server settings to provide redundancy and balance loads.Businesses large enough to run their own data centers should install redundant server capacity and uninterruptible power supplies to keep things running. Smaller organizations can instead rely on their code, using semantic HTML to keep it simple enough for multiple browsers. Programming nonessential things like images and videos to stop when bandwidth is low will also help.Virtualization systems like Kubernetes are also useful as a way to scale site capacity and help load elements separately from one another to maintain accessibility. Testing tools like BrowserStack, WAVE, and CSS HTML Validator can assist you by revealing if your site has functional issues on some browsers or for certain users.At its core, web accessibility is about ensuring a platform works as intended for all people. While design features may be the most obvious part of that goal, technical defenses also play a role. A site is only accessible when it works, so you must keep it functional, even when unexpected hiccups occur.Graceful degradation is not a perfect solution, but it prevents a small issue from becoming a larger one. Following these five steps to implement it on your website or app will ensure that your work in creating an accessible design doesnt go to waste.

For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each step. Whatever makes each step focused and manageable is what should be aimed for.In this tutorial, we will create a multistep form for a job application. Here are the details we are going to be requesting from the applicant at each step:Personal InformationCollects applicants name, email, and phone number.Work ExperienceCollects the applicants most recent company, job title, and years of experience.Skills & QualificationsThe applicant lists their skills and selects their highest degree.Review & SubmitThis step is not going to collect any information. Instead, it provides an opportunity for the applicant to go back and review the information entered in the previous steps of the form before submitting it.You can think of structuring these questions as a digital way of getting to know somebody. You cant meet someone for the first time and ask them about their work experience without first asking for their name.Based on the steps we have above, this is what the body of our HTML with our form should look like. First, the main <form> element:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 1 is for filling in personal information, like the applicants name, email address, and phone number:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset class="step" id="step-1"> <legend id="step1Label">Step 1: Personal Information</legend> <label for="name">Full Name</label> <input type="text" id="name" name="name" required /> <label for="email">Email Address</label> <input type="email" id="email" name="email" required /> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" required /> </fieldset> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Once the applicant completes the first step, well navigate them to Step 2, focusing on their work experience so that we can collect information like their most recent company, job title, and years of experience. Well tack on a new <fieldset> with those inputs:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <fieldset class="step" id="step-2" hidden> <legend id="step2Label">Step 2: Work Experience</legend> <label for="company">Most Recent Company</label> <input type="text" id="company" name="company" required /> <label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required /> <label for="yearsExperience">Years of Experience</label> <input type="number" id="yearsExperience" name="yearsExperience" min="0" required /> </fieldset> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --></form>Step 3 is all about the applicant listing their skills and qualifications for the job theyre applying for:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <fieldset class="step" id="step-3" hidden> <legend id="step3Label">Step 3: Skills & Qualifications</legend> <label for="skills">Skill(s)</label> <textarea id="skills" name="skills" rows="4" required></textarea> <label for="highestDegree">Degree Obtained (Highest)</label> <select id="highestDegree" name="highestDegree" required> <option value="">Select Degree</option> <option value="highschool">High School Diploma</option> <option value="bachelor">Bachelor's Degree</option> <option value="master">Master's Degree</option> <option value="phd">Ph.D.</option> </select> </fieldset> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>And, finally, well allow the applicant to review their information before submitting it:<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <!-- Step 2: Work Experience --> <!-- Step 3: Skills & Qualifications --> <!-- Step 4: Review & Submit --> <fieldset class="step" id="step-4" hidden> <legend id="step4Label">Step 4: Review & Submit</legend> <p>Review your information before submitting the application.</p> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added a hidden attribute to every fieldset element but the first one. This ensures that the user sees only the first step. Once they are done with the first step, they can proceed to fill out their work experience on the second step by clicking a navigational button. Well add this button later on.Adding StylesTo keep things focused, were not going to be emphasizing the styles in this tutorial. What well do to keep things simple is leverage the Simple.css style framework to get the form in good shape for the rest of the tutorial.If youre following along, we can include Simples styles in the document <head>:<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />And from there, go ahead and create a style.css file with the following styles that Ive folded up.<details> <summary>View CSS</summary> body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } main { padding: 0 30px; } h1 { font-size: 1.8rem; text-align: center; } .stepper { display: flex; justify-content: flex-end; padding-right: 10px; } form { box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); padding: 12px; } input, textarea, select { outline: none; } input:valid, textarea:valid, select:valid, input:focus:valid, textarea:focus:valid, select:focus:valid { border-color: green; } input:focus:invalid, textarea:focus:invalid, select:focus:invalid { border: 1px solid red; }</details>Form Navigation And ValidationAn easy way to ruin the user experience for a multi-step form is to wait until the user gets to the last step in the form before letting them know of any error they made along the way. Each step of the form should be validated for errors before moving on to the next step, and descriptive error messages should be displayed to enable users to understand what is wrong and how to fix it.Now, the only part of our form that is visible is the first step. To complete the form, users need to be able to navigate to the other steps. We are going to use several buttons to pull this off. The first step is going to have a Next button. The second and third steps are going to have both a Previous and a Next button, and the fourth step is going to have a Previous and a Submit button.<form id="jobApplicationForm"> <!-- Step 1: Personal Information --> <fieldset> <!-- ... --> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 2: Work Experience --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 3: Skills & Qualifications --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="button" class="next" onclick="nextStep()">Next</button> </fieldset> <!-- Step 4: Review & Submit --> <fieldset> <!-- ... --> <button type="button" class="previous" onclick="previousStep()">Previous</button> <button type="submit">Submit Application</button> </fieldset></form>Notice: Weve added onclick attributes to the Previous and Next buttons to link them to their respective JavaScript functions: previousStep() and nextStep().The Next ButtonThe nextStep() function is linked to the Next button. Whenever the user clicks the Next button, the nextStep() function will first check to ensure that all the fields for whatever step the user is on have been filled out correctly before moving on to the next step. If the fields havent been filled correctly, it displays some error messages, letting the user know that theyve done something wrong and informing them what to do to make the errors go away. Before we go into the implementation of the nextStep function, there are certain variables we need to define because they will be needed in the function. First, we need the input fields from the DOM so we can run checks on them to make sure they are valid.// Step 1 fieldsconst name = document.getElementById("name");const email = document.getElementById("email");const phone = document.getElementById("phone");// Step 2 fieldsconst company = document.getElementById("company");const jobTitle = document.getElementById("jobTitle");const yearsExperience = document.getElementById("yearsExperience");// Step 3 fieldsconst skills = document.getElementById("skills");const highestDegree = document.getElementById("highestDegree");Then, were going to need an array to store our error messages.let errorMsgs = [];Also, we would need an element in the DOM where we can insert those error messages after theyve been generated. This element should be placed in the HTML just below the last fieldset closing tag:<div id="errorMessages" style="color: rgb(253, 67, 67)"></div>Add the above div to the JavaScript code using the following line:const errorMessagesDiv = document.getElementById("errorMessages");And finally, we need a variable to keep track of the current step.let currentStep = 1;Now that we have all our variables in place, heres the implementation of the nextstep() function:function nextStep() { errorMsgs = []; errorMessagesDiv.innerText = ""; switch (currentStep) { case 1: addValidationErrors(name, email, phone); validateStep(errorMsgs); break; case 2: addValidationErrors(company, jobTitle, yearsExperience); validateStep(errorMsgs); break; case 3: addValidationErrors(skills, highestDegree); validateStep(errorMsgs); break; }}The moment the Next button is pressed, our code first checks which step the user is currently on, and based on this information, it validates the data for that specific step by calling the addValidationErrors() function. If there are errors, we display them. Then, the form calls the validateStep() function to verify that there are no errors before moving on to the next step. If there are errors, it prevents the user from going on to the next step.Whenever the nextStep() function runs, the error messages are cleared first to avoid appending errors from a different step to existing errors or re-adding existing error messages when the addValidationErrors function runs. The addValidationErrors function is called for each step using the fields for that step as arguments.Heres how the addValidationErrors function is implemented:function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) { if (!fieldOne.checkValidity()) { const label = document.querySelector(label[for="${fieldOne.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (!fieldTwo.checkValidity()) { const label = document.querySelector(label[for="${fieldTwo.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (fieldThree && !fieldThree.checkValidity()) { const label = document.querySelector(label[for="${fieldThree.id}"]); errorMsgs.push(Please Enter A Valid ${label.textContent}); } if (errorMsgs.length > 0) { errorMessagesDiv.innerText = errorMsgs.join("\n"); }}This is how the validateStep() function is defined:function validateStep(errorMsgs) { if (errorMsgs.length === 0) { showStep(currentStep + 1); }}The validateStep() function checks for errors. If there are none, it proceeds to the next step with the help of the showStep() function.function showStep(step) { steps.forEach((el, index) => { el.hidden = index + 1 !== step; }); currentStep = step;}The showStep() function requires the four fieldsets in the DOM. Add the following line to the top of the JavaScript code to make the fieldsets available:const steps = document.querySelectorAll(".step");What the showStep() function does is to go through all the fieldsets in our form and hide whatever fieldset is not equal to the one were navigating to. Then, it updates the currentStep variable to be equal to the step were navigating to.The Previous ButtonThe previousStep() function is linked to the Previous button. Whenever the previous button is clicked, similarly to the nextStep function, the error messages are also cleared from the page, and navigation is also handled by the showStep function. function previousStep() { errorMessagesDiv.innerText = ""; showStep(currentStep - 1);}Whenever the showStep() function is called with currentStep - 1 as an argument (as in this case), we go back to the previous step, while moving to the next step happens by calling the showStep() function with currentStep + 1" as an argument (as in the case of the validateStep() function).Improving User Experience With Visual CuesOne other way of improving the user experience for a multi-step form, is by integrating visual cues, things that will give users feedback on the process they are on. These things can include a progress indicator or a stepper to help the user know the exact step they are on.Integrating A StepperTo integrate a stepper into our form (sort of like this one from Material Design), the first thing we need to do is add it to the HTML just below the opening <form> tag.<form id="jobApplicationForm"> <div class="stepper"> <span><span class="currentStep">1</span>/4</span> </div> <!-- ... --></form>Next, we need to query the part of the stepper that will represent the current step. This is the span tag with the class name of currentStep.const currentStepDiv = document.querySelector(".currentStep");Now, we need to update the stepper value whenever the previous or next buttons are clicked. To do this, we need to update the showStep() function by appending the following line to it:currentStepDiv.innerText = currentStep;This line is added to the showStep() function because the showStep() function is responsible for navigating between steps and updating the currentStep variable. So, whenever the currentStep variable is updated, the currentStepDiv should also be updated to reflect that change.Storing And Retrieving User DataOne major way we can improve the forms user experience is by storing user data in the browser. Multistep forms are usually long and require users to enter a lot of information about themselves. Imagine a user filling out 95% of a form, then accidentally hitting the F5 button on their keyboard and losing all their progress. That would be a really bad experience for the user.Using localStorage, we can store user information as soon as it is entered and retrieve it as soon as the DOM content is loaded, so users can always continue filling out their forms from wherever they left off. To add this feature to our forms, we can begin by saving the users information as soon as it is typed. This can be achieved using the input event.Before adding the input event listener, get the form element from the DOM:const form = document.getElementById("jobApplicationForm");Now we can add the input event listener:// Save data on each input eventform.addEventListener("input", () => { const formData = { name: document.getElementById("name").value, email: document.getElementById("email").value, phone: document.getElementById("phone").value, company: document.getElementById("company").value, jobTitle: document.getElementById("jobTitle").value, yearsExperience: document.getElementById("yearsExperience").value, skills: document.getElementById("skills").value, highestDegree: document.getElementById("highestDegree").value, }; localStorage.setItem("formData", JSON.stringify(formData));});Next, we need to add some code to help us retrieve the user data once the DOM content is loaded.window.addEventListener("DOMContentLoaded", () => { const savedData = JSON.parse(localStorage.getItem("formData")); if (savedData) { document.getElementById("name").value = savedData.name || ""; document.getElementById("email").value = savedData.email || ""; document.getElementById("phone").value = savedData.phone || ""; document.getElementById("company").value = savedData.company || ""; document.getElementById("jobTitle").value = savedData.jobTitle || ""; document.getElementById("yearsExperience").value = savedData.yearsExperience || ""; document.getElementById("skills").value = savedData.skills || ""; document.getElementById("highestDegree").value = savedData.highestDegree || ""; }});Lastly, it is good practice to remove data from localStorage as soon as it is no longer needed:// Clear data on form submitform.addEventListener('submit', () => { // Clear localStorage once the form is submitted localStorage.removeItem('formData');}); Adding The Current Step Value To localStorageIf the user accidentally closes their browser, they should be able to return to wherever they left off. This means that the current step value also has to be saved in localStorage.To save this value, append the following line to the showStep() function:localStorage.setItem("storedStep", currentStep);Now we can retrieve the current step value and return users to wherever they left off whenever the DOM content loads. Add the following code to the DOMContentLoaded handler to do so:const storedStep = localStorage.getItem("storedStep");if (storedStep) { const storedStepInt = parseInt(storedStep); steps.forEach((el, index) => { el.hidden = index + 1 !== storedStepInt; }); currentStep = storedStepInt; currentStepDiv.innerText = currentStep; }Also, do not forget to clear the current step value from localStorage when the form is submitted.localStorage.removeItem("storedStep");The above line should be added to the submit handler.Wrapping UpCreating multi-step forms can help improve user experience for complex data entry. By carefully planning out steps, implementing form validation at each step, and temporarily storing user data in the browser, you make it easier for users to complete long forms.For the full implementation of this multi-step form, you can access the complete code on GitHub.

Earlier this month, we wrapped up our SmashingConfs 2024, and one subject that kept coming up over and over again among attendees, between speakers, and even within the staff was what would we like to get better at next year?It seems like everyone has a different answer, but one thing is for sure: Smashing can help you with that. Save 30% on Books and Workshops (3+ items)Good news for people who love a good value for a friendly price: until Thursday, 5 December, you can save 30% off three or more books and eBooks, 30% off three or more workshops, or get the entire Smashing eBook library for $75. This is a perfect time to set yourself up for a year of learning in 2025.Build Your Own Bundle!Our hardcover books are our editorial flagships. They deliver in-depth knowledge and expertise shared by experts from the industry. No fluff or theory, only practical tips and insights you can apply to your work right away.No matter if you want to complete your existing Smashing book collection or start one from scratch, you can now pick and mix your favorite books and eBooks from our Smashing Books line-up to create a bundle tailored to your needs. Or take a look at our bundle recommendations below for some inspiration. Browse all Smashing BooksSave 30% with 3 or more books. No ifs or buts!Until Thursday, 5 December, the 30% book discount will automatically apply to your cart once you add three or more items. Please note that the discount cant be combined with other discounts.Once youve decided which books should go into your bundle, well pack everything up safely and send the parcel right to your doorstep from our warehouse in Germany. Shipping is free worldwide. Check delivery times.Book Bundle RecommendationsWe know decisions can be hard, thats why we collected some ideas for themed book bundles to make the choice at least a bit easier. These bundles are perfect if you want to enhance your skills in one particular field.You can click on each book title to jump to the details and add the book to your cart. The discount will be applied during checkout.Front-End Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Front-End Bundle dives deep into the challenges front-end developers face in their work every day whether its performance, TypeScript and Image Optimization. Youll learn practical strategies to make your workflow more efficient, but also gain precious insights into how teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify tackle common challenges and frustrations.Success at Scale by Addy OsmaniTypeScript in 50 Lessons by Stefan BaumgartnerImage Optimization by Addy OsmaniDesign Best Practices Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Design Best Practices Bundle is all about creating respectful, engaging experiences that put your users well-being and privacy first. The practical and tactical tips help you encourage users to act without employing dark patterns and manipulative techniques and grow a sustainable digital business that becomes more profitable as a result.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagUnderstanding Privacy by Heather BurnsThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenInterface Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $144.00Bundle price: $100.80A lot of websites these days look rather generic. Our Interface Design Bundle will make you think outside the box, exploring how you can create compelling, effective user experiences, with clear intent and purpose for both desktop and mobile.Touch Design for Mobile Interfaces by Steven HooberArt Direction for the Web by Andy ClarkeSmart Interface Design Patterns Checklist Cards by Vitaly FriedmanBig Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $292.50Bundle price: $204.75The Big Design Bundle shines a light on the fine little details that go into building cohesive, human-centered experiences. Covering everything from design systems to form design patterns, mobile design to UX, and data privacy to ethical design, it provides you with a solid foundation for designing products that stand out from the crowd.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenDesign Systems by Alla KholmatovaForm Design Patterns by Adam SilverTouch Design for Mobile Interfaces by Steven HooberUnderstanding Privacy by Heather BurnsSpecial Deal For eBook LoversGet all eBooks for $75. Youre more of an eBook kind of person? The bundle-up discounts do apply to eBooks, too, of course. Or take a look at our Smashing Library to save even more: It includes 68 eBooks (including all our latest releases) for $75 (PDF, ePUB, and Kindle formats). Perfect to keep all your favorite books close when youre on the go.Bundle Up On Online Workshops: 30% Off On 3+ WorkshopsReady to dig even deeper? Whether you want to explore design patterns for AI interfaces, learn how to plan a design system, or master the art of storytelling, our online workshops are a friendly way to boost your skills online and learn practical, actionable insights from experts, live. To prepare for the challenges that 2025 might have in store for you, you can now bundle up 3 or more online workshops and save 30% on the total price with code BUNDLEUP. Please note that the discount cant be combined with other discounts. Take a look at all our upcoming workshops and start your smashing learning journey this winter.Custom Bundles To Fit Your Needs!Do you need a custom bundle? At Smashing, we would love to know how we can help you and your team make the best of 2025. Lets think big!Wed be happy to craft custom bundles that work for you:Group discounts on large teams for Smashing Membership,Bulk discounts on books or other learning materials for education or non-profit groups,Door prize packages for meetups and events,...any other possibilities for your team, your office, your career path. Let us know via contact form!We are always looking for new ways to support our community. Please contact us if youd like us to craft a custom bundle for your needs, or if you have any questions at all. Lets have a great year!Community Matters Producing a book or a workshop takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their kind, ongoing support. Happy learning, everyone!

As the year is coming to a close, many of us feel rushed, meeting deadlines, finishing off projects, or preparing for the upcoming holiday season. So how about some beautiful, wintery desktop wallpapers to sweeten up the month and get you in the mood for December and the holidays, if youre celebrating?More than thirteen years ago, we started our monthly wallpapers series here at Smashing Magazine. Its the perfect opportunity to put your creative skills to the test but also to find just the right wallpaper to accompany you through the new month. This month is no exception, of course, so following our cozy little tradition, we have a new collection of December wallpapers for you to choose from. All of them were created with love by artists and designers from across the globe and can be downloaded for free.A huge thank you to everyone who tickled their creativity and shared their designs with us. This post wouldnt exist without you. Happy December!You can click on every image to see a larger preview.We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit your wallpaper design! Feeling inspired? We are always looking for creative talent and would love to feature your desktop wallpaper in one of our upcoming posts. We cant wait to see what youll come up with!Paws-itively Festive!This holiday season, even our furry friends are getting in the spirit! Our mischievous little tree-topper has found the purr-fect perch to keep an eye on all the festivities. May your days be merry, bright, and filled with joyful surprises just like this one! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Merry ChristmmmDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Dung BeetleDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Dear Moon, Merry ChristmasDesigned by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Cardinals In SnowfallDuring Christmas season, in the cold, colorless days of winter, Cardinal birds are seen as symbols of faith and warmth. In the part of America I live in, there is snowfall every December. While the snow is falling, I can see gorgeous Cardinals flying in and out of my patio. The intriguing color palette of the bright red of the Cardinals, the white of the flurries and the brown/black of dry twigs and fallen leaves on the snow-laden ground fascinates me a lot, and inspired me to create this quaint and sweet, hand-illustrated surface pattern design as I wait for the snowfall in my town! Designed by Gyaneshwari Dave from the United States.previewwithout calendar: 640x960, 768x1024, 1280x720, 1280x1024, 1366x768, 1920x1080, 2560x1440The House On The River DrinaSince we often yearn for a peaceful and quiet place to work, we have found inspiration in the famous house on the River Drina in Bajina Bata, Serbia. Wouldnt it be great being in nature, away from civilization, swaying in the wind and listening to the waves of the river smashing your house, having no neighbors to bother you? Not sure about the Internet, though Designed by PopArt Studio from Serbia.previewwithout calendar: 640x480, 800x600, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Enchanted BlizzardA seemingly forgotten world under the shade of winter glaze hides a moment where architecture meets fashion and change encounters steadiness. Designed by Ana Masnikosa from Belgrade, Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Christmas CookiesChristmas is coming and a great way to share our love is by baking cookies. Designed by Maria Keller from Mexico.previewwithout calendar: 320x480, 640x480, 640x1136, 750x1334, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1242x2208, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Sweet Snowy TendernessYou know that warm feeling when you get to spend cold winter days in a snug, homey, relaxed atmosphere? Oh, yes, we love it, too! It is the sentiment we set our hearts on for the holiday season, and this sweet snowy tenderness is for all of us who adore watching the snowfall from our windows. Isnt it romantic? Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Getting HyggeTheres no more special time for a fire than in the winter. Cozy blankets, warm beverages, and good company can make all the difference when the sun goes down. Were all looking forward to generating some hygge this winter, so snuggle up and make some memories. Designed by The Hannon Group from Washington D.C.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1280x960, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440AnonymooseDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Joy To The WorldJoy to the world, all the boys and girls now, joy to the fishes in the deep blue sea, joy to you and me. Designed by Morgan Newnham from Boulder, Colorado.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440King Of PopDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Christmas WoodlandDesigned by Mel Armstrong from Australia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 Catch Your Perfect SnowflakeThis time of year, people tend to dream big and expect miracles. Let your dreams come true! Designed by Igor Izhik from Canada.previewwithout calendar: 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600Trailer SantaA mid-century modern Christmas scene outside the norm of snowflakes and winter landscapes. Designed by Houndstooth from the United States.previewwithout calendar: 1024x1024, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Silver WinterDesigned by Violeta Dabija from Moldova.previewwithout calendar: 1024x768, 1280x800, 1440x900, 1680x1050, 1920x1200, 2560x1440Gifts LoverDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440On To The Next OneEndings intertwined with new beginnings, challenges we rose to and the ones we werent up to, dreams fulfilled and opportunities missed. The year we say goodbye to leaves a bitter-sweet taste, but were thankful for the lessons, friendships, and experiences it gave us. We look forward to seeing what the new year has in store, but, whatever comes, we will welcome it with a smile, vigor, and zeal. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The MatterhornChristmas is always such a magical time of year so we created this wallpaper to blend the majestry of the mountains with a little bit of magic. Designed by Dominic Leonard from the United Kingdom.previewwithout calendar: 320x480, 800x600, 1024x768, 1280x720, 1400x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Ninja SantaDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440Its In The Little ThingsDesigned by Thas Lenglez from Belgium.previewwithout calendar: 640x480, 800x600, 1024x768, 1280x1024, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 2560x1440Ice FlowersI took some photos during a very frosty and cold week before Christmas. Designed by Anca Varsandan from Romania.previewwithout calendar: 1024x768, 1280x800, 1440x900, 1680x1050, 1920x1200SurpriseSurprise is the greatest gift which life can grant us. Designed by PlusCharts from India.previewwithout calendar: 360x640, 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x900, 1680x1200, 1920x1080Seasons Greetings From AustraliaDesigned by Tazi Designs from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440Christmas SelfieDesigned by Emanuela Carta from Italy.previewwithout calendar: 320x480, 800x600, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Winter WonderlandWinter is the time for comfort, for good food and warmth, for the touch of a friendly hand and for a talk beside the fire: it is the time for home. (Edith Sitwell) Designed by Dipanjan Karmakar from India.previewwithout calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440Winter MorningEarly walks in the fields when the owls still sit on the fences and stare funny at you. Designed by Bo Dockx from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Dream What You Want To DoThe year will end, hope the last month, you can do what you want to do, seize the time, cherish yourself, expect next year we will be better! Designed by Hong Zi-Qing from Taiwan.previewwithout calendar: 1024x768, 1152x864, 1280x720, 1280x960, 1366x768, 1400x1050, 1530x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Happy HolidaysDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160

The groundwork for what we call today signals dates as early as the 1970s. Based on this work, they became popular with different fields of computer science, defining them more specifically around the 90s and the early 2000s.In Web Development, they first made a run for it with KnockoutJS, and shortly after, signals took a backseat in (most of) our brains. Some years ago, multiple similar implementations came to be.MobX observable statesVue.js refs and shallow refsSolidJS signals With different names and implementation details, those approaches are similar enough to be wrapped in a category we know today as Fine-Grained Reactivity, even if they have different levels of fine x coarse updates well get more into what this means soon enough.To summarize the history: Even being an older technology, signals started a revolution in how we thought about interactivity and data in our UIs at the time. And since then, every UI library (SolidJS, Marko, Vue.js, Qwik, Angular, Svelte, Wiz, Preact, etc) has adopted some kind of implementation of them (except for React).Typically, a signal is composed of an accessor (getter) and a setter. The setter establishes an update to the value held by the signal and triggers all dependent effects. While an accessor pulls the value from the source and is run by effects every time a change happens upstream.const [signal, setSignal] = createSignal("initial value");setSignal("new value");console.log(signal()); // "new value"In order to understand the reason for that, we need to dig a little deeper into what API Architectures and Fine-Grained Reactivity actually mean.API ArchitecturesThere are two basic ways of defining systems based on how they handle their data. Each of these approaches has its pros and cons. Pull: The consumer pings the source for updates.Push: The source sends the updates as soon as they are available.Pull systems need to handle polling or some other way of maintaining their data up-to-date. They also need to guarantee that all consumers of the data get torn down and recreated once new data arrives to avoid state tearing.State Tearing occurs when different parts of the same UI are at different stages of the state. For example, when your header shows 8 posts available, but the list has 10.Push systems dont need to worry about maintaining their data up-to-date. Nevertheless, the source is unaware of whether the consumer is ready to receive the updates. This can cause backpressure. A data source may send too many updates in a shorter amount of time than the consumer is capable of handling. If the update flux is too intense for the receiver, it can cause loss of data packages (leading to state tearing once again) and, in more serious cases, even crash the client.In pull systems, the accepted tradeoff is that data is unaware of where its being used; this causes the receiving end to create precautions around maintaining all their components up-to-date. Thats how systems like React work with their teardown/re-render mechanism around updates and reconciliation.In push systems, the accepted tradeoff is that the receiving end needs to be able to deal with the update stream in a way that wont cause it to crash while maintaining all consuming nodes in a synchronized state. In web development, RxJS is the most popular example of a push system.The attentive reader may have noticed the tradeoffs on each system are at the opposite ends of the spectrum: while pull systems are good at scheduling the updates efficiently, in push architectures, the data knows where its being used allows for more granular control. Thats what makes a great opportunity for a hybrid model.Push-Pull ArchitecturesIn Push-Pull systems, the state has a list of subscribers, which can then trigger for re-fetching data once there is an update. The way it differs from traditional push is that the update itself isnt sent to the subscribers just a notification that theyre now stale.Once the subscriber is aware its current state has become stale, it will then fetch the new data at a proper time, avoiding any kind of backpressure and behaving similarly to the pull mechanism. The difference is that this only happens when the subscriber is certain there is new data to be fetched.We call these data signals, and the way those subscribers are triggered to update are called effects. Not to confuse with useEffect, which is a similar name for a completely different thing.Fine-Grained ReactivityOnce we establish the two-way interaction between the data source and data consumer, we will have a reactive system.A reactive system only exists when data can notify the consumer it has changed, and the consumer can apply those changes.Now, to make it fine-grained there are two fundamental requirements that need to be met:Efficiency: The system only executes the minimum amount of computations necessary.Glitch-Free: No intermediary states are shown in the process of updating a state.Efficiency In UIsTo really understand how signals can achieve high levels of efficiency, one needs to understand what it means to have an accessor. In broad strokes, they behave as getter functions. Having an accessor means the value does not exist within the boundaries of our component what our templates receive is a getter for that value, and every time their effects run, they will bring an up-to-date new value. This is why signals are functions and not simple variables. For example, in Solid:import { createSignal } from 'solid-js'function ReactiveComponent() { const [signal, setSignal] = createSignal() return ( <h1>Hello, {signal()}</h1> )}The part that is relevant to performance (and efficiency) in the snippet above is that considering signal() is a getter, it does not need to re-run the whole ReactiveComponent() function to update the rendered artifact; only the signal is re-run, guaranteeing no extra computation will run.Glitch-Free UIsNon-reactive systems avoid intermediary states by having a teardown/re-render mechanism. They toss away the artifacts with possibly stale data and recreate everything from scratch. That works well and consistently but at the expense of efficiency.In order to understand how reactive systems handle this problem, we need to talk about the Diamond Challenge. This is a quick problem to describe but a tough one to solve. Take a look at the diagram below:Pay attention to the E node. It depends on D and B, but only D depends on C. If your reactive system is too eager to update, it can receive the update from B while D is still stale. That will cause E to show an intermediary state that should not exist.Its easy and intuitive to have A trigger its children for updates as soon as new data arrives and let it cascade down. But if this happens, E receives the data from B while D is stale. If B is able to trigger an update from E, E will show an intermediate state.Each implementation adopts different update strategies to solve this challenge. They can be grouped into two categories:Lazy SignalsWhere a scheduler defines the order within which the updates will occur. (A, then B and C, then D, and finally E).Eager SignalsWhen signals are aware if their parents are stale, checking, or clean. In this approach, when E receives the update from B, it will trigger a check/update on D, which will climb up until it can ensure to be back in a clean state, allowing E to finally update.Back To Our UIsAfter this dive into what fine-grained reactivity means, its time to take a step back and look at our websites and apps. Lets analyze what it means to our daily work.DX And UXWhen the code we wrote is easier to reason about, we can then focus on the things that really matter: the features we deliver to our users. Naturally, tools that require less work to operate will deliver less maintenance and overhead for the craftsperson.A system that is glitch-free and efficient by default will get out of the developers way when its time to build with it. It will also enforce a higher connection to the platform via a thinner abstraction layer.When it comes to Developer Experience, there is also something to be said about known territory. People are more productive within the mental models and paradigms they are used to. Naturally, solutions that have been around for longer and have solved a larger quantity of challenges are easier to work with, but that is at odds with innovation. It was a cognitive exercise when JSX came around and replaced imperative DOM updates with jQuery. In the same way, a new paradigm to handle rendering will cause a similar discomfort until it becomes common.Going DeeperWe will talk further about this in the next article, where were looking more closely into different implementations of signals (lazy, eager, hybrid), scheduled updates, interacting with the DOM, and debugging your own code!Meanwhile, you can find me in the comments section below, on (Twitter), LinkedIn, BlueSky, or even youtube. Im always happy to chat, and if you tell me what you want to know, Ill make sure to include it in the next article! See ya!

On Thursday, October 10, 2024, I gave my first talk at an international event, the WordPress Accessibility Day (WPAD) 2024. Just a few months before, I was a newcomer to the world of web accessibility. Yet here I was, speaking to an audience of accessibility specialists and advocates, and they were genuinely interested in what I had to share. How did I get here? Most importantly, how can you get here?My Journey To Web Accessibility And Public SpeakingI first learned about web accessibility from contributing to caMicroscope as an Outreachy intern. Outreachy offers internships in open source and open science to people underrepresented in tech within their home countries. caMicroscope is basically an open-source tool for studying and analyzing digital images of body tissues.During my three-month internship, I worked on enhancing the caMicroscopes accessibility. I conducted accessibility audits to identify areas for improvement and fixed several technical issues to make the web app more accessible. Since this was my first exposure to accessibility, I spent a lot of time researching and learning, gradually building a knowledge base that would later inspire my first talk.The more I learned about accessibility, the more I realized how important it is to digital product design and user experience, yet few people seemed to be talking about it. Just before my internship ended, I began searching for accessibility events that I could attend to connect with people in the field. That was how I stumbled on the Call for Proposals (CFP) for WordPress Accessibility Day 2024.Initially, I was hesitant to apply. I wondered,What do I know about accessibility that people would care to listen to me?But I also thought,How often do you find a UX designer not only testing for accessibility but actually implementing technical fixes for the first time?This was my experience, my story, and no one could tell it better than me. The CFP also encouraged first-time speakers to submit a proposal. That was an additional motivation. I figured,Whats the worst that could happen?So, I pushed through my doubts, did extensive research to choose a topic, and finally submitted my proposal.When I received the email that my proposal was accepted, I was thrilled. But then came the next hurdle preparing the presentation itself. Now, I had to think deeply about my audience: what message I wanted to convey and how to make it engaging and informative. After all, people were going to spend their time listening to me. I wanted to make it worth their while.I reworked my slides at least four times. Even the night before my talk, I was still making edits (something I dont recommend!). Watching the sessions of speakers who presented before me helped me learn some last-minute tips, but it also led to comparing my slides to theirs, wondering if I was missing something. Up until my talk began, I struggled with imposter syndrome. What if I forgot what I was supposed to say? Or dont know how to answer a question that an attendee asks?Finally, the moment came. I spent 40 minutes sharing with attendees the importance of manual accessibility testing. Not long into my presentation, I felt my initial anxiety melt away. I was calm and enthusiastic throughout the rest of my talk. It was an amazing experience, one that Im grateful for.Since then, Ive submitted another talk proposal to speak at a different conference. While I still have some doubts, theyre no longer about whether or not Im qualified to speak but rather about whether or not my talk will be accepted. Ive grown since my first talk, and if youre considering a similar path, you can too.Why We Hold BackAt every tech event I attend, when the hosts introduce the speakers, the introductions typically go something like the following:John Doe is the Senior Product Designer at XYZ Company, bringing over seven years of expertise to his role. He serves as Chairman of the Technical Steering Committee for the ABC Community, contributing to its strategic direction and growth. As the founder of LMNOP, John has driven a startup that has generated over $XXXX in revenue and created over 500 jobs, making a substantial impact on the African tech ecosystem.Impressive. Inspiring. And for a newbie, maybe even intimidating.When theyre giving their talk, I often catch myself thinking:With so many years of experience, no wonder they know so much. When will I ever reach this level?I was subconsciously beginning to associate speaker with expert. I started believing that to qualify as a speaker, I needed an impressive title, years of experience, or some remarkable achievement under my belt. And I know Im not the only one who feels this way.How To Deal With Impostor SyndromeWhen I first saw the call for speakers for WordPress Accessibility Day, my immediate reaction was to scroll past it. After all, I had only been working with web accessibility for a short time. Surely, they were looking for seasoned professionals with years of experience, right? Wrong. Had I given in to this misconception, I would have robbed myself of an incredible opportunity for growth.If youve ever held back from submitting a talk proposal because you feel youre not qualified enough to talk on a subject, here are some tips to help you deal with the imposter syndrome:Embrace Your Newbie StatusThe reason you feel like an imposter is probably because youre cosplaying as an expert that youre not (yet), and youre afraid people might see through the facade. So, the fear of failing and the pressure to meet expectations weigh you down. Be proud of your novice status. And who said experts make the best speakers? Even the so-called experts get nervous to speak.Practice, Practice, PracticeAnother reason you may hold back is because you dont have speaking experience. But how do you gain speaking experience? You guessed right by speaking. So, speak. Or at least practice speaking. The more prepared you are, the more confident youll feel. Start by presenting to your rubber duck, your pet, a friend, or a family member. Each time you practice, youll discover ways to explain concepts more clearly and identify areas where you need to strengthen your understanding. Record yourself and watch it back. Yes, its uncomfortable, but its one of the best ways to improve your delivery and body language.Focus On Your JourneyYour recent learning experience is actually an advantage. You still remember what its like to struggle with concepts that experts take for granted. This makes you qualified to help others who are just starting. Think about it: Who better to explain the challenges of learning a new technology than someone who just overcame them?Focus On Sharing, Not ProvingShift your mindset from I need to prove Im an expert to I want to share what Ive learned. This subtle change removes the pressure of perfection and places the focus where it belongs on helping others. Share your mistakes, your aha moments, the resources that helped you. These are often more valuable than polished theory from someone whos forgotten what its like to be a beginner.Share Your ExperienceIm not the first UX designer to dive into accessibility, but out of many contributors who applied to the project, I was the one selected to improve caMicroscopes accessibility. Thats my unique angle. Your background and experience bring a perspective that others can learn from. Dont try to compete with comprehensive tutorials or documentation. Instead, share your practical, real-world experience. Focus on sharing:Specific problems you encountered and how you solved them;Lessons learned from failed approaches;Real-world trade-offs and decisions you had to make;Insights that surprised you along the way;Practical tips that arent found in standard documentation.Remember That The Audience Wants You To SucceedConference attendees (and organizers) arent there to judge you or catch you making mistakes. Theyre there to learn, and they want you to succeed. Many will be grateful to hear from someone who can relate to their current experience level. Your vulnerability and openness about being new to the field can actually make your talk more approachable and engaging.Why Newbie Voices MatterYou Bring A Fresh PerspectiveAs an early-career professional, you bring a fresh, unencumbered viewpoint to the table. The questions you ask and the solutions you propose arent constrained by the way things have always been done.This reminds me of the story about the truck that got stuck under a bridge. Experts spent hours trying complex maneuvers to free it until a schoolboy suggested a simple solution deflating the tires. Your recent learning experiences make you uniquely positioned to see solutions that seasoned professionals overlook.You see, innovation often arises from those not bound by conventional thinking. As a newcomer, youre more likely to draw parallels from other industries or suggest unconventional approaches that could lead to breakthroughs.You Inspire Others Like YouWhenever I see a call for speakers for an event, I have a habit of checking the speakers lineup from past events to see if theres anyone like me Nigerian, female, relatively new to tech, young. If I dont find anyone similar, I often feel hesitant about submitting a proposal. But if I do, Im immediately encouraged to apply.Your Story Has PowerYour story, your ideas, your fresh take they could be the solution to someones problem, ignite a new area of exploration, or simply give another budding professional the confidence to pursue their goals. Your journey could be exactly what someone in the audience needs to hear. So, dont let imposter syndrome hold you back. The tech community needs your voice.When you speak at events, youre not just sharing your own knowledge. Youre inspiring other newcomers to step up and share their voices, too. Representation matters, and youre contributing to the diversity of perspectives, which is necessary for progress and innovation.Benefits Of Speaking As A NewcomerBesides the anxiety that comes with speaking, are there benefits that you gain from being a first-time speaker at an event? Short answer: Yes. What are they?Your Knowledge GrowsYou know what they say: If you want to master something, teach it.When I started preparing for my accessibility talk, I extensively researched not just my topic but also how best to deliver it. I read articles on creating accessible presentations. I was speaking at an accessibility event, after all, so my slides and delivery had to be accessible to all in the audience. The questions from the audience also challenged me to think about accessibility from angles I hadnt considered before. Trust me, youll learn more preparing for a 30-minute talk than you would in months of regular work.You Become More ConfidentRemember that shaky feeling when you first pushed code to production? Speaking at an event is similar terrifying at first but incredibly empowering once youve done it. After my first talk, I found that I became more confident in team meetings, more willing to share ideas, and more comfortable with challenging assumptions. Theres something powerful about standing in front of a room (virtual or physical) and sharing your knowledge that makes other professional challenges seem less daunting.The Quality And Quantity Of Your Network IncreasesNetworking hits differently when youre a speaker. Before my talk, I was just another attendee sending connection requests. After? Industry leaders were reaching out to ME. I remember checking my LinkedIn notifications after my accessibility talk and seeing connection requests from people Id only dreamed of connecting with.Now, instead of trying to start conversations at networking sessions (which, lets be honest, can be awkward), your talk becomes the conversation starter. People approach you with genuine interest in your perspective, and suddenly, youre having meaningful discussions about your passion with folks who share it.It Gives Your Career A Significant BoostWant to know what sets you apart from other candidates with similar years of experience? Speaking credentials. Imagine listing Speaker at WordPress Accessibility Day on my resume. It shows initiative and expertise that goes beyond day-to-day work activities.Plus, conferences often give speakers free or discounted tickets to future events; thats premium access to learning and networking opportunities that might otherwise be out of reach for early-career professionals. Thats how you get to that level.You Contribute To The Tech Knowledge BaseOften, especially with virtual conferences, a recording of the event is uploaded on YouTube. That means anyone searching the web for a topic related to your talk will find your talk in the search results. Your 30-minute presentation becomes a permanent resource in the vast library of tech knowledge. I cant count the number of times a conference video addressed a concern I had or served as a resource for a talk or an article I was working on. Now, I get to be on the other side, helping someone else figure things out.And heres another bonus: those YouTube videos also work as a portfolio of sorts. So, not only are you contributing to the community, but youre also building a body of work that showcases your expertise and speaking skills.You Just Might Get PaidHeres something people dont talk about enough: many conferences pay their speakers or at least cover travel expenses. Not only are you learning and growing, but you might also get paid for it! Even if the event doesnt offer payment, the experience itself is invaluable for your portfolio.You Build Your Personal BrandEvery time you speak, youre building your personal brand. Your talks become content you can share on social media, add to your portfolio, and reference in job interviews. Imagine a recruiter saying to you, I remember you from your talk at a so-and-so conference. In an industry as competitive as tech, this kind of recognition is invaluable.Tips For First-Time SpeakersI found this article by Andy Budd on how to become a better speaker at conferences very helpful when I was preparing for my talk. In addition to his expert advice, here are a few tips Id like to share from my own experience as a first-time speaker:Choose A Topic Youre Passionate AboutWhen selecting a topic, pick something youre genuinely passionate about. Your enthusiasm will shine through your presentation and captivate the audience.Recently learned a new skill that simplified your workflow?Participated in a workshop that changed how you approach a problem?Discovered a clever workaround to a common problem?Topics like these, drawn from your personal experiences, make for compelling talk ideas.Heres a hack Ive used to uncover potential speaking ideas: instead of racking your brain when a call for proposals goes out, stay alert for inspiration in your day-to-day activities. As you go about your work or scroll through social media, jot down any concepts that pique your curiosity. That seemingly mundane task you were performing when the idea struck could serve as a fascinating hook for your presentation.Prepare ThoroughlyOnce youve settled on a topic, its time to dive deep into research and practice. Spend time mastering the subject matter from every angle so you can speak with authority. If you followed tip no. 1 (choose a topic youre passionate about and are drawing from your personal experience), you are already halfway prepared.But dont stop there. Rehearse your talk multiple times, refining your delivery and transitions until you feel confident. Watch recordings of similar presentations and critically analyze what worked well and where theres room for improvement. How did the speakers engage the audience? Were there any areas that could have been explained better? Studying successful talks will help you identify ways to elevate your own performance.Engage With Your AudienceA speaking engagement is a conversation, not a monologue. Encourage questions and discussion throughout your talk. Be responsive to the audiences needs and interests. If you notice puzzled expressions or hesitant body language, pause to clarify or rephrase. Making that personal connection will keep people invested and eager to learn from you.Start With A Virtual EventIf the prospect of speaking in front of a live audience makes you nervous, consider starting with a virtual event. The online format can feel more approachable since youll be delivering the talk from the comfort of your home, and youll have the flexibility to reference notes or prompts without the audience noticing.Connect With Other First-Time SpeakersWhen I was preparing my talk, I spent hours on YouTube searching for talks by people who shared my background. I was particularly interested in their early speaking appearances, so Id scroll through their video history to find their first-ever talks.These speakers werent polished professionals at the time, and thats exactly what made their talks valuable to me. Watching them helped me realize that perfection isnt the goal. I studied their presentations carefully, noted what worked well and what could be improved, and used these insights to strengthen my own talk.If youre more outgoing than I am, consider reaching out directly to other new speakers in your community. You can find them on Twitter, LinkedIn, or at local tech meetups. Building a support system of people who understand exactly what youre going through can be incredibly reassuring. You can practice your talks together and provide feedback to each other.Be AuthenticFinally, dont be afraid to let your authentic self shine through. Share personal anecdotes, tell jokes, discuss the challenges you faced, and be vulnerable about your own learning journey.Your honesty and humility will resonate far more than a polished, impersonal presentation. Remember, the audience wants to connect with you, not just your expertise.ConclusionIn retrospect, Im glad that I pushed past my initial doubts and applied to speak at WordPress Accessibility Day. It was a transformative experience that has accelerated my growth in the field and connected me with an incredible community.To all the newcomers reading this:Your voice matters. Your perspective is valuable. The tech community needs fresh voices and perspectives. Your I just learned this enthusiasm can be infectious and inspiring.So, the next time you see a call for speakers, dont scroll past it. Take that leap. Apply to speak. Share your knowledge. You never know who you might inspire or what doors you might open for yourself and for others.Remember, every expert was once a beginner. I hope youre inspired to take the stage and let your voice be heard.Further ResourcesGetting Started in Public Speaking: Global Diversity CFP Day, Rachel AndrewComplete Guide to Giving Your First Conference Talk, Gwendolyn FaradayHow to Prepare for Your First Conference Talk, Lisa Wentz M.A.How to Write a Conference Talk Abstract That Will Get Accepted, Linda Ikechukwu

As I sit down to write this article, I cant help but marvel at the incredible changes sweeping through our industry. For the first time in my career, I feel like were no longer limited by our technology but by our imagination. Well, almost. Artificial Intelligence (AI) is reshaping the web design landscape in ways we could only dream of a few years ago, and Im excited to share with you how its supercharging our productivity across various aspects of our work.AI Is A Partner, Not A CompetitorNow, before we dive in, let me assure you: AI isnt here to replace us. At least, not for a while yet. There are still crucial areas where human expertise reigns supreme. AI struggles with strategic planning that considers the nuances of human behavior and market trends. It cant match our emotional intelligence when navigating client relationships and team dynamics. And when it comes to creative thinking that pushes boundaries and creates truly innovative solutions, we humans still have the upper hand.But heres the exciting part: AI is becoming an invaluable tool thats supercharging our productivity. Think of it as having a highly capable intern at your disposal. As the Nielsen Norman Group aptly put it in their article AI as an Intern, we need to approach AI tools with the right mindset. Double-check their work, use them for initial drafts rather than final products, and provide specific instructions and relevant context.The key to harnessing AIs power lies in working with it collaboratively.Dont expect perfect results on the first try. Instead, engage in a back-and-forth conversation, refining the AI output through iteration. This process of continuous improvement is where AI truly shines, dramatically speeding up our workflow.Lets explore how AI is reshaping different areas of our industry, looking at some of the many tools available to us.AI In Design: Unleashing Creativity And EfficiencyIn the realm of design, AI is proving to be a game-changer. Its particularly adept at:Collaborating on layout;Generating the perfect image;Refining and adapting existing imagery.Take AI in Figma, for instance. Its become my go-to for generating dummy content and tidying up my layers. The time saved on these mundane tasks allows me to focus more on the creative aspects of design.Generative imagery tools like Krea, which uses Flux, have revolutionized how we source visuals. Gone are the days of endlessly scrolling through stock libraries. Now, we can describe exactly what we need, and AI will create it for us. This level of customization and specificity is a game changer for creating unique, on-brand visuals.Relume is another tool Ive found incredibly useful. Its great for a collaborative back-and-forth over designs or for quickly putting together designs for smaller sites. The ability to iterate rapidly with AI assistance has significantly sped up my design process.And lets not forget about Adobe. Their upcoming tools, such as lighting matching for composite images, are set to take our design capabilities to new heights. If you want to see more of whats on the horizon, I highly recommend checking out the latest Adobe Max presentations.AI In Coding: Boosting Developer ProductivityThe impact of AI on coding is nothing short of revolutionary. According to a McKinsey study, developers using AI tools performed coding tasks like code generation, refactoring, and documentation 20%-50% faster on average compared to those not using AI tools. Thats a significant productivity boost!AI is helping developers in several key areas:Coding faster;Debugging more efficiently;Automatically generating code comments;Writing basic code.To put this into perspective, AI now writes 25% of the code at Google. Thats a staggering figure from one of the worlds leading tech companies.Tools like Cursor AI and GitHub Copilot are at the forefront of this revolution, offering features such as:AI pair programming with predictive code edits;Natural language code editing;Chat interfaces for asking questions and getting help.Ive personally been amazed by what ChatGPT 01-Preview can do. Ive used it to build simple WordPress plugins in minutes, tasks that would have taken me significantly longer in the past.AI In UX: Enhancing User Research And AnalysisIn the field of User Experience (UX), AI is opening up new possibilities for research and analysis. Its allowing us to:Conduct user research at scale;Analyze open-ended qualitative feedback;Query analytic data using natural language;Predict user behavior.Ive found ChatGPT to be an invaluable tool for data analysis, particularly when it comes to making sense of analytics and survey responses. It can quickly identify patterns and insights that might take us hours to uncover manually.Tools like Strella are pushing the boundaries of whats possible in user research. AI can now perform user interviews at scale, allowing us to gather insights from a much larger pool of users than ever before.Attention Insight is another fascinating tool. It uses AI to predict where people will look on a page, providing valuable data for optimizing layouts and user interfaces.Microsoft Clarity has also upped its game, allowing us to ask questions about our analytic insights, heatmaps, and session recordings. This natural language interface makes it easier than ever to extract meaningful insights from our data.AI In Copywriting: Elevating Content Quality And EfficiencyWhen it comes to copywriting, AI is proving to be a powerful ally. Its helping us:Transform poor-quality stakeholder content into web-optimized copy;Brainstorm value propositions and create high-converting copy;Craft compelling business cases and strategy documentation;Write standard operating procedures.Notion AI has become one of my go-to tools for content creation. It combines the best of ChatGPT and Claude, allowing it to draw upon a wide range of provided source material to write detailed documentation, articles, and reports.ChatGPT has been a game-changer for improving the quality of website copy. It can take user questions and bullet-point answers from subject specialists and transform them into web-optimized content. Ive found it particularly useful for defining value propositions and writing high-converting copy.For refining existing content, the Hemingway Editor is invaluable. It can take the existing copy and make it clearer, more concise, and easier to scan essential qualities for effective web content.AI In Administration: Streamlining Mundane TasksAI isnt just transforming the technical aspects of our work; its also making a significant impact on those mundane administrative tasks that often eat up our time. By leveraging AI, we can streamline various aspects of our daily workflow, allowing us to focus more on high-value activities.Here are some ways AI is helping us tackle administrative tasks more efficiently:Getting our thoughts down faster;Writing better emails;Summarizing long emails or Slack threads;Speeding up research;Backing up arguments with relevant data.Let me share some personal experiences with AI tools that have transformed my administrative workflow:Ive dramatically increased my writing speed using Flow. This tool has taken me from typing at 49 words per minute to dictating at over 95 words per minute. Not only does it allow me to dictate, but it also tidies up my words to ensure they read well and are grammatically correct.For email writing, Ive found Fixkey to be invaluable. It helps me rewrite or reformat copy quickly. Ive even set up a prompt that tones down my emails when Im feeling particularly irritable, ensuring they sound reasonable and professional.Dealing with long email threads or Slack conversations can be time-consuming. Thats where Spark comes in handy. It summarizes lengthy threads, saving me valuable time. Interestingly, this feature is now built into iOS for all notifications, making it even more accessible.When it comes to research, Google Notebook LLM has been a game-changer. I can feed it large amounts of data on a subject and quickly extract valuable insights. This tool has significantly sped up my research process.Lastly, if I need to back up an argument with a statistic or quote, Perplexity has become my go-to resource. It quickly finds relevant sources I can quote, adding credibility to my work without the need for extensive manual searches.Conclusion: Embracing AI For A More Productive FutureAs I wrap up this article, I realize Ive only scratched the surface of what AI can do for our industry. The real challenge isnt in the technology itself but in breaking out of our established routines and taking the time to experiment with whats possible.I believe we need to cultivate a new habit: pausing before each new task to consider how AI could help us approach it differently. The winners in this new reality will be those who can best integrate this technology into their workflow.AI isnt replacing us its empowering us to work smarter and more efficiently. By embracing these tools and learning to collaborate effectively with AI, we can focus more on the aspects of our work that truly require human creativity, empathy, and strategic thinking.If youre feeling overwhelmed by the rapid pace of change, dont worry. Were all learning and adapting together. Remember, the goal isnt to become an AI expert overnight but to gradually incorporate these tools into your work in ways that make sense for you and your projects.

This article is a sponsored by PenpotPenpot is a free, open-source design tool that allows true collaboration between designers and developers. Designers can create interactive prototypes and design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast because it's built with web technologies, works in the browser, and has already passed 33K starts on GitHub.The UI feels intuitive and makes it easy to get things done, even for someone whos not a designer (guilty as charged!). You can get things done in the same way and with the same quality as with other more popular and closed-source tools like Figma.Why Open-Source Is ImportantAs someone who works with commercial open-source on my day-to-day, I strongly believe in it as a way to be closer to your users and unlock the next level of delivery. Being open-source creates a whole new level of accountability and flexibility for a tool.Developers are a different breed of user. When we hit a quirk or a gap in the UX, our first instinct is to play detective and figure out why that pattern stuck out as a sore thumb to what weve been doing. When the code is open-source, its not unusual for us to jump into the source and create an issue with a proposal on how to solve it already. At least, thats the dream.On top of that, being open-source allows you and your team to self-host, giving you that extra layer of privacy and control, or at least a more cost-effective solution if you have the time and skills to DYI it all.When the cards are played right, and the team is able to afford the long-term benefits, commercial open-source is a win-win strategy.Introducing: Penpot Plugin SystemTalking about the extensibility of open-source, Penpot has the PenpotHub the home for open-source templates and the newly released plugin gallery. So now, if theres a functionality missing, you dont need to jump into the code-base straightaway you can create a plugin to achieve what you need. And you can even serve it from localhost!Creating Penpot PluginsWhen it comes to the plugins, creating one is extremely ergonomic. First, there are already set templates for a few frameworks, and I created one for SolidJS in this PR the power of open-source!When using Vite, plugins are Single-Page Applications; if you have ever built a Hello World app with Vite, you have what it takes to create a plugin. On top of that, the Penpot team has a few packages that can give you a headstart in the process:npm install @penpot/plugin-stylesThat will allow you to import with a CSS loader or a CSS import from @penpot/plugin-styles/styles.css. The JavaScript API is available through the window object, but if your plugin is in TypeScript, you need to teach it:npm add -D @penpot/plugin-typesWith those types in your node_modules, you can pop-up the tsconfig.json and add the types to the compilerOptions.{ "compilerOptions": { "types": ["@penpot/plugin-types"] }}And there you are, now, the Language Service Provider in your editor and the TypeScript Compiler will accept that penpot is a valid namespace, and youll have auto-completion for the Penpot APIs throughout your entire project. For example, defining your plugin will look like the following:penpot.ui.open("Your Plugin Name", "", { width: 500, height: 600})The last step is to define a plugin manifest in a manifest.json file and make sure its in the outpot directory from Vite. The manifest will indicate where each asset is and what permissions your plugin requires to work:{ "name": "Your Plugin Name", "description": "A Super plugin that will win Penpot Plugin Contest", "code": "/plugin.js", "icon": "/icon.png", "permissions": [ "content:read", "content:write", "library:read", "library:write", "user:read", "comment:read", "comment:write", "allow:downloads" ]}Once the initial setup is done, the communication between the Penpot API and the plugin interface is done with a bidirectional messaging system, not so different than what youd do with a Web-Worker.So, to send a message from your plugin to the Penpot API, you can do the following:penpot.ui.sendMessage("Hello from my Plugin");And to receive it back, you need to add an event listener to the window object (the top-level scope) of your plugin:window.addEventListener("message", event => { console.log("Received from Pendpot::: ", event.data);})A quick performance tip: If youre creating a more complex plugin with different views and perhaps even routes, you need to have a cleanup logic. Most frameworks provide decent ergonomics to do that; for example, React does it via their return statements.useEffect(() => { function handleMessage(e) { console.log("Received from Pendpot::: ", event.data); } window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage);}, []);And Solid has onMount and onCleanup helpers for it:onMount(() => { function handleMessage(e) { console.log("Received from Penpot::: ", event.data); } window.addEventListener('message', handleMessage);})onCleanup(() => { window.removeEventListener('message', handleMessage);})Or with the @solid-primitive/event-listener helper library, so it will be automatically disposed:import { makeEventListener } from "@solid-primitives/event-listener";function Component() { const clear = makeEventListener(window, "message", handleMessage); // ... return (<span>Hello!</span>)}In the official documentation, theres a step-by-step guide that will walk you through the process of creating, testing, and publishing your plugin. It will even help you out.So, what are you waiting for?Plugin Contest: Imagine, Build, WinWell, maybe youre waiting for a push of motivation. The Penpot team thought of that, which is why theyre starting a Plugin Contest!For this contest, they want a fully functional plugin; it must be open-source and include comprehensive documentation. Detailing its features, installation, and usage. The first prize is US$ 1000, and the criteria are innovation, functionality, usability, performance, and code quality. The contest will run from November 15th to December 15th.Final ThoughtsIf you decide to build a plugin, Id love to know what youre building and what stack you chose. Please let me know in the comments below or on BlueSky!

Earlier this month, we wrapped up our SmashingConfs 2024, and one subject that kept coming up over and over again among attendees, between speakers, and even within the staff was what would we like to get better at next year?It seems like everyone has a different answer, but one thing is for sure: Smashing can help you with that. Save 30% on Books and Workshops (3+ items)Good news for people who love a good value for a friendly price: throughout the entire month of November, you can save 30% off three or more books and eBooks, 30% off three or more workshops, or get the entire Smashing eBook library for $75. This is a perfect time to set yourself up for a year of learning in 2025.Build Your Own Bundle!Our hardcover books are our editorial flagships. They deliver in-depth knowledge and expertise shared by experts from the industry. No fluff or theory, only practical tips and insights you can apply to your work right away.No matter if you want to complete your existing Smashing book collection or start one from scratch, you can now pick and mix your favorite books and eBooks from our Smashing Books line-up to create a bundle tailored to your needs. Or take a look at our bundle recommendations below for some inspiration. Browse all Smashing BooksSave 30% with 3 or more books. No ifs or buts!Throughout the month of November, the 30% book discount will automatically apply to your cart once you add three or more items. Please note that the discount cant be combined with other discounts.Once youve decided which books should go into your bundle, well pack everything up safely and send the parcel right to your doorstep from our warehouse in Germany. Shipping is free worldwide. Check delivery times.Book Bundle RecommendationsWe know decisions can be hard, thats why we collected some ideas for themed book bundles to make the choice at least a bit easier. These bundles are perfect if you want to enhance your skills in one particular field.You can click on each book title to jump to the details and add the book to your cart. The discount will be applied during checkout.Front-End Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Front-End Bundle dives deep into the challenges front-end developers face in their work every day whether its performance, TypeScript and Image Optimization. Youll learn practical strategies to make your workflow more efficient, but also gain precious insights into how teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify tackle common challenges and frustrations.Success at Scale by Addy OsmaniTypeScript in 50 Lessons by Stefan BaumgartnerImage Optimization by Addy OsmaniDesign Best Practices Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $146.25Bundle price: $102.38Design Best Practices Bundle is all about creating respectful, engaging experiences that put your users well-being and privacy first. The practical and tactical tips help you encourage users to act without employing dark patterns and manipulative techniques and grow a sustainable digital business that becomes more profitable as a result.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagUnderstanding Privacy by Heather BurnsThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenInterface Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $144.00Bundle price: $100.80A lot of websites these days look rather generic. Our Interface Design Bundle will make you think outside the box, exploring how you can create compelling, effective user experiences, with clear intent and purpose for both desktop and mobile.Touch Design for Mobile Interfaces by Steven HooberArt Direction for the Web by Andy ClarkeSmart Interface Design Patterns Checklist Cards by Vitaly FriedmanBig Design Bundle Save 30% on the complete bundle.Regular price (hardcover + PDF, ePUB, Kindle versions): $292.50Bundle price: $204.75The Big Design Bundle shines a light on the fine little details that go into building cohesive, human-centered experiences. Covering everything from design systems to form design patterns, mobile design to UX, and data privacy to ethical design, it provides you with a solid foundation for designing products that stand out from the crowd.Click! How to Encourage Clicks Without Shady Tricks by Paul BoagThe Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim AndersenDesign Systems by Alla KholmatovaForm Design Patterns by Adam SilverTouch Design for Mobile Interfaces by Steven HooberUnderstanding Privacy by Heather BurnsSpecial Deal For eBook LoversGet all eBooks for $75. Youre more of an eBook kind of person? The bundle-up discounts do apply to eBooks, too, of course. Or take a look at our Smashing Library to save even more: It includes 68 eBooks (including all our latest releases) for $75 (PDF, ePUB, and Kindle formats). Perfect to keep all your favorite books close when youre on the go.Bundle Up On Online Workshops: 30% Off On 3+ WorkshopsReady to dig even deeper? Whether you want to explore design patterns for AI interfaces, learn how to plan a design system, or master the art of storytelling, our online workshops are a friendly way to boost your skills online and learn practical, actionable insights from experts, live. To prepare for the challenges that 2025 might have in store for you, you can now bundle up 3 or more online workshops and save 30% on the total price with code BUNDLEUP. Please note that the discount cant be combined with other discounts. Take a look at all our upcoming workshops and start your smashing learning journey this winter.Custom Bundles To Fit Your Needs!Do you need a custom bundle? At Smashing, we would love to know how we can help you and your team make the best of 2025. Lets think big!Wed be happy to craft custom bundles that work for you:Group discounts on large teams for Smashing Membership,Bulk discounts on books or other learning materials for education or non-profit groups,Door prize packages for meetups and events,...any other possibilities for your team, your office, your career path. Let us know via contact form!We are always looking for new ways to support our community. Please contact us if youd like us to craft a custom bundle for your needs, or if you have any questions at all. Lets have a great year!Community Matters Producing a book or a workshop takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their kind, ongoing support. Happy learning, everyone!

Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data. The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!So, keep reading and looking at the following examples, and I will show you some really cool stuff.TechnologyTypically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.What Makes Data And Information GoodIt must be aesthetically pleasing, interesting, and stimulating to look at.It must be of value and worth the effort to read and digest the information.It must be easy to understand and logical.To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, as Vitaly Friedman in his article Data Visualization and Infographics has pointed out.It must be legible and have well-named and easy-to-understand axes and labels.It should help explain and show data and information in a more interesting way than if it were presented in tabular form.It should help explain or unpack what is written in any surrounding text and make it come to life in an unusual and useful way.It must be easy to compare and contrast the data against the other data.The Importance Of Knowing About Different AudiencesThere are some common categories of audiences:Expert,Intermediate,Beginner,Member of the public,Child,Teenager,Middle-aged,Ageing,Has some prior knowledge,Does not have any prior knowledge,Person with some kind of disability (vision, physical, hearing, mobility).Sara Dholakia in her article A Guide To Getting Data Visualization Right points out the following considerations:The audiences familiarity with the subject matter of your data;How much context they already have versus what you should provide;Their familiarity with various methods of data visualisation.Just look at what we are more often than not presented with.So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.3D Flow DiagramIt provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.Card DiagramIts an effective way to highlight and select information or data in relation to its surrounding data and information.Pyramid GraphBeing great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.3D Examples Of Common GraphsThey are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.Sankey Flow DiagramThis diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It's not often seen, but it's really cool.Stream GraphA stream graph is a great way to show the data and how it relates to the other data much more interesting than just using lines as is typically seen.3D MapIt provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.Tree MapIts a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.Waterfall ChartA waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.Doughnut ChartIt shows the data against the other data segments and also as a value within a range of data.Lollipop ChartA lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.Bubble ChartIts an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.How To Start Doing Technical Illustration And Data VisualisationThere are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick OBrien discusses in his article Web Design Done Well: Delightful Data Visualization Examples.But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.Worthwhile Practitioners And Links To Look AtStefanie PosavecYuri Engelhardt Giorgia Lupi Edward Tufte Information is Beautiful Awards

This article is a sponsored by DebugBearWeve all had that moment. Youre optimizing the performance of some website, scrutinizing every millisecond it takes for the current page to load. Youve fired up Google Lighthouse from Chromes DevTools because everyone and their uncle uses it to evaluate performance.After running your 151st report and completing all of the recommended improvements, you experience nirvana: a perfect 100% performance score!Time to pat yourself on the back for a job well done. Maybe you can use this to get that pay raise youve been wanting! Except, dont at least not using Google Lighthouse as your sole proof. I know a perfect score produces all kinds of good feelings. Thats what were aiming for, after all!Google Lighthouse is merely one tool in a complete performance toolkit. What its not is a complete picture of how your website performs in the real world. Sure, we can glean plenty of insights about a sites performance and even spot issues that ought to be addressed to speed things up. But again, its an incomplete picture.What Google Lighthouse Is Great AtI hear other developers boasting about perfect Lighthouse scores and see the screenshots published all over socials. Hey, I just did that myself in the introduction of this article!Lighthouse might be the most widely used web performance reporting tool. Id wager its ubiquity is due to convenience more than the quality of its reports.Open DevTools, click the Lighthouse tab, and generate the report! There are even many ways we can configure Lighthouse to measure performance in simulated situations, such as slow internet connection speeds or creating separate reports for mobile and desktop. Its a very powerful tool for something that comes baked into a free browser. Its also baked right into Googles PageSpeed Insights tool!And its fast. Run a report in Lighthouse, and youll get something back in about 10-15 seconds. Try running reports with other tools, and youll find yourself refilling your coffee, hitting the bathroom, and maybe checking your email (in varying order) while waiting for the results. Theres a good reason for that, but all I want to call out is that Google Lighthouse is lightning fast as far as performance reporting goes.To recap: Lighthouse is great at many things!Its convenient to access,It provides a good deal of configuration for different levels of troubleshooting,And it spits out reports in record time.And what about that bright and lovely animated green score who doesnt love that?!OK, thats the rosy side of Lighthouse reports. Its only fair to highlight its limitations as well. This isnt to dissuade you or anyone else from using Lighthouse, but more of a heads-up that your score may not perfectly reflect reality or even match the scores youd get in other tools, including Googles own PageSpeed Insights.It Doesnt Match Real UsersNot all data is created equal in capital Web Performance. Its important to know this because data represents assumptions that reporting tools make when evaluating performance metrics.The data Lighthouse relies on for its reporting is called simulated data. You might already have a solid guess at what that means: its synthetic data. Now, before kicking simulated data in the knees for not being real data, know that its the reason Lighthouse is super fast.You know how theres a setting to throttle the internet connection speed? That simulates different conditions that either slow down or speed up the connection speed, something that you configure directly in Lighthouse. By default, Lighthouse collects data on a fast connection, but we can configure it to something slower to gain insights on slow page loads. But beware! Lighthouse then estimates how quickly the page would have loaded on a different connection.DebugBear founder Matt Zeunert outlines how data runs in a simulated throttling environment, explaining how Lighthouse uses optimistic and pessimistic averages for making conclusions:[Simulated throttling] reduces variability between tests. But if theres a single slow render-blocking request that shares an origin with several fast responses, then Lighthouse will underestimate page load time.Lighthouse averages optimistic and pessimistic estimates when its unsure exactly which nodes block rendering. In practice, metrics may be closer to either one of these, depending on which dependency graph is more correct.And again, the environment is a configuration, not reality. Its unlikely that your throttled conditions match the connection speeds of an average real user on the website, as they may have a faster network connection or run on a slower CPU. What Lighthouse provides is more like on-demand testing thats immediately available.That makes simulated data great for running tests quickly and under certain artificially sweetened conditions. However, it sacrifices accuracy by making assumptions about the connection speeds of site visitors and averages things in a way that divorces it from reality.While simulated throttling is the default in Lighthouse, it also supports more realistic throttling methods. Running those tests will take more time but give you more accurate data. The easiest way to run Lighthouse with more realistic settings is using an online tool like the DebugBear website speed test or WebPageTest.It Doesnt Impact Core Web Vitals ScoresThese Core Web Vitals everyone talks about are Googles standard metrics for measuring performance. They go beyond simple Your page loaded in X seconds reports by looking at a slew of more pertinent details that are diagnostic of how the page loads, resources that might be blocking other resources, slow user interactions, and how much the page shifts around from loading resources and content. Zeunert has another great post here on Smashing Magazine that discusses each metric in detail.The main point here is that the simulated data Lighthouse produces may (and often does) differ from performance metrics from other tools. I spent a good deal explaining this in another article. The gist of it is that Lighthouse scores do not impact Core Web Vitals data. The reason for that is Core Web Vitals relies on data about real users pulled from the monthly-updated Chrome User Experience (CrUX) report. While CrUX data may be limited by how recently the data was pulled, it is a more accurate reflection of user behaviors and browsing conditions than the simulated data in Lighthouse.The ultimate point Im getting at is that Lighthouse is simply ineffective at measuring Core Web Vitals performance metrics. Heres how I explain it in my bespoke article:[Synthetic] data is fundamentally limited by the fact that it only looks at a single experience in a pre-defined environment. This environment often doesnt even match the average real user on the website, who may have a faster network connection or a slower CPU.I emphasized the important part. In real life, users are likely to have more than one experience on a particular page. Its not as though you navigate to a site, let it load, sit there, and then close the page; youre more likely to do something on that page. And for a Core Web Vital metric that looks for slow paint in response to user input namely, Interaction to Next Paint (INP) theres no way for Lighthouse to measure that at all!Its the same deal for a metric like Cumulative Layout Shift (CLS) that measures the visible stability of a page layout because layout shifts often happen lower on the page after a user has scrolled down. If Lighthouse relied on CrUX data (which it doesnt), then it would be able to make assumptions based on real users who interact with the page and can experience CLS. Instead, Lighthouse waits patiently for the full page load and never interacts with parts of the page, thus having no way of knowing anything about CLS.But Its Still a Good StartThats what I want you to walk away with at the end of the day. A Lighthouse report is incredibly good at producing reports quickly, thanks to the simulated data it uses. In that sense, Id say that Lighthouse is a handy gut check and maybe even a first step to identifying opportunities to optimize performance.But a complete picture, its not. For that, what wed want is a tool that leans on real user data. Tools that integrate CrUX data are pretty good there. But again, that data is pulled every month (28 days to be exact) so it may not reflect the most recent user behaviors and interactions, although it is updated daily on a rolling basis and it is indeed possible to query historical records for larger sample sizes.Even better is using a tool that monitors users in real-time.Data pulled directly from the site of origin is truly the gold standard data we want because it comes from the source of truth. That makes tools that integrate with your site the best way to gain insights and diagnose issues because they tell you exactly how your visitors are experiencing your site.Ive written about using the Performance API in JavaScript to evaluate custom and Core Web Vitals metrics, so its possible to roll that on your own. But there are plenty of existing services out there that do this for you, complete with visualizations, historical records, and true real-time user monitoring (often abbreviated as RUM). What services? Well, DebugBear is a great place to start. I cited Matt Zeunert earlier, and DebugBear is his product.So, if what you want is a complete picture of your sites performance, go ahead and start with Lighthouse. But dont stop there because youre only seeing part of the picture. Youll want to augment your findings and diagnose performance with real-user monitoring for the most complete, accurate picture.

When the days are gray and misty as they are in many parts of the world in November, theres no better remedy than a bit of colorful inspiration. To bring some good vibes to your desktops this month, artists and designers from across the globe once again tickled their creative ideas and designed unique and inspiring wallpapers that are bound to sweeten up your November.The wallpapers in this post come in versions with and without a calendar for November 2024 and can be downloaded for free as it has been a monthly tradition here at Smashing Magazine for more than 13 years already. As a little bonus goodie, we also added a selection of November favorites from our wallpapers archives to the post. Maybe youll spot one of your almost-forgotten favorites in here, too?A huge thank-you to everyone who shared their wallpapers with us this month this post wouldnt exist without you. Happy November!You can click on every image to see a larger preview.We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit your wallpaper design! Feeling inspired? We are always looking for creative talent and would love to feature your desktop wallpaper in one of our upcoming posts. We cant wait to see what youll come up with!Honoring the Sound of Jazz And SoulToday, we celebrate the saxophone, an instrument that has added its signature sound to jazz, rock, classical, and so much more. From smooth solos to bold brass harmonies, the sax has shaped the soundtrack of our lives. Whether youre a seasoned player or just love its iconic sound, lets show some love to this musical marvel! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Snow Falls In The AlpsThe end of the year is approaching, and winter is just around the corner, so well spend this month in the Alps. The snow has arrived in the mountains, and we can take advantage of it to ski or have a hot coffee while we watch the flakes fall. Designed by Veronica Valenzuela from Spain.previewwith calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440The Secret CaveDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Happy Thanksgiving DayDesigned by Cronix from the United States.previewwith calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 4096x2304without calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 4096x2304Space ExplorerA peaceful, minimalist wallpaper of a lone cartoon astronaut floating in space surrounded by planets and stars. Designed by Reethu from London.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The SailorDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Happy DiwaliDesigned by Cronix from the United States.previewwith calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 4096x2304without calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 4096x2304Elimination Of Violence Against WomenNovember 25th is the International Day for the Elimination of Violence Against Women. We wanted to create a wallpaper that can hopefully contribute to building awareness and support. Designed by Friendlystock from Greece.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Square Isnt ItWhen playing with lines, which were at the beginning displaying a square, I finally arrived to this drawing, and I was surprised. I thought it would make a nice wallpaper for ones desktop, doesnt it? Designed by Philippe Brouard from France.previewwith calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160without calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160TransitionInspired by the transition from autumn to winter. Designed by Tecxology from India.previewwithout calendar: 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Sunset Or SunriseNovember is autumn in all its splendor. Earthy colors, falling leaves, and afternoons in the warmth of the home. But it is also adventurous and exciting and why not, different. We sit in Bali contemplating Pura Ulun Danu Bratan. We dont know if its sunset or dusk, but does that really matter? Designed by Veronica Valenzuela Jimenez from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Cozy Autumn Cups And Cute PumpkinsAutumn coziness, which is created by fallen leaves, pumpkins, and cups of cocoa, inspired our designers for this wallpaper. Designed by MasterBundles from Ukraine.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440A Jelly NovemberBeen looking for a mysterious, gloomy, yet beautiful desktop wallpaper for this winter season? Weve got you, as this months calendar marks Jellyfish Day. On November 3rd, we celebrate these unique, bewildering, and stunning marine animals. Besides adorning your screen, weve got you covered with some jellyfish fun facts: they arent really fish, they need very little oxygen, eat a broad diet, and shrink in size when food is scarce. Now thats some tenacity to look up to. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1440x900, 1440x1050, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Colorful AutumnAutumn can be dreary, especially in November, when rain starts pouring every day. We wanted to summon better days, so thats how this colourful November calendar was created. Open your umbrella and lets roll! Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Winter Is HereDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Moonlight BatsI designed some Halloween characters and then this idea came to my mind a bat family hanging around in the moonlight. A cute and scary mood is just perfect for autumn. Designed by Carmen Eisendle from Germany.previewwithout calendar: 640x480, 800x600, 1024x768, 1280x800, 1280x960, 1440x900, 1600x1200, 1680x1050, 1680x1260, 1920x1200, 1920x1440, 2560x1440, 2560x1600Time To Give ThanksDesigned by Glynnis Owen from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440The Kind SoulKindness drives humanity. Be kind. Be humble. Be humane. Be the best of yourself! Designed by Color Mean Creative Studio from Dubai.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440AnbaniAnbani means alphabet in Georgian. The letters that grow on that tree are the Georgian alphabet. Its very unique! Designed by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Tempestuous NovemberBy the end of autumn, ferocious Poseidon will part from tinted clouds and timid breeze. After this uneven clash, the sky once more becomes pellucid just in time for imminent luminous snow. Designed by Ana Masnikosa from Belgrade, Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Me And The Key ThreeDesigned by Bart Bonte from Belgium.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Mushroom SeasonIt is autumn! It is raining and thus it is mushroom season! It is the perfect moment to go to the forest and get the best mushrooms to do the best recipe. Designed by Vernica Valenzuela from Spain.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440Welcome Home Dear WinterThe smell of winter is lingering in the air. The time to be home! Winter reminds us of good food, of the warmth, the touch of a friendly hand, and a talk beside the fire. Keep calm and let us welcome winter. Designed by Acodez IT Solutions from India.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Outer SpaceWe were inspired by the nature around us and the universe above us, so we created an out-of-this-world calendar. Now, let us all stop for a second and contemplate on preserving our forests, let us send birds of passage off to warmer places, and let us think to ourselves if not on Earth, could we find a home somewhere else in outer space? Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Captains HomeDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Holiday Season Is ApproachingDesigned by ActiveCollab from the United States.previewwithout calendar: 1080x1920, 1400x1050, 1440x900, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Deer Fall, I Love YouDesigned by Maria Porter from the United States.previewwithout calendar: 320x480, 800x600, 1280x800, 1280x1024, 1440x900, 1680x1050, 2560x1440Peanut Butter Jelly TimeNovember is the Peanut Butter Month so I decided to make a wallpaper around that. As everyone knows peanut butter goes really well with some jelly so I made two sandwiches, one with peanut butter and one with jelly. Together they make the best combination. Designed by Senne Mommens from Belgium.previewwithout calendar: 320x480, 1280x720, 1280x800, 1280x1024, 1920x1080, 2560x1440International Civil Aviation DayOn December 7, we mark International Civil Aviation Day, celebrating those who prove day by day that the sky really is the limit. As the engine of global connectivity, civil aviation is now, more than ever, a symbol of social and economic progress and a vehicle of international understanding. This monthly calendar is our sign of gratitude to those who dedicate their lives to enabling everyone to reach their dreams. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440November Nights On MountainsThose chill November nights when you see mountain tops covered with the first snow sparkling in the moonlight. Designed by Jovana Djokic from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440November FunDesigned by Xenia Latii from Germany.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440November IngredientsWhether or not you celebrate Thanksgiving, theres certain things that always make the harvest season special. As a Floridian, Im a big fan of any signs that the weather might be cooling down soon, too! Designed by Dorothy Timmer from the United States.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Universal Childrens DayUniversal Childrens Day, November 20. It feels like a dream world, it invites you to let your imagination flow, see the details, and find the child inside you. Designed by Luis Costa from Portugal.previewwithout calendar: 1366x768, 1440x900, 1920x1080, 2560x1440A Gentlemans NovemberDesigned by Cedric Bloem from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440

Every generation is different in very unique ways, with different habits, views, standards, and expectations. So when designing for Gen Z, what do we need to keep in mind? Lets take a closer look at Gen Z, how they use tech, and why it might be a good idea to ignore common design advice and do the opposite of what is usually recommended instead.This article is part of our ongoing series on UX. You can find more details on design patterns and UX strategy in Smart Interface Design Patterns with live UX training coming up soon. Free preview.Gen Z: Most Diverse And Most InclusiveWhen we talk about Generation Z, we usually refer to people born between 1995 and 2010. Of course making universal statements about a cohort where some are adults in their late 20s and others are school students is at best ineffective and at worst wrong yet there are some attributes that stand out compared to earlier generations.Gen Z is the most diverse generation in terms of race, ethnicity, and identity. Research shows that young people today are caring and proactive, and far from being slow, passive and mindless as they are often described. In fact, they are willing to take a stand and break their habits if they deeply believe in a specific purpose and goal. Surely there are many distractions along that way, but the belief in fairness and sense of purpose has enormous value.Their values reflect that: accessibility, inclusivity, sustainability, and work/life balance are top priorities for Gen Zs, and they value experiences, principles, and social stand over possessions.What Gen Z Deeply Cares AboutGen Z grew up with technology, so unsurprisingly digital experiences are very familiar and understood by them. On the other hand, digital experiences are often suboptimal at best slow, inaccessible, confusing, and frustrating. Plus, the web is filled with exaggerations and generic but fluffy statements. So its not a big revelation that Gen Zs are highly skeptical of brands and advertising by default (rightfully so!), and rely almost exclusively on social circles, influencers, and peers as main research channels.They might sometimes struggle to spot whats real and whats not, but they are highly selective about their sources. They are always connected and used to following events live as they unfold, so unsurprisingly, Gen Z tends to have little patience.And sure enough, Gen Z loves short-form content, but that doesnt necessarily equate to a short attention span. Attention span is context-dependent, as documentaries and literature are among Gen Zs favorites.Designing For Gen ZMost design advice on Gen Z focuses on producing short form, snackable, bite-sized content. That content is optimized for very short attention spans, TikTok-alike content consumption, and simplified to the core messaging. I would strongly encourage us to do the opposite.We shouldnt discount Gen Z as a generation with poor attention spans and urgent needs for instant gratification. Gen Zs have very strong beliefs and values, but they are also inherently curious and want to reshape the world. We can tell a damn good story. Captivate and engage. Make people think. Many Gen Zs are highly ambitious and motivated, and they want to be challenged and to succeed. So lets support that. And to do that, we need to remain genuine and authentic.Remain Genuine And AuthenticAs Michelle Winchester noted, Gen Zs have very diverse perspectives and opinions, and they possess a discerning ability to detect disingenuous content. Thats also where mistrust towards AI comes into play, along with AI fatigue. As Nilay Patel mentioned on Ezra Klein Show, today when somebody says that something is AI-generated, usually its not a praise, but rather a testament how poor and untrustworthy it actually is.Gen Z expects better. Hence brands that value sincerity, honesty, and authenticity are perceived as more trustworthy compared to brands that dont have an opinion, dont take a stand, dont act for their beliefs and principles. For example, the Keep Beauty Real campaign by Dove (shown below) showcases the value of genuine human beauty, which is so often missed and so often exaggerated to extremes by AI.Gareth Ford Williams has put together a visual language of closed captions and has kindly provided a PDF cheatsheet that is commonly used by professional captioners. There are some generally established rules about captioning, and here are some that I found quite useful when working on captioning for my own video course:Divide your sentences into two relatively equal parts like a pyramid (40ch per line for the top line, a bit less for the bottom line);Always keep an average of 20 to 30 characters per second;A sequence should only last between 1 and 8 seconds;Always keep a persons name or title together;Do not break a line after conjunction;Consider aligning multi-lined captions to the left.On YouTube, users can select a font used for subtitles and choose between monospaced and proportional serif and sans-serif, casual, cursive, and small-caps. But perhaps, in addition to stylistic details, we could provide a careful selection of fonts to help audiences with different needs. This could include a dyslexic font or a hyper-legible font, for example.Additionally, we could display presets for various high contrast options for subtitles. This gives users a faster selection, requiring less effort to configure just the right combination of colors and transparency. Still, it would be useful to provide more sophisticated options just in case users need them.Support Intrinsic MotivationOn the other hand, in times of instant gratification with likes, reposts, and leaderboards, people often learn that a feeling of achievement comes from extrinsic signals, like reach or attention from other people. The more important it is to support intrinsic motivation.As Paula Gomes noted, intrinsic motivation is characterized by engaging in behaviors just for their own sake. People do something because they enjoy it. It is when they care deeply for an activity and enjoy it without needing any external rewards or pressure to do it.Typically this requires 3 components:Competence involves the need to feel capable of achieving a desired outcome.Autonomy is about the need to feel in control of your own actions, behaviors, and goals.Relatedness reflects the need to feel a sense of belonging and attachment to other people.In practical terms, that means setting people up for success. Preparing the knowledge and documents and skills they need ahead of time. Building knowledge up without necessarily rewarding them with points. It also means allowing people to have a strong sense of ownership of the decisions and the work they are doing. And adding collaborative goals that would require cooperation with team members and colleagues.Encourage Critical ThinkingThe younger people are, the more difficult it is to distinguish between whats real and what isnt. Whenever possible, show sources or at least explain where to find specific details that back up claims that you are making. Encourage people to make up their mind, and design content to support that with scientific papers, trustworthy reviews, vetted feedback, and diverse opinions.And: you dont have to shy away from technical details. Dont make them mandatory to read and understand, but make them accessible and available in case readers or viewers are interested.In times where there is so much fake, exaggerated, dishonest, and AI-generated content, it might be just enough to be perceived as authentic, trustworthy, and attention-worthy by the highly selective and very demanding Gen Z.Good Design Is For EveryoneI keep repeating myself like a broken record, but better accessibility is better for everyone. As you hopefully have noticed, many attributes and expectations that we see in Gen Z are beneficial for all other generations, too. Its just good, honest, authentic design. And thats the very heart of good UX.What I havent mentioned is that Gen Z genuinely appreciates feedback and values platforms that listen to their opinions and make changes based on their feedback. So the best thing we can do, as designers, is to actively involve Gen Z in the design process. Designing with them, rather than designing for them.And, most importantly: with Gen Z, perhaps for the first time ever, inclusion and accessibility is becoming a default expectation for all digital products. With it comes the sense of fairness, diversity, and respect. And, personally, I strongly believe that its a great thing and a testament how remarkable Gen Zs actually are.Wrapping UpLarge parts of Gen Z arent mobile-first, but mobile-only.To some, the main search engine is YouTube, not Google.Some dont know and have never heard of Internet Explorer.Trust only verified customer reviews, influencers, friends.Used to follow events live as they unfold little patience.Sustainability, reuse, work/life balance are top priorities.Prefer social login as the fastest authentication method.Typically ignore or close cookie banners, without consent.Rely on social proof, honest reviews/photos, authenticity.Most likely generation to provide a referral to a product.Typically turn on subtitles for videos by default.Useful ResourcesDesigning for Gen Z, by DesignlabDesigning For Gen Z (Case Study), by Michelle WinchesterIntrinsic vs. Extrinsic Motivation, by Paula GomesShopping Habits For Gen Z, by Sara Karlovitch10 Gen Z Insights To Improve Your CX, by TelusMillennials vs. Gen Z Expectations, by ZendeskNew: How To Measure UX And Design ImpactIve just launched How To Measure UX and Design Impact (8h), a new practical guide for UX leads to measure UX impact on business. Use the code IMPACT to save 20% off today. And thank you for your kind and ongoing support, everyone! Jump to details.

Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together. And the result was not too bad, actually.See the Pen Container Units for All Units [forked] by Chris Coyier. What I found interesting about this is how it demonstrates the complexity of sizing things. Were constrained to absolute and relative units in CSS, so were either stuck at a specific size (e.g., px) or computing the size based on sizing declared on another element (e.g., %, em, rem, vw, vh, and so on). Both come with compromises, so its not like there is a correct way to go about things its about the elements context and leaning heavily in any one direction doesnt remedy that.I thought Id try my own experiment but with the CSS min() function instead of container query units. Why? Well, first off, we can supply the function with any type of length unit we want, which makes the approach a little more flexible than working with one type of unit. But the real reason I wanted to do this is personal interest more than anything else.The DemoI wont make you wait for the end to see how my min() experiment went:Taking website responsiveness to a whole new level pic.twitter.com/pKmHl5d0Dy Vayo (@vayospot) March 1, 2023 Well talk about that more after we walk through the details.A Little About min()The min() function takes two values and applies the smallest one, whichever one happens to be in the elements context. For example, we can say we want an element to be as wide as 50% of whatever container it is in. And if 50% is greater than, say 200px, cap the width there instead.See the Pen [forked] by Geoff Graham.So, min() is sort of like container query units in the sense that it is aware of how much available space it has in its container. But its different in that min() isnt querying its container dimensions to compute the final value. We supply it with two acceptable lengths, and it determines which is best given the context. That makes min() (and max() for that matter) a useful tool for responsive layouts that adapt to the viewports size. It uses conditional logic to determine the best match, which means it can help adapt layouts without needing to reach for CSS media queries..element { width: min(200px, 50%);}/* Close to this: */.element { width: 200px; @media (min-width: 600px) { width: 50%; }}The difference between min() and @media in that example is that were telling the browser to set the elements width to 50% at a specific breakpoint of 600px. With min(), it switches things up automatically as the amount of available space changes, whatever viewport size that happens to be.When I use the min(), I think of it as having the ability to make smart decisions based on context. We dont have to do the thinking or calculations to determine which value is used. However, using min() coupled with just any CSS unit isnt enough. For instance, relative units work better for responsiveness than absolute units. You might even think of min() as setting a maximum value in that it never goes below the first value but also caps itself at the second value.I mentioned earlier that we could use any type of unit in min(). Lets take the same approach that Chris did and lean heavily into a type of unit to see how min() behaves when it is used exclusively for a responsive layout. Specifically, well use viewport units as they are directly relative to the size of the viewport.Now, there are different flavors of viewport units. We can use the viewports width (vw) and height (vh). We also have the vmin and vmax units that are slightly more intelligent in that they evaluate an elements width and height and apply either the smaller (vmin) or larger (vmax) of the two. So, if we declare 100vmax on an element, and that element is 500px wide by 250px tall, the unit computes to 500px.That is how I am approaching this experiment. What happens if we eschew media queries in favor of only using min() to establish a responsive layout and lean into viewport units to make it happen? Well take it one piece at a time.Font SizingThere are various approaches for responsive type. Media queries are quickly becoming the old school way of doing it:p { font-size: 1.1rem; }@media (min-width: 1200px) { p { font-size: 1.2rem; }}@media (max-width: 350px) { p { font-size: 0.9rem; }}Sure, this works, but what happens when the user uses a 4K monitor? Or a foldable phone? There are other tried and true approaches; in fact, clamp() is the prevailing go-to. But were leaning all-in on min(). As it happens, just one line of code is all we need to wipe out all of those media queries, substantially reducing our code:p { font-size: min(6vmin, calc(1rem + 0.23vmax)); }Ill walk you through those values6vmin is essentially 6% of the browsers width or height, whichever is smallest. This allows the font size to shrink as much as needed for smaller contexts.For calc(1rem + 0.23vmax), 1rem is the base font size, and 0.23vmax is a tiny fraction of the viewports width or height, whichever happens to be the largest.The calc() function adds those two values together. Since 0.23vmax is evaluated differently depending on which viewport edge is the largest, its crucial when it comes to scaling the font size between the two arguments. Ive tweaked it into something that scales gradually one way or the other rather than blowing things up as the viewport size increases.Finally, the min() returns the smallest value suitable for the font size of the current screen size.And speaking of how flexible the min() approach is, it can restrict how far the text grows. For example, we can cap this at a maximum font-size equal to 2rem as a third function parameter:p { font-size: min(6vmin, calc(1rem + 0.23vmax), 2rem); }This isnt a silver bullet tactic. Id say its probably best used for body text, like paragraphs. We might want to adjust things a smidge for headings, e.g., <h1>:h1 { font-size: min(7.5vmin, calc(2rem + 1.2vmax)); }Weve bumped up the minimum size from 6vmin to 7.5vmin so that it stays larger than the body text at any viewport size. Also, in the calc(), the base size is now 2rem, which is smaller than the default UA styles for <h1>. Were using 1.2vmax as the multiplier this time, meaning it grows more than the body text, which is multiplied by a smaller value, .023vmax.This works for me. You can always tweak these values and see which works best for your use. Whatever the case, the font-size for this experiment is completely fluid and completely based on the min() function, adhering to my self-imposed constraint.Margin And PaddingSpacing is a big part of layout, responsive or not. We need margin and padding to properly situate elements alongside other elements and give them breathing room, both inside and outside their box.Were going all-in with min() for this, too. We could use absolute units, like pixels, but those arent exactly responsive.min() can combine relative and absolute units so they are more effective. Lets pair vmin with px this time:div { margin: min(10vmin, 30px); }10vmin is likely to be smaller than 30px when viewed on a small viewport. Thats why Im allowing the margin to shrink dynamically this time around. As the viewport size increases, whereby 10vmin exceeds 30px, min() caps the value at 30px, going no higher than that.Notice, too, that I didnt reach for calc() this time. Margins dont really need to grow indefinitely with screen size, as too much spacing between containers or elements generally looks awkward on larger screens. This concept also works extremely well for padding, but we dont have to go there. Instead, it might be better to stick with a single unit, preferably em, since it is relative to the elements font-size. We can essentially pass the work that min() is doing on the font-size to the margin and padding properties because of that..card-info { font-size: min(6vmin, calc(1rem + 0.12vmax)); padding: 1.2em;}Now, padding scales with the font-size, which is powered by min().WidthsSetting width for a responsive design doesnt have to be complicated, right? We could simply use a single percentage or viewport unit value to specify how much available horizontal space we want to take up, and the element will adjust accordingly. Though, container query units could be a happy path outside of this experiment.But were min() all the way!min() comes in handy when setting constraints on how much an element responds to changes. We can set an upper limit of 650px and, if the computed width tries to go larger, have the element settle at a full width of 100%:.container { width: min(100%, 650px); }Things get interesting with text width. When the width of a text box is too long, it becomes uncomfortable to read through the texts. There are competing theories about how many characters per line of text is best for an optimal reading experience. For the sake of argument, lets say that number should be between 50-75 characters. In other words, we ought to pack no more than 75 characters on a line, and we can do that with the ch unit, which is based on the 0 characters size for whatever font is in use.p { width: min(100%, 75ch);}This code basically says: get as wide as needed but never wider than 75 characters.Sizing Recipes Based On min()Over time, with a lot of tweaking and modifying of values, I have drafted a list of pre-defined values that I find work well for responsively styling different properties::root { --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax)); --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax)); --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax)); --font-size-3x: min(6vmin, calc(1rem + 0.12vmax)); --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax)); --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax)); --width-2x: min(100vw, 1300px); --width-1x: min(100%, 1200px); --gap-3x: min(5vmin, 1.5rem); --gap-2x: min(4.5vmin, 1rem); --size-10x: min(15vmin, 5.5rem); --size-9x: min(10vmin, 5rem); --size-8x: min(10vmin, 4rem); --size-7x: min(10vmin, 3rem); --size-6x: min(8.5vmin, 2.5rem); --size-5x: min(8vmin, 2rem); --size-4x: min(8vmin, 1.5rem); --size-3x: min(7vmin, 1rem); --size-2x: min(5vmin, 1rem); --size-1x: min(2.5vmin, 0.5rem);}This is how I approached my experiment because it helps me know what to reach for in a given situation:h1 { font-size: var(--font-size-6x); }.container { width: var(--width-2x); margin: var(--size-2x);}.card-grid { gap: var(--gap-3x); }There we go! We have a heading that scales flawlessly, a container thats responsive and never too wide, and a grid with dynamic spacing all without a single media query. The --size- properties declared in the variable list are the most versatile, as they can be used for properties that require scaling, e.g., margins, paddings, and so on.The Final Result, AgainI shared a video of the result, but heres a link to the demo.See the Pen min() website [forked] by Vayo. So, is min() the be-all, end-all for responsiveness? Absolutely not. Neither is a diet consisting entirely of container query units. I mean, its cool that we can scale an entire webpage like this, but the web is never a one-size-fits-all beanie.If anything, I think this and what Chris demoed are warnings against dogmatic approaches to web design as a whole, not solely unique to responsive design. CSS features, including length units and functions, are tools in a larger virtual toolshed. Rather than getting too cozy with one feature or technique, explore the shed because you might find a better tool for the job.

Finally! After so many years, were very happy to launch How To Measure UX and Design Impact, our new practical guide for designers and managers on how to set up and track design success in your company with UX scorecards, UX metrics, the entire workflow and Design KPI trees. Neatly put together by yours truly, Vitaly Friedman. Jump to details. Video + UX TrainingVideo onlyVideo + UX Training$495.00 $799.00Get Video + UX Training25 video lessons (8h) + Live UX Training.100 days money-back-guarantee.Video only$250.00$395.00Get the video course25 video lessons (8h). Updated yearly.Also available as a UX Bundle with 2 video courses.The BackstoryIn many companies, designers are perceived as disruptors, rather than enablers. Designers challenge established ways of working. They ask a lot of questions much needed ones but also uncomfortable ones. They focus too much on user needs, pushing revenue projections back, often with long-winded commitment to testing and research and planning and scoping.Almost every department in almost every company has their own clearly defined objectives, metrics and KPIs. In fact, most departments from finance to marketing to HR to sales are remarkably good at visualizing their impact and making it visible throughout the entire organization.Designing a KPI tree, an example of how to connect business objectives with design initiatives through the lens of design KPIs. (Large preview)But as designers, we rarely have a set of established Design KPIs that we regularly report to senior management. We dont have a clear definition of design success. And we rarely measure the impact of our work once its launched. So its not surprising that moste parts of the business barely know what we actually do all day long.Business wants results. It also wants to do more of what has worked in the past. But it doesnt want to be disrupted it wants to disrupt. It wants to reduce time to market and minimize expenses; increase revenue and existing business, find new markets. This requires fast delivery and good execution.And thats what we are often supposed to be good executors. Or to put differently, pixel pushers.Over years, Ive been searching for a way to change that. This brought me to Design KPIs and UX scorecards, and a workflow to translate business goals into actionable and measurable design initiatives. I had to find a way to explain, visualize and track that incredible impact that designers have on all parts of business from revenue to loyalty to support to delivery.The results of that journey are now public in our new video course: How To Measure UX and Design Impact a practical guide for designers, researchers and UX leads to measure and visualize UX impact on business.About The CourseThe course dives deep into establishing team-specific design KPIs, how to track them effectively, how to set up ownership and integrate metrics in design process. Youll discover how to translate ambiguous objectives into practical design goals, and how to measure design systems and UX research.Also, well make sense of OKRs, Top Task Analysis, SUS, UMUX-Lite, UEQ, TPI, KPI trees, feedback scoring, gap analysis, and Kano model and what UX research methods to choose to get better results. Jump to the table of contents or get your early-bird.The setup for the video recordings. Once all content is in place, its about time to set up the recording.<a class="btn btn--large btn--green btn--text-shadow" href=https://measure-ux.com>Jump to the video courseA practical guide to UX metrics and Design KPIs8h-video course + live UX training. Free preview.25 chapters (8h), with videos added/updated yearlyFree preview, examples, templates, workflowsNo subscription: get once, access foreverLife-time access to all videos, slides, checklists.Add-on: live UX training, running 2 a yearUse the code SMASHING to get 20% off todayJump to the detailsTable of Contents25 chapters, 8 hours, with practical examples, exercises, and everything you need to master the art of measuring UX and design impact. Dont worry, even if it might seem overwhelming at first, well explore things slowly and thoroughly. Taking 12 sessions per week is a perfectly good goal to aim for. We cant improve without measuring. Thats why our new video course gives you the tools you need to make sense of it all: user needs, just like business needs. (View large version) 1. Welcome + So, how do we measure UX? Well, lets find out! Meet a friendly welcome message to the video course, outlining all the fine details well be going through: design impact, business metrics, design metrics, surveys, target times and states, measuring UX in B2B and enterprises, design KPI trees, Kano model, event storming, choosing metrics, reporting design success and how to measure design systems and UX research efforts.Keywords:Design impact, UX metrics, business goals, articulating design value, real-world examples, showcasing impact, evidence-driven design. 2. Design Impact + In this segment, well explore how and where we, as UX designers, make an impact within organizations. Well explore where we fit in the company structure, how to build strong relationships with colleagues, and how to communicate design value in business terms.Keywords:Design impact, design ROI, orgcharts, stakeholder engagement, business language vs. UX language, Double Diamond vs. Reverse Double Diamond, risk mitigation. 3. OKRs and Business Metrics + Well explore the key business terms and concepts related to measuring business performance. Well dive into business strategy and tactics, and unpack the components of OKRs (Objectives and Key Results), KPIs, SMART goals, and metrics.Keywords:OKRs, objectives, key results, initiatives, SMART goals, measurable goals, time-bound metrics, goal-setting framework, business objectives. 4. Leading And Lagging Indicators + Businesses often speak of leading and lagging indicators predictive and retrospective measures of success. Lets explore what they are and how they are different and how we can use them to understand the immediate and long-term impact of our UX work.Keywords:Leading vs. lagging indicators, cause-and-effect relationship, backwards-looking and forward-looking indicators, signals for future success. 5. Business Metrics, NPS + We dive into the world of business metrics, from Monthly Active Users (MAU) to Monthly Recurring Revenue (MRR) to Customer Lifetime Value (CLV), and many other metrics that often find their way to dashboards of senior management.Also, almost every business measures NPS. Yet NPS has many limitations, requires a large sample size to be statistically reliable, and what people say and what people do are often very different things. Lets see what we as designers can do with NPS, and how it relates to our UX work.Keywords:Business metrics, MAU, MRR, ARR, CLV, ACV, Net Promoter Score, customer loyalty. 6. Business Metrics, CSAT, CES + Well explore the broader context of business metrics, including revenue-related measures like Monthly Recurring Revenue (MRR) and Annual Recurring Revenue (ARR), Customer Lifetime Value (CLV), and churn rate.Well also dive into Customer Satisfaction Score (CSAT) and Customer Effort Score (CES). Well discuss how these metrics are calculated, their importance in measuring customer experience, and how they complement other well-known (but not necessarily helpful) business metrics like NPS.Keywords:Customer Lifetime Value (CLV), churn rate, Customer Satisfaction Score (CSAT), Customer Effort Score (CES), Net Promoter Score (NPS), Monthly Recurring Revenue (MRR), Annual Recurring Revenue (ARR). 7. Feedback Scoring and Gap Analysis + If you are looking for a simple alternative to NPS, feedback scoring and gap analysis might be a neat little helper. It transforms qualitative user feedback into quantifiable data, allowing us to track UX improvements over time. Unlike NPS, which focuses on future behavior, feedback scoring looks at past actions and current perceptions.Keywords:Feedback scoring, gap analysis, qualitative feedback, quantitative data. 8. Design Metrics (TPI, SUS, SUPR-Q) + Well explore the landscape of established and reliable design metrics for tracking and capturing UX in digital products. From task success rate and time on task to System Usability Scale (SUS) to Standardized User Experience Percentile Rank Questionnaire (SUPR-Q) to Accessible Usability Scale (AUS), with an overview of when and how to use each, the drawbacks, and things to keep in mind.Keywords:UX metrics, KPIs, task success rate, time on task, error rates, error recovery, SUS, SUPR-Q. 9. Design Metrics (UMUX-Lite, SEQ, UEQ) + Well continue with slightly shorter alternatives to SUS and SUPR-Q that could be used in a quick email survey or an in-app prompt UMUX-Lite and Single Ease Question (SEQ). Well also explore the big behemoths of UX measurements User Experience Questionnaire (UEQ), Googles HEART framework, and custom UX measurement surveys and how to bring key metrics together in one simple UX scorecard tailored to your products unique needs.Keywords:UX metrics, UMUX-Lite, Single Ease Question (SEQ), User Experience Questionnaire (UEQ), HEART framework, UEQ, UX scorecards. 10. Top Tasks Analysis + The most impactful way to measure UX is to study how successful users are in completing their tasks in their common customer journeys. With top tasks analysis, we focus on what matters, and explore task success rates and time on task. We need to identify representative tasks and bring 1518 users in for testing. Lets dive into how it all works and some of the important gotchas and takeaways to consider.Keywords:Top task analysis, UX metrics, task success rate, time on task, qualitative testing, 80% success, statistical reliability, baseline testing. 11. Surveys and Sample Sizes + Designing good surveys is hard! We need to be careful on how we shape our questions to avoid biases, how to find the right segment of audience and large enough sample size, how to provide high confidence levels and low margins of errors. In this chapter, we review best practices and a cheat sheet for better survey design along with dos and donts on question types, rating scales, and survey pre-testing.Keywords:Survey design, question types, rating scales, survey length, pre-testing, response rates, statistical significance, sample quality, mean vs. median scores. 12. Measuring UX in B2B and Enterprise + Best measurements come from testing with actual users. But what if you dont have access to any users? Perhaps because of NDA, IP concerns, lack of clearance, poor availability, and high costs of customers and just lack of users? Lets explore how we can find a way around such restrictive environments, how to engage with stakeholders, and how we can measure efficiency, failures and set up UX KPI programs.Keywords:B2B, enterprise UX, limited access to users, compliance, legacy systems, compliance, desk research, stakeholder engagement, testing proxies, employees UX. 13. Design KPI Trees + To visualize design impact, we need to connect high-level business objectives with specific design initiatives. To do that, we can build up and present Design KPI trees. From the bottom up, the tree captures user needs, pain points, and insights from research, which inform design initiatives. For each, we define UX metrics to track the impact of these initiatives, and they roll up to higher-level design and business KPIs. Lets explore how it all works in action and how you can use it in your work.Keywords:User needs, UX metrics, KPI trees, sub-trees, design initiatives, setting up metrics, measuring and reporting design impact, design workflow, UX metrics graphs, UX planes. 14. Event Storming + How do we choose the right metrics? Well, we dont start with metrics. We start by identifying most critical user needs and assess the impact of meeting user needs well. To do that, we apply event storming by mapping critical users success moments as they interact with a digital product. Our job, then, is to maximize success, remove frustrations, and pave a clear path towards a successful outcome with event storming.Keywords:UX mapping, customer journey maps, service blueprints, event storming, stakeholder alignment, collaborative mapping, UX lanes, critical events, user needs vs. business goals. 15. Kano Model and Survey + Once we have a business objective in front of us, we need to choose design initiatives that are most likely to drive the impact that we need to enable with our UX work. To test how effective our design ideas are, we can map them against a Kano model und run a concept testing survey. It gives us a users sentiment that we then need to weigh against business priorities. Lets see how to do just that.Keywords:Feature prioritization, threshold attributes, performance attributes, excitement attributes, users sentiment, mapping design ideas, boosting users satisfaction. 16. Design Process + How do we design a KPI tree from scratch? We start by running a collaborative event storming to identify key success moments. Then we prioritize key events and explore how we can amplify and streamline them. Then we ideate and come up with design initiatives. These initiatives are stress tested in an impact-effort matrix for viability and impact. Eventually, we define and assign metrics and KPIs, and pull them together in a KPI tree. Heres how it works from start till the end.Keywords:Uncovering user needs, impact-effort matrix, concept testing, event storming, stakeholder collaboration, traversing the KPI tree. 17. Choosing The Right Metrics + Should we rely on established UX metrics such as SUS, UMUX-Lite, and SUPR-Q, or should we define custom metrics tailored to product and user needs? We need to find a balance between the two. It depends on what we want to measure, what we actually can measure, and whether we want to track local impact for a specific change or global impact for the entire customer journey. Lets figure out how to define and establish metrics that actually will help us track our UX success.Keywords:Local vs. global KPIs, time spans, percentage vs. absolute values, A/B testing, mapping between metrics and KPIs, task breakdown, UX lanes, naming design KPIs. 18. Design KPIs Examples + Different contexts will require different design KPIs. In this chapter, we explore a diverse set of UX metrics related to search quality (quality of search for top 100 search queries), form design (error frequency, accuracy), e-commerce (time to final price), subscription-based services (time to tier boundaries), customer support (service desk inquiries) and many others. This should give you a good starting point to build upon for your own product and user needs.Keywords:Time to first success, search results quality, form error recovery, password recovery rate, accessibility coverage, time to tier boundaries, service desk inquiries, fake email frequency, early drop-off rate, carbon emissions per page view, presets and templates usage, default settings adoption, design system health. 19. UX Strategy + Establishing UX metrics doesnt happen over night. You need to discuss and decide what you want to measure and how often it should happen. But also how to integrate metrics, evaluate data, and report findings. And how to embed them into an existing design workflow. For that, you will need time and green lights from your stakeholders and managers. To achieve that, we need to tap into the uncharted waters of UX strategy. Lets see what it involves for us and how to make progress there.Keywords:Stakeholder engagement, UX maturity, governance, risk mitigation, integration, ownership, accountability, viability. 20. Reporting Design Success + Once youve established UX metrics, you will need to report them repeatedly to the senior management. How exactly would you do that? In this chapter, we explore the process of selecting representative tasks, recruiting participants, facilitating testing sessions, and analyzing the resulting data to create a compelling report and presentation that will highlight the value of your UX efforts to stakeholders.Keywords:Data analysis, reporting, facilitation, observation notes, video clips, guidelines and recommendations, definition of design success, targets, alignment, and stakeholders buy-in. 21. Target Times and States + To show the impact of our design work, we need to track UX snapshots. Basically, its four states, mapped against touch points in a customer journey: baseline (threshold not to cross), current state (how we are currently doing), target state (objective we are aiming for), and industry benchmark (to stay competitive). Lets see how it would work in an actual project.Keywords:Competitive benchmarking, baseline measurement, local and global design KPIs, cross-teams metrics, setting realistic goals. 22. Measuring Design Systems + How do we measure the health of a design system? Surely its not just a roll-out speed for newly designed UI components or flows. Most teams track productivity and coverage, but we can also go beyond that by measuring relative adoption, efficiency gains (time saved, faster time-to-market, satisfaction score, and product quality). But the best metric is how early designers involve the design system in a conversation during their design work.Keywords:Component coverage, decision trees, adoption, efficiency, time to market, user satisfaction, usage analytics, design system ROI, relative adoption. 23. Measuring UX Research + Research insights often end up gaining dust in PDF reports stored on remote fringes of Sharepoint. To track the impact of UX research, we need to track outcomes and research-specific metrics. The way to do that is to track UX research impact for UX and business, through organisational learning and engagement, through make-up of research efforts and their reach. And most importantly: amplifying research where we expect the most significant impact. Lets see what it involves.Keywords:Outcome metrics, organizational influence, research-specific metrics, research references, study observers, research formalization, tracking research-initiated product changes. 24. Getting Started + So youve made it so far! Now, how do you get your UX metrics initiative off the ground? By following small steps heading in the right direction. Small commitments, pilot projects, and design guilds will support and enable your efforts. We just need to define realistic goals and turn UX metrics in a culture of measurement, or simply a way of working. Lets see how we can do just that.Keywords:Pilot projects, UX integration, resource assessment, evidence-driven design, establishing a baseline, culture of measurement. 25. Next Steps + Lets wrap up our journey into UX metrics and Design KPIs and reflect what we have learned. What remains is the first next step: and that would be starting where you are and growing incrementally, by continuously visualizing and explaining your UX impact however limited it might be to your stakeholders. This is the last chapter of the course, but the first chapter of your incredible journey thats ahead of you.Keywords:Stakeholder engagement, incremental growth, risk mitigation, user satisfaction, business success. Who Is The Course For?This course is tailored for advanced UX practitioners, design leaders, product managers, and UX researchers who are looking for a practical guide to define, establish and track design KPIs, translate business goals into actionable design tasks, and connect business needs with user needs.What Youll LearnBy the end of the video course, youll have a packed toolbox of practical techniques and strategies on how to define, establish, sell, and measure design KPIs from start to finish and how to make sure that your design work is always on the right trajectory. Youll learn:How to translate business goals to UX initiatives,The difference between OKRs, KPIs, and metrics,How to define design success for your company,Metrics and KPIs that businesses typically measure,How to choose the right set of metrics and KPIs,How to establish design KPIs focused on user needs,How to build a comprehensive design KPI tree,How to combine qualitative and quantitative insights,How to choose and prioritize design work,How to track the impact of design work on business goals,How to explain, visualize, and defend design work,How companies define and track design KPIs,How to make a strong case for UX metrics.Community Matters Producing a video course takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. So thank you from the bottom of our hearts! We hope youll find the course useful for your work. Happy watching, everyone! Video + UX TrainingVideo onlyVideo + UX Training$495.00 $799.00Get Video + UX Training25 video lessons (8h) + Live UX Training.100 days money-back-guarantee.Video only$250.00$395.00Get the video course25 video lessons (8h). Updated yearly.Also available as a UX Bundle with 2 video courses.

In this third and final part of a three-part series, were taking a more streamlined approach to an application that supports vision-language (VLM) and text-to-speech (TTS). This time, well use different models that are designed for all three modalities images or videos, text, and audio (including speech-to-text) in one model. These any-to-any models make things easier by allowing us to avoid switching between models.Specifically, well focus on two powerful models: Reka and Gemini 1.5 Pro.Both models take things to the next level compared to the tools we used earlier. They eliminate the need for separate speech recognition models, providing a unified solution for multimodal tasks. With this in mind, our goal in this article is to explore how Reka and Gemini simplify building advanced applications that handle images, text, and audio all at once. Overview Of Multimodal AI ModelsThe architecture of multimodal models has evolved to enable seamless handling of various inputs, including text, images, and audio, among others. Traditional models often require separate components for each modality, but recent advancements in any-to-any models like Next-GPT or 4M allow developers to build systems that process multiple modalities within a unified architecture.Gato, for instance, utilizes a 1.2 billion parameter decoder-only transformer architecture with 24 layers, embedding sizes of 2048 and a hidden size of 8196 in its feed-forward layers. This structure is optimized for general tasks across various inputs, but it still relies on extensive task-specific fine-tuning.GPT-4o, on the other hand, takes a different approach with training on multiple media types within a single architecture. This means its a single model trained to handle a variety of inputs (e.g., text, images, code) without the need for separate systems for each. This training method allows for smoother task-switching and better generalization across tasks.Similarly, CoDi employs a multistage training scheme to handle a linear number of tasks while supporting input-output combinations across different modalities. CoDis architecture builds a shared multimodal space, enabling synchronized generation for intertwined modalities like video and audio, making it ideal for more dynamic multimedia tasks.Most any-to-any models, including the ones weve discussed, rely on a few key concepts to handle different tasks and inputs smoothly:Shared representation spaceThese models convert different types of inputs text, images, audio into a common feature space. Text is encoded into vectors, images into feature maps, and audio into spectrograms or embeddings. This shared space allows the model to process various inputs in a unified way.Attention mechanismsAttention layers help the model focus on the most relevant parts of each input, whether its understanding the text, generating captions from images, or interpreting audio.Cross-modal interactionIn many models, inputs from one modality (e.g., text) can guide the generation or interpretation of another modality (e.g., images), allowing for more integrated and cohesive outputs.Pre-training and fine-tuningModels are typically pre-trained on large datasets across different types of data and then fine-tuned for specific tasks, enhancing their performance in real-world applications.Reka ModelsReka is an AI research company that helps developers build powerful applications by offering models for a range of tasks. These tasks include generating text from videos and images, translating speech, and answering complex questions from long multimodal documents. Rekas models can even write and execute code, providing flexible, real-world solutions for developers.These are the three main models Reka offers:Reka CoreA 67-billion-parameter multimodal language model designed for complex tasks. It supports inputs like images, videos, and texts while excelling in advanced reasoning and coding.Reka FlashA faster model with a 21-billion-parameter, designed for flexibility and rapid performance in multimodal settings.Reka Edge (PDF)A smaller 7-billion-parameter model was built for on-device and low-latency applications, making it efficient for local use and local or latency-sensitive applications.Rekas models can be fine-tuned and deployed securely, whether on the cloud, on-premises, or even on-device. Lets start by testing Rekas capabilities directly through its playground. This allows us to experiment with its multimodal features without writing any code, providing a hands-on way to see how the models handle various tasks, such as image and video comprehension.Alright, well kick things off by uploading an image of a diagram outline of the PaliGemma architecture and ask Reka for a detailed explanation.Can you provide a more detailed explanation of this image?Heres what we get from Reka Core:This image is a schematic representation of a machine-learning model named PaliGemma. The model appears to be designed for multimodal input, combining both image and text data. At the top, there are two input sources: Image Input and Text Input. The image input is processed by a SigLIP Image Encoder, which likely stands for a specific type of image encoding technique. The output of this encoder is then subjected to a Linear Projection, which is a common step in machine learning to transform data into a lower-dimensional space. The text input is directly fed into the model. Both the projected image data and the text input are then concatenated into Concatenated Tokens, which are then processed by a component labeled Gemma. The final output of the model is Text Output, which suggests that the model is designed to generate text based on the input data.Its a clear and detailed breakdown of the PaliGemma architecture. The model accurately identifies image and text inputs, the SigLIP image encoder, and the linear projection step. It also grasps how the image and text inputs are combined and processed to generate text output. I should admit that the response is quite neat, offering a solid explanation of the architecture. Lets try a video input instead. Well upload the video about Genny, a software, and ask a question to see how well Reka Core handles video comprehension.What is this video about?This video is a screen recording of a group of friends discussing their plans for the weekend.Well, its not a good answer compared to what LLaVA gave us in the previous article. Now lets try a longer video, but with the Reka Flash model. The video is about a TTS model called Parler TTS. Instead of asking what the video is about, lets prompt it like this:Im an AI developer, and Im not sure how this TTS model can help me in my projects. Can you explain how I can use it or what its useful for?Reka Flash generates a solid answer this time: Of course! This TTS (Text-to-Speech) model can be incredibly useful for developers, especially those working on projects that involve creating more human-like interactions or providing audio feedback to users. Here are some ways you can leverage this TTS model in your projects:Accessibility: TTS models can greatly enhance the accessibility of your applications for users with visual impairments or reading difficulties. By providing spoken feedback or narrating content, you can make your applications more inclusiveVoice Assistants: You can integrate this TTS model into voice assistants or chatbots, allowing them to generate more natural-sounding responses. This can improve user experience and make interactions with your bots more engaging.Multimedia Applications: This TTS model can be used in multimedia applications, such as e-books, educational tools, or games, to provide spoken narration or instructions. This can make the content more engaging and easier to understand.Audio Notifications: You can use the TTS model to generate audio notifications for your applications, providing users with spoken alerts or reminders. This can be particularly useful for users who may not always have their screens visible.Language Learning: The TTS model can be used in language learning applications to provide users with correct pronunciation and intonation. It can also generate spoken feedback or narrate lessons, making the learning process more immersive.Audio Books: You can use the TTS model to generate audio books, allowing users to listen to written content instead of reading it. This can be especially helpful for users who prefer auditory learning or have difficulty reading.Explainer Videos: The TTS model can be used to generate voiceovers for explainer videos, providing users with spoken narration that explains the content on the screen. This can make the content more engaging and easier to understand.Audio Feedback: You can use the TTS model to generate audio feedback for users in your applications, such as confirming actions, providing instructions, or giving feedback on their performance. This can make the interactions more natural and intuitive.In summary, the TTS model can be a valuable tool for developers looking to create more human-like interactions, improve accessibility, and enhance the user experience in various applications.Its a good answer thats informative and quite practical for developers. Lets compare what happens when we try the Reka Edge model with a PDF input titled Meta AI Responsible Use Guide (PDF).As an AI developer, how can I ensure that I am following the responsible AI guidelines outlined in this document?To ensure that your use of AI aligns with the principles outlined in this guide, you can follow these steps and best practices:Familiarize yourself with the principles of responsible AI, such as transparency, accountability, and user empowerment, as outlined in the guide.Understand the potential impacts of AI on users and society, and be aware of the risks and challenges associated with the development and deployment of AI systems.Embrace an iterative model-development mindset, continuously striving for improvement and learning from feedback and errors.Build a responsible AI ecosystem by working with partners, experts, and communities to develop and share best practices, tools, and benchmarking resources.Follow the guidelines and best practices outlined in the guide for each stage of model development, from data collection and preparation to fine-tuning, evaluation, and deployment.Consider the specific use case and requirements for your AI system, and tailor your approach accordingly.Regularly monitor and evaluate the performance and safety of your AI system and make adjustments as needed to ensure it aligns with the principles outlined in the guide.Be transparent and accountable in your interactions with users and stakeholders, and be open to feedback and suggestions for improvement.Stay informed about the latest developments and research in the field of AI, and be prepared to adapt your approach as needed to address new challenges and opportunities.Follow the specific guidelines and best practices outlined in the addendum for Code Llama, such as defining content policies, evaluating and benchmarking models, and addressing input- and output-level risks.Reka Edges answer is quite thorough and detailed, too!If you want to dive into coding, start by creating a Reka account and getting an API key. Then you can follow along with this notebook. Try out their Python SDK, and make sure to explore the different models available. Its a great way to see how these tools work under the hood!Gemini ModelsGemini 1.5, developed by Google DeepMind, is designed to handle complex tasks efficiently, thanks to the new Mixture-of-Experts (MoE) system. MoE is like packing several specialized models inside one big model. Instead of using the whole network for every task, Gemini 1.5 activates only the parts (or what they call experts) that are most relevant. This means Gemini 1.5 can tackle complex tasks with less processing power than a typical monolithic model.We can explore Geminis features in Google AI Studio since its already baked right in. Well begin by uploading the following image illustrating VLM capabilities.Well ask Gemini to analyze the image and extract details or concepts:Explain this image. What are the specific details or concepts it represents?The image is a flowchart illustrating different types of image understanding tasks with a Vision Language Model.Object Localization: This task aims to identify the precise location of objects within an image. The example question asks, Is one cat behind another?Zero-shot Segmentation: This task involves segmenting an image into different regions based on a given label, even if the model has never seen that specific label before. The example question asks to segment striped cat.Zero-shot Visual QA: This task requires answering questions about an image, even if the model has not been specifically trained to answer that type of question. The example question asks, What is the breed of these cats?One-shot Learning with Instructions: This task involves providing the model with a single example and instruction to learn a new concept and apply it to other images. The example question asks, Striped cats are called tabby cats. What is the breed of the cats in the image?Well, Gemini nailed it it clearly understood the image and recognized the tasks a VLM handles. This is exactly what youd expect from a model designed for advanced image analysis.Now, well upload another image this time of an Italian dish and ask Gemini if it can recognize the dishes and list the ingredients needed for them. This type of food recognition task will help us test its ability to identify foods and ingredients.List the different dishes in this image, also from which country, and give me the ingredients I need to make them.The image shows an Italian feast with the following dishes:Seafood Stew: A rich and flavorful stew with seafood like clams, mussels, shrimp, fish, and vegetables in a tomato broth.Spaghetti with Tomato Sauce: Classic spaghetti pasta tossed in a simple yet flavorful tomato sauce.Meatballs in Tomato Sauce: Tender and juicy meatballs simmered in a rich tomato sauce.Lasagna: Layered pasta with meat sauce, cheese, and tomato sauce.Side Salad: A refreshing side salad with mixed greens, tomatoes, and other vegetables.Garlic Bread: Toasted bread slices rubbed with garlic and olive oil.Marinara Sauce: A simple tomato-based sauce.This is a typical Italian meal with various dishes showcasing the flavors of Italian cuisine.As for the ingredients, youll need tomatoes for many of these dishes, specifically for the sauces and the side salad.Well, the model did a good job recognizing the dishes, but it also didnt give me all the necessary ingredients. Lets see how it does with videos instead, using the same video we used earlier with the Reka models. This time, the task will focus on action recognition. What is the purpose of this video, and what key actions or processes are being demonstrated?The video is a tutorial about the importance of friendship and how it can impact our lives. It demonstrates the use of a video editing software called Genmy to create a video and add text subtitles. The video creator is using Genmy to:Record their voice: This is seen at the top of the screen with the mic icon.Add text to speech: You see the Text to Speech option, which is likely being used to generate subtitles or captions for the video.Edit the timeline: Theyre working with a video timeline, adding and arranging different elements.Add voice-over: The speaker is adding commentary to the video.Create a visually appealing presentation: Theyre using a combination of video footage, text, and voice-over to create an engaging tutorial.Well, Gemini gave a clear breakdown of the video, identifying it as a tutorial demonstrating the Genmy video editing software to highlight how its used for recording voice, adding text-to-speech, editing video timelines, and allowing voice-over. Impressive!Lets upload one more video, the same one we used for Reka about the Parler TTS model, and ask Gemini to analyze and summarize the contents.Summarize this video and explain how the contents might be relevant or helpful for software engineers.This video showcases different voice samples generated by a text-to-speech (TTS) system called Parler-TTS. The video highlights various voice characteristics like gender, pace, pitch, and even the simulated environment. For software engineers, this video demonstrates the progress made in TTS technology. These are some insights:Voice Variety: The video shows that Parler-TTS can create diverse voices, potentially useful for applications needing different personas or tones.Fine-grained Control: The video emphasizes the ability to control voice parameters like pace and pitch, showcasing the potential for customizability.Quality and Naturalness: The video focuses on the quality of the generated speech, demonstrating the advancements made in speech synthesis, which is crucial for user experience.Nicely done! I can go with that answer. Gemini explains adjusting voice settings, like pitch and speed, and how having different voices can be useful. Gemini also emphasizes the importance of natural, high-quality speech, which is handy for developers working with TTS systems!Alright, for coding, you can grab the code from Google AI Studio by clicking the Get Code button. You can choose between formatting the code in Python, Swift, and Java, among other languages.ConclusionBoth Reka and Gemini are strong multimodal models for AI applications, but there are key differences between them to consider. Heres a table that breaks those down: Feature Reka Gemini 1.5 Multimodal Capabilities Image, video, and text processing Image, video, text, with extended token context Efficiency Optimized for multimodal tasks Built with MoE for efficiency Context Window Standard token window Up to two million tokens (with Flash variant) Architecture Focused on multimodal task flow MoE improves specialization Training/Serving High performance with efficient model switching More efficient training with MoE architecture Deployment Supports on-device deployment Primarily cloud-based, with Vertex AI integration Use Cases Interactive apps, edge deployment Suited for large-scale, long-context applications Languages Supported Multiple languages Supports many languages with long context windows Reka stands out for on-device deployment, which is super useful for apps requiring offline capabilities or low-latency processing.On the other hand, Gemini 1.5 Pro shines with its long context windows, making it a great option for handling large documents or complex queries in the cloud.

In a fast-paced industry like tech, it can be hard to deal with the fear of missing out on important news. But, as many of us know, theres an absolutely huge amount of information coming in daily, and finding the right time and balance to keep up can be difficult, if not stressful. A classic piece of technology like an RSS feed is a delightful way of taking back ownership of our own time. In this article, we will create a static Really Simple Syndication (RSS) reader that will bring you the latest curated news only once (yes: once) a day.Well obviously work with RSS technology in the process, but were also going to combine it with some things that maybe you havent tried before, including Astro (the static site framework), TypeScript (for JavaScript goodies), a package called rss-parser (for connecting things together), as well as scheduled functions and build hooks provided by Netlify (although there are other services that do this).I chose these technologies purely because I really, really enjoy them! There may be other solutions out there that are more performant, come with more features, or are simply more comfortable to you and in those cases, I encourage you to swap in whatever youd like. The most important thing is getting the end result!The PlanHeres how this will go. Astro generates the website. I made the intentional decision to use a static site because I want the different RSS feeds to be fetched only once during build time, and thats something we can control each time the site is rebuilt and redeployed with updates. Thats where Netlifys scheduled functions come into play, as they let us trigger rebuilds automatically at specific times. There is no need to manually check for updates and deploy them! Cron jobs can just as readily do this if you prefer a server-side solution.During the triggered rebuild, well let the rss-parser package do exactly what it says it does: parse a list of RSS feeds that are contained in an array. The package also allows us to set a filter for the fetched results so that we only get ones from the past day, week, and so on. Personally, I only render the news from the last seven days to prevent content overload. Well get there!But first...What Is RSS?RSS is a web feed technology that you can feed into a reader or news aggregator. Because RSS is standardized, you know what to expect when it comes to the feeds format. That means we have a ton of fun possibilities when it comes to handling the data that the feed provides. Most news websites have their own RSS feed that you can subscribe to (this is Smashing Magazines RSS feed: https://www.smashingmagazine.com/feed/). An RSS feed is capable of updating every time a site publishes new content, which means it can be a quick source of the latest news, but we can tailor that frequency as well.RSS feeds are written in an Extensible Markup Language (XML) format and have specific elements that can be used within it. Instead of focusing too much on the technicalities here, Ill give you a link to the RSS specification. Dont worry; that page should be scannable enough for you to find the most pertinent information you need, like the kinds of elements that are supported and what they represent. For this tutorial, were only using the following elements: <title>, <link>, <description>, <item>, and <pubDate>. Well also let our RSS parser package do some of the work for us.Creating The State SiteWell start by creating our Astro site! In your terminal run pnpm create astro@latest. You can use any package manager you want Im simply trying out pnpm for myself.After running the command, Astros chat-based helper, Houston, walks through some setup questions to get things started. astro Launch sequence initiated. dir Where should we create your new project? ./rss-buddy tmpl How would you like to start your new project? Include sample files ts Do you plan to write TypeScript? Yes use How strict should TypeScript be? Strict deps Install dependencies? Yes git Initialize a new git repository? YesI like to use Astros sample files so I can get started quickly, but were going to clean them up a bit in the process. Lets clean up the src/pages/index.astro file by removing everything inside of the <main></main> tags. Then were good to go!From there, we can spin things by running pnpm start. Your terminal will tell you which localhost address you can find your site at.Pulling Information From RSS feedsThe src/pages/index.astro file is where we will make an array of RSS feeds we want to follow. We will be using Astros template syntax, so between the two code fences (---), create an array of feedSources and add some feeds. If you need inspiration, you can copy this:const feedSources = [ 'https://www.smashingmagazine.com/feed/', 'https://developer.mozilla.org/en-US/blog/rss.xml', // etc.]Now well install the rss-parser package in our project by running pnpm install rss-parser. This package is a small library that turns the XML that we get from fetching an RSS feed into JavaScript objects. This makes it easy for us to read our RSS feeds and manipulate the data any way we want.Once the package is installed, open the src/pages/index.astro file, and at the top, well import the rss-parser and instantiate the Partner class.import Parser from 'rss-parser';const parser = new Parser();We use this parser to read our RSS feeds and (surprise!) parse them to JavaScript. Were going to be dealing with a list of promises here. Normally, I would probably use Promise.all(), but the thing is, this is supposed to be a complicated experience. If one of the feeds doesnt work for some reason, Id prefer to simply ignore it.Why? Well, because Promise.all() rejects everything even if only one of its promises is rejected. That might mean that if one feed doesnt behave the way Id expect it to, my entire page would be blank when I grab my hot beverage to read the news in the morning. I do not want to start my day confronted by an error.Instead, Ill opt to use Promise.allSettled(). This method will actually let all promises complete even if one of them fails. In our case, this means any feed that errors will just be ignored, which is perfect.Lets add this to the src/pages/index.astro file:interface FeedItem { feed?: string; title?: string; link?: string; date?: Date;}const feedItems: FeedItem[] = [];await Promise.allSettled( feedSources.map(async (source) => { try { const feed = await parser.parseURL(source); feed.items.forEach((item) => { const date = item.pubDate ? new Date(item.pubDate) : undefined; feedItems.push({ feed: feed.title, title: item.title, link: item.link, date, }); }); } catch (error) { console.error(Error fetching feed from ${source}:, error); } }));This creates an array (or more) named feedItems. For each URL in the feedSources array we created earlier, the rss-parser retrieves the items and, yes, parses them into JavaScript. Then, we return whatever data we want! Well keep it simple for now and only return the following:The feed title,The title of the feed item,The link to the item,And the items published date.The next step is to ensure that all items are sorted by date so well truly get the latest news. Add this small piece of code to our work:const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());Oh, and... remember when I said I didnt want this RSS reader to render anything older than seven days? Lets tackle that right now since were already in this code.Well make a new variable called sevenDaysAgo and assign it a date. Well then set that date to seven days ago and use that logic before we add a new item to our feedItems array.This is what the src/pages/index.astro file should now look like at this point:---import Layout from '../layouts/Layout.astro';import Parser from 'rss-parser';const parser = new Parser();const sevenDaysAgo = new Date();sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);const feedSources = [ 'https://www.smashingmagazine.com/feed/', 'https://developer.mozilla.org/en-US/blog/rss.xml',]interface FeedItem { feed?: string; title?: string; link?: string; date?: Date;}const feedItems: FeedItem[] = [];await Promise.allSettled( feedSources.map(async (source) => { try { const feed = await parser.parseURL(source); feed.items.forEach((item) => { const date = item.pubDate ? new Date(item.pubDate) : undefined; if (date && date >= sevenDaysAgo) { feedItems.push({ feed: feed.title, title: item.title, link: item.link, date, }); } }); } catch (error) { console.error(Error fetching feed from ${source}:, error); } }));const sortedFeedItems = feedItems.sort((a, b) => (b.date ?? new Date()).getTime() - (a.date ?? new Date()).getTime());---<Layout title="Welcome to Astro."> <main> </main></Layout>Rendering XML DataIts time to show our news articles on the Astro site! To keep this simple, well format the items in an unordered list rather than some other fancy layout.All we need to do is update the <Layout> element in the file with the XML objects sprinkled in for a feed items title, URL, and publish date.<Layout title="Welcome to Astro."> <main> {sortedFeedItems.map(item => ( <ul> <li> <a href={item.link}>{item.title}</a> <p>{item.feed}</p> <p>{item.date}</p> </li> </ul> ))} </main></Layout>Go ahead and run pnpm start from the terminal. The page should display an unordered list of feed items. Of course, everything is styled at the moment, but luckily for you, you can make it look exactly like you want with CSS!And remember that there are even more fields available in the XML for each item if you want to display more information. If you run the following snippet in your DevTools console, youll see all of the fields you have at your disposal:feed.items.forEach(item => {}Scheduling Daily Static Site BuildsWere nearly done! The feeds are being fetched, and they are returning data back to us in JavaScript for use in our Astro page template. Since feeds are updated whenever new content is published, we need a way to fetch the latest items from it.We want to avoid doing any of this manually. So, lets set this site on Netlify to gain access to their scheduled functions that trigger a rebuild and their build hooks that do the building. Again, other services do this, and youre welcome to roll this work with another provider Im just partial to Netlify since I work there. In any case, you can follow Netlifys documentation for setting up a new site. Once your site is hosted and live, you are ready to schedule your rebuilds. A build hook gives you a URL to use to trigger the new build, looking something like this:https://api.netlify.com/build_hooks/your-build-hook-idLets trigger builds every day at midnight. Well use Netlifys scheduled functions. Thats really why Im using Netlify to host this in the first place. Having them at the ready via the host greatly simplifies things since theres no server work or complicated configurations to get this going. Set it and forget it!Well install @netlify/functions (instructions) to the project and then create the following file in the projects root directory: netlify/functions/deploy.ts.This is what we want to add to that file:// netlify/functions/deploy.tsimport type { Config } from '@netlify/functions';const BUILD_HOOK = 'https://api.netlify.com/build_hooks/your-build-hook-id'; // replace me!export default async (req: Request) => { await fetch(BUILD_HOOK, { method: 'POST', }).then((response) => { console.log('Build hook response:', response.json()); }); return { statusCode: 200, };};export const config: Config = { schedule: '0 0 * * *',};If you commit your code and push it, your site should re-deploy automatically. From that point on, it follows a schedule that rebuilds the site every day at midnight, ready for you to take your morning brew and catch up on everything that you think is important.

Accessibility is key in modern web design. A site that doesnt consider how its user experience may differ for various audiences especially those with disabilities will fail to engage and serve everyone equally. One of the best ways to prevent this is to approach your site from a bottom-up perspective.Understanding Bottom-Up DesignConventional, top-down design approaches start with the big picture before breaking these goals and concepts into smaller details. Bottom-up philosophies, by contrast, consider the minute details first, eventually achieving the broader goal piece by piece.This alternative way of thinking is important for accessibility in general because it reflects how neurodivergent people commonly think. While non-autistic people tend to think from a top-down perspective, those with autism often employ a bottom-up way of thinking. Of course, there is considerable variation, and researchers have identified at least three specialist thinking types within the autism spectrum:Visual thinkers who think in images;Pattern thinkers who think of concepts in terms of patterns and relationships;Verbal thinkers who think only in word detail.Still, research shows that people with autism and ADHD show a bias toward bottom-up thinking rather than the top-down approach you often see in neurotypical users. Consequently, a top-down strategy means you may miss details your audience may notice, and your site may not feel easily usable for all users.As a real-world example, consider the task of writing an essay. Many students are instructed to start an essay assignment by thinking about the main point they want to convey and then create an outline with points that support the main argument. This is top-down thinking starting with the big picture of the topic and then gradually breaking down the topic into points and then later into words that articulate these points.In contrast, someone who uses a bottom-up thinking approach might start an essay with no outline but rather just by freely jotting down every idea that comes to mind as it comes to mind perhaps starting with one particular idea or example that the writer finds interesting and wants to explore further and branching off from there. Then, once all the ideas have been written out, the writer goes back to group related ideas together and arrange them into a logical outline. This writer starts with the small details of the essay and then works these details into the big picture of the final form.In web design, in particular, a bottom-up approach means starting with the specifics of the user experience instead of the desired effect. You may determine a readable layout for a single blog post, then ask how that page relates to others and slowly build on these decisions until you have several well-organized website categories. You may even get more granular. Say you start your site design by placing a menu at the bottom of a mobile site to make it easier to tap with one hand, improving ease of use. Then, you build a drop-down menu around that choice placing the most popular or needed options at the bottom instead of the top for easy tapping. From there, you may have to rethink larger-scale layouts to work around those interactive elements being lower on the screen, slowly addressing larger categories until you have a finished site design.In either case, the idea of bottom-up design is to begin with the most specific problems someone might have. You then address them in sequence instead of determining the big picture first.Benefits Of A Bottom-Up Approach For Accessible DesignWhile neither bottom-up nor top-down approaches dominate the industry, some web engineers prefer the bottom-up approach due to the various accessibility benefits this process provides. This strategy has several accessibility benefits.Putting User Needs FirstThe biggest benefit of bottom-up methods is that they prioritize the users needs.Top-down approaches seem organized, but they often result in a site that reflects the designers choices and beliefs more than it serves your audience.Consider some of the complaints that social media users have made over the years related to usability and accessibility for the everyday user. For example, many users complain that their Facebook feed will randomly refresh as they scroll for the sake of providing users with the most up-to-date content. However, the feature makes it virtually impossible to get back to a post a user viewed that they didnt think to save. Likewise, TikToks watch history feature has come and gone over the years and still today is difficult for many users to find without viewing an outside tutorial on the subject. This is a common problem: 95.9% of the largest one million homepages have Web Content Accessibility Guidelines (WCAG) errors. While a bottom-up alternative doesnt mean you wont make any mistakes, it may make them less likely, as bottom-up thinking often improves your awareness of new stimuli so you can catch things youd otherwise overlook. Its easier to meet users needs when you build your entire site around their experience instead of looking at UX as an afterthought.Consider this example from Berkshire Hathaway, a multi-billion-dollar holding company. The overall design philosophy is understandable: Its simple and direct, choosing to focus on information instead of fancy aesthetics that may not suit the company image. However, you could argue it loses itself in this big picture.While it is simple, the lack of menus or color contrast and the small font make it harder to read and a little overwhelming. This confusion can counteract any accessibility benefits of its simplicity.Alternatively, even a simple website redesign could include intuitive menus, additional contrast, and accessible font for easy navigation across the site.The homepage for U.K. charity Scope offers a better example of web design centered around users needs. Concise, clear menus line the top of the page to aid quicker, easier navigation. The color scheme is simple enough to avoid confusion but provides enough contrast to make everything easy to read something the sans-serif font further helps.Ensuring Accessibility From The StartA top-down method also makes catering to a diverse audience difficult because you may need to shoehorn features into an existing design. For example, say, a local government agency creates a website focused on providing information and services to a general audience of residents. The site originally featured high-resolution images, bright colors, and interactive charts. However, they realize the images are not accessible to people navigating the site with screen readers, while multiple layers of submenus are difficult for keyboard-only users. Further, the bright colors make it hard for visually impaired users to read the sites information.The agency, realizing these accessibility concerns, adds captions to each image. However, the captions disrupt the originally intended visual aesthetics and user flow. Further, adjusting the bright colors would involve completely rethinking the sites entire color palette. If these considerations had been made before the site was built, the site build could have specifically accommodated these elements while still creating an aesthetically pleasing and user-friendly result.Alternatively, a site initially built with high contrast, a calm color scheme, clear typography, simple menus, and reduced imagery would make this site much more accessible to a wide user base from the get-go.As a real-world example, consider the Awwwards website. There are plenty of menus to condense information and ease navigation without overloading the screen a solid accessibility choice. However, there does not seem to be consistent thought in these menus placement or organization. There are far too many menus; some are at the top while others are at the bottom, and a scrolling top bar adds further distractions. It seems like Awwwards may have added additional menus as an afterthought to improve navigation. This leads to inconsistencies and crowding because they did not begin with this thought.In contrast,Bottom-up alternatives address usability issues from the beginning, which results in a more functional, accessible website.Redesigning a system to address a usability issue it didnt originally make room for is challenging. It can lead to errors like broken links and other unintended consequences that may hinder access for other visitors. Some sites have even claimed to lose 90% of their traffic after a redesign. While bottom-up approaches wont eliminate those possibilities, they make them less likely by centering everything around usage from the start.The website for the Vasa Museum in Stockholm, Sweden, showcases a more cohesive approach to ensuring accessibility. Like Awwwards, it uses menus to aid navigation and organization, but there seems to be more forethought into these features. All menus are at the top, and there are fewer of them, resulting in less clutter and a faster way to find what youre looking for. The overall design complements this by keeping things simple and neat so that the menus stand out.Increasing AwarenessSimilarly, bottom-up design ensures you dont miss as many accessibility concerns. When you start at the top, before determining what details fit within it, you may not consider all the factors that influence it. Beginning with the specifics instead makes it easier to spot and address problems you wouldve missed otherwise.This awareness is particularly important for serving a diverse population. An estimated 16% of the global population 1.6 billion people have a significant disability. That means theres a huge range of varying needs to account for, but most people lack firsthand experience living with these conditions. Consequently, its easy to miss things impacting others UX. You can overcome that knowledge gap by asking how everyone can use your site first.Bottom-Up vs. Top-Down: Which Is Best for You?As these benefits show, a bottom-up design philosophy can be helpful when building an accessible site. Still, top-down methods can be advantageous at times, too. Which is best depends on your situation.Top-down approaches are a good way to ensure a consistent brand image, as you start with the overall idea and base future decisions on this concept. It also makes it easier to create a design hierarchy to facilitate decision-making within your team. When anyone has a question, they can turn to whoever is above them or refer to the broader goals. Such organization can also mean faster design processes.Bottom-up methods, by contrast, are better when accessibility for a diverse audience is your main concern. It may be harder to keep everyone on the same overall design philosophy page, but it usually produces a more functional website. You can catch and solve problems early and pay great attention to detail. However, this can mean longer design cycles, which can incur extra costs.It may come down to what your team is most comfortable with. People think and work differently, with some preferring a top-down approach while others find bottom-up more natural. Combining the two starting with a top-down model before tackling updates from a bottom-up perspective can be beneficial, too. Strategies For Implementing A Bottom-Up Design ModelShould you decide a bottom-up design method is best for your goals, here are some ways you can embrace this philosophy.Talk To Your Existing User BaseOne of the most important factors in bottom-up web design is to center everything around your users. As a result, your existing user base whether from a separate part of your business or another site you run is the perfect place to start.Survey customers and web visitors about their experience on your sites and others. Ask what pain points they have and what features theyd appreciate. Any commonalities between responses deserve attention. You can also turn to WCAG standards for inspiration on accessible functionality, but first-hand user feedback should form the core of your mission.Look To Past Projects For Accessibility GapsPast sites and business projects can also reveal what specifics you should start with. Look for any accessibility gaps by combing through old customer feedback and update histories and using these sites yourself to find issues. Take note of any barriers or usability concerns to address in your next website.Remember to document everything you find as you go. Up to 90% of organizations data is unstructured, making it difficult to analyze later. Reversing that trend by organizing your findings and recording your accessible design process will streamline future accessibility optimization efforts.Divide Tasks But Communicate OftenKeep in mind that a bottom-up strategy can be time-consuming. One of the reasons why top-down alternatives are popular is because theyre efficient. You can overcome this gap by splitting tasks between smaller teams. However, these groups must communicate frequently to ensure separate design considerations work as a cohesive whole.A DevOps approach is helpful here. DevOps has helped 49% of its adopters achieve a faster time to market, and 61% report higher-quality deliverables. It also includes space for both detailed work and team-wide meetings to keep everyone on track. Such benefits ensure you can remain productive in a bottom-up strategy.Accessible Websites Need A Bottom-Up Design ApproachYou cant overstate the importance of accessible website design. By the same token, bottom-up philosophies are crucial in modern site-building. A detail-oriented approach makes it easier to serve a more diverse audience along several fronts. Making the most of this opportunity will both extend your reach to new niches and make the web a more equitable place.The Web Accessibility Initiatives WCAG standards are a good place to start. While these guidelines dont necessarily describe how to apply a bottom-up approach, they do outline critical user needs and accessibility concerns your design should consider. The site also offers a free and comprehensive Digital Accessibility Foundations course for designers and developers.Familiarizing yourself with these standards and best practices will make it easier to understand your audience before you begin designing your site. You can then build a more accessible platform from the ground up.Additionally, the following are some valuable related reads that can act as inspiration in accessibility-centered and user-centric design.Inclusive Design for a Digital World: Designing with Accessibility in Mind by Regine M. GilbertPractical Web Inclusion and Accessibility: A Comprehensive Guide to Access Needs by Ashley FirthDont Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve KrugBy employing bottom-up thinking as well as resources like these in your design approach, you can create websites that not only meet current accessibility standards but actively encourage site use among users of all backgrounds and abilities.Further Reading On SmashingMagGetting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size, Eric BaileyHow To Make A Strong Case For Accessibility, Vitaly FriedmanA Guide To Accessible Form Validation, Sandrina PereiraCreating A High-Contrast Design System With CSS Custom Properties, Brecht De Ruyte

Oklab is a new perceptual color space supported in all major browsers created by the Swedish engineer Bjrn Ottosson. In this interview, Philip Jgenstedt explores how and why Bjrn created Oklab and how it spread across the ecosystem.Note: The original interview was conducted in Swedish and is available to watch.About BjrnPhilip Jgenstedt: Tell me a little about yourself, Bjrn.Bjrn Ottosson: I worked for many years in the game industry on game engines and games like FIFA, Battlefield, and Need for Speed. I've always been interested in technology and its interaction with the arts. Im an engineer, but Ive always held both of these interests.On Working With ColorPhilip: For someone who hasnt dug into colors much, whats so hard about working with them?Bjrn: Intuitively, colors can seem quite simple. A color can be lighter or darker, it can be more blue or more green, and so on. Everyone with typical color vision has a fairly similar experience of color, and this can be modeled.However, the way we manipulate colors in software usually doesnt align with human perception of colors. The most common color space is sRGB. Theres also HSL, which is common for choosing colors, but its also based on sRGB.One problem with sRGB is that in a gradient between blue and white, it becomes a bit purple in the middle of the transition. Thats because sRGB really isnt created to mimic how the eye sees colors; rather, it is based on how CRT monitors work. That means it works with certain frequencies of red, green, and blue, and also the non-linear coding called gamma. Its a miracle it works as well as it does, but its not connected to color perception. When using those tools, you sometimes get surprising results, like purple in the gradient.On Color PerceptionPhilip: How do humans perceive color?Bjrn: When light enters the eye and hits the retina, its processed in many layers of neurons and creates a mental impression. Its unlikely that the process would be simple and linear, and its not. But incredibly enough, most people still perceive colors similarly.People have been trying to understand colors and have created color wheels and similar visualizations for hundreds of years. During the 20th century, a lot of research and modeling went into color vision. For example, the CIE XYZ model is based on how sensitive our photoreceptor cells are to different frequencies of light. CIE XYZ is still a foundational color space on which all other color spaces are based.There were also attempts to create simple models matching human perception based on XYZ, but as it turned out, its not possible to model all color vision that way. Perception of color is incredibly complex and depends, among other things, on whether it is dark or light in the room and the background color it is against. When you look at a photograph, it also depends on what you think the color of the light source is. The dress is a typical example of color vision being very context-dependent. It is almost impossible to model this perfectly.Models that try to take all of this complexity into account are called color appearance models. Although they have many applications, theyre not that useful if you dont know if the viewer is in a light or bright room or other viewing conditions.The odd thing is that theres a gap between the tools we typically use such as sRGB and HSL and the findings of this much older research. To an extent, this makes sense because when HSL was developed in the 1970s, we didnt have much computing power, so its a fairly simple translation of RGB. However, not much has changed since then.We have a lot more processing power now, but weve settled for fairly simple tools for handling colors in software.Display technology has also improved. Many displays now have different RGB primaries, i.e., a redder red, greener green, or bluer blue. sRGB cannot reach all colors available on these displays. The new P3 color space can, but it's very similar to sRGB, just a little wider.On Creating OklabPhilip: What, then, is Oklab, and how did you create it?Bjrn: When working in the game industry, sometimes I wanted to do simple color manipulations like making a color darker or changing the hue. I researched existing color spaces and how good they are at these simple tasks and concluded that all of them are problematic in some way.Many people know about CIE Lab. Its quite close to human perception of color, but the handling of hue is not great. For example, a gradient between blue and white turns out purple in CIE Lab, similar to in sRGB. Some color spaces handle hue well but have other issues to consider.When I left my job in gaming to pursue education and consulting, I had a bit of time to tackle this problem. Oklab is my attempt to find a better balance, something Lab-like but okay.I based Oklab on two other color spaces, CIECAM16 and IPT. I used the lightness and saturation prediction from CIECAM16, which is a color appearance model, as a target. I actually wanted to use the datasets used to create CIECAM16, but I couldnt find them.IPT was designed to have better hue uniformity. In experiments, they asked people to match light and dark colors, saturated and unsaturated colors, which resulted in a dataset for which colors, subjectively, have the same hue. IPT has a few other issues but is the basis for hue in Oklab.Using these three datasets, I set out to create a simple color space that would be okay. I used an approach quite similar to IPT but combined it with the lightness and saturation estimates from CIECAM16. The resulting Oklab still has good hue uniformity but also handles lightness and saturation well.Philip: How about the name Oklab? Why is it just okay?Bjrn: This is a bit tongue-in-cheek and some amount of humility.For the tasks I had in mind, existing color spaces werent okay, and my goal was to make one that is. At the same time, it is possible to delve deeper. If a university had worked on this, they could have run studies with many participants. For a color space intended mainly for use on computer and phone screens, you could run studies in typical environments where they are used. Its possible to go deeper.Nevertheless, I took the datasets I could find and made the best of what I had. The objective was to make a very simple model thats okay to use. And I think it is okay, and I couldnt come up with anything better. I didnt want to call it Bjrn Ottosson Lab or something like that, so I went with Oklab.Philip: Does the name follow a tradition of calling things okay? I know theres also a Quite OK Image format.Bjrn: No, I didnt follow any tradition here. Oklab was just the name I came up with.On Oklab AdoptionPhilip: I discovered Oklab when it suddenly appeared in all browsers. Things often move slowly on the web, but in this case, things moved very quickly. How did it happen?Bjrn: I was surprised, too! I wrote a blog post and shared it on Twitter.I have a lot of contacts in the gaming industry and some contacts in the Visual Effects (VFX) industry. I expected that people working with shaders or visual effects might try this out, and maybe it would be used in some games, perhaps as an effect for a smooth color transition.But the blog post was spread much more widely than I thought. It was on Hacker News, and many people read it.The code for Oklab is only 10 lines long, so many open-source libraries have adopted it. This all happened very quickly.Chris Lilley from the W3C got in touch and asked me some questions about Oklab. We discussed it a bit, and I explained how it works and why I created it. He gave a presentation at a conference about it, and then he pushed for it to be added to CSS.Photoshop also changed its gradients to use Oklab. All of this happened organically without me having to cheer it on.On OkhslPhilip: In another blog post, you introduced two other color spaces, Okhsv and Okhsl. Youve already talked about HSL, so what is Okhsl?Bjrn: When picking colors, HSL has a big advantage, which is that the parameter space is simple. Any value 0-360 for hue (H) together with any values 0-1 for saturation (S) and lightness (L) are valid combinations and result in different colors on screen. The geometry of HSL is a cylinder, and theres no way to end up outside that cylinder accidentally.By contrast, Oklab contains all physically possible colors, but there are combinations of values that dont work where you reach colors that dont exist. For example, starting from light and saturated yellow in Oklab and rotating the hue to blue, that blue color does not exist in sRGB; there are only darker and less saturated blues. Thats because sRGB in Oklab has a strange shape, so its easy to end up going outside it. This makes it difficult to select and manipulate colors with Oklab or Oklch.Okhsl was an attempt at compromise. It maintains Oklabs behavior for colors that are not very saturated, close to gray, and beyond that, stretches out to a cylinder that contains all of sRGB. Another way to put it is that the strange shape of sRGB in Oklab has been stretched into a cylinder with reasonably smooth transitions.The result is similar to HSL, where all parameters can be changed independently without ending up outside sRGB. It also makes Okhsl more complicated than Oklab. There are unavoidable compromises to get something with the characteristics that HSL has.Everything with color is about compromises. Color vision is so complex that it's about making practical compromises.This is an area where I wish there were more research. If I have a white background and want to pick some nice colors to put on it, then you can make a lot of assumptions. Okhsl solves many things, but is it possible to do even better?On Color CompromisesPhilip: Some people who have tried Oklab say there are too many dark shades. You changed that in Okhsl with a new lightness estimate.Bjrn: This is because Oklab is exposure invariant and doesnt account for viewing conditions, such as the background color. On the web, theres usually a white background, which makes it harder to see the difference between black and other dark colors. But if you look at the same gradient on a black background, the difference is more apparent.CIE Lab handles this, and I tried to handle it in Okhsl, too. So, gradients in Okhsl look better on a white background, but there will be other issues on a black background. Its always a compromise.And, FinallyPhilip: Final question: Whats your favorite color?Bjrn: I would have to say Burgundy. Burgundy, dark greens, and navy blues are favorites.Philip: Thank you for your time, Bjrn. I hope our readers have learned something, and Ill remind them of your excellent blog, where you go into more depth about Oklab and Okhsl.Bjrn: Thank you!

The leaves are shining in the most beautiful colors and pumpkins are taking over the front porches. Its time to welcome the spookiest of all months: October! To get your desktop ready for fall and the upcoming Halloween season, artists and designers from across the globe once again got their ideas flowing and designed inspiring wallpapers for you to indulge in.The wallpapers in this post come in versions with and without a calendar for October 2024 and can be downloaded for free. And since so many beautiful and unique designs evolve around our little wallpapers challenge every month (weve been running it for more than 13 years already, can you believe it?!), we also added some timeless October treasures from our wallpapers archives to the collection. Maybe youll spot one of your almost-forgotten favorites in here, too?A huge thank you to everyone who shared their wallpapers with us this month this post wouldnt exist without you. Happy October!You can click on every image to see a larger preview,We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit a wallpaper!Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent.Happy HalloweenDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Reptile Awareness DayLets celebrate reptiles and raise awareness of their vital role in ecosystems. Many species face threats, so lets learn, appreciate, and protect these incredible creatures and their habitats! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Make Today A Good DayMake today a good day is a simple yet powerful reminder to take control of the present moment. It emphasizes that our attitude and actions shape our experience, encouraging positivity and purpose. Each day brings new opportunities, and by choosing to make it good, we invite growth, joy, and fulfilment into our lives. Designed by Hitesh Puri from Delhi, India.previewwith calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The Dungeon MasterDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Happy DussehraI was inspired by Dussehras rich symbolism and cultural significance while creating this design. The festival celebrates the triumph of good over evil. The bow and arrow become the central focus, while the bold red background, golden accents, and the temples silhouette add a sense of grandeur and spirituality. Designed by Cronix from the United States.previewwith calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880without calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880The Crow And The GhostsIf my heart were a season, it would be autumn. Designed by Lvia Lnrt from Hungary.previewwithout calendar: 320x480, 1024x1024, 1280x1024, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160The Night DriveDesigned by Vlad Gerasimov from Georgia.previewwithout calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1440x900, 1440x960, 1400x1050, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880 Autumns SplendorThe transition to autumn brings forth a rich visual tapestry of warm colors and falling leaves, making it a natural choice for a wallpaper theme. Designed by Farhan Srambiyan from India.previewwithout calendar: 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440National Fossil DayJoin us in commemorating National Fossil Day, a day dedicated to honoring the wonders of Earths prehistoric past. On this special day, we invite you to step back in time and explore the remarkable world of fossils. These ancient remnants of life on our planet offer a glimpse into the evolution of life, from the tiniest microorganisms to the towering giants that once roamed the Earth. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Magical OctoberIm so glad I live in a world where there are Octobers. (L. M. Montgomery, Anne of Green Gables) Designed by Lvi Lnrt from Hungary.previewwithout calendar: 320x480, 640x480, 1024x768, 1024x1024, 1280x1024, 1400x1050, 1680x1200, 1920x1080, 1920x1200, 2560x1440Bird Migration PortalOctober is a significant month for me because it is when my favorite type of bird travels south. For that reason I have chosen to write about the swallow. When I was young, I had a birds nest not so far from my room window. I watched the birds almost every day; because those swallows always left their nests in October. As a child, I dreamt that they all flew together to a nicer place, where they were not so cold. Designed by Eline Claeys from Belgium.previewwithout calendar: 1280x1024, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440GhostbustersDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Spooky TownDesigned by Xenia Latii from Germany.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Hello AutumnDid you know that squirrels dont just eat nuts? They really like to eat fruit, too. Since apples are the seasonal fruit of October, I decided to combine both things into a beautiful image. Designed by Erin Troch from Belgium.previewwithout calendar: 320x480, 800x480, 1024x1024, 1280x800, 1366x768, 1600x1200, 1680x1050, 1680x1200, 1920x1440, 2560x1440HanluThe term Hanlu literally translates as Cold Dew. The cold dew brings brisk mornings and evenings. Eventually the briskness will turn cold, as winter is coming soon. And chrysanthemum is the iconic flower of Cold Dew. Designed by Hong, ZI-Qing from Taiwan.previewwithout calendar: 640x480, 800x600, 1024x768, 1080x1920, 1152x864, 1280x720, 1280x960, 1366x768, 1400x1050, 1600x1200, 1920x1080, 1920x1440, 2560x1440Discovering The UniverseAutumn is the best moment for discovering the universe. I am looking for a new galaxy or maybe a UFO! Designed by Vernica Valenzuela from Spain.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440King Of The PiratesDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Goddess MakoshAt the end of the kolodar, as everything begins to ripen, the village sets out to harvesting. Together with the farmers goes Makosh, the Goddess of fields and crops, ensuring a prosperous harvest. What she gave her life and health all year round is now mature and rich, thus, as a sign of gratitude, the girls bring her bread and wine. The beautiful game of the goddess makes the hard harvest easier, while the song of the farmer permeates the field. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Game Night And Hot ChocolateTo me, October is all about cozy evenings with hot chocolate, freshly baked cookies, and a game night with friends or family. Designed by Lieselot Geirnaert from Belgium.previewwithout calendar: 320x480, 1024x1024, 1280x1024, 2560x1440Strange October JourneyOctober makes the leaves fall to cover the land with lovely auburn colors and brings out all types of weird with them. Designed by Mi Ni Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Autumn DeerDesigned by Amy Hamilton from Canada.previewwithout calendar: 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 2048x1536, 2560x1440, 2880x1800Dope CodeOctober is the month when the weather in Poland starts to get colder, and it gets very rainy, too. You cant always spend your free time outside, so its the perfect opportunity to get some hot coffee and work on your next cool web project! Designed by Robert Brodziak from Poland.previewwithout calendar: 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440TransitionsTo me, October is a transitional month. We gradually slide from summer to autumn. Thats why I chose to use a lot of gradients. I also wanted to work with simple shapes, because I think of October as the back to nature/back to basics month. Designed by Jelle Denturck from Belgium.previewwithout calendar: 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Autumn In The ForestAutumn is a wonderful time to go for walks in the forest! Designed by Hilda Rytteke from Sweden.previewwithout calendar: 1280x800, 1280x1024, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440Shades Of GoldWe are about to experience the magical imagery of nature, with all the yellows, ochers, oranges, and reds coming our way this fall. With all the subtle sunrises and the burning sunsets before us, we feel so joyful that we are going to shout it out to the world from the top of the mountains. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Happy Fall!Fall is my favorite season! Designed by Thuy Truong from the United States.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1366x768, 1440x900, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440GhostoberDesigned by Ricardo Delgado from Mexico City.previewwithout calendar: 1024x768, 1024x1024, 1280x800, 1280x1024, 2560x1440First Scarf And The BeachWhen I was little, my parents always took me and my sister for a walk at the beach in Nieuwpoort. We didn't really do those beach walks in the summer but always when the sky started to turn gray and the days became colder. My sister and I always took out our warmest scarfs and played in the sand while my parents walked behind us. I really loved those Saturday or Sunday mornings where we were all together. I think October (when its not raining) is the perfect month to go to the beach for uitwaaien (to blow out), to walk in the wind and take a break and clear your head, relieve the stress or forget ones problems. Designed by Gwen Bogaert from Belgium.previewwithout calendar: 320x480, 1280x1024, 2560x1440, 2880x1800Turtles In SpaceFinished September, with October comes the month of routines. This year we share it with turtles that explore space. Designed by Veronica Valenzuela from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Roger That Rogue RoverThe story is a mash-up of retro science fiction and zombie infection. What would happen if a Mars rover came into contact with an unknown Martian material and got infected with a virus? What if it reversed its intended purpose of research and exploration? Instead choosing a life of chaos and evil. What if they all ran rogue on Mars? Would humans ever dare to voyage to the red planet? Designed by Frank Candamil from the United States.previewwithout calendar: 1024768, 10241024, 1280800, 16801050, 19201080, 19201200, 25601440Summer, Dont Go!It would be nice if we could bring summer back, wouldnt it? Designed by Terezija Katona from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2650x1440Embracing Autumns BeautyWe were inspired by the breathtaking beauty of autumn, with its colorful foliage and the symbolic pumpkin, which epitomizes the season. Incorporating typography allows us to blend aesthetics and functionality, making the calendar not only visually appealing but also useful. Designed by WPclerks from India.previewwithout calendar: 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440A Positive FallOctober is the month when fall truly begins, and many people feel tired and depressed in this season. The jumping fox wants you to be happy! Also, foxes always have reminded me of fall because of their beautiful fur colors. Designed by Elena Sanchez from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440

By definition, an interface is a layer between the user and a system, serving the purpose of communication between them. Interacting with the interface usually requires users to perform certain actions.Different actions can lead to various outcomes, some of which might be critical.While we often need to provide additional protection in case users attempt to perform dangerous or irreversible actions, Its good to remember that one of the ten usability heuristics called Error Prevention says:Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.What Is A Dangerous Action?Surprisingly, when we talk about dangerous actions, it doesnt necessarily mean that something is being deleted.Heres an example of a dangerous action from the banking application I use:The bank approved a loan for me, and as soon as I clicked Get Money, it meant that I had signed the necessary documents and accepted the loan. All I have to do is tap the yellow button, and Ill get the money.As a result of an accidental tap, you might end up taking a loan when you didnt intend to, which is why this action can be considered significant and dangerous.Therefore, a dangerous action does not necessarily mean deleting something.Some examples may include the following:Sending an email,Placing an order,Publishing a post,Making a bank transaction,Signing a legal document,Permanently blocking a user,Granting or revoking permissions.Ways To Confirm Dangerous ActionsThere are many methods to prevent users from losing their data or taking irreversible actions unintentionally. One approach is to ask users to explicitly confirm their actions.There are several ways to implement this, each with its own pros and cons.Modal DialogsFirst of all, we should understand the difference between modal and non-modal dialogs. Its better to think about modality state since dialogs, popups, alerts all of these might be presented either in the modal state or not. I will use the term dialogs as a general reference, but the keyword here is modality.Modality is a design technique that presents content in a separate, dedicated mode that prevents interaction with the parent view and requires an explicit action to dismiss. Apple design guidesModal dialogs require immediate user action. In other words, you cannot continue working with an application until you respond in some way. Non-modal dialogs, on the other hand, allow you to keep using the application without interruption. A common example of a non-modal element is a toast message that appears in the corner of the screen and does not require you to do anything to continue using the app.When used properly, modal dialogs are an effective way to prevent accidental clicks on dangerous actions.The main problem with them is that if they are used to confirm routine actions (such as marking a task as done), they can cause irritation and create a habit of mindlessly confirming them on autopilot.However, this is one of the most popular methods. Besides, it can be combined with other methods, so lets dive into it deeper.When To Use ThemUse modal dialogs when a user action will have serious consequences, especially if the result of the action is irreversible. Typical cases include deleting a post or project, confirming a transaction, and so on.It depends on what kind of action users want to take, but the main thing to keep in mind is how serious the consequences are and whether the action is reversible or not.Things To Keep In MindAvoid vague language.If you ask users, Are you sure? chances are, they will not have any doubts.In the title, specify what exactly will happen or which entity will be affected (e.g., project name, user name, amount of money).Provide an icon that indicates that the action is dangerous.It both increases the chances that users will not automatically confirm it and is good for accessibility reasons (people with color blindness will notice the icon even if it appears grey to them, signaling its importance).In the description, be specific and highlight the necessary information.The CTA button should also contain a word that reflects the action.Instead of Yes or Confirm, use more descriptive options like Delete, Pay $97, Make Transaction, Send Message, and so on including the entity name or amount of money in the button is also helpful. Compare: Confirm versus Pay $97. The latter is much more specific.However, this might not be enough.In some cases, you may require an extra action. A typical solution is to ask users to type something (e.g., a project name) to unblock the CTA button.Here are a few examples:ConvertKit asks users to type DO IT when removing subscribers.Pro tip: Note that they placed the buttons on the left side! This is a nice example of applying proximity law. It seems reasonable since the submit button is closer to the form (even if it consists of only one input).Resend asks users to type DELETE if they want to delete an API key, which could have very serious consequences. The API key might be used in many of your apps, and you dont want to break anything.This modal is one of the best examples of following the best practices:The title says what the action is (Delete API Key).In the text, they mentioned the name of the API Key in bold and in a different color (Onboarding).The red label that the action can not be undone makes it clearer that this is a serious action.Extra action is required (typing DELETE).The CTA button has both a color indicator (red usually is used for destructive actions) and a proper label Delete API Key. Not a general word, e.g., Confirm or Delete.Notice that Resend also places buttons on the left side, just as ConvertKit does.Note: While generally disabling submit buttons is considered bad practice, this is one of the cases where it is acceptable. The dialogs request is clear and straightforward both in ConvertKit and Resend examples.Moreover, we can even skip the submit button altogether. This applies to cases where users are asked to input an OTP, PIN, or 2FA code. For example, the bank app I use does not even have a log in button.On the one hand, we still ask users to perform an extra action (input the code). On the other hand, it eliminates the need for an additional click.Accessibility ConcernsThere is ongoing debate about whether or not to include a submit button when entering a simple OTP. By simple, I mean one that consists of 4-6 digits.While I am not an accessibility expert, I dont see any major downsides to omitting the submit button in straightforward cases like this.First, the OTP step is typically an intermediate part of the user flow, meaning a form with four inputs appears during some process. The first input is automatically focused, and users can navigate through them using the Tab key.The key point is that, due to the small amount of information required (four digits), it is generally acceptable to auto-submit the form as soon as the digits are entered, even if a mistake is made.On the one hand, if we care about accessibility, nothing stops us from providing users control over the inputs. On the other hand, auto-submission streamlines the process in most cases, and in the rare event of an error, the user can easily re-enter the digits.Danger ZonesFor the most critical actions, you may use the so-called Danger zone pattern.A common way to implement this is to either have a dedicated page or place the set of actions at the bottom of the settings/account page. It might contain one or more actions and is usually combined with other methods, e.g., a modal dialog. The more actions you have, the more likely youll need a dedicated page.When To Use ThemUse a Danger Zone to group actions that are irreversible or have a high potential for data loss or significant outcomes for users.These actions typically include things like account deletion, data wiping, or permission changes that could affect the users access or data.Things To Keep In MindUse colors like red, warning icons, or borders to visually differentiate the Danger Zone from the rest of the page.Each action in the Danger Zone should have a clear description of what will happen if the user proceeds so that users understand the potential consequences.Ask users for extra effort. Usually, the actions are irreversible and critical. In this case, you may ask users to repeat their password or use 2FA because if someone else gets access to the page, it will not be that easy to do the harmful action.Keep only truly critical actions there. Avoid making a danger zone for the sake of having one. Inline GuardsRecently, I discovered that some apps have started using inline confirmation. This means that when you click on a dangerous action, it changes its label and asks you to click again.This pattern is used by apps like Zapier and Typefully. While at first it seems convenient, it has sparked a lot of discussion and questions on X and Linkedin.Ive seen attempts to try to fix accidental double-clicking by changing the position of the inline confirmation label that appears after the first click.But this creates layout shifts. When users work with the app daily, it may cause more irritation than help.As an option, we can solve this issue by adding a tiny delay, e.g., 100-200ms, to prevent double-clicking.It also matters who your users are. Remember the good old days when we used to click a dozen times to launch Internet Explorer and ended up with dozens of open instances?If your target audience is likely to do this, apparently, the pattern will not work.However, for apps like Zapier or Typefully, my assumption is that the target audience might benefit from the pattern.Two-factor Authorization ConfirmationThis method involves sending a confirmation request, with or without some kind of verification code, to another place, such as:SMS,Email,Authenticator app on mobile,Push notifications (e.g., instead of sending SMS, you may choose to send push notifications),Messengers.Notice: Im not talking about authentication (namely, login process), but rather a confirmation action.An example that I personally face a lot is an app for sending cryptocurrency. Since this is a sensitive request, apart from submitting the requisition from a website, I should also approve it via email.When To Use ItIt can be used for such operations as money transfers, ownership transfers, and account deletion (even if you have a danger zone). Most of us use this method quite often when we pay online, and our banks send us OTP (one-time password or one-time code). It may go after the first initial protection method, e.g., a confirmation dialog.As you can see, the methods are often combined and used together. We should not consider each of them in isolation but rather in the context of the whole business process.PasskeysPasskeys are a modern, password-less authentication method designed to enhance both security and user experience.Passkeys are a replacement for passwords. A password is something that can be remembered and typed, and a passkey is a secret stored on ones devices, unlocked with biometrics. passkeys.devThere are a few pros of using passkeys over 2FA, both in terms of security and UX:Unlike 2FA, which typically requires entering a code from another device or app (e.g., SMS or authenticator apps), passkeys streamline the confirmation process. They dont require switching between devices or waiting for a code to arrive, providing immediate authentication.While 2FA provides extra protection, it is vulnerable to phishing, SIM-swapping, or interception. Passkeys are much more resistant to such attacks because they use public-private key cryptography. This means no secret code is ever sent over the network, making it phishing-resistant and not reliant on SMS or email, which can be compromised.Passkeys require less mental effort from users. Theres no need to remember a password or type a code just authenticate with a fingerprint, facial recognition, or device-specific PIN. This way, we reduce cognitive load.With passkeys, the authentication process is almost instant. Unlike 2FA, where users might have to wait for a code or switch to another device, passkeys give us the opportunity to confirm actions without switching context, e.g., opening your email inbox or copying OTP from a mobile device.The passkeys are widely supported and more and more companies adopt it.Second-person ConfirmationThis is a mechanism when two users are involved in the process. We may call them initiator and approver.In this case, the initiator makes a request to take some action while the approver decides whether to confirm it or not. In both roles, a confirmation dialog or other UI patterns may be used. However, the main idea is to separate responsibilities and decrease the probability of a bad decision.Actually, you have likely encountered this method many times before. For example, a developer submits a pull request, while a code reviewer decides whether to confirm it or decline.When To Use ItIt is best suited for situations when the seriousness of decisions requires few people involved. There is a direct analogy from real life. Take a look at the picture below:The Council of Physicians reminds us that in medicine, seeking a second opinion is crucial, as collaboration and diverse perspectives often result in more informed decisions and better patient care. This is a perfect example of when a second opinion or an approver is essential.Here, you will find some apps that use this method:GitHub, as previously mentioned, for merging pull requests.Jira and other similar apps. For example, when you move issues through a certain workflow stage, it may require manager approval.Banking applications. When you make a high-value transaction, it could be necessary to verify it for legal issues.Deel, which is a global hiring and payroll. One part (e.g., employer) draws up a contract and sends it to another part (e.g., freelancer), and the freelancer accepts it.But here is the thing: We can consider it a separate method or rather an approach for implementing business logic because even if another person confirms an action, it is still a dangerous action, with the only difference being that now its another person who should approve it. So, all of the examples mentioned above are not exactly a standalone specific way to protect users from making wrong decisions from the UI point of view. Its rather an approach that helps us to reduce the number of critical mistakes.Do We Actually Need To Ask Users?When you ask users to take action, you should be aware of its original purpose.The fact that users make actions does not mean that they make them consciously.There are many behavioral phenomena that come from psychology, to name a few:Cognitive inertia: The tendency of a person to stick to familiar decisions, even if they are not suitable for the current situation. For instance, the vast majority of people dont read user agreements. They simply agree with the lengthy text because its necessary from the legal point of view.Availability Heuristic: People often make decisions based on information that is easily accessible or familiar to them rather than making a mental effort. When users see the same confirmation popups, they might automatically accept them based on their previous successful experience. Of course, sooner or later, it might not work, and the acceptance of required action can lead to bad consequences.Cognitive Miser: The human mind is considered to be a cognitive miser due to the tendency of humans to think and solve problems in simpler and less effortful ways rather than in more sophisticated and effortful ways, regardless of intelligence. This explains why many users just click yes or agree without carefully reading the text.Quite a representative example is banner blindness, even though not related to confirmation but, in fact, revolves around the same human behavior idiosyncrasies.A reasonable question that may arise: What are the alternatives? Even though we cannot entirely affect users behavior, there are a few tactics we can use.DelayingIn some scenarios, we can artificially delay the task execution in a graceful way.One of my favorite examples is an app called Glovo, which is a food delivery app. Lets have a look at the three screens you will see when you order something.The first screen is a cart with items you chose to buy (and an annoying promotion of subscription that takes of the screen).After you tap the confirm order button, youll see the second screen, which asks you whether everything is correct. However, the information appears gradually with fade-in animation. Also, you can see there is a progress bar, which is a fake one.After a few seconds, youll see another screen that shows that the app is trying to charge your card; this time, its a real process. After the transaction proceeds, youll see the status of the order and approximate delivery time.Pro tip: When you show the status of the order and visually highlight or animate the first step, it makes users more confident that the order will be completed. Because of the trick that is called Goal-Gradient Effect.Youve just paid, and something starts happening (at least visually), which is a sign that Oh, they should have already started preparing my order. Thats nice!The purpose of the screen with a fake progress bar is to let users verify the order details and confirm them. But this is done in a very exquisite way:On the first screen, you click confirm order. It doesnt invoke any modals or popups, such as Are you sure?.On the second screen, users can see how information about their order appears right away, and the scroll bar at the bottom goes further. It seems like that app is doing something, but its an illusion. An illusion that makes you take another quick look at what youve just ordered.In the previous version of the app, you couldnt even skip the process; you could only cancel it. Now they added the Continue button, which is essentially Yes, Im sure confirmation.This means that we return back again to the drawbacks of classic confirmation modals since users can skip the process. But the approach is different: its a combination of a feedback loop from the app and skipping the process. This combination makes users pay attention to the address, order, and price at least sometimes, and it gives them time to cancel the order, while in the classic approach, the confirmation is yes or no? which is more likely to be confirmed right away.The Undo OptionThe undo pattern allows users to reverse an action they have just performed, providing a safety net that reduces anxiety around making mistakes. Unlike confirmation modals that interrupt the workflow to ask for user confirmation, the undo pattern provides a smoother experience by allowing actions to be completed with the option to reverse them if needed.When To Use ItIt works perfectly fine for non-destructive, reversible actions &mdashl actions that dont have significant and immediate consequences: Reversing actions when editing a document (The beloved ctrl + z shortcut);Removing a file (if it goes to the trash bin first);Changing the status of a task (e.g., if you accidentally marked a task completed);Deleting a message in a chat;Applying filters to a photo.Combined with a timer, you can extend the number of options since such tasks as sending an email or making a money transfer could be undone. When You Cannot Use ItIts not suitable for actions that have serious consequences, such as the following:Deleting an account;Submitting legal documents;Purchasing goods (refund is not the same as the undo option);Making requests for third-party APIs (in most cases).How To Implement Them?The most common way that most people use every day is to provide a shortcut (ctrl + z). However, its constrained to some cases, such as text editors, moving files between folders, and so on.Toasts are probably the most common way to implement these web and mobile apps. The only thing that you should keep in mind is that it should stand out enough to be noticed. Hiding them in a corner with a tiny message and color that is not noticeable might not work especially on wide screens.A straightforward solution is simply to have a button that does the undo option. Preferably close to the button that evokes the action that you want to undo.The undo option is tightly related to the concept called soft deleting, which is widely used in backend frameworks such as Laravel.The concept means that when users delete something via the UI, it looks like it has been deleted, but in the database, we keep the data but mark it as deleted. The data is not lost, which is why the undo option is possible since we dont actually delete anything but rather mark it as deleted.This is a good technique to ensure that data is never lost. However, not every table needs this.For example, if you delete an account and don't want users to restore it (perhaps due to legal regulations), then you should erase the data completely. But in many cases, it might be a good idea to consider soft deleting. In the worst case, youll be able to manually restore user data if it cannot be done via the UI for some reason.ConclusionTheres something I want everyone to keep in mind, regardless of who you are or what you do.Every situation is unique. A certain approach might work or fail for a variety of reasons. You might sometimes wonder why a specific decision was made, but you may not realize how many times the interface was revised based on real user feedback.User behavior is affected by many factors, including country, age, culture, education, familiarity with certain patterns, disabilities, and more.Whats crucial is to stay in control of your data and users and be prepared to respond when something goes wrong. Following best practices is important, but you must still verify if they work in your specific case.Just like in chess, there are many rules and even more exceptions.Further ReadingModality, AppleAn effective Cancel dialog confirmation on Web, Joo BexigaConfirm or undo? Which is the better option?, Josh WayneUnderstanding Soft Delete and Hard Delete, Suraj Singh BishtConfirmation Dialogs Can Prevent User Errors If Not Overused, Jakob NielsenMicrocopy for confirmation dialogues, Kinneret YifrahWhat is a passkey?, passkeys.io

Part of me cant believe Im writing this article. Applying the insights of Leonardo da Vinci or Saul Bass to web design is more my groove, but sometimes you simply have to write about spreadsheets. You have to advocate for them. Because someone should.In a checkered career spanning copywriting, journalism, engineering, and teaching, Ive seen time and time again how powerful and useful spreadsheets are in all walks of life. The cold, hard truth is that you yes, you likely have an enormous amount to gain by understanding how spreadsheets work. And, more importantly, how they can work for you.Thats what this piece is about. Its a rallying cry, with examples of spreadsheets myriad uses and how they can actually, in the right circumstances, be the bedrock of altogether inspiring, lovely things. Cellular OrganismsSpreadsheets have been around for thousands of years. Papyrus remnants have been discovered from as far back as 4,600 BC. Their going digital in the late 70s was a major factor in the rise of personal computing. Much is (rightly) made of the cultural transformation brought about by the printing press. The digital spreadsheet, not so much.For as long as people have had projects and data to organize, spreadsheets have been indispensable. They were the original databases.Spreadsheets dont always get a lot of attention these days. For organization and workflow, we usually find ourselves in the worlds of Trello, Jira, or GitHub Projects. Datasets live in Oracle, MongoDB, and the like. There are good reasons for these services emerging everything has its place butI do get the sense that specialized tooling causes us to skip over the flexibility and power that todays spreadsheet editors provide.This is especially true for smaller projects and ones in their early stages. Yes, sometimes only a huge database will do, but often spreadsheets are more than fit for purpose.BenefitsWhat makes spreadsheets so great? Well get into a few real-world examples in a second, but several qualities hold true. They include the following:CollaborationCloud-based editors like Google Sheets give groups of people a space in which to collaborate on data. They can serve as a middle ground for people working on different parts of the same project.StructureIts inherent to spreadsheets that theyll get you thinking about the shape of the information youre dealing with. In the same way that a blank piece of paper invites fluidity of thought, tables coax out frameworks and both have their place FlexibilitySpreadsheets can evolve in real time, which is especially useful during the formative stages of a project when the shape of the data is still being established. Adding a field is as simple as naming a column, and the ability to weave in formulas makes it easy to infer other values from the ones you have. With stuff like the Google Sheets API, you can even scrape data directly from the spreadsheetPowerYoud be surprised how much you can do in spreadsheets. Sometimes, you dont even need bespoke dashboards; you can do it all in the editor. From data visualization to pivot tables, spreadsheet editors come with a bunch of powerful out-of-the-box features.They translate into other data formatsSpreadsheets are one small jump from the mighty CSV. When the time is right, spreadsheets can still become raw data if you want them to.Such is the flexibility and power of spreadsheets, and whats listed here is scratching the surface. Their fundamental strength of organizing data has made them useful for thousands of years, while contemporary enhancements have taken them to the next level.Case StudiesBelow are a few examples from my own experiences that showcase these benefits in the real world. Theyre obviously slanted towards my interests, but hopefully, they illustrate the usefulness of spreadsheets in different contexts.Galaxies (Of The Guardian)I work as a software engineer at Guardian News & Media, a place where 10% of the time, i.e., one work day every two weeks, is yours to spend on independent learning, side projects, and so on, is part of the working culture. An ongoing project of mine has been Galaxies (of the Guardian), a D3-powered org chart that represents departments as a series of interrelated people, teams, and streams.What you see above is powered by information stored and edited in spreadsheets. A lambda scraps departmental information using the aforementioned Google Sheets API, then reformats into a shape Galaxies plays nicely with.This approach has had several benefits. The earliest iterations of Galaxies were only possible because there was already a spreadsheet being maintained by those who needed to keep track of who worked where. Techies and non-techies alike are able to update information easily, and it is transparent to anyone who works inside the organization.For anyone interested, I wrote a piece about how Galaxies works on the Guardian engineering blog. Suffice it to say here, spreadsheets were and remain the engine of the whole thing.Food Bank BritainMy background is in journalism, and I still freelance in my own time. As my coding skills have improved, Ive naturally gravitated towards data journalism, even teaching it for a year at my old journalism school. Spreadsheets are inseparable from a lot of modern journalism and, indeed, copyrighting in general. The digital world is awash with data, and good luck making sense of it without a working knowledge of spreadsheets. For example, a piece I wrote for the Byline Times about foodbanks earlier this year simply wouldnt have been possible without spreadsheets. It was by collating data from the Trussell Trust, the Independent Food Aid Network, and national census reports that I was able to map out the sheer scale of the UKs food bank network.Granted, the map is more visually engaging. But then thats the idea. Its the same information, just presented more pointedly.There are plenty of other instances of spreadsheets being instrumental at the Guardian alone. Typerighter, the newspapers automated house style checker, began life as a subeditors spreadsheet. User research and bug tracking for the new Feast cooking app, which I worked on during its formative stages, was tracked and discussed in spreadsheets. And, of course, countless pieces of quality journalism at the Guardian and beyond continue to be powered by them.Another Cell In The TableIf this piece has got you to at least consider learning more about spreadsheets and spreadsheet editors, youre in luck. There are countless free learning resources available on the web. Here are a few excellent beginner videos to help you on your way:Google Sheets Tutorial for Beginners How to use Pivot Tables in Google SheetsExcel Tutorial for BeginnersPivot Table Excel TutorialAs for spreadsheet editors, the big three these days are probably Google Sheets, Microsoft Excel, and LibreOffice Calc (for the open source devotees out there). They all work much the same way. And as you get comfortable with their functionality, new avenues will open.Data is the lifeblood of the modern web, and spreadsheets remain one of the most accessible, flexible ways to organize, analyze, and share it. As I hope the examples Ive shared with you show, spreadsheets arent inherently boring. They can be, but when used in the right ways, they become the engines of dynamic, impactful work.The way they go is up to you.

I place myself firmly in the category of being an introvert when it comes to my role as a UX researcher. I love the process of planning and executing research. I have never felt a need to be the loudest or most talkative person in a meeting. I contribute after I have developed something worth saying (or have a really bad joke worked up).I also love interviews and usability testing, where I interact with users and engage in meaningful conversation. And then I am exhausted. I love speaking about the findings of research and sharing the spotlight with my colleagues during a presentation, and then I want to go to bed underneath the conference room table. I facilitate workshops with ease but have trouble mustering up the energy required to attend what often feels like mandatory post-workshop socializing. In truth, I have sometimes felt introverted tendencies set me back at work, particularly as a consultant who needs to build relationships to keep the work flowing (in theory). An example would be getting called out by a manager in my junior days for not engaging in as many networking activities as I could have been with some of our clients. My defense of feeling overstimulated, overwhelmed, and uninterested in socializing fell on deaf ears.I think we have grown in our understanding of introverts and what they need to be high performers, particularly since Susan Cains 2013 best-selling book Quiet: The Power of Introverts in a World That Cant Stop Talking was released.This article aims to celebrate the power of introversion in UX research and design. Well debunk common misconceptions, explore the unique strengths introverted researchers and designers bring to the table, and offer practical tips for thriving in a field that sometimes seems tailored for extroverts. My goal is to build on some of the work on UX and introversion that already exists. Ive cited other articles where appropriate and shared the resources Ive found on UX and introversion at the end of this article. Introversion is not the same thing as being shy, just as extroversion isnt the same thing as being brash. For simplicity and the sake of this article, I am going to use the following definitions provided by de Jongh & de la Croix: Extroverts get energy from interaction with others and like to share ideas with others to help develop their thinking, whereas introverts need to recharge on their own after much social contact and prefer to share ideas only when they are fully formed.There are many potential reasons one could have introvert or extrovert tendencies (McCulloch 2020), and these come on a scale where one might lean or introvert or extrovert depending on the occasion. Those who straddle the middle ground of introversion and extroversion are considered ambiverts. As Jonathan Walter notes in a series of articles on introverts and UX, many UX professionals find themselves drawn to the field because of their introverted nature. Introversion, often misunderstood as shyness or social awkwardness, is simply a preference for internal reflection and processing. Its about drawing energy from solitude and finding fulfillment in deep thought and meaningful connections. As UX is clearly a space where introverts are drawn, there is already a decent amount of literature aimed at introverted UX practitioners. In writing this article, I wanted to differentiate from what is already out there, as well as extend.I wanted to include some personal stories of introverts who arent myself and work in UX. To do this, I went to LinkedIn and asked people to send me personal anecdotes. My post, at least by my standards, was well received, with over 100 reactions and a dozen people sending me direct messages sharing anecdotes. I was even introduced to Tim Yeo, who has recently released a book on introverts in the workplace. Ill be sharing some of the stories people shared with me over LinkedIn, where appropriate (and with their permission), throughout this article to help draw the connections to real life.First, lets talk a little about what we know about measuring if you (or others) are introverted, extroverted, or in between.Measuring Introversion & Extroversion: Self-Assessment ToolsUnderstanding where you and your team members fall on the introversion-extroversion spectrum can be invaluable for tailoring your approach to work, collaboration, and personal development. Reinoud de Jongh and Anne de la Croix, two medical school professors, write that medical educators should know where they fall on the introversion extroversion spectrum to deliver great teaching experiences. Id extend this to UX practitioners, including UX managers, UX researchers, and designers. If we collaborate with others, we will benefit from knowing where we fall on this scale.While theres no single definitive test, here are a few simple and accessible tools that can offer insights:Online Quizzes: Numerous online quizzes and assessments are available, often based on established personality frameworks like the Myers-Briggs Type Indicator (MBTI) or the Big Five personality traits. These quizzes can provide a general sense of your tendencies and preferences. Popular options include:16Personalities: Offers a free, comprehensive assessment based on the MBTI.Truity: Provides a variety of personality tests, including the Big Five and Enneagram.Verywell Mind: Offers a quiz specifically focused on introversion and extroversion.Reflection and Journaling: Take some time to reflect on your daily experiences and interactions. Ask yourself the following questions:What activities energize me vs. drain me?Do I prefer to work alone or in groups?How do I recharge after a long day?Do I prefer deep conversations with a few people or socializing with a larger group?Observation: Pay attention to your behavior and reactions in different social settings. Notice what triggers your stress response and what environments make you feel most comfortable and productive.Professional Assessment: If youre seeking a more in-depth analysis, consider consulting a career coach or psychologist who specializes in personality assessment. They can administer standardized tests and provide personalized feedback and guidance.Multidimensional Introversion-Extroversion Scales (MIES): This scale specifically focuses on the multifaceted nature of introversion and extroversion. It measures several sub-traits associated with each dimension, such as social engagement, assertiveness, enjoyment of social interaction, and preference for solitude. Professional psychologists often reference this test, which can be accessed freely here, but might be best done with the guidance of a professional.Theres no right or wrong answer when it comes to introversion or extroversion. You might even find some folks are ambiverts who display different personalities in different settings. You cant force your teammates to take these types of tests. But if you are able to get buy-in, it can be a fun activity to see who considers themselves more introverted or more extroverted. The goal is to understand your own preferences and tendencies and those of your colleagues so you can create a work environment that supports your well-being and maximizes your potential.Introverts Super PowersThe idea that UX is an extroverts game couldnt be further from the truth. As Jeremy Bird notes in his article on the strengths of introverts in design, its a field that demands a wide range of skills, including deep listening, empathy, observation, analysis, and creativity all of which introverts excel at. With so much information already available from articles on UX and introversion noted in the biography below, Im going to briefly highlight the commonly accepted strengths of introverts.Deep ListeningIntroverts are often exceptional listeners. In user interviews, they give participants the space to fully express their thoughts and feelings, picking up on subtle cues and nuances that others might miss. This active listening leads to a deeper understanding of user needs and motivations, which is crucial for both research and design.One practitioner shared their experience on LinkedIn:In a nutshell, being introverted gives a natural advantage in giving the user space to tell their story. Im more likely to embrace pauses that others may feel are awkward, but this allows users to either double down on their point or think of another point to add (lightbulb moment). Dominique S. Microsoft User Research via LinkedInEmpathyMany introverts possess a high degree of empathy. They can easily put themselves in users shoes, feeling their frustrations and celebrating their successes. This empathy fuels user-centered design, ensuring that products and services are not only functional but also emotionally resonant. Observational SkillsIntroverts are naturally observant. They notice details in user behavior, interface interactions, and environmental context that others might overlook. Thoughtful AnalysisIntroverts often prefer to process information internally, engaging in deep, solitary reflection before sharing their insights. This leads to well-considered and insightful findings and well-crafted data-informed design.Independent WorkIntroverts tend to thrive in independent work environments. As Heather McCulloch notes, teachers should allow introverted students to work independently or in pairs. This way, they can focus deeply on research tasks, design problems, or data analysis without the distractions that come with constant collaboration. Now that weve covered the commonly recognized strengths introverts bring to the table, lets cover some common hurdles and explore effective strategies for overcoming them that empower introverts to thrive.Potential Challenges (And How To Overcome Them)Being introverted can bring up some challenges when it comes to doing things that require a lot of social energy. However, many introverts in UX find ways to push beyond their natural tendencies to meet the demands of their profession. One UX practitioner shared their experience on LinkedIn:Ive been extremely introverted all my life, but have always been able to proceed beyond my introverted boundaries because of a commitment to (perceived) duty. My passion for synergizing user needs, business needs, and the assorted bevy of constraints that arise helps me downplay and overlook any challenges arising from my tendency to be withdrawn. Darren H. MS UXD via LinkedInNetworkingIntroverts might initially feel overwhelmed in networking situations or workshops due to the continual social interaction and the need to navigate unfamiliar environments and interact with new people, which can be particularly daunting for those who prefer solitude or small-group conversations.Researchers & Designers: Building professional relationships can be challenging for introverts. Large conferences or networking events can feel overwhelming. Small talk can feel forced and inauthentic.Solutions for researchers and designers:Focus on quality over quantity: Instead of trying to meet as many people as possible, focus on building a few meaningful connections.Utilize online communities: Connect with other UX professionals on platforms like LinkedIn or Twitter. Engage in discussions, share your insights, and build relationships virtually before meeting in person.Attend smaller events: Look for niche conferences or meetups focused on specific areas of interest. These tend to be more intimate and less overwhelming than large-scale events.Leverage existing relationships: Dont be afraid to ask a colleague or mentor to introduce you to someone new.Presenting Work and Public SpeakingIntroverts may initially avoid presenting because they tend to prefer avoiding the spotlight. They may also worry about being judged or scrutinized by others.Researchers: May feel anxious about presenting research findings to stakeholders, especially if they have to do so in front of a large audience.Designers: Can struggle with pitching design concepts or justifying their decisions to clients or colleagues, fearing criticism or pushback.For the introvert, you might not like this, but you need to get comfortable presenting, and the sooner you do, the better.Solutions for researchers and designers:Practice, practice, practiceThe more you rehearse your presentation or pitch, the more comfortable youll feel. Practice in front of a mirror, record yourself or ask a trusted friend for feedback.Use visual aidsSlides, mockups, or prototypes can help you illustrate your points and keep your audience engaged.Focus on clear communicationStructure your presentation logically, use simple language, and avoid jargon. Speak slowly and confidently, and make eye contact with your audience.Build confidence over timeStart with small presentations or informal feedback sessions. As you gain experience and positive feedback, your confidence will naturally increase. Ive personally found presenting in front of a large anonymous crowd to be less intimidating than smaller, intimate meetings where you might know a few people mixed in with a few strangers. In the end, I always remind myself I am supposed to be the expert on what Ive been asked to present or that my job is to clearly state the outcome of our research to stakeholders hungry to see the relevance of their work. The audience wants to support you and see you succeed. I take confidence in that. Im also exhausted after giving a presentation where Ive left it all on the floor.Now, lets move on to topics beyond what Ive found covered in existing articles on UX and introversion and cover workshop facilitation and managing group dynamics.Managing Group DynamicsIntroverts may find group dynamics challenging, as they often prefer solitary activities and may feel overwhelmed or drained by social interactions. In group settings, introverts may have difficulty asserting themselves, sharing their ideas, or actively participating in discussions. They may also feel uncomfortable being the center of attention or having to make decisions on the spot.Additionally, introverts may struggle to build relationships with their peers in a group setting, as they may be hesitant to initiate conversations or join in on group activities. These challenges can make it difficult for introverts to fully engage and contribute in group settings, leading to feelings of isolation and exclusion.One UX designer responding over LinkedIn eloquently shared their experience with communication challenges:Introversion can sometimes create challenges in communication, as my thoughtful nature can be misinterpreted as shyness or disinterest. To step out of my shell, I need to build trust with those around me before I can feel truly comfortable. However, I dont see this as the worst thing in the world. Instead, I view it as an opportunity to identify areas where I need to improve and learn to advocate for myself more effectively in the future. In embracing both the strengths and challenges of being an introvert, Ive found that my introverted nature not only enhances my work as a designer but also drives continuous personal and professional growth, ultimately leading to better outcomes for both myself and my team. Arafa A. via LinkedInChallenge: Large groups can be overwhelming, and introverted facilitators might find it difficult to assert control or manage dominant personalities who may derail the discussion.Solutions:Clear Ground Rules: Establish explicit ground rules at the beginning of the workshop to ensure respectful communication and equal participation.Assertive Communication: Practice techniques like broken record or fogging to politely but firmly redirect the conversation when necessary.Partner with a Co-Facilitator: Collaborate with an extroverted colleague who can complement your strengths. They can take the lead in managing group dynamics and energizing participants.Managing group dynamics covers a broad number of situations UX professionals face on a daily basis. Lets get a little more specific and focus on how introverted UXers can thrive as workshop facilitators.Facilitating WorkshopsIf youre an introverted UX professional who shies away from leading workshops, its time to reconsider. Here are some of the reasons introverts can be perfect workshop facilitators:Preparation:Introverts tend to be meticulous planners. We thrive on preparation and often go above and beyond to ensure a workshop is well-structured, organized, and aligned with learning objectives. This thoroughness translates to a smooth, well-paced session that instills confidence in participants.Thoughtful Facilitation:Introverts are known for their active listening skills. We genuinely want to hear what others have to say and create a safe space for diverse perspectives to emerge. We ask thoughtful questions, encourage reflection, and facilitate meaningful discussions that lead to deeper understanding.Empathy & Connection: Weve already discussed in the section on superpowers how introverts excel at empathy and connection.Observation Skills: Weve already discussed in the section on superpowers how introverts excel at observational skills.Comfort with Silence:Introverts understand the power of silence. Were not afraid to pause and allow reflection after asking a question or during a brainstorming session. This creates space for deeper thinking and prevents premature conclusions or groupthink.Weve reviewed many of the challenges introverts might face in their daily work life. Lets turn our attention to a more recent phenomenon, at least in terms of its widespread availability as an option for many UX professionals: remote work.Working RemotelyIncreased telecommuting offers a unique opportunity for some introverts. Introverts, who often find comfort in solitude and derive energy from spending time alone, sometimes find the constant socialization and bustle of open-plan offices overwhelming and draining.Remote work provides introverts with an opportunity to control their surroundings and create a workspace that promotes focus, productivity, and creativity. Remote work allows introverts to communicate and collaborate on their own terms. Introverts often prefer one-on-one interactions over large group meetings, and remote work makes it easier for them to engage in meaningful conversations with colleagues and clients. Potential Challenges For Introverts Working RemotelyWhile remote work has been a game-changer for many introverts, it is important to acknowledge that it is not without its challenges. Introverts may miss the camaraderie and social connections of an in-person workplace, and they may need to make a conscious effort to stay connected with colleagues and maintain a healthy work-life balance.Introverts working remotely may need to develop strategies for self-advocacy and communication to ensure that their voices are heard and their contributions are valued in a virtual work environment.Isolation and Disconnect: The lack of face-to-face interaction can lead to feelings of isolation and detachment from the team.Communication Barriers: Virtual communication can be less nuanced, making it harder to convey complex ideas or build rapport with colleagues.Meeting Overload: Excessive video calls can be exhausting for introverts, leading to burnout and decreased productivity.Limited Non-Verbal Cues: Virtual interactions lack the subtle body language and facial expressions that introverts rely on to understand others perspectives.Overcoming Challenges: Strategies For Introverts Working RemotelyIntroverted remote employees can implement some of these strategies and tactics to enhance their productivity, reduce burnout, and maintain a positive work environment:Proactive Communication: Initiate regular check-ins with colleagues and managers, both for work-related updates and casual conversations.Schedule Breaks: During long virtual meetings, take short breaks to recharge and refocus.Advocate for Your Needs: If youre feeling overwhelmed by meetings or social interactions, dont hesitate to speak up and suggest alternatives, such as asynchronous communication or smaller group discussions.Build Virtual Relationships: Participate in virtual social events, share personal anecdotes in team channels, and find opportunities to connect with colleagues on a personal level.Embrace Video Calls (Strategically): While video calls can be tiring, they can also be valuable for building rapport and understanding non-verbal cues. Use them strategically for important discussions or when you need to connect with a colleague on a deeper level.Implementing what weve covered in this section will help to reduce the likelihood of frustration from both remote working introverts and their colleagues.Tips For Introverted UX Researchers And DesignersWeve covered a lot of ideas in this article. If you find yourself nodding along as an introvert or perhaps coming to the realization you or someone on your team is more introverted, this section and the next will end this article on a high note, introducing some actionable tips for introverted researchers and designers, and their managers and teammates, to create a more comfortable and successful working environment for introverts to thrive alongside their extroverted colleagues.Self-CareEveryone needs to engage in an appropriate amount of self-care to feel their best. For an introvert, this is often done in solitude, particularly after engaging in a day or week full of social interaction. Some tips that could apply to anyone but are of particular relevance to introverts include the following:Schedule downtime: Block out time in your calendar for quiet reflection and recharging after meetings or social interactions. This could be a walk in nature, reading a book, or simply sitting in silence.Honor your energy levels: Pay attention to when youre feeling drained. Dont be afraid to decline invitations or reschedule meetings if you need time to recharge.Create a calming workspace: Surround yourself with things that promote relaxation and focus, such as plants, calming music, or inspiring artwork.Play To Your StrengthsIntroverts know themselves best and have spent a lifetime reflecting on who they are and what makes them wake up happy to go to work. As such, introverts may have a high awareness of their strengths. This allows an introvert to do the following:Identify your unique talents: Are you a meticulous researcher, a creative problem-solver, or a passionate user advocate? Focus on tasks and projects that align with your strengths.Communicate your preferences: Let your manager or team know what type of work you thrive in. Perhaps you prefer to work independently on research tasks or focus on the visual aspects of design.Build on your skills: Seek opportunities to develop your existing skills and acquire new ones. This could involve taking online courses, attending workshops, or seeking mentorship from experienced researchers and designers.CommunicationIntroverts might hesitate to speak up when the room is crowded with unknown future friends. However, anyone, introverted or not, needs to be their own best advocate when it comes to making colleagues and management aware of how to create the best workplace environment to thrive in:Advocate for your needs: Dont be afraid to speak up and ask for what you need to succeed. This could involve requesting a quiet workspace, suggesting alternative meeting formats, or simply letting your team know when you need some time to yourself.Develop your communication skills: Even though you may prefer written communication or one-on-one conversations, its important to be able to communicate effectively in various settings. Practice public speaking, participate in team discussions, and learn to articulate your ideas clearly and confidently.Its essential for introverts to advocate for their needs and communicate their preferred work styles to their colleagues and managers. One UX professional shared their experience on LinkedIn:I do my best work when I have time to think and prepare vs. on-demand thinking, speaking, & decision making. So, I ask for agendas, context, and pre-reads to help me make the most impact in meetings. When I shared this fact, it really helped my outgoing teammates, who never thought that others might operate differently than they do. I got feedback that this was a learning experience for them, and so I have continued to share this fact with new teammates to set expectations and advocate for myself since I find it to be an extrovert-centered business world. Anonymous UXer on LinkedInAnother LinkedIn UXer provided additional tactics for how they navigate communication styles and expectations, particularly in a fast-paced or extrovert-dominated environment.The longer I work with people in a creative capacity, the more I recognize the power of delay. Plenty of introverts are also high-achieving people pleasers (raises hand ). This has caused stress over the years when working with extroverts or verbal processors because there can be a perceived sense of urgency to every thought or ask.[slowing things down] can look like using certain phrases to help slow down the implied urgency to allow me to more thoughtfully process the ask:Ah, interesting! Could you say more about that?Can you clarify the why behind this for me? I want to make sure Ive got it right.How does this support our goals for < x project / user >?And if the ask comes through asynchronously via email or Slack, I ask myself the following:Was this sent during working hours?Am I the only one who can answer this question / address this issue?Can I provide a short response that lets the person know their message was seen and that its on my radar? Kait L. UXer via LinkedInGroup DynamicsIntroverts may not initially thrive when it comes to group dynamics. They might wish to observe the group before deeply engaging. They can find it difficult to assert themselves in a group setting and may feel overwhelmed by the constant need for social interaction.Additionally, introverts may find it harder to contribute to discussions or be slower to form meaningful connections with others in a group. The extroverted nature of group dynamics can be draining for introverts, and they may require more time to recharge after being in a group setting.Prepare in advance: Gather your thoughts, jot down key points, or even practice your delivery. This can help you feel more confident and articulate in group settings.Take breaks: If a meeting is dragging on, step out for a few minutes to recharge. A quick walk or a moment of solitude can do wonders for your energy levels.Seek one-on-one interactions: If youre struggling to be heard in a group, try scheduling separate meetings with key stakeholders to share your insights or design concepts in a more intimate setting.Utilize virtual collaboration tools: If in-person meetings are particularly draining, suggest using tools like Slack, Miro, or Figma for asynchronous collaboration and feedback.Introverts often find creative ways to navigate the challenges of large group settings. One UX researcher shared their experience on LinkedIn:I have a monthly meeting with many employees (50+) to go over survey results. I realized it was super awkward for me just to wait as people joined the meeting. I tried to make small talk about upcoming weekend plans or what people had done over the weekend, but engagement was still pretty low, and I was not equipped enough to carry on conversations. I decided to fill the time with memes. I would search for user research memes and tie them into why user research is important. More people started coming to my meetings just to see the meme! As time went on, I became known as the meme person. While I cant necessarily say if thats a good thing brand awareness is powerful! At least people know user research exists and that were fun even if it all started from being awkward and introverted. Anonymous LinkedIn UXerGuidance For Moving Up As An Introverted Researcher Or DesignerI turned to Tim Yeo to provide some insight into how introverts can best prepare for moving up the career ladder. Tim provided some tactical advice focusing on teamwork and people skills:Practice your people skills. If you, as an individual, could do it all on your own, you wouldve probably done it already. If you cant, then you need to work with people to bring your creation to life. It takes a team.Tim also shared the strategic reason behind the importance of leaders having excellent people skills:We also like to believe that higher management is always more sure, more right, and has all the answers. In my experience, the reality is almost the opposite. Problems get fuzzier, messier, and more complex the higher up the organization you go. Making decisions with incomplete, imperfect information is the norm. To operate successfully in this environment requires steering people to your worldview, and that takes people skills.You can find some additional information on ways for introverts (and extroverts) to gain people skills in some of the references listed at the end of this article.Lets move on and wrap up with some tips for those who are working alongside introverts.Tips For Managers And Colleagues of IntrovertsIf you are a manager of a team consisting of more than yourself, you likely have an introvert among your team. Tim Yeo states, Research from Susan Cains book, Quiet, shows that 1/3 to 1/2 of our population identify as quiet or introverted.Therefore,If you work in a diverse team, it follows that 1/3 to 1/2 of your team are quiet. So if you dont create a space for quiet ones to be heard, that means you are missing out on 1/3 to 1/2 of ideas.UX managers of teams, including introverts and extroverts, should engage in some of the following suggested practices to create an inclusive work environment where everyone feels valued, heard, and able to contribute effectively to the teams success. UX managers can use these tips to foster a diverse and productive team dynamic that drives innovation and creativity.FlexibilityOffer communication options: Not everyone thrives in the same communication environment. Provide alternatives to large meetings, such as email updates, one-on-one check-ins, or asynchronous communication tools like Slack.Embrace different work styles: Recognize that not everyone is most productive in a bustling office environment. Allow for flexible work arrangements, such as remote work or flexible hours, to accommodate different needs and preferences.Value DiversityRecognize the strengths of introverts: Introverts bring a unique perspective and valuable skills to the table. Encourage their contributions, celebrate their successes, and create an environment where they feel comfortable sharing their ideas.Foster inclusivity: Make sure everyone on the team feels heard and valued, regardless of their personality type. Encourage open communication, active listening, and mutual respect.Create Safe SpacesProvide quiet spaces: Designate areas in the office where people can go to work independently or simply decompress.Encourage breaks: Remind your team to take regular breaks throughout the day to recharge. This could involve stepping outside for fresh air, taking a short walk, or simply closing their eyes for a few minutes of meditation.Professional DevelopmentOffer tailored training: Provide opportunities for introverted researchers and designers to develop their communication and presentation skills in a supportive environment. This could involve workshops, coaching, or mentorship programs.As a bonus, if youre an introverted UX Manager and you are managing a team composed of introverts and extroverts, remember to encourage a variety of communication channels for your team members. You might default to your preferred style of communication but recognize that different team members may prefer different communication channels.Some extroverted team members might enjoy brainstorming in large meetings, and introverted team members might prefer to contribute their ideas through written channels such as email, chat, or discussion boards.Encouraging a variety of communication channels ensures that all team members feel comfortable sharing their thoughts and ideas.Tim Yeo provided this list of tactics for encouraging and engaging introverts in participating in discussion:Sharing the agenda before the meeting (so your quiet teammates, who are amazing preppers, by the way, can prepare and be ready to contribute).Using a mix of silent and think-out-loud activities in meetings (so people who process information differently can all perform).Give a heads-up before you call on a quiet colleague to speak.Offer to be a thinking partner (when your quiet colleague appears to be stuck on a piece of work).Now, lets move on to focus on some tips for managing remote workers.Recommendations For Managers And Teams Working RemotelyManagers and colleagues play a crucial role in creating a supportive and inclusive environment for introverted researchers and designers on dispersed teams. Here are some strategies to consider:Intentional CommunicationAsynchronous First: Prioritize asynchronous communication methods (email, project management tools, shared documents) for brainstorming, feedback, and routine updates. This gives introverts time to process information and craft thoughtful responses.One-on-One Check-Ins: Schedule regular one-on-one meetings with introverted team members to build rapport, discuss their concerns, and offer individualized support.Mindful Meeting Management: Be mindful of meeting frequency and duration. Consider alternatives to video calls when possible, such as shared documents or asynchronous communication channels. When video calls are necessary, ensure they have a clear agenda and purpose.Creating Virtual Water Cooler MomentsCasual Communication Channels: Set up dedicated IM channels or virtual spaces for non-work-related conversations, allowing for informal social interaction and team bonding.Virtual Social Events: Organize virtual coffee chats, game nights, or team-building activities to foster camaraderie and connection outside of work-related tasks.Collaborative Tools: Utilize virtual whiteboards or shared documents for brainstorming sessions, encouraging participation and idea generation from all team members.Cultivating Empathy and UnderstandingEducation and Awareness: Share articles or resources about introversion with the team to foster understanding and appreciation for different personality types.Open Dialogue: Encourage open conversations about communication styles and preferences, creating a safe space for everyone to express their needs.Celebrate Strengths: Highlight the unique contributions that introverted team members bring to the table, such as their deep listening skills, thoughtful analysis, and ability to advocate for users.Leadership SupportModel Inclusive Behavior: Managers should lead by example, demonstrating respect for different communication styles and creating opportunities for all team members to contribute.Provide Resources: Offer training or workshops on effective virtual communication and collaboration, tailoring them to the needs of introverted team members.Check-In Regularly: Regularly touch base with introverted team members to gauge their well-being, address any concerns, and offer support.Managers and teams can implement these strategies to create a work environment that values and empowers introverted researchers and designers, enabling them to thrive and make significant contributions to the teams success.ConclusionWe create a more inclusive and productive environment when we understand and appreciate the unique needs and preferences of introverts. Whether youre an introverted UXer navigating the challenges of remote work or a manager looking to foster a diverse and engaged team, the strategies and insights shared in this article can help you unlock the full potential of introverted talent.The superpower of introspection that comes with introversion has enabled me to reflect on my behaviours and engineer myself to become more of an omnivert able to adapt to different situations.Being self-aware and working hard to ladder up through increasingly more challenging experiences has taken me from an introvert who was too concerned to tweet to an active leader in the community, delivering seminars, speaking at an international conference and now running a mentorship program for hundreds of UX professionals across the globe. Chris C. UX Master Certified, via LinkedInIntroversion is not a weakness to be overcome but a valuable asset to be embraced. We build stronger teams, foster innovation, and ultimately deliver more meaningful and impactful user experiences when we create a culture that celebrates both introverted and extroverted strengths. The best solutions often emerge from a blend of diverse perspectives, including the quiet voices that deserve to be heard.In closing, Id like to use the words of Tim Yeo, who provides us with some inspiration and positive reinforcement of who we are as introverts:You are enough. The world may continue to favour the extrovert ideal, but pretending to be someone you are not will never feel right. Know that there is a different path to have impact at work where you dont have to pretend to be someone you are not. That path comes from tiny habits, done well, accumulated over time.[You can learn more about tiny habits in Tims book The Quiet Achiever]Biography And Additional ResourcesThe Quiet Achiever: Tiny habits to have impact at work (without pretending to be extroverts), Tim YeoHow To Design Better UX With Introverted Design, Pratik JoglekarWhy Introverts Make Exceptional Designers & How Leaders Can Support Them, Jeremy BirdEmbracing Introverted Strengths, Part 1, Jonathan WalterAn Introverts Guide To User Engagement In UX Research, Jess RQuiet: The Power of Introverts in a World That Cant Stop Talking, Susan CainIncorporating More Quiet Into The UX Design Process, Angela Craven and SueAnne HallUXPodcast on Introvert Designers12 Tips To Hear The Voices Of Introverts In Medical Education And To Improve The Learning Climate For Everyone, Reinoud De Jong & Anne de la CroixEmbracing Introverts in the Classroom: A Guide to Helping Students and Teachers Survive and Excel (PDF), Heather McCullochA wonderful and fairly easy-to-read in-depth review of introversion and extroversion, including a discussion of the differences in nervous system functioning between introverts and extroverts. I strongly recommend reading this and the citations McCulloch provides if you are interested in an academic view on this topic.

Even though I am the kind of front-end engineer who manually cleans up SVG files when they are a mess, I never expected to become one of those people. You know, those crazy people that draw with code.But here we are.I dove deep into SVG specs last winter when I created a project to draw Calligraphy Grids, and even though I knew the basic structures and rules of SVG, it was only then that I fully tried to figure out and understand what all of those numbers meant and how they interacted with each other.And, once you get the hang of it, it is actually very interesting and quite fun to code SVG by hand.No <path> aheadWe wont go into more complex SVG shapes like paths in this article, this is more about practical information for simple SVGs. When it comes to drawing curves, I still recommend using a tool like Illustrator or Affinity. However, if you are super into compounding your lines, a path is useful. Maybe well do that in Part 2.Also, this guide focuses mostly on practical examples that illustrate some of the math involved when drawing SVGs. There is a wonderful article here that goes a bit deeper into the specs, which I recommend reading if youre more interested in that: A Practical Guide To SVG And Design Tools.Drawing With Math. Remember Coordinate Systems?Illustrator, Affinity, and all other vector programs are basically just helping you draw on a coordinate system, and then those paths and shapes are stored in SVG files.If you open up these files in an editor, youll see that they are just a bunch of paths that contain lots of numbers, which are coordinates in that coordinate system that make up the lines.But, there is a difference between the all-powerful <path> and the other, more semantic elements like <rect>, <circle>, <line>, <ellipse>, <polygon>, and <polyline>.These elements are not that hard to read and write by hand, and they open up a lot of possibilities to add animation and other fun stuff. So, while most people might only think of SVGs as never-pixelated, infinitely scaling images, they can also be quite comprehensive pieces of code.How Does SVG Work? unit != unitBefore we get started on how SVG elements are drawn, lets talk about the ways units work in SVG because they might be a bit confusing when you first get started.The beauty of SVG is that its a vector format, which means that the units are somewhat detached from the browser and are instead just relative to the coordinate system youre working in.That means you would not use a unit within SVG but rather just use numbers and then define the size of the document youre working with.So, your width and height might be using CSS rem units, but in your viewBox, units become just a concept that helps you in establishing sizing relationships. What Is The viewBox?The viewBox works a little bit like the CSS aspect-ratio property. It helps you establish a relationship between the width and the height of your coordinate system and sets up the box youre working in. I tend to think of the viewBox as my document size.Any element that is placed within the SVG with bigger dimensions than the viewBox will not be visible. So, the viewBox is the cutout of the coordinate system were looking through. The width and height attributes are unnecessary if there is a viewBox attribute.So, in short, having an SVG with a viewBox makes it behave a lot like a regular image. And just like with images, its usually easiest to just set either a width or a height and let the other dimension be automatically sized based on the intrinsic aspect ratio dimensions.So, if we were to create a function that draws an SVG, we might store three separate variables and fill them in like this: `<svg width="${svgWidth}" viewBox="0 0 ${documentWidth} ${documentHeight}" xmlns="http://www.w3.org/2000/svg">`;SVG Things Of NoteThere is a lot to know about SVG: When you want to reuse an image a lot, you may want to turn it into a symbol that can then be referenced with a use tag, you can create sprites, and there are some best practices when using them for icons, and so on.Unfortunately, this is a bit out of the scope of this article. Here, were mainly focusing on designing SVG files and not on how we can optimize and use them.However, one thing of note that is easier to implement from the start is accessibility.SVGs can be used in an <img> tag, where alt tags are available, but then you lose the ability to interact with your SVG code, so inlining might be your preference.When inlining, its easiest to declare role="img" and then add a <title> tag with your image title.Note: You can check out this article for SVG and Accessibility recommendations.<svg role="img" [...attr]> <title>An accessible title</title> <!-- design code --></svg>Drawing SVG With JavaScriptThere is usually some mathematics involved when drawing SVGs. Its usually fairly simple arithmetic (except, you know, in case you draw calligraphy grids and then have to dig out trigonometry), but I think even for simple math, most people dont write their SVGs in pure HTML and thus would like to use algebra.At least for me, I find it much easier to understand SVG Code when giving meaning to numbers, so I always stick to JavaScript, and by giving my coordinates names, I like them immeasurable times more.So, for the upcoming examples, well look at the list of variables with the simple math and then JSX-style templates for interpolation, as that gives more legible syntax highlighting than string interpolations, and then each example will be available as a CodePen.To keep this Guide framework-agnostic, I wanted to quickly go over drawing SVG elements with just good old vanilla JavaScript.Well create a container element in HTML that we can put our SVG into and grab that element with JavaScript.<div data-svg-container></div><script src="template.js"></script>To make it simple, well draw a rectangle <rect> that covers the entire viewBox and uses a fill.Note: You can add all valid CSS values as fills, so a fixed color, or something like currentColor to access the sites text color or a CSS variable would work here if youre inlining your SVG and want it to interact with the page its placed in.Lets first start with our variable setup.// varsconst container = document.querySelector("[data-svg-container]");const svgWidth = "30rem"; // use any value with units hereconst documentWidth = 100;const documentHeight = 100;const rectWidth = documentWidth;const rectHeight = documentHeight;const rectFill = "currentColor"; // use any color value hereconst title = "A simple square box";Method 1: Create Element and Set AttributesThis method is easier to keep type-safe (if using TypeScript) uses proper SVG elements and attributes, and so on but it is less performant and may take a long time if you have many elements.const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");const titleElement = document.createElementNS("http://www.w3.org/2000/svg", "title");const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");svg.setAttribute("width", svgWidth);svg.setAttribute("viewBox", 0 0 ${documentWidth} ${documentHeight});svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");svg.setAttribute("role", "img");titleElement.textContent = title;rect.setAttribute("width", rectWidth);rect.setAttribute("height", rectHeight);rect.setAttribute("fill", rectFill);svg.appendChild(titleElement);svg.appendChild(rect);container.appendChild(svg);Here, you can see that with the same coordinates, a polyline wont draw the line between the blue and the red dot, while a polygon will. However, when applying a fill, they take the exact same information as if the shape was closed, which is the right side of the graphic, where the polyline makes it look like a piece of a circle is missing.This is the second time where we have dealt with quite a bit of repetition, and we can have a look at how we could leverage the power of JavaScript logic to render our template faster.But first, we need a basic implementation like weve done before. Were creating objects for the circles, and then were chaining the cx and cy values together to create the points attribute. Were also storing our transforms in variables.const polyDocWidth = 200;const polyDocHeight = 200;const circleOne = { cx: 25, cy: 80, r: 10, fill: "red" };const circleTwo = { cx: 40, cy: 20, r: 5, fill: "lime" };const circleThree = { cx: 70, cy: 60, r: 8, fill: "cyan" };const points = ${circleOne.cx},${circleOne.cy} ${circleTwo.cx},${circleTwo.cy} ${circleThree.cx},${circleThree.cy};const moveToTopRight = translate(${polyDocWidth / 2}, 0);const moveToBottomRight = translate(${polyDocWidth / 2}, ${polyDocHeight / 2});const moveToBottomLeft = translate(0, ${polyDocHeight / 2});And then, we apply the variables to the template, using either a polyline or polygon element and a fill attribute that is either set to none or a color value.<svg width={svgWidth} viewBox={`0 0 ${polyDocWidth} ${polyDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img"> <title>Composite shape comparison</title> <g> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polyline points={points} fill="none" stroke="black" /> </g> <g transform={moveToTopRight}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polyline points={points} fill="white" stroke="black" /> </g> <g transform={moveToBottomLeft}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polygon points={points} fill="none" stroke="black" /> </g> <g transform={moveToBottomRight}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polygon points={points} fill="white" stroke="black" /> </g></svg>And heres a version of it to play with:See the Pen SVG Polygon / Polyline (simple) [forked] by Myriam.Dealing With RepetitionWhen it comes to drawing SVGs, you may find that youll be repeating a lot of the same code over and over again. This is where JavaScript can come in handy, so lets look at the composite example again and see how we could optimize it so that there is less repetition.Observations:We have three circle elements, all following the same pattern.We create one repetition to change the fill style for the element.We repeat those two elements one more time, with either a polyline or a polygon.We have four different transforms (technically, no transform is a transform in this case).This tells us that we can create nested loops.Lets go back to just a vanilla implementation for this since the way loops are done is quite different across frameworks.You could make this more generic and write separate generator functions for each type of element, but this is just to give you an idea of what you could do in terms of logic. There are certainly still ways to optimize this.Ive opted to have arrays for each type of variation that we have and wrote a helper function that goes through the data and builds out an array of objects with all the necessary information for each group. In such a short array, it would certainly be a viable option to just have the data stored in one element, where the values are repeated, but were taking the DRY thing seriously in this one.The group array can then be looped over to build our SVG HTML.const container = document.querySelector("[data-svg-container]");const svgWidth = 200;const documentWidth = 200;const documentHeight = 200;const halfWidth = documentWidth / 2;const halfHeight = documentHeight / 2;const circles = [ { cx: 25, cy: 80, r: 10, fill: "red" }, { cx: 40, cy: 20, r: 5, fill: "lime" }, { cx: 70, cy: 60, r: 8, fill: "cyan" },];const points = circles.map(({ cx, cy }) => ${cx},${cy}).join(" ");const elements = ["polyline", "polygon"];const fillOptions = ["none", "white"];const transforms = [ undefined, translate(${halfWidth}, 0), translate(0, ${halfHeight}), translate(${halfWidth}, ${halfHeight}),];const makeGroupsDataObject = () => { let counter = 0; const g = []; elements.forEach((element) => { fillOptions.forEach((fill) => { const transform = transforms[counter++]; g.push({ element, fill, transform }); }); }); return g;};const groups = makeGroupsDataObject();// result:// [// {// element: "polyline",// fill: "none",// },// {// element: "polyline",// fill: "white",// transform: "translate(100, 0)",// },// {// element: "polygon",// fill: "none",// transform: "translate(0, 100)",// },// {// element: "polygon",// fill: "white",// transform: "translate(100, 100)",// }// ]const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");svg.setAttribute("width", svgWidth);svg.setAttribute("viewBox", 0 0 ${documentWidth} ${documentHeight});svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");svg.setAttribute("role", "img");svg.innerHTML = "<title>Composite shape comparison</title>";groups.forEach((groupData) => { const circlesHTML = circles .map((circle) => { return <circle cx="${circle.cx}" cy="${circle.cy}" r="${circle.r}" fill="${circle.fill}" />; }) .join(""); const polyElementHTML = <${groupData.element} points="${points}" fill="${groupData.fill}" stroke="black" />; const group = <g ${groupData.transform ?transform="${groupData.transform}": ""}> ${circlesHTML} ${polyElementHTML} </g>; svg.innerHTML += group;});container.appendChild(svg);And heres the Codepen of that:See the Pen SVG Polygon / Polyline (JS loop version) [forked] by Myriam.More Fun StuffNow, thats all the basics I wanted to cover, but there is so much more you can do with SVG. There is more you can do with transform; you can use a mask, you can use a marker, and so on.We dont have time to dive into all of them today, but since this started for me when making Calligraphy Grids, I wanted to show you the two most satisfying ones, which I, unfortunately, cant use in the generator since I wanted to be able to open my generated SVGs in Affinity and it doesnt support pattern.Okay, so pattern is part of the defs section within the SVG, which is where you can define reusable elements that you can then reference in your SVG.Graph Grid with patternIf you think about it, a graph is just a bunch of horizontal and vertical lines that repeat across the x- and y-axis.So, pattern can help us with that. We can create a <rect> and then reference a pattern in the fill attribute of the rect. The pattern then has its own width, height, and viewBox, which defines how the pattern is repeated.So, lets say we want to perfectly center our graph grid in any given width or height, and we want to be able to define the size of our resulting squares (cells).Once again, lets start with the JavaScipt variables:const graphDocWidth = 226;const graphDocHeight = 101;const cellSize = 5;const strokeWidth = 0.3;const strokeColor = "currentColor";const patternHeight = (cellSize / graphDocHeight) * 100;const patternWidth = (cellSize / graphDocWidth) * 100;const gridYStart = (graphDocHeight % cellSize) / 2;const gridXStart = (graphDocWidth % cellSize) / 2;Now, we can apply them to the SVG element:<svg width={svgWidth} viewBox={`0 0 ${graphDocWidth} ${graphDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img"> <defs> <pattern id="horizontal" viewBox={`0 0 ${graphDocWidth} ${strokeWidth}`} width="100%" height={`${patternHeight}%`} > <line x1="0" x2={graphDocWidth} y1={gridYStart} y2={gridYStart} stroke={strokeColor} stroke-width={strokeWidth} /> </pattern> <pattern id="vertical" viewBox={`0 0 ${strokeWidth} ${graphDocHeight}`} width={`${patternWidth}%`} height="100%" > <line y1={0} y2={graphDocHeight} x1={gridXStart} x2={gridXStart} stroke={strokeColor} stroke-width={strokeWidth} /> </pattern> </defs> <title>A graph grid</title> <rect width={graphDocWidth} height={graphDocHeight} fill="url(#horizontal)" /> <rect width={graphDocWidth} height={graphDocHeight} fill="url(#vertical)" /></svg>And this is what that then looks like:See the Pen SVG Graph Grid [forked] by Myriam.Dot Grid With patternIf we wanted to draw a dot grid instead, we could simply repeat a circle. Or, we could alternatively use a line with a stroke-dasharray and stroke-dashoffset to create a dashed line. And wed only need one line in this case.Starting with our JavaScript variables:const dotDocWidth = 219;const dotDocHeight = 100;const cellSize = 4;const strokeColor = "black";const gridYStart = (dotDocHeight % cellSize) / 2;const gridXStart = (dotDocWidth % cellSize) / 2;const dotSize = 0.5;const patternHeight = (cellSize / dotDocHeight) * 100;And then adding them to the SVG element:<svg width={svgWidth} viewBox={`0 0 ${dotDocWidth} ${dotDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img"> <defs> <pattern id="horizontal-dotted-line" viewBox={`0 0 ${dotDocWidth} ${dotSize}`} width="100%" height={`${patternHeight}%`} > <line x1={gridXStart} y1={gridYStart} x2={dotDocWidth} y2={gridYStart} stroke={strokeColor} stroke-width={dotSize} stroke-dasharray={`0,${cellSize}`} stroke-linecap="round" ></line> </pattern> </defs> <title>A Dot Grid</title> <rect x="0" y="0" width={dotDocWidth} height={dotDocHeight} fill="url(#horizontal-dotted-line)" ></rect></svg>And this is what that looks like:See the Pen SVG Dot Grid [forked] by Myriam.ConclusionThis brings us to the end of our little introductory journey into SVG. As you can see, coding SVG by hand is not as scary as it seems. If you break it down into the basic elements, it becomes quite like any other coding task:We analyze the problem,Break it down into smaller parts,Examine each coordinate and its mathematical breakdown,And then put it all together.I hope that this article has given you a starting point into the wonderful world of coded images and that it gives you the motivation to delve deeper into the specs and try drawing some yourself.

This article is a sponsored by SVGatorSVGator has gone through a series of updates since our last article, which was published in 2021, when it was already considered to be the most advanced web-based tool for vector animation. The first step toward more versatile software came with the mobile export feature that made it possible to implement the animations in iOS and Android applications.The animation tool continued its upgrade with a series of new export options: video formats including MP4, AVI, MKV, MOV, and WebM, as well as image formats such as GIF, Animated PNG, WebP, and image sequence. By covering a larger area of users needs, the app now enables anyone to create animated stickers, social media, and newsletter animations, video assets, and many more types of visual content on demand.The goal of becoming a one tool for all still lacked the last piece of the puzzle, namely full support for Lottie files. Lottie, just like SVG, is a vector-based format, but it has even better comprehensive multi-platform support, a fact that makes it super popular among developers and design professionals. It is built for use across various platforms, enabling smooth integration into both web and mobile applications. Its file size is minimal, it is infinitely scalable, and developers find it straightforward to implement once they get familiar with the format. Lottie can incorporate raster graphics and also supports interactivity.SVGators latest version has everything you need for your various applications without the need for any third-party apps or plug-ins.Note: You can test all of SVGators functionalities free of charge before committing to the Pro plan. However, you can export up to three watermarked files, with videos and GIFs limited to basic quality.In this article, we will follow a creation process made of these steps:Importing an existent Lottie JSON and making some minor adjustments;Importing new animated assets created with SVGator (using the library);Creating and animating new elements from scratch;Exporting the Lottie animation.Getting Started With SVGatorThe sign-up process is simple, fast, and straightforward, and no credit card is required. Sign up either with Google or Facebook or, alternatively, by providing your name, email address, and password. Start a project either with a Lottie animation or a static SVG. If you dont have an existing file, you can design and animate everything starting from a blank canvas.Now that youve created your account, lets dive right into the fun part. Heres a preview of how your animation is going to look by the time youre done following this guide. Neat, right?(Large preview)Create A New ProjectAfter logging in and clicking on the New Project option, you will be taken to the New Project Panel, where you can choose between starting from a blank project or uploading a file. Lets start this project with an existing Lottie JSON.Download the Lottie demo Click on the Upload file button and navigate to the directory where you have saved your Lottie file. Select the Fast response.json file and click Open. Hit play in the editor, and the animation should look like this:(Large preview) Note: Make sure to hit Save after each step to make sure you dont lose any of your progress while working on this project alongside our guide.Import An Animated AssetIn this step, you will learn how to use the Library to import new assets to your project. You can easily choose from a variety of ready-made SVGs stored in different categories, load new files from your computer (Lottie, static SVG, and images), or save animations from other SVGator projects and reuse them.In this case, lets use an animated message bubble previously created and saved to the Uploads section of the Library.Learn how to create and save animated assets with this short video tutorial.Download the message bubble Lottie animation Navigate to the left sidebar of the app and switch to the Library tab, then click the + icon to upload the message bubble asset that you downloaded earlier. After it is loaded in the uploads section, simply click on it to add it to your project.All the animated properties of the asset are now present in the timeline, and you can edit them if you want. Note: Make sure the playhead is at the second 0 before adding the animated asset. When adding an animated asset, it will always start animating from the point where the playhead is placed. Freely adjust its position and size as you wish. With the playhead at the second 0, click on the Animate button, then choose Position.At this point, you should have the first Position keyframe automatically added at the second 0, and you are ready to start animating. Animate The Message Bubble Start by dragging the playhead on the timeline at 0.2 seconds: Then, drag the message bubble up a few pixels. The second keyframe will appear in the timeline, marking the elements new position, thus creating the 2 milliseconds animation.Note: You can hit Play at any moment to check how everything looks!Next, you can use the Scale animator to make the bubble disappear after the dots representing the typing are done animating by scaling it down to 0 for both the X and Y axes: With the message bubble still selected, drag the playhead at 2.2 seconds, click on Animate, and select Scale (or just press Shift + S on the keyboard) to set the first Scale keyframe, then drag the playhead at 2.5 seconds. Set the scale properties to 0 for both the X and Y axes (in the right side panel). The bubble wont be visible anymore at this point.Note: To maintain the ratio while changing the scale values, make sure you have the Maintain proportions on (the link icon next to the scale inputs).To add an extra touch of interest to this scaling motion, add an easing function preset: First, jump back to the first Scale keyframe (you can also double-click the keyframe to jump the playhead right at it). Open the Easing Panel next to the time indicator and scroll down through the presets list, then select Ease in Back. Due to its bezier going out of the graph, this easing function will create a bounce-back effect for the scale animation.Note: You can adjust the bezier of a selected easing preset and create a new custom function, which will appear at the top of the list.Keep in mind that you need at least one keyframe selected if you intend to apply an easing. The easing function will apply from the selected keyframe toward the next keyframe at its right. Of course, you can apply a certain easing for multiple keyframes at once.To get a smoother transition when the message bubble disappears, add an Opacity animation of one millisecond at the end of the scaling: Choose Opacity from the animators list and set the first keyframe at 2.4 seconds, then drag the playhead at 2.5 seconds to match the ending keyframe from the scale animation above. From the Appearance panel, drag the Opacity slider all the way to the left, at 0%.Create An Email IconFor the concept behind this animation to be complete, lets create (and later animate) a new email notification as a response to the character sending that message.Once again, SVGators asset library comes in handy for this step: Go to the search bar from the Library and type in mail, then click on the mail asset from the results. Place it somewhere above the laptop. Edit the mail icon to better fit the style of the animation: Open the email group and select the rectangle from the back. Change its fill color to a dark purple. Round up the corners using the Radius slider. Make the elements design minimal by deleting these two lines from the lower part of the envelope. Select the envelope seal flap, which is the Polyline element in the group, above the rectangle. Add a lighter purple for the fill, set the stroke to 2 px width, and also make it white.To make the animation even more interesting, create a notification alert in the top-right corner of the envelope: Use the Ellipse tool (O) from the toolbar on top and draw a circle in the top-right corner of the envelope. Choose a nice red color for the fill, and set the stroke to white with a 2 px width. Click on the T icon to select the Text tool. Click on the circle and type 1. Set the color to white and click on the B icon to make it bold. Select both the red circle and the number, and group them: right-click, and hit Group. You can also hit Command or Ctrl + G on your keyboard. Double-click on the newly created group to rename it to Notification.Select both the notification group and email group below and create a new group, which you can name new email.Animate The New Email GroupLets animate the new email popping out of the laptop right after the character has finished texting his message: With the New email group selected, click twice on the Move down icon from the header to place the group last.You can also press Command or Ctrl + arrow down on your keyboard.Drag the group behind the laptop (on the canvas) to hide it entirely, and also scale it down a little.With the playhead at 3 seconds, add the animators Scale and Position.You can also do that by pressing Shift + S and Shift + P on your keyboard.Drag the playhead at the second 3.3 on the timeline.Move the New Email group above the laptop and scale it up a bit.You can also bend the motion path line to create a curved trajectory for the position animation.Select the first keyframes at the second 3.Open the easing panel.And click on the Ease Out Cubic preset to add it to both keyframes.Animate The NotificationLets animate the notification dot separately. Well make it pop in while the email group shows up. Select the Notification group.Create a scale-up animation for it with 0 for both the X and Y axes at 3.2 and 1 at 3.5 seconds.Select the first keyframe and, from the easing panel, choose Ease Out Back. This easing function will ensure the popping effect.Add Expressiveness To The CharacterMake the character smile while looking at the email that just popped out. For this, you need to animate the stroke offset of the mouth: Select the mouth path. You can use the Node tool to select it directly with one click. Drag the playhead at 3.5 seconds, which is the moment from where the smile will start. Select the last keyframe of the Stroke offset animator from the timeline and duplicate it at second 3.5, or you can also use Ctrl or Cmd + D for duplication.Drag the playhead at second 3.9.Go to the properties panel and set the Offset to 0. The stroke will now fill the path all the way, creating a stroke offset animation of 4 milliseconds.Final EditsYou can still make all kinds of adjustments to your animation before exporting it. In this case, lets change the color of the initial Lottie animation we used to start this project:Use the Node tool to select all the green paths that form the characters arms and torso.Change the color as you desire.Export LottieOnce youre done editing, you can export the animation by clicking on the top right Export button and selecting the Lottie format. Alternatively, you can press Command or Ctrl + E on your keyboard to jump directly to the export panel, from where you can still select the animation you want to export.Make sure the Lottie format is selected from the dropdown. In the export panel, you can set a name for the file you are about to export, choose the frame rate and animation speed, or set a background color.You can preview the Lottie animation with a Lottie player.Note: This step is recommended to make sure all animations are supported in the Lottie format by previewing it on a webpage using the Lottie player. The preview in the export panel isnt an actual Lottie animation.Get back to the export panel and simply click Export to download the Lottie JSON.Final ThoughtsNow that youre done with your animation dont forget that you have plenty of export options available besides Lottie. You can post the same project on social media in video format, export it as an SVG animation for the web, or turn it into a GIF sticker or any other type of visual you can think of. GIF animations can also be used in Figma presentations and prototypes as a high-fidelity preview of the production-ready Lottie file.We hope you enjoyed this article and that it will inspire you to create amazing Lottie animations in your next project. Below, you can find a few useful resources to continue your journey with SVG and SVGator:SVGator tutorialsCheck out a series of short video tutorials to help you get started with SVGator.SVGator Help CenterIt answers the most common questions about SVGator, its features, and membership plans.

This article is a sponsored by LuzmoIn this article, Ill introduce you to Luzmo Flex, a new feature from the Luzmo team who have been working hard making developer tooling to flatten the on-ramp for analytics reporting and data visualization. With Luzmo Flex, you can hook up a dataset and create beautifully crafted, fully customizable interactive charts that meet your reporting needs. They easily integrate and interact with other components of your web app, allowing you to move away from a traditional dashboard interface and build more bespoke data products. While many charting libraries offer similar features, I often found it challenging to get the data into the right shape that the library needed. In this article, Ill show you how you can build beautiful data visualizations using the Google Analytics API, and you wont have to spend any time massaging the data! What Is Luzmo Flex?Well, its two things, really. First of all, Luzmo is a low-code platform for embedded analytics. You can create datasets from just about anything, connect them to APIs like Google Analytics or your PostgreSQL database, or even upload static data in a .csv file and start creating data visualizations with drag and drop.Secondly, Luzmo Flex is their new React component that can be configured to create custom data visualizations. Everything from the way you query your data to the way you display it can be achieved through code using the LuzmoVizItemComponent.What makes Luzmo Flex unique is that you can reuse the core functionalities of Luzmos low-code embedded analytics platform in your custom-coded components.That means, besides creating ready-to-use datasets, you can set up functions like the following out-of-the-box:Multi-tenant analytics: Showing different data or visualizations to different users of your app.Localization: Displaying charts in multiple languages, currencies, and timezones without much custom development.Interactivity: Set up event listeners to create complex interactivity between Luzmos viz items and any non-Luzmo components in your app.What Can You Build With Luzmo Flex?By combining these off-the-shelf functions with flexibility through code, Luzmo Flex makes a great solution for building bespoke data products that go beyond the limits of a traditional dashboard interface. Below are a few examples of what that could look like.Report BuilderA custom report builder that lets users search and filter a dataset and render it out using a number of different charts.Filter PanelEnable powerful filtering using HTML Select inputs, which will update each chart shown on the page.Wearables DashboardOr how about a sleep tracker hooked up to your phone to track all those important snoozes?When to Consider Luzmo Flex vs Chart LibrariesWhen building data-intensive applications, using something like Recharts, a well-known React charting library, youll likely need to reformat the data to fit the required shape. For instance, if I request the top 3 page views from the last seven days for my site, paulie.dev, I would have to use the Google Analytics API using the following query.import dotenv from 'dotenv';import { BetaAnalyticsDataClient } from '@google-analytics/data';dotenv.config();const credentials = JSON.parse( Buffer.from(process.env.GOOGLE_APPLICATION_CREDENTIALS_BASE64, 'base64').toString('utf-8'));const analyticsDataClient = new BetaAnalyticsDataClient({ credentials,});const [{ rows }] = await analyticsDataClient.runReport({ property: properties/${process.env.GA4_PROPERTY_ID}, dateRanges: [ { startDate: '7daysAgo', endDate: 'today', }, ], dimensions: [ { name: 'fullPageUrl', }, { name: 'pageTitle', }, ], metrics: [ { name: 'totalUsers', }, ], limit: 3, metricAggregations: ['MAXIMUM'],});The response would look something like this:[ { "dimensionValues": [ { "value": "www.paulie.dev/", "oneValue": "value" }, { "value": "Paul Scanlon | Home", "oneValue": "value" } ], "metricValues": [ { "value": "61", "oneValue": "value" } ] }, { "dimensionValues": [ { "value": "www.paulie.dev/posts/2023/11/a-set-of-sign-in-with-google-buttons-made-with-tailwind/", "oneValue": "value" }, { "value": "Paul Scanlon | A set of: \"Sign In With Google\" Buttons Made With Tailwind", "oneValue": "value" } ], "metricValues": [ { "value": "41", "oneValue": "value" } ] }, { "dimensionValues": [ { "value": "www.paulie.dev/posts/2023/10/what-is-a-proxy-redirect/", "oneValue": "value" }, { "value": "Paul Scanlon | What Is a Proxy Redirect?", "oneValue": "value" } ], "metricValues": [ { "value": "23", "oneValue": "value" } ] }]To make that data work with Recharts, Id need to reformat it so it conforms to the following data shape. [ { "name": "Paul Scanlon | Home", "value": 61 }, { "name": "Paul Scanlon | A set of: \"Sign In With Google\" Buttons Made With Tailwind", "value": 41 }, { "name": "Paul Scanlon | What Is a Proxy Redirect?", "value": 23 }]To accomplish this, Id need to use an Array.prototype.map() to iterate over each item, destructure the relevant data and return a key-value pair for the name and value for each.const data = response.rows.map((row) => { const { dimensionValues, metricValues } = row; const pageTitle = dimensionValues[1].value; const totalUsers = parseInt(metricValues[0].value); return { name: pageTitle, value: totalUsers, };});And naturally, if youre reformatting data this way in your application, youd also want to write unit tests to ensure the data is always formatted correctly to avoid breaking your application and all of this before you even get on to creating your charts! With Luzmo Flex, all of this goes away, leaving you more time to focus on which data to display and how best to display it. The First Steps to Building Bespoke Data ProductsTypically, when building user interfaces that display data insights, your first job will be to figure out how to query the data source. This can take many forms, from RESTful API requests to direct database queries or sometimes reading from static files. Your next job will be figuring out when and how often these requests need to occur.For data that rarely changes: Perhaps a query in the build step will work.For data that changes regularly: A server-side request on page load.For ever-changing data: A client-side request that polls an API on an interval.Each will likely inform your applications architecture, and theres no single solution to this. Your last job, as mentioned, will be wrangling the responses, reformatting the data, and displaying it in the UI.Below, Ill show you how to do this using Luzmo Flex by using a simple example product.What Were Building: Custom Data Visualizations As CodeHeres a screenshot of a simple data product Ive built that displays three different charts for different reporting dimensions exposed by the Google Analytics API for page views for my site, paulie.dev, from the last seven days. You can find all the code used in this article on the following link:https://github.com/luzmo-official/luzmo-flex-tutorialGetting Started With LuzmoBefore we get going, hop over to Luzmo and sign up for a free trial. You might also like to have a read of one of the getting started guides listed below. In this article, Ill be using the Next.js starter. Getting started with Luzmo Data Visualization and Next.jshttps://github.com/luzmo-official/luzmo-getting-started-next-jsGetting started with Luzmo Data Visualization and Astrohttps://github.com/luzmo-official/luzmo-getting-started-astroCreating a Google Analytics DatasetTo create data visualization, youll first need data! To achieve this using Luzmo, head over to the dashboard, select Datasets from the navigation, and select GA4 Google Analytics. Follow the steps shown in the UI to connect Luzmo with your Google Analytics account.With the setup complete, you can now select which reporting dimensions to add to your dataset. To follow along with this article, select Custom selection.Lastly, select the following using the search input. Device Category, Page Title, Date, and Total users, then click Import when youre ready. You now have all the data required to build the Google Analytics dashboard. You can access the dataset ID from the URL address bar in your browser. Youll need this in a later step.If youve followed along from either of the first two getting started guides, youll have your API Key, API Token, App server, and API host environment variables set up and saved in a .env file. Install DependenciesIf youve cloned one of the starter repositories, run the following to install the required dependencies. npm installNext, install the Luzmo React Embed dependency which exports the LuzmoVizItemComponent.npm install @luzmo/react-embed@latestNow, find page.tsx located in the src/app directory, and add your dataset id as shown below. Add the access object from the destructured response and pass access.datasets[0].id onto the LuzmoClientComponent component using a prop named datasetId.// src/app/page.tsx+ import dynamic from 'next/dynamic';import Luzmo from '@luzmo/nodejs-sdk';- import LuzmoClientComponent from './components/luzmo-client-component';+ const LuzmoClientComponent = dynamic(() => import('./components/luzmo-client-component'), { ssr: false,});const client = new Luzmo({ api_key: process.env.LUZMO_API_KEY!, api_token: process.env.LUZMO_API_TOKEN!, host: process.env.NEXT_PUBLIC_LUZMO_API_HOST!,});export default async function Home() { const response = await client.create('authorization', { type: 'embed', username: 'user id', name: 'first name last name', email: 'name@email.com', access: { datasets: [ {- id: '<dataset_id>',+ id: '42b43db3-24b2-45e7-98c5-3fcdef20b1a3', rights: 'use', }, ], }, });- const { id, token } = response;+ const { id, token, access } = response;- return <LuzmoClientComponent authKey={id} authToken={token} />;+ return <LuzmoClientComponent authKey={id} authToken={token} datasetId={access.datasets[0].id} />;}And lastly, find luzmo-client-component.tsx located in src/app/components. This is where youll be creating your charts.Building a Donut ChartThe first chart youll create is a Donut chart that shows the various devices used by visitors to your site.Add the following code to luzmo-client-component.tsx component. // src/app/component/luzmo-client-component.tsx'use client';+ import { LuzmoVizItemComponent } from '@luzmo/react-embed';interface Props { authKey: string; authToken: string;+ datasetId: string;}- export default function LuzmoClientComponent({ authKey, authToken}: Props) {+ export default function LuzmoClientComponent({ authKey, authToken, datasetId }: Props) {+ const date = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toISOString(); // creates a date 7 days ago console.log({ authKey, authToken }); return ( <section>+ <div className='w-1/2 h-80'>+ <LuzmoVizItemComponent+ appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER}+ apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST}+ authKey={authKey}+ authToken={authToken}+ type='donut-chart'+ options={{+ title: {+ en: Devices from last 7 days,+ },+ display: {+ title: true,+ },+ mode: 'donut',+ legend: {+ position: 'bottom',+ },+ }}+ slots={[+ {+ name: 'measure',+ content: [+ {+ label: {+ en: 'Total users',+ },+ column: '<column id>', // Total users+ set: datasetId,+ type: 'numeric',+ format: '.4f',+ },+ ],+ },+ {+ name: 'category',+ content: [+ {+ label: {+ en: 'Device category',+ },+ column: '<column id>', // Device category+ set: datasetId,+ type: 'hierarchy',+ },+ ],+ },+ ]}+ filters={[+ {+ condition: 'or',+ filters: [+ {+ expression: '? >= ?',+ parameters: [+ {+ column_id: '<column id>', // Date+ dataset_id: datasetId,+ },+ date,+ ],+ },+ ],+ },+ ]}+ />+ <div/> </section> );}Theres quite a lot going on in the above code snippet, and I will explain it all in due course, but first, Ill need to cover a particularly tricky part of the configuration. Column IDsYoull notice the filters parameters, measure, and category content all require a column id. In the filters parameters, the key is named column_id, and in the measure and category, the key is named column. Both of these are actually the column IDs from the dataset. And heres how you can find them.Back in the Luzmo dashboard, click into your dataset and look for the more dots next to each column heading. From the menu, select Copy column id. Add each column ID to the keys in the configuration objects. In my example, Im using the Total users for the measure, the Device category for the category, and the Date for the filter. If youve added the column IDs correctly, you should be able to see a rendered chart on your screen! and as promised, heres a breakdown of the configuration. Initial Props Donut chartThe first part is fairly straightforward. appServer and authKey are the environment variables you saved to your .env file, and authKey and authToken are destructured from the authorization request and passed into this component via props. The type prop determines which type of chart to render. In my example, Im using donut-chart, but you could choose from one of the many options available, area-chart, bar-chart, bubble-chart, box-plot, and many more. You can see all the available options in the Luzmo documentation under Chart docs.<LuzmoVizItemComponent appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER} apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST} authKey={authKey} authToken={authToken} type='donut-chart'The one thing I should point out is my use of Tailwind classes: w-1/2 (width: 50%) and h-80 (height: 20rem). The LuzmoVizItemComponent ships with height 100%, so youll need to wrap the component with an element that has an actual height, or you wont be able to see the chart on the page as it could be 100% of the height of an element with no height. Donut Chart OptionsThe options object is where you can customize the appearance of your chart. It accepts many configuration options, among which:A title for the chart that accepts a locale with corresponding text to display.A display title value to determine if the title is shown or not.A mode to determine if the chart is to be of type donut or pie chart.A legend option to determine where the legend can be positioned.All the available configuration options can be seen in the Donut chart documentation.options={{ title: { en: `Devices from last 7 days`, }, display: { title: true, }, mode: 'donut', legend: { position: 'bottom', },}}Donut Chart SlotsSlots are where you can configure which column from your dataset to use for the category and measure.Slots can contain multiple measures, useful for displaying two columns of data per chart, but if more than two are used, one will become the measure. Each measure contains a content array. The content array, among many other configurations, can include the following:A label and locale,The column id from the dataset,The datasetId,The type of data youre displaying,A format for the data.The format used here is Python syntax for floating-point numbers; its similar to JavaScripts .toFixed() method, e.g number.toFixed(4). The hierarchy type is the Luzmo standard data type. Any text column is considered as an hierarchical data type.You can read more in the Donut chart documentation about available configuration options for slots. slots={[ { name: 'measure', content: [ { label: { en: 'Total users', }, column: '<column id>', // Total users set: datasetId, type: 'numeric', format: '.4f', }, ], }, { name: 'category', content: [ { label: { en: 'Device category', }, column: '<column id>', // Device category set: datasetId, type: 'hierarchy', }, ], },]}Donut Chart FiltersThe filters object is where you can apply conditions that will determine which data will be shown. In my example, I only want to show data from the last seven days. To accomplish this, I first create the date variable:const date = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();This would produce an ISO date string, e.g., 2024-08-21T14:25:40.088Z, which I can use with the filter. The filter uses Luzmos Filter Expressions, to determine if the date for each row of the data is greater than or equal to the date variable. You can read more about Filter Expressions in Luzmos Academy article. filters={[ { condition: 'or', filters: [ { expression: '? >= ?', parameters: [ { column_id: '<column id>', // Date dataset_id: datasetId, }, date, ], }, ], },]}Building a Line ChartThe second chart youll be creating is a Line chart that displays the number of page views on each date from the last seven days from folks who visit your site.Initial Props Line ChartAs with the Donut chart, the initial props are pretty much the same, but the type has been changed to line-chart.<LuzmoVizItemComponent appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER} apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST} authKey={authKey} authToken={authToken} type='line-chart'Line Chart OptionsThe options for the Line chart are as follows, and the mode has been changed to line-chart.options={{ title: { en: `Site visits from last 7 days`, }, display: { title: true, }, mode: 'grouped',}}Line Chart SlotsThe slots object is almost the same as before with the Donut chart, but for the Line chart, Im using the date column from the dataset instead of the device category, and instead of category, Im using the x-axis slot type. To ensure Im formatting the data correctly (by day), Ive used level 5. You can read more about levels in the docs.slots={[ { name: 'measure', content: [ { label: { en: 'Total users', }, column: '<column id>', // Total users set: datasetId, type: 'numeric', format: '.4f', }, ], }, { name: 'x-axis', content: [ { label: { en: 'Date', }, column: '<column id>', // Date set: datasetId, type: 'datetime', level: 5, }, ], },]}Line Chart FiltersIve used the same filters as I used in the Donut chart. Building a Bar ChartThe last chart youll be creating is a Bar chart that displays the number of page views for the top ten most viewed pages on your site.Initial Props Bar ChartAs with the Donut and Line chart, the initial props are pretty much the same, but the type has been changed to bar-chart.<LuzmoVizItemComponent className='w-full h-80' appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER} apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST} authKey={authKey} authToken={authToken} type='bar-chart'Bar Chart OptionsThe options for the Bar chart are a little more involved. Ive included some styling options for the border-radii of the bars, limited the number of results to 10, and sorted the data by the highest page view count first using the sort by measure and direction options. options={{ title: { en: `Page views from last 7 days`, }, display: { title: true, }, mode: 'grouped', bars: { roundedCorners: 5, }, limit: { number: 10, }, sort: { by: 'measure', direction: 'desc', },}}Line Chart SlotsAs with the Line chart, Ive used an axis for one of the columns from the dataset. In this case, its the y-axis which displays the page title. slots={[ { name: 'measure', content: [ { label: { en: 'Total users', }, column: '<column id>', // Total users set: datasetId, type: 'numeric', format: '.4f', }, ], }, { name: 'y-axis', content: [ { label: { en: 'Page title', }, column: '<column id>', // Page title set: datasetId, type: 'hierarchy', }, ], },]}Bar Chart FiltersIve used the same filters as I used in the Donut and Line chart.Whats NextAs you can see, there are plenty of types of charts and customization options. Because this is just an ordinary React component, you can very easily make it configurable by an end user by allowing options to be set and unset using HTML input elements, checkbox, select, date, and so on.But for me, the real power behind this is not having to mutate data! This is particularly pertinent when displaying multiple charts with different reporting dimensions. Typically, this would require each to have their own utility function or reformatting method. That said, setting column IDs and dataset IDs is a little fiddly, but once you have the component hooked up to the dataset, you can configure and reconfigure as much as you like, all without having to rewrite data formatting functions. If youre interested in bringing data to life in your application and want to get it done without the usual headaches, book a free demo with the Luzmo team to learn more!

Consider the early days of the internet, when websites like NBC News and Amazon cluttered their pages with flashing banners and labyrinthine menus. In the early 2000s, Steve Krugs book Dont Make Me Think arrived like a lighthouse in a storm, advocating for simplicity and user-centric design. Todays digital world is flooded with choices, information, and data, which is both exciting and overwhelming. Unlike Krugs time, today, the problem isnt interaction complexity but opacity. AI-powered solutions often lack transparency and explainability, raising concerns about user trust and accountability. The era of click-and-command is fading, giving way to a more seamless and intelligent relationship between humans and machines.Expanding on Krugs Call for Clarity: The Pillars of Anticipatory DesignKrugs emphasis on clarity in design is more relevant than ever. In anticipatory design, clarity is not just about simplicity or ease of use its about transparency and accountability. These two pillars are crucial but often missing as businesses navigate this new paradigm. Users today find themselves in a digital landscape that is not only confusing but increasingly intrusive. AI predicts their desires based on past behavior but rarely explains how these predictions are made, leading to growing mistrust.Transparency is the foundation of clarity. It involves openly communicating how AI-driven decisions are made, what data is being collected, and how it is being used to anticipate needs. By demystifying these processes, designers can alleviate user concerns about privacy and control, thereby building trust.Accountability complements transparency by ensuring that anticipatory systems are designed with ethical considerations in mind. This means creating mechanisms for users to understand, question, and override automated decisions if needed. When users feel that the system is accountable to them, their trust in the technology and the brand deepens.What Makes a Service Anticipatory?Image AI like a waiter at a restaurant. Without AI, they wait for you to interact with them and place your order. But with anticipatory design powered by AI and ML, the waiter can analyze your past orders (historical data) and current behavior (contextual data) perhaps, by noticing you always start with a glass of sparkling water.This proactive approach has evolved since the late 1990s, with early examples like Amazons recommendation engine and TiVos predictive recording. These pioneering services demonstrated the potential of predictive analytics and ML to create personalized, seamless user experiences.Amazons Recommendation Engine (Late 1990s)Amazon was a pioneer in using data to predict and suggest products to customers, setting the standard for personalized experiences in e-commerce.TiVo (1999)TiVos ability to learn users viewing habits and automatically record shows marked an early step toward predictive, personalized entertainment.Netflixs Recommendation System (2006)Netflix began offering personalized movie recommendations based on user ratings and viewing history in 2006. It helped popularize the idea of anticipatory design in the digital entertainment space.How Businesses Can Achieve Anticipatory DesignDesigning for anticipation is designing for a future that is not here yet but has already started moving toward us.Designing for anticipation involves more than reacting to current trends; it requires businesses to plan strategically for future user needs. Two critical concepts in this process are forecasting and backcasting.Forecasting analyzes past trends and data to predict future outcomes, helping businesses anticipate user needs.Backcasting starts with a desired future outcome and works backward to identify the steps needed to achieve that goal.Think of it like planning a dream vacation. Forecasting would involve looking at your past trips to guess where you might go next. But backcasting lets you pick your ideal destination first, then plan the perfect itinerary to get you there. Forecasting: A Core Concept for Future-Oriented DesignThis method helps in planning and decision-making based on probable future scenarios. Consider Netflix, which uses forecasting to analyze viewers past viewing habits and predict what they might want to watch next. By leveraging data from millions of users, Netflix can anticipate individual preferences and serve personalized recommendations that keep users engaged and satisfied.Backcasting: Planning From the Desired FutureBackcasting takes a different approach. Instead of using data to predict the future, it starts with defining a desired future outcome a clear user intent. The process then works backward to identify the steps needed to achieve that goal. This goal-oriented approach crafts an experience that actively guides users toward their desired future state.For instance, a financial planning app might start with a users long-term financial goal, such as saving for retirement, and then design an experience that guides the user through each step necessary to reach that goal, from budgeting tips to investment recommendations.Integrating Forecasting and Backcasting In Anticipatory DesignThe true power of anticipatory design emerges when businesses efficiently integrate both forecasting and backcasting into their design processes.For example, Teslas approach to electric vehicles exemplifies this integration. By forecasting market trends and user preferences, Tesla can introduce features that appeal to users today. Simultaneously, by backcasting from a vision of a sustainable future, Tesla designs its vehicles and infrastructure to guide society toward a world where electric cars are the norm and carbon emissions are significantly reduced.Over-Promising and Under-Delivering: The Pitfalls of Anticipatory DesignAs businesses increasingly adopt anticipatory design, the integration of forecasting and backcasting becomes essential. Forecasting allows businesses to predict and respond to immediate user needs, while backcasting ensures these responses align with long-term goals. Despite its potential, anticipatory design often fails in execution, leaving few examples of success.Over the past decade, Ive observed and documented the rise and fall of several ambitious anticipatory design ventures. Among them, three Digit, LifeBEAM Vi Sense Headphones, and Mint highlight the challenges of this approach.Digit: Struggling with Contextual UnderstandingDigit aimed to simplify personal finance with algorithms that automatically saved money based on user spending. However, the service often missed the mark, lacking the contextual awareness necessary to accurately assess users real-time financial situations. This led to unexpected withdrawals, frustrating users, especially those living paycheck to paycheck. The result was a breakdown in trust, with the service feeling more intrusive than supportive.LifeBEAM Vi Sense Headphones: Complexity and User Experience ChallengesLifeBEAM Vi Sense Headphones was marketed as an AI-driven fitness coach, promising personalized guidance during workouts. In practice, the AI struggled to deliver tailored coaching, offering generic and unresponsive advice. As a result, users found the experience difficult to navigate, ultimately limiting the products appeal and effectiveness. This disconnection between the promised personalized experience and the actual user experience left many disappointed.Mint: Misalignment with User GoalsMint aimed to empower users to manage their finances by providing automated budgeting tools and financial advice. While the service had the potential to anticipate user needs, users often found that the suggestions were not tailored to their unique financial situations, resulting in generic advice that did not align with their personal goals.The lack of personalized, actionable steps led to a mismatch between user expectations and service delivery. This misalignment caused some users to disengage, feeling that Mint was not fully attuned to their unique financial journeys.The Risks of Over-promising and Under-DeliveringThe stories of Digit, LifeBEAM Vi Sense, and Mint underscore a common pitfall: over-promising and under-delivering. These services focused too much on predictive power and not enough on user experience. When anticipatory systems fail to consider individual nuances, they breed frustration rather than satisfaction, highlighting the importance of aligning design with human experience.Digits approach to automated savings, for instance, became problematic when users found its decisions opaque and unpredictable. Similarly, LifeBEAMs Vi Sense headphones struggled to meet diverse user needs, while Mints rigid tools failed to offer the personalized insights users expected. These examples illustrate the delicate balance anticipatory design must strike between proactive assistance and user control.Failure to Evolve with User NeedsMany anticipatory services rely heavily on data-driven forecasting, but predictions can fall short without understanding the broader user context. Mint initially provided value with basic budgeting tools but failed to evolve with users growing needs for more sophisticated financial advice. Digit, too, struggled to adapt to different financial habits, leading to dissatisfaction and limited success.Complexity and Usability IssuesBalancing the complexity of predictive systems with usability and transparency is a key challenge in anticipatory design.When systems become overly complex, as seen with LifeBEAM Vi Sense headphones, users may find them difficult to navigate or control, compromising trust and engagement. Mints generic recommendations, born from a failure to align immediate user needs with long-term goals, further illustrate the risks of complexity without clarity.Privacy and Trust IssuesTrust is critical in anticipatory design, particularly in services handling sensitive data like finance or health. Digit and Mint both encountered trust issues as users grew skeptical of how decisions were made and whether these services truly had their best interests in mind. Without clear communication and control, even the most sophisticated systems risk alienating users.Inadequate Handling of Edge Cases and Unpredictable ScenariosWhile forecasting and backcasting work well for common scenarios, they can struggle with edge cases or unpredictable user behaviors. If an anticipatory service cant handle these effectively, it risks providing a poor user experience and, in the worst-case scenario, harming the user. Anticipatory systems must be prepared to handle edge cases and unpredictable scenarios.LifeBEAM Vi Sense headphones struggled when users deviated from expected fitness routines, offering a one-size-fits-all experience that failed to adapt to individual needs. This highlights the importance of allowing users control, even when a system proactively assists them.Designing for Anticipatory ExperiencesAnticipatory design should empower users to achieve their goals, not just automate tasks.We can follow a layered approach to plan a service that can evolve according to user actions and explicit ever-evolving intent.But how do we design for intent without misaligning anticipation and user control or mismatching user expectations and service delivery?At the core of this approach is intent the primary purpose or goal that the design must achieve. Surrounding this are workflows, which represent the structured tasks to achieve the intent. Finally, algorithms analyze user data and optimize these workflows.For instance, Thrive (see the image below), a digital wellness platform, aligns algorithms and workflows with the core intent of improving well-being. By anticipating user needs and offering personalized programs, Thrive helps users achieve sustained behavior change.It perfectly exemplifies the three-layered concentric representation for achieving behavior change through anticipatory design:1. Innermost layer: IntentImprove overall well-being: Thrives core intent is to help users achieve a healthier and more fulfilling life. This encompasses aspects like managing stress, improving sleep quality, and boosting energy levels.2. Middle layer: WorkflowsPersonalized programs and support: Thrive uses user data (sleep patterns, activity levels, mood) to create programs tailored to their specific needs and goals. These programs involve various workflows, such as:Guided meditations and breathing exercises to manage stress and anxiety.Personalized sleep routines aimed at improving sleep quality.Educational content and coaching tips to promote healthy habits and lifestyle changes.3. Outermost layer: AlgorithmsData analysis and personalized recommendations: Thrive utilizes algorithms to analyze user data and generate actionable insights. These algorithms perform tasks like the following:Identify patterns in sleep, activity, and mood to understand user challenges.Predict user behavior to recommend interventions that address potential issues.Optimize program recommendations based on user progress and data analysis.By aligning algorithms and workflows with the core intent of improving well-being, Thrive provides a personalized and proactive approach to behavior change. Heres how it benefits users:Sustained behavior change: Personalized programs and ongoing support empower users to develop healthy habits for the long term.Data-driven insights: User data analysis helps users gain valuable insights into their well-being and identify areas for improvement.Proactive support: Anticipates potential issues and recommends interventions before problems arise.The Future of Anticipatory Design: Combining Anticipation with ForesightAnticipatory design is inherently future-oriented, making it both appealing and challenging. To succeed, businesses must combine anticipation predicting future needs with foresight, a systematic approach to analyzing and preparing for future changes.Foresight involves considering alternative future scenarios and making informed decisions to navigate toward desired outcomes. For example, Digit and Mint struggled because they didnt adequately handle edge cases or unpredictable scenarios, a failure in their foresight strategy (see an image below).As mentioned, while forecasting and backcasting work well for common scenarios, they can struggle with edge cases or unpredictable user behaviors. Under anticipatory design, if we demote foresight for a second plan, the business will fail to account for and prepare for emerging trends and disruptive changes. Strategic foresight helps companies to prepare for the future and develop strategies to address possible challenges and opportunities.The Foresight process generally involves interrelated activities, including data research, trend analysis, planning scenarios, and impact assessment. The ultimate goal is to gain a broader and deeper understanding of the future to make more informed and strategic decisions in the design process and foresee possible frictions and pitfalls in the user experience. Actionable Insights for DesignerEnhance contextual awarenessHelp data scientists or engineers to ensure that the anticipatory systems can understand and respond to the full context of user needs, not just historical data. Plan for pitfalls so you can design safety measures where the user can control the system.Maintain user controlProvide users with options to customize or override automated decisions, ensuring they feel in control of their experiences.Align short-term predictions with long-term goalsUse forecasting and backcasting to create a balanced approach that meets immediate needs while guiding users toward their long-term objectives.Proposing an Anticipatory Design FrameworkPredicting the future is no easy task. However, design can borrow foresight techniques to imagine, anticipate, and shape a future where technology seamlessly integrates with users evolving needs. To effectively implement anticipatory design, its essential to balance human control with AI automation. Heres a 3-step approach to integrate future thinking into your workflow:Anticipate Directions of ChangeIdentify major trends shaping the future.Imagine Alternative ScenariosExplore potential futures to guide impactful design decisions.Shape Our ChoicesLeverage these scenarios to align design with user needs and long-term goals.This proposed framework (see an image above) aims to integrate forecasting and backcasting while emphasizing user intent, transparency, and continuous improvement, ensuring that businesses create experiences that are both predictive and deeply aligned with user needs.Step 1: Anticipate Directions of ChangeObjective: Identify the major trends and forces shaping the future landscape.Components:1. Understand the Users IntentUser Research: Conduct in-depth user research through interviews, surveys, and observations to uncover user goals, motivations, pain points, and long-term aspirations or Jobs-to-be-Done (JTBD). This foundational step helps clearly define the users intent.Persona Development: Develop detailed user personas that represent the target audience, including their long-term goals and desired outcomes. Prioritize understanding how the service can adapt in real-time to changing user needs, offering recommendations, or taking actions aligned with the personas current context.2. Forecasting: Predicting Near-Term User NeedsData Collection and Analysis: Collaborate closely with data scientists and data engineers to analyze historical data (past interactions), user behavior, and external factors. This collaboration ensures that predictive analytics enhance overall user experience, allowing designers to better understand the implications of data on user behaviors.Predictive Modeling: Implement continuous learning algorithms that refine predictions over time. Regularly assess how these models evolve, adapting to users changing needs and circumstances.Explore the Delphi Method: This is a structured communication technique that gathers expert opinions to reach a consensus on future developments. Its particularly useful for exploring complex issues with uncertain outcomes. Use the Delphi Method to gather insights from industry experts, user researchers, and stakeholders about future user needs and the best strategies to meet those needs. The consensus achieved can help in clearly defining the long-term goals and desired outcomes.Activities:Conduct interviews and workshops with experts using the Delphi Method to validate key trends.Analyze data and trends to forecast future directions.Step 2: Imagine Alternative ScenariosObjective: Explore a range of potential futures based on these changing directions.Components:1. Scenario PlanningScenario Development: It involves creating detailed, plausible future scenarios based on various external factors, such as technological advancements, social trends, and economic changes. Develop multiple future scenarios that represent different possible user contexts and their impact on their needs.Scenario Analysis: From these scenarios, you can outline the long-term goals that users might have in each scenario and design services that anticipate and address these needs. Assess how these scenarios impact user needs and experiences.2. Backcasting: Designing from the Desired FutureDefine Desired Outcomes: Clearly outline the long-term goals or future states that users aim to achieve. Use backcasting to reduce cognitive load by designing a service that anticipates future needs, streamlining user interactions, and minimizing decision-making efforts.Use Visioning Planning: This is a creative process that involves imagining the ideal future state you want to achieve. It helps in setting clear, long-term goals by focusing on the desired outcomes rather than current constraints. Facilitate workshops or brainstorming sessions with stakeholders to co-create a vision of the future. Define what success looks like from the users perspective and use this vision to guide the backcasting process.Identify Steps to Reach Goals: Reverse-engineer the user journey by starting from the desired future state and working backward. Identify the necessary steps and milestones and ensure these are communicated transparently to users, allowing them control over their experience.Create Roadmaps: Develop detailed roadmaps that outline the sequence of actions needed to transition from the current state to the desired future state. These roadmaps should anticipate obstacles, respect privacy, and avoid manipulative behaviors, empowering users rather than overwhelming them.Activities:Develop and analyze alternative scenarios to explore various potential futures.Use backcasting to create actionable roadmaps from these scenarios, ensuring they align with long-term goals.Step 3: Shape Our ChoicesObjective: Leverage these scenarios to spark new ideas and guide impactful design decisions.Components:1. Integrate into the Human-Centered Design ProcessIterative Design with Forecasting and Backcasting: Embed insights from forecasting and backcasting into every stage of the design process. Use these insights to inform user research, prototype development, and usability testing, ensuring that solutions address both predicted future needs and desired outcomes. Continuously refine designs based on user feedback.Agile Methodologies: Adopt agile development practices to remain flexible and responsive. Ensure that the service continuously learns from user interactions and feedback, refining its predictions and improving its ability to anticipate needs.2. Implement and Monitor: Ensuring Ongoing RelevanceUser Feedback Loops: Establish continuous feedback mechanisms to refine predictive models and workflows. Use this feedback to adjust forecasts and backcasted plans as necessary, keeping the design aligned with evolving user expectations.Automation Tools: Collaborate with data scientists and engineers to deploy automation tools that execute workflows and monitor progress toward goals. These tools should adapt based on new data, evolving alongside user behavior and emerging trends.Performance Metrics: Define key performance indicators (KPIs) to measure the effectiveness, accuracy, and quality of the anticipatory experience. Regularly review these metrics to ensure that the system remains aligned with intended outcomes.Continuous Improvement: Maintain a cycle of continuous improvement where the system learns from each interaction, refining its predictions and recommendations over time to stay relevant and useful.Use Trend Analysis: This involves identifying and analyzing patterns in data over time to predict future developments. This method helps you understand the direction in which user behaviors, technologies, and market conditions are heading. Use trend analysis to identify emerging trends that could influence user needs in the future. This will inform the desired outcomes by highlighting what users might require or expect from a service as these trends evolve.Activities:Implement design solutions based on scenario insights and iterate based on user feedback.Regularly review and adjust designs using performance metrics and continuous improvement practices.Conclusion: Navigating the Future of Anticipatory DesignAnticipatory design holds immense potential to revolutionize user experiences by predicting and fulfilling needs before they are even articulated. However, as seen in the examples discussed, the gap between expectation and execution can lead to user dissatisfaction and erode trust.To navigate the future of anticipatory design successfully, businesses must prioritize transparency, accountability, and user empowerment. By enhancing contextual awareness, maintaining user control, and aligning short-term predictions with long-term goals, companies can create experiences that are not only innovative but also deeply resonant with their users needs.Moreover, combining anticipation with foresight allows businesses to prepare for a range of future scenarios, ensuring that their designs remain relevant and effective even as circumstances change. The proposed 3-step framework anticipating directions of change, imagining alternative scenarios, and shaping our choices provides a practical roadmap for integrating these principles into the design process.As we move forward, the challenge will be to balance the power of AI with the human need for clarity, control, and trust. By doing so, businesses can fulfill the promise of anticipatory design, creating products and services that are not only efficient and personalized but also ethical and user-centric.In the end,The success of anticipatory design will depend on its ability to enhance, rather than replace, the human experience.It is a tool to empower users, not to dictate their choices. When done right, anticipatory design can lead to a future where technology seamlessly integrates with our lives, making everyday experiences simpler, more intuitive, and ultimately more satisfying.

Google Analytics is great, but not everyone in your organization will be granted access. In many places Ive worked, it was on a kind of need to know basis. In this article, Im gonna flip that on its head and show you how I wrote a GitHub Action that queries Google Analytics, generates a top ten list of the most frequently viewed pages on my site from the last seven days and compares them to the previous seven days to tell me which pages have increased in views, which pages have decreased in views, which pages have stayed the same and which pages are new to the list.The report is then nicely formatted with icon indicators and posted to a public Slack channel every Friday at 10 AM. Not only would this surfaced data be useful for folks who might need it, but it also provides an easy way to copy and paste or screenshot the report and add it to a slide for the weekly company/department meeting. Heres what the finished report looks like in Slack, and below, youll find a link to the GitHub Repository.GitHubTo use this repository, follow the steps outlined in the README.https://github.com/PaulieScanlon/smashing-weekly-analyticsPrerequisitesTo build this workflow, youll need admin access to your Google Analytics and Slack Accounts and administrator privileges for GitHub Actions and Secrets for a GitHub repository.Customizing the Report and ActionNaturally, all of the code can be changed to suit your requirements, and in the following sections, Ill explain the areas youll likely want to take a look at. Customizing the GitHub ActionThe file name of the Action weekly-analytics.report.yml isnt seen anywhere other than in the code/repo but naturally, change it to whatever you like, you wont break anything. The name and jobs: names detailed below are seen in the GitHub UI and Workflow logs.The cron syntax determines when the Action will run. Schedules use POSIX cron syntax and by changing the numbers you can determine when the Action runs. You could also change the secrets variable names; just make sure you update them in your repository Settings. # .github/workflows/weekly-analytics-report.ymlname: Weekly Analytics Reporton: schedule: - cron: '0 10 * * 5' # Runs every Friday at 10 AM UTC workflow_dispatch: # Allows manual triggeringjobs: analytics-report: runs-on: ubuntu-latest env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} GA4_PROPERTY_ID: ${{ secrets.GA4_PROPERTY_ID }} GOOGLE_APPLICATION_CREDENTIALS_BASE64: ${{ secrets.GOOGLE_APPLICATION_CREDENTIALS_BASE64 }} steps: - name: Checkout repository uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20.x' - name: Install dependencies run: npm install - name: Run the JavaScript script run: node src/services/weekly-analytics.jsCustomizing the Google Analytics ReportThe Google Analytics API request Im using is set to pull the fullPageUrl and pageTitle for the totalUsers in the last seven days, and a second request for the previous seven days, and then aggregates the totals and limits the responses to 10.You can use Googles GA4 Query Explorer to construct your own query, then replace the requests. // src/services/weekly-analytics.js#L75const [thisWeek] = await analyticsDataClient.runReport({ property: `properties/${process.env.GA4_PROPERTY_ID}`, dateRanges: [ { startDate: '7daysAgo', endDate: 'today', }, ], dimensions: [ { name: 'fullPageUrl', }, { name: 'pageTitle', }, ], metrics: [ { name: 'totalUsers', }, ], limit: reportLimit, metricAggregations: ['MAXIMUM'],});Creating the ComparisonsThere are two functions to determine which page views have increased, decreased, stayed the same, or are new. The first is a simple reduce function that returns the URL and a count for each.const lastWeekMap = lastWeekResults.reduce((items, item) => { const { url, count } = item; items[url] = count; return items;}, {});The second maps over the results from this week and compares them to last week.// Generate the report for this weekconst report = thisWeekResults.map((item, index) => { const { url, title, count } = item; const lastWeekCount = lastWeekMap[url]; const status = determineStatus(count, lastWeekCount); return { position: (index + 1).toString().padStart(2, '0'), // Format the position with leading zero if it's less than 10 url, title, count: { thisWeek: count, lastWeek: lastWeekCount || '0' }, // Ensure lastWeekCount is displayed as '0' if not found status, };});The final function is used to determine the status of each.// Function to determine the statusconst determineStatus = (count, lastWeekCount) => { const thisCount = Number(count); const previousCount = Number(lastWeekCount); if (lastWeekCount === undefined || lastWeekCount === '0') { return NEW; } if (thisCount > previousCount) { return HIGHER; } if (thisCount < previousCount) { return LOWER; } return SAME;};Ive purposely left the code fairly verbose, so itll be easier for you to add console.log to each of the functions to see what they return. Customizing the Slack MessageThe Slack message config Im using creates a heading with an emoji, a divider, and a paragraph explaining what the message is.Below that Im using the context object to construct a report by iterating over comparisons and returning an object containing Slack specific message syntax which includes an icon, a count, the name of the page and a link to each item.You can use Slacks Block Kit Builder to construct your own message format. // src/services/weekly-analytics.js#151 const slackList = report.map((item, index) => { const { position, url, title, count: { thisWeek, lastWeek }, status, } = item; return { type: 'context', elements: [ { type: 'image', image_url: ${reportConfig.url}/images/${status}, alt_text: 'icon', }, { type: 'mrkdwn', text: ${position}. <${url}|${title}> | *\${x${thisWeek}}`* / x${lastWeek}`, }, ], }; });Before you can run the GitHub Action, you will need to complete a number of Google, Slack, and GitHub steps.Ready to get going? Creating a Google Cloud ProjectHead over to your Google Cloud console, and from the dropdown menu at the top of the screen, click Select a project, and when the modal opens up, click NEW PROJECT. Project nameOn the next screen, give your project a name and click CREATE. In my example, Ive named the project smashing-weekly-analytics.Enable APIs & ServicesIn this step, youll enable the Google Analytics Data API for your new project. From the left-hand sidebar, navigate to APIs & Services > Enable APIs & services. At the top of the screen, click + ENABLE APIS & SERVICES.Enable Google Analytics Data APISearch for Google analytics data API, select it from the list, then click ENABLE.Create Credentials for Google Analytics Data APIWith the API enabled in your project, you can now create the required credentials. Click the CREATE CREDENTIALS button at the top right of the screen to set up a new Service account. A Service account allows an application to interact with Google APIs, providing the credentials include the required services. In this example, the credentials grant access to the Google Analytics Data API. Service Account Credentials TypeOn the next screen, select Google Analytics Data API from the dropdown menu and Application data, then click NEXT.Service Account DetailsOn the next screen, give your Service account a name, ID, and description (optional). Then click CREATE AND CONTINUE.In my example, Ive given my service account a name and ID of smashing-weekly-analytics and added a short description that explains what the service account does.Service Account RoleOn the next screen, select Owner for the Role, then click CONTINUE. Service Account DoneYou can leave the fields blank in this last step and click DONE when youre ready.Service Account KeysFrom the left-hand navigation, select Service Accounts, then click the more dots to open the menu and select Manage keys.Service Accounts Add KeyOn the next screen, locate the KEYS tab at the top of the screen, then click ADD KEY and select Create new key.Service Accounts Download KeysOn the next screen, select JSON as the key type, then click CREATE to download your Google Application credentials .json file.Google Application CredentialsIf you open the .json file in your code editor, you should be looking at something similar to the one below.In case youre wondering, no, you cant use an object as a variable defined in an .env file. To use these credentials, its necessary to convert the whole file into a base64 string.Note: I wrote a more detailed post about how to use Google Application credentials as environment variables here: How to Use Google Application .json Credentials in Environment Variables.From your terminal, run the following: replace name-of-creds-file.json with the name of your .json file. cat name-of-creds-file.json | base64If youve already cloned the repo and followed the Getting started steps in the README, add the base64 string returned after running the above and add it to the GOOGLE_APPLICATION_CREDENTIALS_BASE64 variable in your .env file, but make sure you wrap the string with double quotation makes.GOOGLE_APPLICATION_CREDENTIALS_BASE64="abc123"That completes the Google project side of things. The next step is to add your service account email to your Google Analytics property and find your Google Analytics Property ID. Google Analytics PropertiesWhilst your service account now has access to the Google Analytics Data API, it doesnt yet have access to your Google Analytics account. Get Google Analytics Property IDTo make queries to the Google Analytics API, youll need to know your Property ID. You can find it by heading over to your Google Analytics account. Make sure youre on the correct property (in the screenshot below, Ive selected paulie.dev GA4).Click the admin cog in the bottom left-hand side of the screen, then click Property details.On the next screen, youll see the PROPERTY ID in the top right corner. If youve already cloned the repo and followed the Getting started steps in the README, add the property ID value to the GA4_PROPERTY_ID variable in your .env file.Add Client Email to Google AnalyticsFrom the Google application credential .json file you downloaded earlier, locate the client_email and copy the email address. In my example, it looks like this: smashing-weekly-analytics@smashing-weekly-analytics.iam.gserviceaccount.com.Now navigate to Property access management from the left hide side navigation and click the + in the top right-hand corner, then click Add users.On the next screen, add the client_email to the Email addresses input, uncheck Notify new users by email, and select Viewer under Direct roles and data restrictions, then click Add.That completes the Google Analytics properties section. Your application will use the Google application credentials containing the client_email and will now have access to your Google Analytics account via the Google Analytics Data API.Slack Channels and WebhookIn the following steps, youll create a new Slack channel that will be used to post messages sent from your application using a Slack Webhook.Creating The Slack ChannelCreate a new channel in your Slack workspace. Ive named mine #weekly-analytics-report. Youll need to set this up before proceeding to the next step. Creating a Slack AppHead over to the slack api dashboard, and click Create an App.On the next screen, select From an app manifest.On the next screen, select your Slack workspace, then click Next.On this screen, you can give your app a name. In my example, Ive named my Weekly Analytics Report. Click Next when youre ready.On step 3, you can just click Done.With the App created, you can now set up a Webhook. Creating a Slack WebhookNavigate to Incoming Webhooks from the left-hand navigation, then switch the Toggle to On to activate incoming webhooks. Then, at the bottom of the screen, click Add New Webook to Workspace. On the next screen, select your Slack workspace and a channel that youd like to use to post messages, too, and click Allow. You should now see your new Slack Webhook with a copy button. Copy the Webhook URL, and if youve already cloned the repo and followed the Getting started steps in the README, add the Webhook URL to the SLACK_WEBHOOK_URL variable in your .env file.Slack App ConfigurationFrom the left-hand navigation, select Basic Information. On this screen, you can customize your app and add an icon and description. Be sure to click Save Changes when youre done.If you now head over to your Slack, you should see that your app has been added to your workspace.That completes the Slack section of this article. Its now time to add your environment variables to GitHub Secrets and run the workflow.Add GitHub SecretsHead over to the Settings tab of your GitHub repository, then from the left-hand navigation, select Secrets and variables, then click Actions. Add the three variables from your .env file under Repository secrets.A note on the base64 string: You wont need to include the double quotes!Run WorkflowTo test if your Action is working correctly, head over to the Actions tab of your GitHub repository, select the Job name (Weekly Analytics Report), then click Run workflow. If everything worked correctly, you should now be looking at a nicely formatted list of the top ten page views on your site in Slack.FinishedAnd thats it! A fully automated Google Analytics report that posts directly to your Slack. Ive worked in a few places where Google Analytics data was on lockdown, and I think this approach to sharing Analytics data with Slack (something everyone has access to) could be super valuable for various people in your organization.

I was recently asked by a student to help with a seemingly simple problem. Shed been working on a website for a coffee shop that sports a sticky header, and she wanted the hero section right underneath that header to span the rest of the available vertical space in the viewport.Heres a visual demo of the desired effect for clarity.Looks like it should be easy enough, right? I was sure (read: overconfident) that the problem would only take a couple of minutes to solve, only to find it was a much deeper well than Id assumed.Before we dive in, lets take a quick look at the initial markup and CSS to see what were working with:<body> <header class="header">Header Content</header> <section class="hero">Hero Content</section> <main class="main">Main Content</main></body>.header { position: sticky; top: 0; /* Offset, otherwise it won't stick! */}/* etc. */With those declarations, the .header will stick to the top of the page. And yet the .hero element below it remains intrinsically sized. This is what we want to change.The Low-Hanging FruitThe first impulse you might have, as I did, is to enclose the header and hero in some sort of parent container and give that container 100vh to make it span the viewport. After that, we could use Flexbox to distribute the children and make the hero grow to fill the remaining space.<body> <div class="container"> <header class="header">Header Content</header> <section class="hero">Hero Content</section> </div> <main class="main">Main Content</main></body>.container { height: 100vh; display: flex; flex-direction: column;}.hero { flex-grow: 1;}/* etc. */This looks correct at first glance, but watch what happens when scrolling past the hero.See the Pen Attempt #1: Container + Flexbox [forked] by Philip.The sticky header gets trapped in its parent container! But.. why?If youre anything like me, this behavior is unintuitive, at least initially. You may have heard that sticky is a combination of relative and fixed positioning, meaning it participates in the normal flow of the document but only until it hits the edges of its scrolling container, at which point it becomes fixed. While viewing sticky as a combination of other values can be a useful mnemonic, it fails to capture one important difference between sticky and fixed elements:A position: fixed element doesnt care about the parent its nested in or any of its ancestors. It will break out of the normal flow of the document and place itself directly offset from the viewport, as though glued in place a certain distance from the edge of the screen.Conversely, a position: sticky element will be pushed along with the edges of the viewport (or next closest scrolling container), but it will never escape the boundaries of its direct parent. Well, at least if you dont count visually transform-ing it. So a better way to think about it might be, to steal from Chris Coyier, that position: sticky is, in a sense, a locally scoped position: fixed. This is an intentional design decision, one that allows for section-specific sticky headers like the ones made famous by alphabetical lists in mobile interfaces.See the Pen Sticky Section Headers [forked] by Philip.Okay, so this approach is a no-go for our predicament. We need to find a solution that doesnt involve a container around the header.Fixed, But Not SolvedMaybe we can make our lives a bit simpler. Instead of a container, what if we gave the .header element a fixed height of, say, 150px? Then, all we have to do is define the .hero elements height as height: calc(100vh - 150px).See the Pen Attempt #2: Fixed Height + Calc() [forked] by Philip.This approach kinda works, but the downsides are more insidious than our last attempt because they may not be immediately apparent. You probably noticed that the header is too tall, and wed wanna do some math to decide on a better height.Thinking ahead a bit,What if the .headers children need to wrap or rearrange themselves at different screen sizes or grow to maintain legibility on mobile?What if JavaScript is manipulating the contents?All of these things could subtly change the .headers ideal size, and chasing the right height values for each scenario has the potential to spiral into a maintenance nightmare of unmanageable breakpoints and magic numbers especially if we consider this needs to be done not only for the .header but also the .hero element that depends on it.I would argue that this workaround also just feels wrong. Fixed heights break one of the main affordances of CSS layout the way elements automatically grow and shrink to adapt to their contents and not relying on this usually makes our lives harder, not simpler.So, were left withA Novel ApproachNow that weve figured out the constraints were working with, another way to phrase the problem is that we want the .header and .hero to collectively span 100vh without sizing the elements explicitly or wrapping them in a container. Ideally, wed find something that already is 100vh and align them to that. This is where it dawned on me that display: grid may provide just what we need!Lets try this: We declare display: grid on the body element and add another element before the .header that well call .above-the-fold-spacer. This new element gets a height of 100vh and spans the grids entire width. Next, well tell our spacer that it should take up two grid rows and well anchor it to the top of the page.This element must be entirely empty because we dont ever want it to be visible or to register to screen readers. Were merely using it as a crutch to tell the grid how to behave.<body> <!-- This spacer provides the height we want --> <div class="above-the-fold-spacer"></div> <!-- These two elements will place themselves on top of the spacer --> <header class="header">Header Content</header> <section class="hero">Hero Content</section> <!-- The rest of the page stays unaffected --> <main class="main">Main Content</main></body>body { display: grid;}.above-the-fold-spacer { height: 100vh; /* Span from the first to the last grid column line */ /* (Negative numbers count from the end of the grid) */ grid-column: 1 / -1; /* Start at the first grid row line, and take up 2 rows */ grid-row: 1 / span 2; }/* etc. */This is the magic ingredient.By adding the spacer, weve created two grid rows that together take up exactly 100vh. Now, all thats left to do, in essence, is to tell the .header and .hero elements to align themselves to those existing rows. We do have to tell them to start at the same grid column line as the .above-the-fold-spacer element so that they wont try to sit next to it. But with that done ta-da!See the Pen The Solution: Grid Alignment [forked] by Philip.The reason this works is that a grid container can have multiple children occupying the same cell overlaid on top of each other. In a situation like that, the tallest child element defines the grid rows overall height or, in this case, the combined height of the two rows (100vh).To control how exactly the two visible elements divvy up the available space between themselves, we can use the grid-template-rows property. I made it so that the first row uses min-content rather than 1fr. This is necessary so that the .header doesnt take up the same amount of space as the .hero but instead only takes what it needs and lets the hero have the rest.Heres our full solution:body { display: grid; grid-template-rows: min-content 1fr;}.above-the-fold-spacer { height: 100vh; grid-column: 1 / -1; grid-row: 1 / span 2;}.header { position: sticky; top: 0; grid-column-start: 1; grid-row-start: 1;}.hero { grid-column-start: 1; grid-row-start: 2;}And voila: A sticky header of arbitrary size above a hero that grows to fill the remaining visible space!Caveats and Final ThoughtsIts worth noting that the HTML order of the elements matters here. If we define .above-the-fold-spacer after our .hero section, it will overlay and block access to the elements underneath. We can work around this by declaring either order: -1, z-index: -1, or visibility: hidden.Keep in mind that this is a simple example. If you were to add a sidebar to the left of your page, for example, youd need to adjust at which column the elements start. Still, in the majority of cases, using a CSS Grid approach is likely to be less troublesome than the Sisyphean task of manually managing and coordinating the height values of multiple elements.Another upside of this approach is that its adaptable. If you decide you want a group of three elements to take up the screens height rather than two, then youd make the invisible spacer span three rows and assign the visible elements to the appropriate one. Even if the hero elements content causes its height to exceed 100vh, the grid adapts without breaking anything. Its even well-supported in all modern browsers.The more I think about this technique, the more Im persuaded that its actually quite clean. Then again, you know how lawyers can talk themselves into their own arguments? If you can think of an even simpler solution Ive overlooked, feel free to reach out and let me know!

In the early days of the web, I remember how annoying it was when print designers would claim they could design websites, too. They assumed that just because they could design for one medium, they could design for the other.That assumption often led to bad user experiences. The skills for effective web design are quite different from those for print design.A similar thing happens today. Designers know how to design traditional marketing and e-commerce sites. They, therefore, presume they have the skills to work on SaaS apps and other digital projects.But when it comes to design, theres a big distinction between traditional websites and digital products. If we want to work on digital products, we need to understand those differences and adopt a different approach to our work.People Interact with Digital Products More RegularlyThe biggest difference is that users interact with digital products more than most websites.Think about your own web use. What are the sites you visit most often? If you listed your top ten, well over half would be some form of digital product, from a social media application to a productivity tool.So, with that in mind, lets dive into the specifics of how the frequency of usage impacts our design approach and what we can do about it.Why Frequency of Use Matters So MuchThe more we interact with a web app or website, the more important the overall user experience becomes. Users develop deeper connections with digital products. They also form more complex mental models of products they use often. This changes how they see the app in two fundamental ways.Friction Becomes Significantly More IrritatingFirst, friction points become increasingly annoying. Users interact with a digital product many times per day. Any small problem in the interface compounds quickly.When you encounter a clunky UI or confusing workflow on a website you only visit once in a while, its frustrating but easy to overlook. But, when that same friction occurs in an app you use multiple times per day, it becomes a major source of irritation.Change Undermines Our Procedural KnowledgeSecond, the more we use an app, the more familiar we become with it and how it works. We end up using the app automatically, without even thinking, much like when youve been driving a car for years, you dont think about the process. This is known as procedural knowledge.This is great news for digital product designers, as it means we can create interfaces that become second nature to our users. But, if we break their mental models or introduce unexpected changes, we risk causing frustration and disruption.So, knowing these two things, how does this affect our approach to digital product design? Well, lets start by considering the problem of friction.Fixing Friction PointsAs digital product designers, we need to become obsessed with removing friction from the user experience. Failure to do so will alienate users over time and ultimately lead to churn.To mitigate friction, we need to constantly seek out friction points. We need to diagnose the exact problem and then test any solution to ensure it does, in fact, make things better.So, how exactly do we find friction points?Finding FrictionThe most obvious way is to listen to customers. User feedback is crucial in identifying friction points in the user experience. However, we cant simply rely on that. Analytics can be your friend, too.Microsoft Clarity offers essential insights to pinpoint issues on your app.I would highly recommend using a tool like Microsoft Clarity. It gives detailed insights into user behavior. They help find points of friction. These include the following:Rage clicks: Where individuals continuously click on something due to frustration.Dead clicks: Where people click on something that is not clickable.Excessive scrolling: Where users scroll up and down looking for something.Quick backs: Where a person accidentally lands on a screen and promptly navigates back to the previous one.Error messages: Where the user is triggering an error in the system.These will help you identify potential friction points that you can then investigate further.Diagnosing FrictionOnce you know where things are going wrong, you can use heat maps and session recordings in Clarity. They will help you understand the problem. Why are people excessively scrolling or rage-clicking, for example?Session recordings are valuable for pinpointing particular problems in the interface.If the heat maps or session recordings dont make things clear, that is where you would need to consider usability testing. Once you understand the problem, you can then begin exploring solutions and testing them rigorously to ensure they effectively reduce friction.Testing Your Friction Busting SolutionsHow you test your solution to the point of friction will depend on the size and complexity of the changes you need to make.For small changes, such as tweaking the UI or changing some text, A/B testing is often the best approach. You show the new solution to a subset of your users and measure the impact on those indicators of frustration.But A/B testing isnt always the right approach. If your app has lower levels of traffic, getting results from a statistically significant A/B test can be time-consuming.Also, when your solution involves big changes, like adding new features or redesigning many screens, A/B testing can be expensive. That is because you need to first fully develop the solution before you can test it, meaning that it can prove costly if that solution turns out not to work.Your best approach in such situations is to create a prototype for remote testing.Initially, I usually conduct unfacilitated testing with a tool such as Maze. Unfacilitated testing is easy to set up. It requires minimal time investment, and Maze offers analytics, so you dont necessarily need to watch every session back.Maze serves as a valuable resource for conducting remote testing, offering both test data and recordings for each test.If testing uncovers issues you cant fix, then try facilitated testing. Facilitated testing enables you to delve into any arising issues by asking questions.Once you have a solution that works, its time to roll that feature out. But you need to be careful at this point because of the procedural knowledge I mentioned earlier.Dealing With the Dangers of Procedural KnowledgeIntroducing fixes to a user interface has a good chance of breaking a users procedural knowledge. Interface elements are often moved and so are no longer where users expect to find them, or they look different, and so users miss them.This can upset many existing customers. That can panic stakeholders and lead to rash decisions.To some extent, you need to accept that this is inevitable and prepare stakeholders for this eventuality. Users will normally adapt in a couple of weeks of regular use, and so there is no immediate need to panic.That said, there are things you can do to mitigate the reaction.To start with, you can let people know that change is coming. This allows people to mentally adapt to the change before it occurs.Secondly, if the change is significant, you may wish to give people the ability to opt out of it, at least in the short term. That is why some apps roll out features in beta and give users the option to opt in or out. This provides a sense of control that reduces peoples reactions.Finally, you can also provide guidance within the user interface itself. Tooltips and overlays can show users where features have been moved so new interface elements can be highlighted.Slack use tooltips to explain how their interface works.The key is to strike a balance. You must add needed improvements while causing minimal disruption to users workflows. You will also need to carefully monitor adoption and adapt accordingly.Change The Way We WorkThat constant monitoring and adaptation lies at the heart of digital product design. You cannot rely solely on the initial solution but must be prepared to continuously refine and iterate as user behavior and needs evolve.

Lush green slowly turning into yellows and reds in the Northern hemisphere; nature reawakening in the Southern part of the world: September is a time of change. A chance to leave old habits behind and embrace the beginning of something new. And, well, sometimes it only takes a small change in routines to spark fresh inspiration and, who knows, maybe even great ideas.With that in mind, we started our monthly wallpapers series more than 13 years ago, and from the very beginning to today, artists and designers from across the globe have submitted their designs to it to cater for a bit of variety on your screens every month. Of course, it wasnt any different this time around.In this post, youll find their wallpaper designs for September 2024. All of them come in versions with and without a calendar and can be downloaded for free. As a little bonus goodie, we also added some favorites from past years September editions to the collection. So maybe youll spot one of your almost-forgotten favorites in here, too? A huge thank-you to everyone who shared their wallpapers with us this month this post wouldnt exist without you!You can click on every image to see a larger preview,We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit a wallpaper!Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent.National Elephant Appreciation DayToday, we celebrate these magnificent creatures who play such a vital role in our ecosystems and cultures. Elephants are symbols of wisdom, strength, and loyalty. Their social bonds are strong, and their playful nature, especially in the young ones, reminds us of the importance of joy and connection in our lives. Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Summer In Costa RicaWe continue in tropical climates. In this case, we travel to Costa Rica to observe the Arenal volcano from the lake while we use a kayak. Designed by Veronica Valenzuela from Spain.previewwith calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Pigman And RobinDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160A Mind Of Their OwnMy eyes have a mind of their own: they see what they want to see Designed by Bhabna Basak from India.previewwith calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440More BananasDesigned by Ricardo Gimenes from Spain.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Quality Education For AllOur team takes pride in aligning our volunteer initiatives with the 2030 Agenda for Sustainable Developments Quality Education goal. This goal reflects a global commitment to ensure inclusive and equitable quality education and promote lifelong learning opportunities for all. We encourage our team members to volunteer with non-profits they care about year-round. Explore local opportunities and use your skills to make a meaningful impact! Designed by Jenna Finberg from Portland, OR.previewwith calendar: 320x480, 1024x1024, 1280x720, 1680x1200, 1920x1080, 2560x1440without calendar: 320x480, 1024x1024, 1280x720, 1680x1200, 1920x1080, 2560x1440Green JewelleryI was thinking about African bead necklaces when making this wallpaper. I chose green and warm colors, because summer has not ended in the north lets enjoy it. Designed by Philippe Brouard from France.previewwith calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160without calendar: 1024x768, 1366x768, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160Discover, Dream, Travel!Celebrate World Tourism Day by exploring new destinations and cultures around the globe! Designed by Reethu M from London.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Happy Labor DayI wanted my design to revolve around the themes of unity, hard work, and patriotism to honor the workforce that builds a great nation. The flags, the skyline, and the human figure outline evoke a sense of pride, appreciation, dedication, and solidarity. Designed by Cronix from the United States.previewwith calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880without calendar: 800x480, 800x600, 1024x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1440x960, 1600x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3072x1920, 3840x2160, 5120x2880Autumn RainsThis autumn, we expect to see a lot of rainy days and blues, so we wanted to change the paradigm and wish a warm welcome to the new season. After all, if you come to think of it: rain is not so bad if you have an umbrella and a raincoat. Come autumn, we welcome you! Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440TerrazzoWith the end of summer and fall coming soon, I created this terrazzo pattern wallpaper to brighten up your desktop. Enjoy the month! Designed by Melissa Bogemans from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Funny CatsCats are beautiful animals. Theyre quiet, clean, and warm. Theyre funny and can become an endless source of love and entertainment. Here for the cats! Designed by UrbanUI from India.previewwithout calendar: 360x640, 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1680x1200, 1920x1080Cacti EverywhereSeasons come and go, but our brave cactuses still stand. Summer is almost over and autumn is coming, but the beloved plants dont care. Designed by Lvia Lnrt from Hungary.previewwithout calendar: 320x480, 800x480, 1024x768, 1024x1024, 1280x1024, 1400x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Summer EndingAs summer comes to an end, all the creatures pull back to their hiding places, searching for warmth within themselves and dreaming of neverending adventures under the tinted sky of closing dog days. Designed by Ana Masnikosa from Belgrade, Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The RebelDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160National Video Games Day DelightSeptember 12th brings us National Video Games Day. US-based video game players love this day and celebrate with huge gaming tournaments. What was once a 2D experience in the home is now a global phenomenon with players playing against each other across statelines and national borders via the internet. National Video Games Day gives gamers the perfect chance to celebrate and socialize! So grab your controller, join online and let the games begin! Designed by Ever Increasing Circles from the United Kingdom.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Long Live SummerWhile Septembers Autumnal Equinox technically signifies the end of the summer season, this wallpaper is for all those summer lovers, like me, who dont want the sunshine, warm weather, and lazy days to end. Designed by Vicki Grunewald from Washington.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Flower SoulThe earth has music for those who listen. Take a break and relax and while you drive out the stress, catch a glimpse of the beautiful nature around you. Can you hear the rhythm of the breeze blowing, the flowers singing, and the butterflies fluttering to cheer you up? We dedicate flowers which symbolize happiness and love to one and all. Designed by Krishnankutty from India.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Stay Or Leave?Designed by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440HungryDesigned by Elise Vanoorbeek from Belgium.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1440x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Rainy FlowersDesigned by Teodora Vasileva from Bulgaria.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1280x720, 1280x960, 1280x1024, 1400x1050, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Science Is MagicScience is like magic, except its real. Designed by Bhabna Basak from India.previewwithout calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Listen Closer The Mushrooms Are GrowingIts this time of the year when children go to school and grown-ups go to collect mushrooms. Designed by Igor Izhik from Canada.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600BatmomDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Wine Harvest SeasonWelcome to the wine harvest season in Serbia. Its September, and the hazy sunshine bathes the vines on the slopes of Fruka Gora. Everything is ready for the making of Bermet, the most famous wine from Serbia. This spiced wine was a favorite of the Austro-Hungarian elite and was served even on the Titanic. Bermets recipe is a closely guarded secret, and the wine is produced by just a handful of families in the town of Sremski Karlovci, near Novi Sad. On the other side of Novi Sad, plains of corn and sunflower fields blend in with the horizon, catching the last warm sun rays of this year. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Bear TimeDesigned by Bojana Stojanovic from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1080, 1366x768, 1400x1050, 1440x990, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Maryland PrideAs summer comes to a close, so does the end of blue crab season in Maryland. Blue crabs have been a regional delicacy since the 1700s and have become Marylands most valuable fishing industry, adding millions of dollars to the Maryland economy each year. The blue crab has contributed so much to the states regional culture and economy, in 1989 it was named the State Crustacean, cementing its importance in Maryland history. Designed by The Hannon Group from Washington DC.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1280x960, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1440, 2560x1440Finding JaguarNature and our planet have given us life, enabled us to enjoy the most wonderful place known to us in the universe. People have given themselves the right to master something they do not fully understand. We dedicate this September calendar to a true nature lover, Vedran Badjun from Dalmatia, Croatia, who inspires us to love our planet, live in harmony with it and appreciate all that it has to offer. Amazon, Siberia, and every tree or animal on the planet are treasures we lose every day. Lets change that! Designed by PopArt Studio from Serbia.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440 Penguin FamilyPenguins are sociable, independent and able to survive harsh winters. They work as a team to care for their offspring and I love that! Designed by Glynnis Owen from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440Early AutumnSeptember is usually considered as early autumn so I decided to draw some trees and leaves. However, nobody likes that summer is coming to an end, thats why I kept summerish colors and style. Designed by Kat Gluszek from Germany.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440Summer Is LeavingIt is inevitable. Summer is leaving silently. Let us think of ways to make the most of what is left of the beloved season. Designed by Bootstrap Dashboards from India.previewwithout calendar: 360x640, 1024x768, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x900, 1680x1200, 1920x1080Lucha LibreThis month is Mexicos independence day and I decided to illustrate one of the things Mexicos best known for: the Lucha Libre. Designed by Maria Keller from Mexico.previewwithout calendar: 320x480, 640x480, 640x1136, 750x1334, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1242x2208, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2880x1800Geometric AutumnI designed this wallpaper to remind everyone that autumn is here. Designed by Advanced Web Ranking from Romania.previewwithout calendar: 800x600, 1024x768, 1280x800, 1280x1024, 1440x900, 1440x1050, 1600x1200, 1680x1200, 1920x1200, 1920x1440, 2560x1440Never Stop ExploringDesigned by Ricardo Gimenes from Spain.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Still In Vacation MoodIts officially the end of summer and Im still in vacation mood, dreaming about all the amazing places Ive seen. This illustration is inspired by a small town in France, on the Atlantic coast, right by the beach. Designed by Miruna Sfia from Romania.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1440x900, 1440x1050, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Colors Of SeptemberI love September. Its colors and smells. Designed by Juliagav from Ukraine.previewwithout calendar: 320x480, 1024x768, 1024x1024, 1280x800, 1280x1024, 1440x900, 1680x1050, 1920x1080, 2560x1440OfficeClean, minimalistic office for a productive day. Designed by Antun Hirman from Croatia.previewwithout calendar: 320x480, 800x600, 1280x720, 1280x1024, 1440x900, 1680x1050, 1920x1080, 1920x1440, 2560x1440

In Part 1 of this brief two-part series, we developed an application that turns images into audio descriptions using vision-language and text-to-speech models. We combined an image-to-text that analyses and understands images, generating description, with a text-to-speech model to create an audio description, helping people with sight challenges. We also discussed how to choose the right model to fit your needs.Now, we are taking things a step further. Instead of just providing audio descriptions, we are building that can have interactive conversations about images or videos. This is known as Conversational AI a technology that lets users talk to systems much like chatbots, virtual assistants, or agents.While the first iteration of the app was great, the output still lacked some details. For example, if you upload an image of a dog, the description might be something like a dog sitting on a rock in front of a pool, and the app might produce something close but miss additional details such as the dogs breed, the time of the day, or location.The aim here is simply to build a more advanced version of the previously built app so that it not only describes images but also provides more in-depth information and engages users in meaningful conversations about them. Well use LLaVA, a model that combines understanding images and conversational capabilities. After building our tool, well explore multimodal models that can handle images, videos, text, audio, and more, all at once to give you even more options and easiness for your applications.Visual Instruction Tuning and LLaVAWe are going to look at visual instruction tuning and the multimodal capabilities of LLaVA. Well first explore how visual instruction tuning can enhance the large language models to understand and follow instructions that include visual information. After that, well dive into LLaVA, which brings its own set of tools for image and video processing.Visual Instruction TuningVisual instruction tuning is a technique that helps large language models (LLMs) understand and follow instructions based on visual inputs. This approach connects language and vision, enabling AI systems to understand and respond to human instructions that involve both text and images. For example, Visual IT enables a model to describe an image or answer questions about a scene in a photograph. This fine-tuning method makes the model more capable of handling these complex interactions effectively. Theres a new training approach called LLaVAR that has been developed, and you can think of it as a tool for handling tasks related to PDFs, invoices, and text-heavy images. Its pretty exciting, but we wont dive into that since it is outside the scope of the app were making.Examples of Visual Instruction Tuning DatasetsTo build good models, you need good data rubbish in, rubbish out. So, here are two datasets that you might want to use to train or evaluate your multimodal models. Of course, you can always add your own datasets to the two Im going to mention. Vision-CAIRInstruction datasets: English;Multi-task: Datasets containing multiple tasks;Mixed dataset: Contains both human and machine-generated data.Vision-CAIR provides a high-quality, well-aligned image-text dataset created using conversations between two bots. This dataset was initially introduced in a paper titled MiniGPT-4: Enhancing Vision-Language Understanding with Advanced Large Language Models, and it provides more detailed image descriptions and can be used with predefined instruction templates for image-instruction-answer fine-tuning.There are more multimodal datasets out there, but these two should help you get started if you want to fine-tune your model.Lets Take a Closer Look At LLaVALLaVA (which stands for Large Language and Vision Assistant) is a groundbreaking multimodal model developed by researchers from the University of Wisconsin, Microsoft Research, and Columbia University. The researchers aimed to create a powerful, open-source model that could compete with the best in the field, just like GPT-4, Claude 3, or Gemini, to name a few. For developers like you and me, its open nature is a huge benefit, allowing for easy fine-tuning and integration.One of LLaVAs standout features is its ability to understand and respond to complex visual information, even with unfamiliar images and instructions. This is exactly what we need for our tool, as it goes beyond simple image descriptions to engage in meaningful conversations about the content. ArchitectureLLaVAs strength lies in its smart use of existing models. Instead of starting from scratch, the researchers used two key models:CLIP VIT-L/14This is an advanced version of the CLIP (Contrastive LanguageImage Pre-training) model developed by OpenAI. CLIP learns visual concepts from natural language descriptions. It can handle any visual classification task by simply being given the names of the visual categories, similar to the zero-shot capabilities of GPT-2 and GPT-3.VicunaThis is an open-source chatbot trained by fine-tuning LLaMA on 70,000 user-shared conversations collected from ShareGPT. Training Vicuna-13B costs around $300, and it performs exceptionally well, even when compared to other models like Alpaca.These components make LLaVA highly effective by combining state-of-the-art visual and language understanding capabilities into a single powerful model, perfectly suited for applications requiring both visual and conversational AI. TrainingLLaVAs training process involves two important stages, which together enhance its ability to understand user instructions, interpret visual and language content, and provide accurate responses. Lets detail what happens in these two stages:Pre-training for Feature AlignmentLLaVA ensures that its visual and language features are aligned. The goal here is to update the projection matrix, which acts as a bridge between the CLIP visual encoder and the Vicuna language model. This is done using a subset of the CC3M dataset, allowing the model to map input images and text to the same space. This step ensures that the language model can effectively understand the context from both visual and textual inputs.End-to-End Fine-TuningThe entire model undergoes fine-tuning. While the visual encoders weights remain fixed, the projection layer and the language model are adjusted. The second stage is tailored to specific application scenarios:Instructions-Based Fine-TuningFor general applications, the model is fine-tuned on a dataset designed for following instructions that involve both visual and textual inputs, making the model versatile for everyday tasks.Scientific reasoningFor more specialized applications, particularly in science, the model is fine-tuned on data that requires complex reasoning, helping the model excel at answering detailed scientific questions.Now that were keen on what LLaVA is and the role it plays in our applications, lets turn our attention to the next component we need for our work, Whisper.Using Whisper For Text-To-SpeechIn this chapter, well check out Whisper, a great model for turning text into speech. Whisper is accurate and easy to use, making it perfect for adding natural-sounding voice responses to our app. Weve used Whisper in a different article, but here, were going to use a new version large v3. This updated version of the model offers even better performance and speed.Whisper large-v3Whisper was developed by OpenAI, which is the same folks behind ChatGPT. Whisper is a pre-trained model for automatic speech recognition (ASR) and speech translation. The original Whisper was trained on 680,000 hours of labeled data.Now, whats different with Whisper large-v3 compared to other models? In my experience, it comes down to the following:Better inputsWhisper large-v3 uses 128 Mel frequency bins instead of 80. Think of Mel frequency bins as a way to break down audio into manageable chunks for the model to process. More bins mean finer detail, which helps the model better understand the audio.More trainingThis specific Whisper version was trained on 1 million hours of weakly labeled audio and 4 million hours of pseudo-labeled audio that was collected from Whisper large-v2. From there, the model was trained for 2.0 epochs over this mix.Whisper models come in different sizes, from tiny to large. Heres a table comparing the differences and similarities: Size Parameters English-only Multilingual tiny 39 M base 74 M small 244 M medium 769 M large 1550 M large-v2 1550 M large-v3 1550 M Integrating LLaVA With Our AppAlright, so were going with LLaVA for image inputs, and this time, were adding video inputs, too. This means the app can handle both images and videos, making it more versatile.Were also keeping the speech feature so you can hear the assistants replies, which makes the interaction even more engaging. How cool is that?For this, well use Whisper. Well stick with the Gradio framework for the apps visual layout and user interface. You can, of course, always swap in other models or frameworks the main goal is to get a working prototype.Installing and Importing the LibrariesWe will start by installing and importing all the required libraries. This includes the transformers libraries for loading the LLaVA and Whisper models, bitsandbytes for quantization, gtts, and moviepy to help in processing video files, including frame extraction.#python!pip install -q -U transformers==4.37.2!pip install -q bitsandbytes==0.41.3 accelerate==0.25.0!pip install -q git+https://github.com/openai/whisper.git!pip install -q gradio!pip install -q gTTS!pip install -q moviepyWith these installed, we now need to import these libraries into our environment so we can use them. Well use colab for that:#pythonimport torchfrom transformers import BitsAndBytesConfig, pipelineimport whisperimport gradio as grfrom gtts import gTTSfrom PIL import Imageimport reimport osimport datetimeimport localeimport numpy as npimport nltkimport moviepy.editor as mpnltk.download('punkt')from nltk import sent_tokenize# Set up localeos.environ["LANG"] = "en_US.UTF-8"os.environ["LC_ALL"] = "en_US.UTF-8"locale.setlocale(locale.LC_ALL, 'en_US.UTF-8')Configuring Quantization and Loading the ModelsNow, lets set up a 4-bit quantization to make the LLaVA model more efficient in terms of performance and memory usage.#python# Configuration for quantizationquantization_config = BitsAndBytesConfig( load_in_4bit=True, bnb_4bit_compute_dtype=torch.float16)# Load the image-to-text modelmodel_id = "llava-hf/llava-1.5-7b-hf"pipe = pipeline("image-to-text", model=model_id, model_kwargs={"quantization_config": quantization_config})# Load the whisper modelDEVICE = "cuda" if torch.cuda.is_available() else "cpu"model = whisper.load_model("large-v3", device=DEVICE)In this code, weve configured the quantization to four bits, which reduces memory usage and improves performance. Then, we load the LLaVA model with these settings. Finally, we load the whisper model, selecting the device based on GPU availability for better performance.Note: Were using llava-v1.5-7b as the model. Please feel free to explore other versions of the model. For Whisper, were loading the large size, but you can also switch to another size like medium or small for your experiments.To get our assistant up and running, we need to implement five essential functions:Handling conversations,Converting images to text,Converting videos to text,Transcribing audio,Converting text to speech.Once these are in place, we will create another function to tie all this together seamlessly. The following sections provide the code that defines each function.Conversation HistoryWell start by setting up the conversation history and a function to log it:#python# Initialize conversation historyconversation_history = []def writehistory(text): """Write history to a log file.""" tstamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S") logfile = f'{tstamp}_log.txt' with open(logfile, 'a', encoding='utf-8') as f: f.write(text + '\n')Image to TextNext, well create a function to convert images to text using LLaVA and iterative prompts.#pythondef img2txt(input_text, input_image): """Convert image to text using iterative prompts.""" try: image = Image.open(input_image) if isinstance(input_text, tuple): input_text = input_text[0] # Take the first element if it's a tuple writehistory(f"Input text: {input_text}") prompt = "USER: <image>\n" + input_text + "\nASSISTANT:" while True: outputs = pipe(image, prompt=prompt, generate_kwargs={"max_new_tokens": 200}) if outputs and outputs[0]["generated_text"]: match = re.search(r'ASSISTANT:\s*(.*)', outputs[0]["generated_text"]) reply = match.group(1) if match else "No response found." conversation_history.append(("User", input_text)) conversation_history.append(("Assistant", reply)) prompt = "USER: " + reply + "\nASSISTANT:" return reply # Only return the first response for now else: return "No response generated." except Exception as e: return str(e)Video to TextWell now create a function to convert videos to text by extracting frames and analyzing them.#pythondef vid2txt(input_text, input_video): """Convert video to text by extracting frames and analyzing.""" try: video = mp.VideoFileClip(input_video) frame = video.get_frame(1) # Get a frame from the video at the 1-second mark image_path = "temp_frame.jpg" mp.ImageClip(frame).save_frame(image_path) return img2txt(input_text, image_path) except Exception as e: return str(e)Audio TranscriptionLets add a function to transcribe audio to text using Whisper.#pythondef transcribe(audio_path): """Transcribe audio to text using Whisper model.""" if not audio_path: return '' audio = whisper.load_audio(audio_path) audio = whisper.pad_or_trim(audio) mel = whisper.log_mel_spectrogram(audio).to(model.device) options = whisper.DecodingOptions() result = whisper.decode(model, mel, options) return result.textText to SpeechLastly, we create a function to convert text responses into speech.#pythondef text_to_speech(text, file_path): """Convert text to speech and save to file.""" language = 'en' audioobj = gTTS(text=text, lang=language, slow=False) audioobj.save(file_path) return file_pathWith all the necessary functions in place, we can create the main function that ties everything together:#pythondef chatbot_interface(audio_path, image_path, video_path, user_message): """Process user inputs and generate chatbot response.""" global conversation_history # Handle audio input if audio_path: speech_to_text_output = transcribe(audio_path) else: speech_to_text_output = "" # Determine the input message input_message = user_message if user_message else speech_to_text_output # Ensure input_message is a string if isinstance(input_message, tuple): input_message = input_message[0] # Handle image or video input if image_path: chatgpt_output = img2txt(input_message, image_path) elif video_path: chatgpt_output = vid2txt(input_message, video_path) else: chatgpt_output = "No image or video provided." # Add to conversation history conversation_history.append(("User", input_message)) conversation_history.append(("Assistant", chatgpt_output)) # Generate audio response processed_audio_path = text_to_speech(chatgpt_output, "Temp3.mp3") return conversation_history, processed_audio_pathUsing Gradio For The InterfaceThe final piece for us is to create the layout and user interface for the app. Again, were using Gradio to build that out for quick prototyping purposes.#python# Define Gradio interfaceiface = gr.Interface( fn=chatbot_interface, inputs=[ gr.Audio(type="filepath", label="Record your message"), gr.Image(type="filepath", label="Upload an image"), gr.Video(label="Upload a video"), gr.Textbox(lines=2, placeholder="Type your message here...", label="User message (if no audio)") ], outputs=[ gr.Chatbot(label="Conversation"), gr.Audio(label="Assistant's Voice Reply") ], title="Interactive Visual and Voice Assistant", description="Upload an image or video, record or type your question, and get detailed responses.")# Launch the Gradio appiface.launch(debug=True)Here, we want to let users record or upload their audio prompts, type their questions if they prefer, upload videos, and, of course, have a conversation block.Heres a preview of how the app will look and work:Looking Beyond LLaVALLaVA is a great model, but there are even greater ones that dont require a separate ASR model to build a similar app. These are called multimodal or any-to-any models. They are designed to process and integrate information from multiple modalities, such as text, images, audio, and video. Instead of just combining vision and text, these models can do it all: image-to-text, video-to-text, text-to-speech, speech-to-text, text-to-video, and image-to-audio, just to name a few. It makes everything simpler and less of a hassle.Examples of Multimodal Models that Handle Images, Text, Audio, and MoreNow that we know what multimodal models are, lets check out some cool examples. You may want to integrate these into your next personal project.CoDiSo, the first on our list is CoDi or Composable Diffusion. This model is pretty versatile, not sticking to any one type of input or output. It can take in text, images, audio, and video and turn them into different forms of media. Imagine it as a sort of AI thats not tied down by specific tasks but can handle a mix of data types seamlessly.CoDi was developed by researchers from the University of North Carolina and Microsoft Azure. It uses something called Composable Diffusion to sync different types of data, like aligning audio perfectly with the video, and it can generate outputs that werent even in the original training data, making it super flexible and innovative. ImageBindNow, lets talk about ImageBind, a model from Meta. This model is like a multitasking genius, capable of binding together data from six different modalities all at once: images, video, audio, text, depth, and even thermal data.Source: Meta AI. (Large preview)ImageBind doesnt need explicit supervision to understand how these data types relate. Its great for creating systems that use multiple types of data to enhance our understanding or create immersive experiences. For example, it could combine 3D sensor data with IMU data to design virtual worlds or enhance memory searches across different media types.GatoGato is another fascinating model. Its built to be a generalist agent that can handle a wide range of tasks using the same network. Whether its playing games, chatting, captioning images, or controlling a robot arm, Gato can do it all.The key thing about Gato is its ability to switch between different types of tasks and outputs using the same model. GPT-4oThe next on our list is GPT-4o; GPT-4o is a groundbreaking multimodal large language model (MLLM) developed by OpenAI. It can handle any mix of text, audio, image, and video inputs and give you text, audio, and image outputs. Its super quick, responding to audio inputs in just 232ms to 320ms, almost like a real conversation.Theres a smaller version of the model called GPT-4o Mini. Small models are becoming a trend, and this one shows that even small models can perform really well. Check out this evaluation to see how the small model stacks up against other large models. ConclusionWe covered a lot in this article, from setting up LLaVA for handling both images and videos to incorporating Whisper large-v3 for top-notch speech recognition. We also explored the versatility of multimodal models like CoDi or GPT-4o, showcasing their potential to handle various data types and tasks. These models can make your app more robust and capable of handling a range of inputs and outputs seamlessly.Which model are you planning to use for your next app? Let me know in the comments!

JavaScript comes with a lot of built-in functions that allow you to carry out so many different operations. One of these built-in functions is the Math.random() method, which generates a random floating-point number that can then be manipulated into integers.However, if you wish to generate a series of unique random numbers and create more random effects in your code, you will need to come up with a custom solution for yourself because the Math.random() method on its own cannot do that for you.In this article, were going to be learning how to circumvent this issue and generate a series of unique random numbers using the Set object in JavaScript, which we can then use to create more randomized effects in our code.Note: This article assumes that you know how to generate random numbers in JavaScript, as well as how to work with sets and arrays.Generating a Unique Series of Random NumbersOne of the ways to generate a unique series of random numbers in JavaScript is by using Set objects. The reason why were making use of sets is because the elements of a set are unique. We can iteratively generate and insert random integers into sets until we get the number of integers we want.And since sets do not allow duplicate elements, they are going to serve as a filter to remove all of the duplicate numbers that are generated and inserted into them so that we get a set of unique integers.Heres how we are going to approach the work:Create a Set object.Define how many random numbers to produce and what range of numbers to use.Generate each random number and immediately insert the numbers into the Set until the Set is filled with a certain number of them.The following is a quick example of how the code comes together:function generateRandomNumbers(count, min, max) { // 1: Create a Set object let uniqueNumbers = new Set(); while (uniqueNumbers.size < count) { // 2: Generate each random number uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min); } // 3: Immediately insert them numbers into the Set... return Array.from(uniqueNumbers);}// ...set how many numbers to generate from a given rangeconsole.log(generateRandomNumbers(5, 5, 10));What the code does is create a new Set object and then generate and add the random numbers to the set until our desired number of integers has been included in the set. The reason why were returning an array is because they are easier to work with.One thing to note, however, is that the number of integers you want to generate (represented by count in the code) should be less than the upper limit of your range plus one (represented by max + 1 in the code). Otherwise, the code will run forever. You can add an if statement to the code to ensure that this is always the case:function generateRandomNumbers(count, min, max) { // if statement checks that count is less than max + 1 if (count > max + 1) { return "count cannot be greater than the upper limit of range"; } else { let uniqueNumbers = new Set(); while (uniqueNumbers.size < count) { uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min); } return Array.from(uniqueNumbers); }}console.log(generateRandomNumbers(5, 5, 10));Using the Series of Unique Random Numbers as Array IndexesIt is one thing to generate a series of random numbers. Its another thing to use them.Being able to use a series of random numbers with arrays unlocks so many possibilities: you can use them in shuffling playlists in a music app, randomly sampling data for analysis, or, as I did, shuffling the tiles in a memory game.Lets take the code from the last example and work off of it to return random letters of the alphabet. First, well construct an array of letters:const englishAlphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// rest of codeThen we map the letters in the range of numbers:const englishAlphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// generateRandomNumbers()const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);In the original code, the generateRandomNumbers() function is logged to the console. This time, well construct a new variable that calls the function so it can be consumed by randomAlphabets:const englishAlphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// generateRandomNumbers()const randomIndexes = generateRandomNumbers(5, 0, 25);const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);Now we can log the output to the console like we did before to see the results:const englishAlphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// generateRandomNumbers()const randomIndexes = generateRandomNumbers(5, 0, 25);const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);console.log(randomAlphabets);And, when we put the generateRandomNumbers`()` function definition back in, we get the final code:const englishAlphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];function generateRandomNumbers(count, min, max) { if (count > max + 1) { return "count cannot be greater than the upper limit of range"; } else { let uniqueNumbers = new Set(); while (uniqueNumbers.size < count) { uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min); } return Array.from(uniqueNumbers); }}const randomIndexes = generateRandomNumbers(5, 0, 25);const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);console.log(randomAlphabets);So, in this example, we created a new array of alphabets by randomly selecting some letters in our englishAlphabets array.You can pass in a count argument of englishAlphabets.length to the generateRandomNumbers function if you desire to shuffle the elements in the englishAlphabets array instead. This is what I mean:generateRandomNumbers(englishAlphabets.length, 0, 25);Wrapping UpIn this article, weve discussed how to create randomization in JavaScript by covering how to generate a series of unique random numbers, how to use these random numbers as indexes for arrays, and also some practical applications of randomization.The best way to learn anything in software development is by consuming content and reinforcing whatever knowledge youve gotten from that content by practicing. So, dont stop here. Run the examples in this tutorial (if you havent done so), play around with them, come up with your own unique solutions, and also dont forget to share your good work. Ciao!

Typography is much more than just text on a page it forms the core of your design. As a designer, I always approach selecting types from two angles: as a creative adventure and as a technical challenge.Choosing the right typeface for a company, product, or service is an immensely important task. At that moment, youre not only aligning with the brands identity but also laying the foundation to reinforce the company or services brand. Finding the right typeface can be a time-consuming process that often begins with an endless search. During this search, you can get tangled up in the many different typefaces, which, over time, all start to look the same.In this article, I aim to provide you with the essential background and tools to enhance your typography journey and apply this knowledge to your logo design. We will focus on three key pillars:Font ChoiceFont WeightLetter SpacingWe will travel back in time to uncover the origins of various typefaces. By exploring different categories, we will illustrate the distinctions with examples and describe the unique characteristics of each category.Additionally, we will discuss the different font weights and offer advice on when to use each variant. We will delve into letter-spacing and kerning, explaining what they are and how to effectively apply them in your logo designs.Finally, we will examine how the right typeface choices can significantly influence the impact and success of a brand. With this structured approach, I will show you how to create a logo that is not only expressive but also purposeful and well-thought-out.Understanding Typography in Logo DesignFrom the invention of the Gutenberg press in the mid-15th century through the creation of the first Slab Serif in 1815 and the design of the first digital typeface in 1968, the number of available fonts has grown exponentially. Today, websites like WhatFontIs, a font finder platform, catalogs over a million fonts.So, the one downside of not being born in the 15th century is that your task of choosing the right font has grown enormously. And once youve made the right choice out of a million-plus fonts, there are still many pitfalls to watch out for. Fortunately for us, all these fonts have already been categorized. In this article, we refer to the following four categories: serif, sans serif, script, and display typefaces. But why do we have these categories, and how do we benefit from them today?Each category has its specific uses. Serif typefaces are often used for books due to their enhancement of readability on paper, while sans serif typefaces are ideal for screens because of their clean lines. Different typefaces also evoke different emotions: for example, script can convey elegance, while sans serif offers a more modern look. Additionally, typeface categories have a rich history, with Old Style Serifs inspired by Roman inscriptions and Modern Serifs designed for greater contrast.Today, these categories provide a fundamental basis for choosing the right typeface for any project.As mentioned, different typefaces evoke different emotions; like people, they convey distinct characteristics:Serif fonts are seen as traditional and trustworthy;Sans Serif fonts are seen as modern and clear;Script fonts can come across as elegant and/or informal depending on the style;Display fonts are often bold and dynamic.Historically, typefaces reflected cultural identities, but the new typography movement sought a universal style. Designers emphasized that typefaces should match the character of the text, a view also supported by the Bauhaus school.Different Fonts And Their CharacteristicsWe have touched upon the history of different typeface categories. Now, to make a good font choice, we need to explore these categories and see what sets them apart, as each one has specific characteristics. In this article, we refer to the following four categories:Lets take a closer look at each category.A serif typeface is a typeface that features small lines or decorative elements at the ends of the strokes. These small lines are called serifs.A sans-serif typeface is a typeface that lacks the small lines or decorative elements at the ends of the strokes, resulting in a clean and modern appearance. The term sans-serif comes from the French word sans, meaning without, so sans-serif translates to without serif.A script typeface is a typeface that mimics the fluid strokes of handwriting or calligraphy, featuring connected letters and flowing strokes for an elegant or artistic appearance.A display typeface is a typeface designed for large sizes, such as headlines or titles, characterized by bold, decorative elements that make a striking visual impact.Typeface Persona in PracticeExperts link typeface characteristics to physical traits. Sans serif faces are perceived as cleaner and more modern, while rounded serifs are friendly and squared serifs are more official. Light typefaces are seen as delicate and feminine, and heavy ones are seen as strong and masculine. Some typefaces are designed to be child-friendly with smoother shapes. Traditional serifs are often considered bookish, while sans serifs are seen as modern and no-nonsense.Based on the provided context, we can assign the following characteristics per category: Serif: Bookish, Traditional, Serious, Official, Respectable, Trustworthy.Sans Serif: Clean, Modern, Technical, No-nonsense, Machine-like, Clear.Script: Elegant, Informal, Feminine, Friendly, Flowing.Display: Dramatic, Sophisticated, Urban, Theatrical, Bold, Dynamic.Let me provide you with a real real-life logo example to help visualize how different typeface categories convey these characteristics. Were focusing on ING, a major bank headquartered in the Netherlands. Before we dive into the logo itself, lets first zoom in on some brand values. On their website, it is stated that they value integrity above all and will not ignore, tolerate, or excuse behavior that breaches our values. To do so would break the trust of society and the trust of the thousands of colleagues who do the right thing.Given the strong emphasis on integrity, trust, and adherence to values, the most suitable typeface category would likely be a serif.The serif font in the ING logo conveys a sense of authority, professionalism, and experience associated with the brand.Lets choose a different font for the logo. The font used in the example is Poppins Bold, a geometric sans-serif typeface.The sans-serif typeface in this version of the ING logo conveys modernity, simplicity, and accessibility. These are all great traits for a company to convey, but they align less with the brands chosen values of integrity, trust, and adherence to tradition. A serif typeface often represents these traits more effectively. While the sans-serif version of the logo may be more accessible and modern, it could also convey a sense of casualness that misaligns with the brands values.So lets see these traits in action with a game called Assign the Trait. The rules are simple: you are shown two different fonts, and you choose which font best represents the given trait.Understanding these typeface personas is crucial when aligning typography with a companys brand identity. The choice of typeface should reflect and reinforce the brands characteristics and values, ensuring a cohesive and impactful visual identity.We covered a lot of ground, and I hope you now have a better understanding of different typeface categories and their characteristics. I also hope that the little game of Assign the Trait has given you a better grasp of the differences between them. This game would also be great to play while youre walking your dog or going for a run. See a certain logo on the back of a lorry? Which typeface category does it belong to, and what traits does it convey?Now, lets further explore the importance of aligning the typeface with the brand identity.Brand Identity and ConsistencyThe most important aspect when choosing a typeface is that it aligns with the companys brand identity. We have reviewed various typeface options, and each has its unique characteristics. You can link these characteristics to those of the company.As discussed in the previous section, a sans-serif is more modern and no-nonsense. So, for a modern company, a sleek sans-serif typeface often fits better than a classic Serif typeface. In the previous section, we examined the ING logo and how the use of a sans-serif typeface gave it a more modern appearance, but it also reduced the emphasis on certain traits that ING wants to convey with its brand.To further illustrate the impact of typeface on logo design, lets explore some more extreme examples.Our first Extreme example is Haribo, which is an iconic gummy candy brand. They use a custom sans-serif typeface. Lets zoom in on a couple of characteristics of the typeface and explore why this is a great match for the brand.Playfulness: The rounded, bold shapes give the logo a playful and child-friendly feel, aligning with its target audience of children and families.Simplicity: The simple, easily readable sans-serif design makes it instantly recognizable and accessible.Friendliness: The soft, rounded edges of the letters convey a sense of friendliness and positivity.The second up is Fanta, a global soft drink brand that also uses a custom sans-serif typeface. Handcrafted, Cut-Paper Aesthetic: The letters are crafted to appear as though theyve been cut from paper, giving the typeface a distinct, hand-made look that adds warmth and creativity.Expressive: The logo design is energetic and packed with personality, perfectly embodying Fantas fun, playful, and youthful vibe.Using these extreme cases, we can really see the power that a well-aligned typeface can have. Both cases embody the fun and friendly values of the brand. While the nuances may be more subtle in other cases, the power is still there.Now, lets delve deeper into the different typefaces and also look at weight, style, and letter spacing.Elements of Typography in Logo DesignNow that we have a background of the different typeface categories, lets zoom in on three other elements of typography in logo design:TypefacesWeight and StyleLetter-spacingTypefacesEach category of typefaces has a multitude of options. The choice of the right typeface is crucial and perhaps the most important decision when designing a logo. Its important to realize that often, there isnt a single best choice. To illustrate, we have four variations of the Adidas logo below. Each typeface could be considered a good choice. Its crucial not to get fixated on finding the perfect typeface. Instead, ensure it aligns with the brand identity and looks good in practical use.These four typefaces could arguably all be great choices for the Adidas brand, as they each possess the clean, bold, and sans-serif qualities that align with the brands values of innovation, courage, and ownership. While the details of typeface selection are important, its essential not to get overly fixated on them. The key is to ensure that the typeface resonates with the brands identity and communicates its core values effectively. Ultimately, the right typeface is one that not only looks good but also embodies the spirit and essence of the brand.Lets zoom in on the different weights and styles each typeface offers.Weight and StyleEach typeface can range from 1 to more than 10 different styles, including choices such as Roman and Italic and various weights like Light, Regular, Semi-Bold, and Bold.Personally, I often lean towards a Roman in Semi-Bold or Bold variant, but this choice heavily depends on the desired appearance, brand name, and brand identity. So, how do you know which font weight to choose? When to choose bold fontsBrand IdentityIf the brand is associated with strength, confidence, and modernity, bold fonts can effectively communicate these attributes.Visibility and ReadabilityBold fonts are easy to read from a distance, making them perfect for signage, billboards, and other large formats.Minimalist DesignUsing bold fonts in minimalist logos not only ensures that the logo stands out but also aligns with the principles of minimalism, where less is more.Letter-spacing & KerningAn important aspect of typography is overall word spacing, also known as tracking. This refers to the overall spacing between characters in a block of text. By adjusting the tracking in logo design, we can influence the overall look of the logo. We can make a logo more spacious and open or more compact and tight with minimal adjustments.Designer and design educator Ellen Lupton states that kerning adjusts the spacing between individual characters in a typeface to ensure visual uniformity. When letters are spaced too uniformly, gaps can appear around certain letters like W, Y, V, T, and L. Modern digital typefaces use kerning pairs tables to control these spaces and create a more balanced look.Tracking and kerning are often confused. To clarify, tracking (letter-spacing) adjusts the space between all letters uniformly, while kerning specifically involves adjusting the distance between individual pairs of letters to improve the readability and aesthetics of the text.In the example shown below, we observe the concept of kerning in typography. The middle instance of LEAF displays the word without any kerning adjustments, where the spacing between each letter is uniform and unaltered.In the first LEAF, kerning adjustments have been applied between the letters A and F, reducing the space between them to create a more visually appealing and cohesive pair. In the last LEAF, kerning has been applied differently, adjusting the space between E and A. This alteration shifts the visual balance of the word, showing how kerning can change the aesthetics and readability of text (or logo) by fine-tuning the spacing between individual letter pairs.Essential Techniques for Selecting TypefacesMatching Typeface Characteristics with Brand IdentityAs we discussed earlier, different categories of typefaces have unique characteristics that can align well with, or deviate from, the brand identity you want to convey. This is a great starting point on which to base your initial choice.InspirationA large part of the creative process is seeking inspiration. Especially now that youve been able to make a choice regarding category, its interesting to see the different typefaces in action. This helps you visualize what does and doesnt work for your brand. Below, I share a selection of my favorite inspiration sources:Fonts in UseMaxiBestOfTypewolfSaveeFont in LogoTrust the CrowdSome typefaces are used more frequently than others. Therefore, choosing typefaces that have been tried and tested over the years is a good starting point. Its important to distinguish between a popular typeface and a trendy one. In this context, I refer to typefaces that have been popular for a long time. Lets break down some of these typefaces. HelveticaOne of the most well-known typefaces is Helvetica, renowned for its intrinsic legibility and clarity since its 1957 debut. Helveticas tall x-height, open counters, and neutral letterforms allow it to lend a clean and professional look to any logo. Some well-known brands that use Helvetica are BMW, Lufthansa, and Nestl.FuturaFutura) has been helping brands convey their identity for almost a century. Designed in 1927, it is celebrated for its geometric simplicity and modernist design. Futuras precise and clean lines give it a distinctive and timeless look.Some well-known brands that use Futura are Louis Vuitton, Red Bull, and FedEx.That said, you naturally have all the creative freedom, and making a bold choice can turn out fantastic, especially for brands where this is desirable.Twos Company, Threes a CrowdCombining typefaces is a challenging task. But if you want to create a logo with two different typefaces, make sure there is enough contrast between the two. For example, combine a serif with a sans-serif. If the two typefaces look too similar, its better to stick to one typeface. That said, I would never choose more than two typefaces for your logo.Lets Build a Brand LogoNow that weve gone through the above steps, it seems a good time for a practical example. Theory is useful, but only when you put it into practice will you notice that you become more adept at it.TIP: Try creating a text logo yourself. First, well need to do a company briefing where we come up with a name, define various characteristics, and create a brand identity. This is a great way to get to know your fictional brand.Bonus challenge: If you want to go one step further, you can also include a logo mark in the briefing. In the following steps, we are going to choose a typeface that suits the brands identity and characteristics. For an added challenge, include the logo mark at the start so the typeface has to match your logo mark as well. You can find great graphics at Iconfinder.Company BriefingCompany Name: EcoWaveCharacteristics:Sustainable and eco-friendly products.Innovative technologies focused on energy saving.Wide range of ecological solutions.Focus on quality and reliability.Promotion of a green lifestyle.Dedicated to addressing marine pollution.Brand Identity: EcoWave is committed to a greener future. We provide sustainable and eco-friendly products that are essential for a better environment. Our advanced technologies and high-quality solutions enable customers to save energy and minimize their ecological footprint. EcoWave is more than just a brand; we represent a movement towards a more sustainable world with a special focus on combating marine pollution.Keyword: SustainabilityNow that weve been briefed, we can start with the following steps:Identify key characteristics: Compile the top three defining characteristics of the company. You can add related words to each characteristic for more detail.Match the characteristics: Try to match these characteristics with the characteristics of the typeface category.Get inspired: Check the suggested links for inspiration and search for Sans-Serif fonts, for example. Look at popular fonts, but also search for fonts that fit what you want to convey about the brand (create a mood board).Make a preliminary choice: Use the gathered information to make an initial choice for the typeface. Adjust the weight and letter spacing until you are satisfied with the design of your logo.Evaluate your design: You now have the first version of your logo. Try it out on different backgrounds and photos that depict the desired look of the company. Assess whether it fits the intended identity and whether you are satisfied with the look. Not satisfied? Go back to your mood board and try a different typeface.Lets go over the steps for EcoWave:1. Sustainable, Trustworthy, Innovative.2. The briefing and brand focus primarily on innovation. When we match this aspect with the characteristics of typefaces, everything points to a Sans-Serif font, which offers a modern and innovative look.3. Example Mood Board4. Ultimately, I chose the IBM Plex Sans typeface. This modern, sans-serif typeface offers a fresh and contemporary look. It fits excellently with the innovative and sustainable characteristics of EcoWave. Below are the steps from the initial choice to the final result:IBM Plex Sans RegularIBM Plex Sans BoldIBM Plex Sans Bold & Custom letter-spacingIBM Plex Sans Bold & Custom edges5. Here, you see the typeface in action. For me, this is a perfect match with the brands identity. The look feels just right.Expert Insights and Trends in Typographic Logo DesignThose interested in typography might find The Elements of Typographic Style by Robert Bringhurst insightful. In this section, I want to share an interesting part about the importance of choosing a typeface that suits the specific task.Choose faces that suit the task as well as the subject. You are designing, let us say, a book about bicycle racing. You have found in the specimen books a typeface called Bicycle, which has spokes in the O, an A in the shape of a racing seat, a T that resembles a set of racing handlebars, and tiny cleated shoes perched on the long, one-sided serifs of ascenders and descenders, like pumping feet on the pedals. Surely this is the perfect face for your book?Actually, typefaces and racing bikes are very much alike. Both are ideas as well as machines, and neither should be burdened with excess drag or baggage. Pictures of pumping feet will not make the type go faster, any more than smoke trails, pictures of rocket ships, or imitation lightning bolts tied to the frame will improve the speed of the bike.The best type for a book about bicycle racing will be, first of all, an inherently good type. Second, it will be a good type for books, which means a good type for comfortable long-distance reading. Third, it will be a type sympathetic to the theme. It will probably be lean, strong, and swift; perhaps it will also be Italian. But it is unlikely to be carrying excess ornament or freight and unlikely to be indulging in a masquerade. Robert BringhurstAs Robert Bringhurst illustrates, choosing a typeface should be appropriate not only for the subject but also for the specific task. What lessons can we draw from this for our typeface choice in our logo?Functional and Aesthetic ConsiderationsThe typeface must be legible in various sizes and on different mediums, from business cards to billboards. A well-designed logo should be easy to reproduce without loss of clarity.Brand IdentitySuppose we have a brand in the bicycle industry, an innovative and modern company. In Robert Bringhursts example, we choose the typeface Bicycle, which, due to its name, seems to perfectly match bicycles. However, the typeface described by Robert is a serif font with many decorative elements, which does not align with the desired modern and innovative look of our brand. Therefore, this would be a mismatch.TrendsStyles come and go. Good design is a language, not a style.In this part, we discuss some new trends. However, it is also important to highlight the above quote. The basic principles we mention have been applicable for a long time and will continue to be. It can be both fun and challenging to follow the latest trends, but it is essential to integrate them with your basic principles.Minimalism and SimplicityMinimalism in Logo Design remains one of the major trends this year. The most characteristic aspect of this style is to limit the logo to the most essential elements. This creates a clear and timeless character. In typography, this is beneficial for readability and, at the same time, effectively communicating the brand identity in a timeless manner. We also see this well reflected in the rebranding of the fast-food chain Ashton.Customization and UniquenessAnother growing trend is customization in typography, where designers create personalized typefaces or modify existing typefaces to give the brand a unique look. This can range from subtle adjustments in letterforms to developing a completely custom typeface. Such an approach can contribute to a distinctive visual identity. A good example of this can be seen in the Apex logo, where the A and e are specifically adjusted.ConclusionWe now know that choosing the right typeface for a logo goes beyond personal taste. It has a significant impact on how powerful and recognizable a brand becomes. In this article, we have seen that finding the perfect typeface is a challenge that requires both creativity and a practical approach. With a strong focus on three key aspects:Font choice,Font weight,Letter spacing.We have seen that finding the right typeface can be a quest, and personal preferences certainly play a role, but with the right tools, this process can be made much easier. The goal is to create a logo that is not only beautiful but also truly adds value by resonating with the people you want to reach and strengthening the brands key values.We also looked at how trends can influence the longevity of your logo. It is important to be trendy, but it is equally important to remain true to timeless principles.In summary,Truly understanding both the technical details and the emotional impact of typefaces is enormously important for designing a logo. This knowledge helps to develop brands that not only look good but also have a deeper strategic impact a strong brand.And for those of you who are interested in diving deeper, Ive tried to capture the fundamentals weve discussed in this article, focusing on good typeface choices, font weights, and letter spacing in a tool huisstijl. While its not perfect yet, I hope it can help some people create a simple brand identity that they love.

Modern JavaScript regular expressions have come a long way compared to what you might be familiar with. Regexes can be an amazing tool for searching and replacing text, but they have a longstanding reputation (perhaps outdated, as Ill show) for being difficult to write and understand.This is especially true in JavaScript-land, where regexes languished for many years, comparatively underpowered compared to their more modern counterparts in PCRE, Perl, .NET, Java, Ruby, C++, and Python. Those days are over.In this article, Ill recount the history of improvements to JavaScript regexes (spoiler: ES2018 and ES2024 changed the game), show examples of modern regex features in action, introduce you to a lightweight JavaScript library that makes JavaScript stand alongside or surpass other modern regex flavors, and end with a preview of active proposals that will continue to improve regexes in future versions of JavaScript (with some of them already working in your browser today).The History of Regular Expressions in JavaScriptECMAScript 3, standardized in 1999, introduced Perl-inspired regular expressions to the JavaScript language. Although it got enough things right to make regexes pretty useful (and mostly compatible with other Perl-inspired flavors), there were some big omissions, even then. And while JavaScript waited 10 years for its next standardized version with ES5, other programming languages and regex implementations added useful new features that made their regexes more powerful and readable.But that was then.Did you know that nearly every new version of JavaScript has made at least minor improvements to regular expressions?Lets take a look at them.Dont worry if its hard to understand what some of the following features mean well look more closely at several of the key features afterward.ES5 (2009) fixed unintuitive behavior by creating a new object every time regex literals are evaluated and allowed regex literals to use unescaped forward slashes within character classes (/[/]/).ES6/ES2015 added two new regex flags: y (sticky), which made it easier to use regexes in parsers, and u (unicode), which added several significant Unicode-related improvements along with strict errors. It also added the RegExp.prototype.flags getter, support for subclassing RegExp, and the ability to copy a regex while changing its flags.ES2018 was the edition that finally made JavaScript regexes pretty good. It added the s (dotAll) flag, lookbehind, named capture, and Unicode properties (via \p{...} and \P{...}, which require ES6s flag u). All of these are extremely useful features, as well see.ES2020 added the string method matchAll, which well also see more of shortly.ES2022 added flag d (hasIndices), which provides start and end indices for matched substrings.And finally, ES2024 added flag v (unicodeSets) as an upgrade to ES6s flag u. The v flag adds a set of multicharacter properties of strings to \p{...}, multicharacter elements within character classes via \p{...} and \q{...}, nested character classes, set subtraction [A--B] and intersection [A&&B], and different escaping rules within character classes. It also fixed case-insensitive matching for Unicode properties within negated sets [^...].As for whether you can safely use these features in your code today, the answer is yes! The latest of these features, flag v, is supported in Node.js 20 and 2023-era browsers. The rest are supported in 2021-era browsers or earlier.Each edition from ES2019 to ES2023 also added additional Unicode properties that can be used via \p{...} and \P{...}. And to be a completionist, ES2021 added string method replaceAll although, when given a regex, the only difference from ES3s replace is that it throws if not using flag g.Aside: What Makes a Regex Flavor Good?With all of these changes, how do JavaScript regular expressions now stack up against other flavors? There are multiple ways to think about this, but here are a few key aspects:Performance.This is an important aspect but probably not the main one since mature regex implementations are generally pretty fast. JavaScript is strong on regex performance (at least considering V8s Irregexp engine, used by Node.js, Chromium-based browsers, and even Firefox; and JavaScriptCore, used by Safari), but it uses a backtracking engine that is missing any syntax for backtracking control a major limitation that makes ReDoS vulnerability more common.Support for advanced features that handle common or important use cases.Here, JavaScript stepped up its game with ES2018 and ES2024. JavaScript is now best in class for some features like lookbehind (with its infinite-length support) and Unicode properties (with multicharacter properties of strings, set subtraction and intersection, and script extensions). These features are either not supported or not as robust in many other flavors.Ability to write readable and maintainable patterns.Here, native JavaScript has long been the worst of the major flavors since it lacks the x (extended) flag that allows insignificant whitespace and comments. Additionally, it lacks regex subroutines and subroutine definition groups (from PCRE and Perl), a powerful set of features that enable writing grammatical regexes that build up complex patterns via composition.So, its a bit of a mixed bag.JavaScript regexes have become exceptionally powerful, but theyre still missing key features that could make regexes safer, more readable, and more maintainable (all of which hold some people back from using this power).The good news is that all of these holes can be filled by a JavaScript library, which well see later in this article.Using JavaScripts Modern Regex FeaturesLets look at a few of the more useful modern regex features that you might be less familiar with. You should know in advance that this is a moderately advanced guide. If youre relatively new to regex, here are some excellent tutorials you might want to start with:RegexLearn and RegexOne are interactive tutorials that include practice problems.JavaScript.infos regular expressions chapter is a detailed and JavaScript-specific guide.Demystifying Regular Expressions (video) is an excellent presentation for beginners by Lea Verou at HolyJS 2017.Learn Regular Expressions In 20 Minutes (video) is a live syntax walkthrough in a regex tester.Named CaptureOften, you want to do more than just check whether a regex matches you want to extract substrings from the match and do something with them in your code. Named capturing groups allow you to do this in a way that makes your regexes and code more readable and self-documenting.The following example matches a record with two date fields and captures the values:const record = 'Admitted: 2024-01-01\nReleased: 2024-01-03';const re = /^Admitted: (?<admitted>\d{4}-\d{2}-\d{2})\nReleased: (?<released>\d{4}-\d{2}-\d{2})$/;const match = record.match(re);console.log(match.groups);/* { admitted: '2024-01-01', released: '2024-01-03'} */Dont worry although this regex might be challenging to understand, later, well look at a way to make it much more readable. The key things here are that named capturing groups use the syntax (?<name>...), and their results are stored on the groups object of matches.You can also use named backreferences to rematch whatever a named capturing group matched via \k<name>, and you can use the values within search and replace as follows:// Change 'FirstName LastName' to 'LastName, FirstName'const name = 'Shaquille Oatmeal';name.replace(/(?<first>\w+) (?<last>\w+)/, '$<last>, $<first>');// 'Oatmeal, Shaquille'For advanced regexers who want to use named backreferences within a replacement callback function, the groups object is provided as the last argument. Heres a fancy example:function fahrenheitToCelsius(str) { const re = /(?<degrees>-?\d+(\.\d+)?)F\b/g; return str.replace(re, (...args) => { const groups = args.at(-1); return Math.round((groups.degrees - 32) * 5/9) + 'C'; });}fahrenheitToCelsius('98.6F');// '37C'fahrenheitToCelsius('May 9 high is 40F and low is 21F');// 'May 9 high is 4C and low is -6C'LookbehindLookbehind (introduced in ES2018) is the complement to lookahead, which has always been supported by JavaScript regexes. Lookahead and lookbehind are assertions (similar to ^ for the start of a string or \b for word boundaries) that dont consume any characters as part of the match. Lookbehinds succeed or fail based on whether their subpattern can be found immediately before the current match position.For example, the following regex uses a lookbehind (?<=...) to match the word cat (only the word cat) if its preceded by fat :const re = /(?<=fat )cat/g;'cat, fat cat, brat cat'.replace(re, 'pigeon');// 'cat, fat pigeon, brat cat'You can also use negative lookbehind written as (?<!...) to invert the assertion. That would make the regex match any instance of cat thats not preceded by fat .const re = /(?<!fat )cat/g;'cat, fat cat, brat cat'.replace(re, 'pigeon');// 'pigeon, fat cat, brat pigeon'JavaScripts implementation of lookbehind is one of the very best (matched only by .NET). Whereas other regex flavors have inconsistent and complex rules for when and whether they allow variable-length patterns inside lookbehind, JavaScript allows you to look behind for any subpattern.The matchAll MethodJavaScripts String.prototype.matchAll was added in ES2020 and makes it easier to operate on regex matches in a loop when you need extended match details. Although other solutions were possible before, matchAll is often easier, and it avoids gotchas, such as the need to guard against infinite loops when looping over the results of regexes that might return zero-length matches.Since matchAll returns an iterator (rather than an array), its easy to use it in a for...of loop.const re = /(?<char1>\w)(?<char2>\w)/g;for (const match of str.matchAll(re)) { const {char1, char2} = match.groups; // Print each complete match and matched subpatterns console.log(Matched "${match[0]}" with "${char1}" and "${char2}");}Note: matchAll requires its regexes to use flag g (global). Also, as with other iterators, you can get all of its results as an array using Array.from or array spreading.const matches = [...str.matchAll(/./g)];Unicode PropertiesUnicode properties (added in ES2018) give you powerful control over multilingual text, using the syntax \p{...} and its negated version \P{...}. There are hundreds of different properties you can match, which cover a wide variety of Unicode categories, scripts, script extensions, and binary properties.Note: For more details, check out the documentation on MDN.Unicode properties require using the flag u (unicode) or v (unicodeSets).Flag vFlag v (unicodeSets) was added in ES2024 and is an upgrade to flag u you cant use both at the same time. Its a best practice to always use one of these flags to avoid silently introducing bugs via the default Unicode-unaware mode. The decision on which to use is fairly straightforward. If youre okay with only supporting environments with flag v (Node.js 20 and 2023-era browsers), then use flag v; otherwise, use flag u.Flag v adds support for several new regex features, with the coolest probably being set subtraction and intersection. This allows using A--B (within character classes) to match strings in A but not in B or using A&&B to match strings in both A and B. For example:// Matches all Greek symbols except the letter ''/[\p{Script_Extensions=Greek}--]/v// Matches only Greek letters/[\p{Script_Extensions=Greek}&&\p{Letter}]/vFor more details about flag v, including its other new features, check out this explainer from the Google Chrome team.A Word on Matching EmojiEmoji are , but how emoji get encoded in text is complicated. If youre trying to match them with a regex, its important to be aware that a single emoji can be composed of one or many individual Unicode code points. Many people (and libraries!) who roll their own emoji regexes miss this point (or implement it poorly) and end up with bugs.The following details for the emoji (Woman Teacher: Light Skin Tone) show just how complicated emoji can be:// Code unit length''.length;// 7// Each astral code point (above \uFFFF) is divided into high and low surrogates// Code point length[...''].length;// 4// These four code points are: \u{1F469} \u{1F3FB} \u{200D} \u{1F3EB}// \u{1F469} combined with \u{1F3FB} is ''// \u{200D} is a Zero-Width Joiner// \u{1F3EB} is ''// Grapheme cluster length (user-perceived characters)[...new Intl.Segmenter().segment('')].length;// 1Fortunately, JavaScript added an easy way to match any individual, complete emoji via \p{RGI_Emoji}. Since this is a fancy property of strings that can match more than one code point at a time, it requires ES2024s flag v.If you want to match emojis in environments without v support, check out the excellent libraries emoji-regex and emoji-regex-xs.Making Your Regexes More Readable, Maintainable, and ResilientDespite the improvements to regex features over the years, native JavaScript regexes of sufficient complexity can still be outrageously hard to read and maintain.Regular Expressions are SO EASY!!!! pic.twitter.com/q4GSpbJRbZ Garabato Kid (@garabatokid) July 5, 2019 ES2018s named capture was a great addition that made regexes more self-documenting, and ES6s String.raw tag allows you to avoid escaping all your backslashes when using the RegExp constructor. But for the most part, thats it in terms of readability.However, theres a lightweight and high-performance JavaScript library named regex (by yours truly) that makes regexes dramatically more readable. It does this by adding key missing features from Perl-Compatible Regular Expressions (PCRE) and outputting native JavaScript regexes. You can also use it as a Babel plugin, which means that regex calls are transpiled at build time, so you get a better developer experience without users paying any runtime cost.PCRE is a popular C library used by PHP for its regex support, and its available in countless other programming languages and tools.Lets briefly look at some of the ways the regex library, which provides a template tag named regex, can help you write complex regexes that are actually understandable and maintainable by mortals. Note that all of the new syntax described below works identically in PCRE.Insignificant Whitespace and CommentsBy default, regex allows you to freely add whitespace and line comments (starting with #) to your regexes for readability.import {regex} from 'regex';const date = regex` # Match a date in YYYY-MM-DD format (?<year> \d{4}) - # Year part (?<month> \d{2}) - # Month part (?<day> \d{2}) # Day part`;This is equivalent to using PCREs xx flag.Subroutines and Subroutine Definition GroupsSubroutines are written as \g<name> (where name refers to a named group), and they treat the referenced group as an independent subpattern that they try to match at the current position. This enables subpattern composition and reuse, which improves readability and maintainability.For example, the following regex matches an IPv4 address such as 192.168.12.123:import {regex} from 'regex';const ipv4 = regex`\b (?<byte> 25[0-5] | 2[0-4]\d | 1\d\d | [1-9]?\d) # Match the remaining 3 dot-separated bytes (\. \g<byte>){3}\b`;You can take this even further by defining subpatterns for use by reference only via subroutine definition groups. Heres an example that improves the regex for admittance records that we saw earlier in this article:const record = 'Admitted: 2024-01-01\nReleased: 2024-01-03';const re = regex` ^ Admitted:\ (?<admitted> \g<date>) \n Released:\ (?<released> \g<date>) $ (?(DEFINE) (?<date> \g<year>-\g<month>-\g<day>) (?<year> \d{4}) (?<month> \d{2}) (?<day> \d{2}) )`;const match = record.match(re);console.log(match.groups);/* { admitted: '2024-01-01', released: '2024-01-03'} */A Modern Regex Baselineregex includes the v flag by default, so you never forget to turn it on. And in environments without native v, it automatically switches to flag u while applying vs escaping rules, so your regexes are forward and backward-compatible.It also implicitly enables the emulated flags x (insignificant whitespace and comments) and n (named capture only mode) by default, so you dont have to continually opt into their superior modes. And since its a raw string template tag, you dont have to escape your backslashes \\\\ like with the RegExp constructor.Atomic Groups and Possessive Quantifiers Can Prevent Catastrophic BacktrackingAtomic groups and possessive quantifiers are another powerful set of features added by the regex library. Although theyre primarily about performance and resilience against catastrophic backtracking (also known as ReDoS or regular expression denial of service, a serious issue where certain regexes can take forever when searching particular, not-quite-matching strings), they can also help with readability by allowing you to write simpler patterns.Note: You can learn more in the regex documentation.Whats Next? Upcoming JavaScript Regex ImprovementsThere are a variety of active proposals for improving regexes in JavaScript. Below, well look at the three that are well on their way to being included in future editions of the language.Duplicate Named Capturing GroupsThis is a Stage 3 (nearly finalized) proposal. Even better is that, as of recently, it works in all major browsers.When named capturing was first introduced, it required that all (?<name>...) captures use unique names. However, there are cases when you have multiple alternate paths through a regex, and it would simplify your code to reuse the same group names in each alternative.For example:/(?<year>\d{4})-\d\d|\d\d-(?<year>\d{4})/This proposal enables exactly this, preventing a duplicate capture group name error with this example. Note that names must still be unique within each alternative path.Pattern Modifiers (aka Flag Groups)This is another Stage 3 proposal. Its already supported in Chrome/Edge 125 and Opera 111, and its coming soon for Firefox. No word yet on Safari.Pattern modifiers use (?ims:...), (?-ims:...), or (?im-s:...) to turn the flags i, m, and s on or off for only certain parts of a regex.For example:/hello-(?i:world)/// Matches 'hello-WORLD' but not 'HELLO-WORLD'Escape Regex Special Characters with RegExp.escapeThis proposal recently reached Stage 3 and has been a long time coming. It isnt yet supported in any major browsers. The proposal does what it says on the tin, providing the function RegExp.escape(str), which returns the string with all regex special characters escaped so you can match them literally.If you need this functionality today, the most widely-used package (with more than 500 million monthly npm downloads) is escape-string-regexp, an ultra-lightweight, single-purpose utility that does minimal escaping. Thats great for most cases, but if you need assurance that your escaped string can safely be used at any arbitrary position within a regex, escape-string-regexp recommends the regex library that weve already looked at in this article. The regex library uses interpolation to escape embedded strings in a context-aware way.ConclusionSo there you have it: the past, present, and future of JavaScript regular expressions.If you want to journey even deeper into the lands of regex, check out Awesome Regex for a list of the best regex testers, tutorials, libraries, and other resources. And for a fun regex crossword puzzle, try your hand at regexle.May your parsing be prosperous and your regexes be readable.

Pricing projects can be one of the most challenging aspects of running a digital agency or working as a freelance web designer. Its a topic that comes up frequently in discussions with fellow professionals in my Agency Academy.Three Approaches to PricingOver my years in the industry, Ive found that there are essentially three main approaches to pricing:Fixed price, Time and materials,And value-based pricing.Each has its merits and drawbacks, and understanding these can help you make better decisions for your business. Lets explore each of these in detail and then dive into what I believe is the most effective strategy.Fixed PriceFixed pricing is often favored by clients because it reduces their risk and allows for easier comparison between competing proposals. On the surface, it seems straightforward: you quote a price, the client agrees, and you deliver the project for that amount. However, this approach comes with significant drawbacks for agencies and freelancers:Estimating accurately is incredibly challenging.In the early stages of a project, we often dont have enough information to provide a precise quote. Clients may not have a clear idea of their requirements, or there might be technical complexities that only become apparent once work begins. This lack of clarity can lead to underquoting, which eats into your profits, or overquoting, which might cost you the job.Theres no room for adaptation based on testing or insights gained during the project.Web design and development is an iterative process. As we build and test, we often discover better ways to implement features or uncover user needs that werent initially apparent. With a fixed price model, these improvements are often seen as scope creep and can lead to difficult conversations with clients about additional costs.The focus shifts from delivering the best possible product to sticking within the agreed-upon scope.This can result in missed opportunities for innovation and improvement, ultimately leading to a less satisfactory end product for the client.While fixed pricing might seem straightforward, its not without its complications. The rigidity of this model can stifle creativity and adaptability, two crucial elements in successful web projects. So, lets look at an alternative approach that offers more flexibility.Time and MaterialsTime and materials (T&M) pricing offers a fairer system where the client only pays for the hours actually worked. This approach has several advantages:Allows for greater adaptability as the project progresses. If new requirements emerge or if certain tasks take longer than expected, you can simply bill for the additional time. This flexibility can lead to better outcomes as youre not constrained by an initial estimate.Encourages transparency and open communication. Clients can see exactly what theyre paying for, which can foster trust and understanding of the work involved.Reduces the risk of underquoting. You dont have to worry about eating into your profits if a task takes longer than expected.However, T&M pricing isnt without its drawbacks:It carries a higher perceived risk for the client, as the final cost isnt determined upfront. This can make budgeting difficult for clients and may cause anxiety about runaway costs.It requires careful tracking and regular communication about hours spent. Without this, clients may be surprised by the final bill, leading to disputes.Some clients may feel it incentivizes inefficiency, as taking longer on tasks results in higher bills.T&M pricing can work well in many scenarios, especially for long-term or complex projects where requirements may evolve. However, its not always the perfect solution, particularly for clients with strict budgets or those who prefer more certainty. Theres one more pricing model thats often discussed in the industry, which attempts to tie pricing directly to results.Value-Based PricingValue-based pricing is often touted as the holy grail of pricing strategies. The idea is to base your price on the value your work will generate for the client rather than on the time it takes or a fixed estimate. While this sounds great in theory, its rarely a realistic approach in our industry. Heres why:Its only suitable for projects where you can tie your efforts directly to ROI (Return on Investment). For example, if youre redesigning an e-commerce site, you might be able to link your work to increased sales. However, for many web projects, the value is more intangible or indirect.Accurately calculating ROI is often difficult or impossible in web design and development. Many factors contribute to a websites success, and isolating the impact of design or development work can be challenging.It requires a deep understanding of the clients business and industry. Without this, its hard to accurately assess the potential value of your work.Clients may be reluctant to share the financial information necessary to make value-based pricing work. They might see it as sensitive data or simply may not have accurate projections.It can lead to difficult conversations if the projected value isnt realized. Was it due to your work or other factors beyond your control?While these three approaches form the foundation of most pricing strategies, the reality of pricing projects is often more nuanced and complex. In fact, as I point out in my article How To Work Out What To Charge Clients: The Honest Version, pricing often involves a mix of educated guesswork, personal interest in the project, and an assessment of what the market will bear.Given the challenges with each of these pricing models, you might be wondering if theres a better way. In fact, there is, and it starts with a different approach to the initial client conversation.Start by Discussing AppetiteInstead of jumping straight into deliverables or hourly rates, Ive found it more effective to start by discussing what 37signals calls appetite in their book Shaping Up. Appetite is how much the product owner is willing to invest based on the expected return for their business. This concept shifts the conversation from What will this cost? to What is this worth to you?This approach is beneficial for several reasons:Focuses on the budget rather than trying to nail down every deliverable upfront. This allows for more flexibility in how that budget is allocated as the project progresses.Allows you to tailor your proposal to what the client can actually afford. Theres no point in proposing a $100,000 solution if the client only has $20,000 to spend.Helps set realistic expectations from the start. If a clients appetite doesnt align with whats required to meet their goals, you can have that conversation early before investing time in detailed proposals.Shifts the conversation from price comparison to value delivery. Instead of competing solely on price, youre discussing how to maximize the value of the clients investment.Mirrors how real estate agents work they ask for your budget to determine what kind of properties to show you. This analogy can help clients understand why discussing budgets early is crucial.To introduce this concept to clients, I often use the real estate analogy. I explain that even if you describe your ideal house (e.g., 3 bedrooms, specific location), a real estate agent still cannot give you a price because it depends on many other factors, including the state of repair and nearby facilities that may impact value. Similarly, in web design and development, many factors beyond the basic requirements affect the final cost and value of a project.Once youve established the clients appetite, youre in a much better position to structure your pricing. But how exactly should you do that? Let me share a strategy thats worked well for me and many others in my Agency Academy.Improve Your Estimates With Sub-ProjectsHeres an approach Ive found highly effective:Take approximately 10% of the total budget for a discovery phase. This can be a separate contract with a fixed price. During this phase, you dig deep into the clients needs, goals, and constraints. You might conduct user research, analyze competitors, and start mapping out the projects architecture.Use the discovery phase to define what needs to be prototyped, allowing you to produce a fixed price for the prototyping sub-project. This phase might involve creating wireframes, mockups, or even a basic working prototype of key features.Test and evolve the prototype, using it as a functional specification for the build. This detailed specification allows you to quote the build accurately. By this point, you have a much clearer picture of what needs to be built, reducing the risk of unexpected complications.This approach combines elements of fixed pricing (for each sub-project) with the flexibility to adapt between phases. It allows you to provide more accurate estimates while still maintaining the ability to pivot based on what you learn along the way.Advantages of the Sub-Project ApproachThis method offers several key benefits:Clients appreciate the sense of control over the budget. They can decide after each phase whether to continue, giving them clear exit points if needed.It reduces the perceived risk for clients, as they could theoretically change suppliers between sub-projects. This makes you a less risky option compared to agencies asking for a commitment to the entire project upfront.Each sub-project is easier to price accurately. As you progress, you gain more information, allowing for increasingly precise estimates.It allows for adaptability between sub-projects, eliminating the problem of scope creep. If new requirements emerge during one phase, they can be incorporated into the planning and pricing of the next phase.It encourages ongoing communication and collaboration with the client. Regular check-ins and approvals are built into the process.It aligns with agile methodologies, allowing for iterative development and continuous improvement.This sub-project approach not only helps with more accurate pricing but also addresses one of the most common challenges in project management: scope creep. By breaking the project into phases, you create natural points for reassessment and adjustment. For a more detailed look at how this approach can help manage scope creep, check out my article How To Price Projects And Manage Scope Creep.This approach sounds great in theory, but you might be wondering how clients typically react to it. Lets address some common objections and how to handle them.Dealing with Client ObjectionsYou may encounter resistance to this approach, especially in formal bid processes where clients are used to receiving comprehensive fixed-price quotes. Heres how to handle common objections:We need a fixed price for the entire project.Provide an overall estimate based on their initial scope, but emphasize that this is a rough figure. Use your sub-project process as a selling point, explaining how it actually provides more accurate pricing and better results. Highlight how inaccurate other agency quotes are likely to be and warn about potential scope discussions later.This seems more complicated than other proposals we've received.Acknowledge that it may seem more complex initially, but explain how this approach actually simplifies the process in the long run. Emphasize that it reduces risk and increases the likelihood of a successful outcome.We don't have time for all these phases.Explain that while it may seem like more steps, this approach often leads to faster overall delivery because it reduces rework and ensures everyone is aligned at each stage.How do we compare your proposal to others if youre not giving us a fixed price?Emphasize that the quality and implementation of what agencies quote for can vary wildly. Your approach ensures they get exactly what they need, not just what they think they want at the outset. Encourage them to consider the long-term value and reduced risk, not just the initial price tag.Were not comfortable discussing our budget upfront.Use the real estate analogy to explain why discussing the budget upfront is crucial. Just as a real estate agent needs to know your budget to show you appropriate properties, you need to understand their investment appetite to propose suitable solutions.By adopting this approach to pricing, you can create a more collaborative relationship with your clients, reduce the risk for both parties, and ultimately deliver better results. Remember,Pricing isnt just about numbers its about setting the foundation for a successful project and a positive client relationship.By being transparent about your process and focusing on delivering value within the clients budget, youll set yourself apart in a crowded market.