Great work happens when we’re inspired to create. That’s because as organic and free-flowing as creative work can be, we’re ultimately motivated by a clear vision and focused objectives. The work that we do needs a raison d’être, which is exactly what a well-written brief can provide. Designing without a brief is like walking in the dark. At times, whether it’s due to tight deadlines or an eagerness to start working, we tend to skip over this crucial step and dive right into the work. But without a brief to guide our way, we can end up making uninformed guesses that lead to unnecessary revisions and uncomfortable conversations, which could be avoided altogether. So what exactly does a well-written brief look like? We can look to related fields, such as advertising, for inspiration. In a privately published book from 1998 called What's a Good Brief? The Leo Burnett Way, "A good creative brief…is brief and single minded…is logical and rooted in a compelling truth…incorporates a powerful human insight…is compatible with the overall brand strategy…is the result of hard work and team work." These characteristics can ring true for any type of creative work, whether it’s design, architecture, marketing, editorial, or public relations. And while no two briefs are the same, they typically aim to provide direction and motivation for the creatives who are tasked with bringing an idea to reality. Briefs strive to promote alignment on the most important details, so that great outcomes and strong working relationships can follow. For design briefs, let’s take a look at some qualities that contribute to a truly effective brief. 1. An effective design brief is single-minded Whether it’s expressed in a phrase, a question, or an insight, an effective design brief gives us something to grasp onto that provides direction and design inspiration. It might appear in the form of a creative challenge, which concentrates on solving a pressing problem, or on pursuing a new and exciting market opportunity. Whatever it may be, that one idea can feel like a mantra that guides our work in a singular and purposeful way. Without a single-minded focus, design briefs can end up going in too many directions and trying to say too many things at once. It might end up being overly packed with facts and observations, but lacking in actionable insights. When receiving a brief that’s too broad, you may need to guide the client by helping them shape the project around a single, committed idea, with insights that can be leveraged to make that idea a reality. Whether it comes from the client or from close collaboration between yourself and the client, a concise, focused, and unambiguous brief is the first step towards a truly successful project. 2. An effective design brief states the outcome, but never the means Every designer, team, or agency has their own creative process. That’s why an effective design brief never dictates how the work should be done, but only what is expected of the outcome. In other words, a truly effective design brief outlines the what and the why with clarity, but never the how. The what allows us to envision what a successful project might look like. It can range from how our work will be quantified and assessed by the client, to whether it creates an intended effect for the ideal customer. When we meet or surpass these outcomes, all parties involved will be able to consider the project a success. When we fall short, we can work with the client to figure out what we can do to achieve better results. The why reveals the driving force behind a project. Whether it’s the overall business strategy or a mission statement that inspires the organization, when we know why we are doing what we’re doing, we tend to be more motivated to produce better results. A truly effective design brief lays out profound bits of knowledge that you can use to create a solution specifically tailored for the customers. 3. An effective brief incorporates a powerful human insight A truly motivating insight can propel your client to create something new. It comes from a genuine understanding of the ideal customer, and an honest and realistic view of the world. A truly effective design brief lays out profound bits of knowledge that you can use to create a solution specifically tailored for the customers. Insights are the product of skillful research, typically distilled from the facts and data points revealing what a customer believes, feels, values, or needs. The most compelling insights reveal something unique about the ideal customer, which can be leveraged to guide the design decisions made throughout the project. Before arriving at these understandings, clients have to commit to who their target audience is. In a 2017 study by the World Federation of Advertisers, 73% of clients believed that they had a single, distinct view of their customer, while 82% of agencies disagreed. Without a clear idea of who the customer is, we end up designing and making decisions based on our own instinctive preferences. 4. An effective design brief facilitates alignment Arguably, the most important part of a brief is the briefing itself. It’s the thoughtful exchange of information between you and your client, facilitated by a truly effective design brief. It gives you the chance to raise questions, seek clarification, and provide guidance in an open and collaborative way. Without close alignment from the beginning, briefs can end up being something that the client simply hands over to you. It can result from a process that’s too formalized, which leads to frustrated creatives who end up dismissing the brief in favor of close collaboration with their clients. In fact, the act of structuring a brief can help clients ensure that their organization’s researchers, marketers, and senior stakeholders are all in sync. Putting ideas on paper can allow clients to identify and package the most impactful insights and opportunities into the brief, so that creative teams have a strong foundation to work from. Aligning with clients on the details of a brief can help set the stage for great outcomes and strong working relationships. It creates mutual confidence that the project is heading in the right direction. 5. An effective design brief motivates and inspires A truly effective design brief inspires action. When we come across a thoughtful and impactful brief, it gets the creative juices flowing, and motivates us to see the project through to the end. An effective brief connects us emotionally to a project, and brings people together toward a single, compelling vision. It’s more than just answering questions on a form, as creative director Howard Margulies writes. Rather, it’s about crafting the story behind a project, and why it matters. As Margulies notes, “This is the first, and arguably the most important creative act of the entire process.” Aligning with clients on the details of a brief can help set the stage for great outcomes and strong working relationships. It creates mutual confidence that the project is heading in the right direction. The building blocks of an effective brief To achieve the qualities of an effective brief, it helps to keep in mind some of the core building blocks: 1. Project summary. This section provides a complete description of the project. What is the project about? Why is it being commissioned? It helps to dig deeper into the story behind the work, as you might be able to frame the project in a way that the client may not have considered. 2. Background context. This section helps you understand what the client is all about. What products and services do they offer to their customers? What are their core values? Who are their competitors? When working with in-house clients, however, you might already be familiar with the answers to these questions. In that case, focus on the background of the particular project at hand. 3. Design problem. What is the single, most pressing challenge that the design work will answer? If possible, try to understand the conflict and emotion that exists behind the design challenge, as it will help you make more informed decisions throughout the project. 4. Target audience. Who is this for? What are the key benefits that an ideal customer will enjoy as a result of the new design? A focused design brief will provide you with honest insights about where the customer is today, and what will move them to where the client wants them to go, tomorrow. A mix of emotional and rational insights can be a powerful combination for understanding who the target customer is and what it is that motivates them. 5. Objective. What ambitious goals does the project aim to achieve? What does a successful project look like? Objectives tend to be concrete and quantifiable, whether it’s about achieving a business metric, or getting the audience to believe or feel a certain way about the end result. 6. Guidelines. What are the rules and requirements for the project? Whether they’re style guidelines, technical requirements, pre-existing samples of creative work, or examples from competitors, you’ll need to determine the requirements - or mandatory parts - of the project. You might learn about what’s important to include, or alternatively what’s crucial to avoid. 7. Timeline. How much time do we have to create this design? What is the turnaround time for reviews and changes? Timelines, milestones, and review periods reflect realistic expectations for how long the project might take. Sometimes there are more people involved than it initially appears, so it’s typically wise to factor in additional time to accommodate the collaboration process. Milestones, or critical points in the design work, can also give clients a look at how you structure your creative process. 8. Deliverables. This section details exactly what you need to accomplish in a given project. Find out what formats are needed for all of the deliverables, so that you don’t end up sizing something incorrectly or delivering the wrong type of asset to your client. 9. Budget. What parts will the budget cover? What will be charged separately? Whenever possible, finding out what the approximate budget prior to diving into the details of a project, can help determine what type of work can be done. If a client’s budget isn’t feasible for the work requested, you can work with them on finding alternative or scaled-down solutions. 10. Key stakeholders. Who are the main contacts? Who gives the sign-off on all materials? Having one or two designated client contacts can help facilitate communication between you and your client’s organization. You’ll know exactly who to reach out to with any questions, updates, or approvals. And you’ll have a consistent voice through which the organization or team can request any modifications or clarification. Final Thoughts Design briefs come in all shapes and sizes. However, the most effective design briefs provide us with clear direction and strong motivation. They connect the dots for us, helping us understand why a project exists, what insights inspire the work, and what objectives it strives to achieve. It’s also important to keep in mind that even the best briefs don’t always guarantee success. A brief is there to reinforce the collaboration between yourself and your client, so that together, you can nurture a project from idea to reality.

Scratching the surface is often not enough. Good landing page design calls for neat information architecture, easy-to-access CTAs and pleasant visuals, yet that’s just the tip of the iceberg. In order to create something that brings results, you need to dig deeper and learn about your users. Of course, no two target audiences are alike. Luckily, there are some psychological principles that can be used as a general rule. In this article, we’ll go through some of the most helpful rules for web designers. To better understand how to apply them in your day-to-day work, we’ll also look at some real-life examples. Let’s dive in! Jakob’s Law This principle raises the question: why reinvent the wheel? There are plenty of proven and tested design solutions you can stick to. The best is often the enemy of the good. You might come up with a perfectly polished solution and realize that your users still prefer the old version. When you try to be overly innovative, you might end up misunderstood. The name Jakob’s Law comes from Jakob Nielsen of the Nielsen Norman Group, an acclaimed UX research institute. The law itself is simple. It states that people spend most of their time on other websites and are therefore already used to certain design patterns. When you stick to these design patterns in your landing page, the experience will be more familiar and intuitive. It’s easy to see when you look at several examples: These examples come from market leaders – and they have a lot in common: The navigation: On the desktop versions, the company’s logo is on the top left, followed by the navigation bar. The top right-hand corner is the place for login and signup buttons, sometimes accompanied by the search bar – in other words, a tool to find out more about the product. What’s more, all mobile versions feature a hamburger menu. These three (or even two) horizontal lines are widely understood by the vast majority of users. Again, there’s no need to reinvent the wheel. The layout of textual content and images: The layouts of these landing pages echo the left-to-right reading direction of Latin languages. This makes for a more intuitive structure. The text is in the first column and is also aligned to the left. The hero image or video is always on the right (or below the text on mobile devices). The mental models: Jakob’s Law leverages the user’s existing mental models. In layman’s terms, this means that the user already has a representation of the experience in their mind. They expect certain functions to be found in certain places and to work in a specific way. When it comes to landing pages, people tend to scan them according to the Z-pattern: The pages we’ve used as examples follow this design quite closely. The logo and the login button remain in the same place, yet the strategy has slightly changed for the main CTA. Instead of placing the CTA at the fourth focal point, the designers have stuck to the minimal amount of information and placed the signup button at the third point of the Z-pattern. This finding brings us to another principle: Principle of least effort We don’t process more information than is necessary, but it’s not because we’re lazy. We just have a lot on our plates. Did you know that we process around 100,000 words every day? It’s the equivalent of a medium-length novel, such as The Hobbit, or Harry Potter and the Prisoner of Azkaban. Keep in mind that every landing page contributes to information overload. Here’s how you can use the principle of least effort in your web design efforts: Cut the experience short: Analyze the user journey and find the weakest spots. See where your visitors drop out. It might mean that this part of the experience causes friction and discourages the user from proceeding. The solution? You can redesign the journey, make it shorter, and remove potential points of frustration. Stick to plain language: It’s not all about visual design – it’s also about written content. When your audience has to go through industry jargon and complex paragraphs, it adds extra tasks to their cognitive load. Use short sentences and simple vocabulary to create a better experience for your users. This is particularly important on landing pages, where the space for text is limited and you need to strike all the right chords with the right words. Group items into categories: A landing page serves a certain purpose. You don’t have to hit the user with all the details at the start. When you’ve got a product offer to show, you can group different features into three or four categories. It’s enough if the user gets a general idea that’s easy to process and remember. At this stage, your main goal is to get the user to respond to the CTA. Here’s where another psychological principle comes in: Hick's Law When it comes to options, is it the more the merrier? It would probably work like that if our decisions were purely rational. Hick’s Law states: the more choices we have, the longer it takes to make the final decision. This became the foundation for the KISS acronym. No matter if you choose to interpret it as Keep it Short and Sweet or Keep it Simple, Stupid, the idea remains the same. A similar phenomenon was described by Barry Schwartz in his book The Paradox of Choice. The author goes one step further and states that limiting choice can reduce the user’s anxiety. Choosing from a variety of options offers certain freedom, but it’s also a responsibility. When we’re not happy with the final decision, we blame it on ourselves. The takeaway? When we take certain decisions for our users, we might be doing them a big favor. Here’s how to design with Hick’s Law and the Paradox of Choice in mind: Focus on a single goal: Why just one? Almost half of all landing pages have more than one offer, even though including more than one option may decrease conversion rates by as much as 266%. Instead of trying to squeeze in as much information as possible, create more landing pages that are designed for a single purpose. This approach comes with a lot of positive outcomes, including a significant SEO boost. According to Hubspot, going from 10 to 15 dedicated landing pages is likely to result in a 55% increase in leads. Try progressive disclosure: Easier said than done, right? We know that some information can’t be entirely omitted. Luckily, there’s a workaround for that. Progressive disclosure sequences information across several screens. To keep your landing pages clean and simple, you can include the main categories or the essential details on the landing page, and then guide the users further for more information. If you need some web design inspiration, here’s an idea from LiveAgent, a customer support platform: [Related: 5 neuromarketing tactics to enhance your marketing strategy] Every feature is described with just one sentence. The user can go to another dedicated landing page to learn more about a specific option. Figure/Ground In the context of landing pages, the law of figure/ground is particularly common. This phenomenon is typically illustrated with this popular picture: You can either see two face profiles or a vase. The same element can be perceived either as the figure or as the background. This is a classic example of a reversible relationship between the figure and the ground. Depending on the context, the same part of the picture can serve as both of them. The law of figure/ground is one of the Gestalt Principles, a goldmine of information (and inspiration) for web designers. These laws were created by psychologists of the Gestalt group. They studied how people make sense of stimuli around them and how they perceive and interpret objects to make sense of the whole picture. Kurt Koffka, one of the members of the group, came up with a brief manifesto. He stated that “the whole is other than the sum of the parts”. This sentence is beautifully universal and works great as a reference for web designers. It shows us that no matter how much time you spend working on a particular element, it won’t get you far if it’s not a strategic part of a bigger picture. Each element you design is perceived differently when it’s part of a bigger set of elements. In landing page design, you will aim for a stable relationship between the figure and the background. The figure should stand out. This can be achieved through contrast and color. Have a look at this great example from HelpDesk: The aim of this landing page is crystal clear. They want the user to sign up for the service, and they make it easy for them. The main CTA is a bright orange button that is in direct contrast with the background, making it stand out with a distinctive hue. You can also play with the size of the elements. For instance, InVision made the “Get Started” button significantly bigger than other components on the website: Pareto principle Every web design process needs priorities, especially when your resources are limited. The Pareto principle can help you define your design strategy. According to this approach, 20% of efforts cause 80% of the outcomes. With this in mind, you could state that 20% of your design accounts for 80% of the success. Let’s have a closer look at data. If you’re using heatmap software on your website, you’ve probably already noticed that only a small fraction of all users scroll all the way to the bottom. Research from 2018 suggests that users spend 57% of their time on a website above the first fold. 74% of the time is dedicated to the first two folds. This is where you should focus the majority of your efforts. Of course, it doesn’t have to work exactly the same way for every landing page. We encourage you to test new solutions or to use session recording software and watch users interact with the website. Here are some ideas on how to use the Pareto principle in design: Suggest options: You don’t always have to display the whole alphabetical list by default. Instead, you can make things easier for the user and move the most likely choices to the top. Prioritize features: Analyze the most common requests and the most used features on your website. This will help you build landing pages that are more likely to meet the user’s needs. If you’re getting a lot of questions about a particular feature, or if a particular service generates most of your traffic, it’s a clear sign that it deserves more attention. Decide what goes first on mobile: Whimsical is a great example here. This collaboration tool was designed for desktop users. Here’s what their desktop landing page looks like: As you can see, the top right-hand corner navigation is very much like the other landing pages we’ve covered. Things look a bit different when you see the mobile version: See what happened? The “sign in” and “sign up” buttons are gone. When you look for Whimsical on mobile, you’re not ready to start using the app. You’re probably just looking around to see what it does and how much it costs. This is why the “pricing” button is highlighted, instead of the sign up or a hamburger menu. It all depends on your findings when analyzing user behavior. Social proof Now that we’ve discussed a range of principles coming from cognitive science, it’s time to turn to social psychology. You might have heard of Influence: The Psychology of Persuasion, a classic book by Dr. Robert Cialdini. Although this title is several decades old, it’s still a great source of knowledge about the core mechanisms of persuasion. One of the most widely known phenomena described by Cialdini is social proof. It describes how people tend to think that actions taken by others are worth following. In other words, we’re more likely to do something when we see other people doing it. What’s more, social proof works better when we see other people as competent. This principle is commonly used on landing pages, even by industry giants such as Ahrefs: The main page is studded with raving reviews from SEO industry influencers, such as Brian Dean of Backlinko. They’re also using a popular trick of adding logos of companies who use Ahrefs. Another interesting way to use social proof is through user-generated content. Daniel Wellington, a watchmaker brand, is one of the leaders in this category. They use pictures of real people wearing their products on their website. This builds trust and makes their customers feel like part of a community: Bonus: a reading list Feel like digging deeper into the psychology of design? Here are some books that will get you inspired: Emotional Design by Don Norman 100 Things Every Designer Needs to Know About People by Susan Weinschenk Hooked: How to Build Habit-Forming Products by Nir Eyal Design for How People Think by John Whalen Happy reading!

A website or app featuring dark mode might have a black background, but this design feature alone isn’t enough to constitute a dark ui. There’s a big difference in designs that use dark mode in a way that’s visually appealing and highly usable, compared to websites that simply feature a dark aesthetic. True dark mode is so much more than using a reverse color scheme, with the potential to delight users, impact usability, and even provide a more accessible option for your website or app. Dark mode 101 Facebook has it. Gmail has it. So do many apps on your phone and computer, regardless of whether you use an iOS, Windows, or Android device. But what is dark mode? Simply put, dark mode is a predominately dark color palette. Darker colors are used for the background, large elements, cards and other accents, with lighter colored text elements. However, it is not as simple as a black background and white text. Although in a truly minimal design scheme, it probably could be. Dark mode isn’t particularly new – designers have been creating in “reverse” as long as printers and websites could handle it. But it is trending, thanks to options in popular user interfaces and a seemingly high preference among users. Users like dark mode Website designers and developers might be a little biased, but do seem to have an affinity for dark mode. The general public seems to agree. From two informal surveys (there’s no authoritative source on a phenomenon this new yet): 68% of respondents use dark mode when it is a choice (Slashdot poll). 82.7% of respondents use their operating system dark mode (Developers Channel Twitter survey). Discord, a chatting app, is mostly based in dark mode after testing it with users and finding great success. “The percentage of Discord users on light theme is in the single digits — and not even the higher ones,” according to the Discord Blog. It is worth noting that app developers found that it was important to support both color schemes, even with such a high preference for dark mode. What makes dark mode work? Dark mode might be most appealing to users because it is different. By flipping the color scheme, you get immediate access to a cool new aesthetic. Moreover, dark mode gives users more control over how they use websites and apps. It seems like such a small tweak, but the ability to set this preference can greatly enhance a user’s connection to your design and affinity for using it. An app or website that is more in line with user preferences, can result in more frequent visits with longer durations. (This fact alone makes considering dark mode a no-brainer!) Dark mode works for other reasons as well: Forms an emotional connection with users. Enhances usability throughout different times of day and lighting conditions. Allows for greater accessibility for varying levels of vision impairments. Increases battery life Dark mode and emotion A dark user interface – whether dark mode in particular or any dark interface in general – sets a certain mood and emotional tone. Dark colors convey a different type of emotion than light or bright hues. When considering dark mode for your interface design, think about the meanings behind black for a moment. Does it go with your brand or the emotion you want to convey? It’s also important to note that while you might not use pure black in your dark UI – and you probably shouldn’t – that all extremely dark colors have similar emotional associations. Somber Authoritative Luxurious or elegant Strong or powerful Simple Formal Intimidating Dramatic or mysterious Modern Sophisticated The trick as a designer is understanding that a color palette that’s dark might need some light, warm, or bright accents to keep the feel more cheery or optimistic in nature. On the other hand, a more somber design can benefit from a dark scheme with cool accent colors. It’s important to design and develop a color scheme for dark mode that does not have a different emotional impact on users. The goal is that a user should feel the same about your website, app, or information therein in light or dark mode. That can be a real challenge. But it is doable. Start with a limited color palette, that’s not true black. While there is that little battery benefit to a true black interface, an almost-black palette is more visually appealing while still prolonging battery life. When it comes to designing dark mode and establishing the right emotional tone, take these design considerations into account: Accent colors in dark mode might need to be brighter/lighter than in an environment with a light color scheme. Look to secondary brand colors here. Streamlined color palettes are easier to control emotionally. With a dark UI, a more monotone color selection can help create just the right mood. Dark mode should not look or feel unlike your brand; if it does, try another design concept. Dark mode and usability Dark mode can be highly usable when done well. Plus, there’s an interesting side benefit: A screen that doesn’t have to function with as much brightness or pixel rendering can conserve battery life for devices. The science behind this is that individual pixels “do less work” and use almost no battery life for true black, Google confirmed. Dark UI is preferred among some users because it is easier on the eyes – figuratively and literally. Dark interfaces can reduce eye strain for many users. Apple even touted this benefit when it introduced the Mojave interface, saying that its dark mode interface is “easy on your eyes and helps you focus on your work.” Another reason for using dark mode? Users find that using a dark interface, particularly in conditions with low light or before bedtime, lessens the effects of blue light on their systems. There are scientific links to nighttime light exposure and poor sleep, which further reinforce the benefits of dark mode emitting less blue light. With all of this to think about, it’s no wonder that dark mode is so popular. When it comes to designing a usable interface for dark mode, the most important element is contrast. In addition, ample contrast is good for ensuring better accessibility, too. Start with a limited color palette, that’s not true black. While there is that little battery benefit to a true black interface, an almost-black palette is more visually appealing while still prolonging battery life. Consider a dark gray, purple, or blue as the background color. Google’s Material Design guidelines suggest gray as a means to “express elevation and space in an environment with a wider range of depth.” In addition, the guidelines further suggest using white body text to help achieve an optimum contrast ratio for reading. Apple’s guidelines for using dark mode differ because iOS uses a “dynamic” color palette. This means that the color palette is automatically pulled from system background colors. It is therefore not suggested to create a custom background color. Saturated colors might be great for a light color palette, but don’t translate well in dark mode. In fact, such colors can almost fall into a dark background. Lighter colors will be more readable, reduce eyestrain, and help guide users through the experience. For the best results, opt for a dark mode palette that uses a dark background, white (or light) body text with some varying levels of transparency for emphasis, and a single accent color with tints or tones. Start with a color from your brand palette as an accent color, but brands with highly saturated color palettes might want to develop a dark mode option. Determining the best color combinations and contrast can be a little tricky. Once you have an idea of your background color and text color and size, it’s worth using a color contrast testing tool, based on Web Content Accessibility Guidelines (WCAG 2.0). Aim for an AA grade or higher in dark mode. This will ensure optimum usability as well as color accessibility. Dark mode and accessibility Accessibility goes hand-in-hand with usability, but it takes some of those ideas a step further. You want as many users as possible to get the full experience of your website or app, including the dark mode option. When it comes to accessibility, the top concern with dark mode is color choice and contrast. The Nielsen Norman Group took a look at a lot of the research behind dark mode and visual comprehension, for impaired and non-impaired users and came to this conclusion: “We strongly recommend that designers allow users to switch to dark mode if they want to — for three reasons: there may be long-term effects associated with light mode; some people with visual impairments will do better with dark mode; and some users simply like dark mode better.” From an accessibility standpoint, this recommendation makes a lot of sense. Providing more users with more options for optimal viewing of your website or app will innately make it more accessible. Design an effective dark mode Make your dark mode design shine with the right design plan and techniques. Here are 10 design recommendations to help you create a dark mode that will wow users: Stay away from black backgrounds. A close-to-black option has deeper color, a richer feel, and can better establish the right emotional connection with your audience. The Material Design recommendation of # 121212 is a good starting point. Add blue (1a1f2c), green (212c1a), or purple (161118) for dramatically deeper options. Establish a hierarchy of elements within your color palette using tints and shades to create a sense of depth. Darker colors will have less visual weight thanks to a dark background, with lighter colors carrying the most visual importance. Dark mode does not have to be derived from a light theme. What matters is that dark mode is visually usable and still “feels” like a part of your brand’s design identity. Allow a dark/light mode toggle. Dark mode should always be a choice. Ethan Marcotte does a nice job of that with his website; the toggle button is in the footer. Use transparency and opacity to your advantage, particularly with text elements. Ensure adequate variance between percentages to achieve optimum reading comprehension and accessibility. Three levels of text emphasis is ideal: Most important should be 88% white, the main body text (medium emphasis) can be around 50%, and low-value text or disabled text elements can be less than 40% white. Test dark mode designs in different levels of light and environmental conditions. This can dramatically change how the design looks or how you feel about it. Use a limited, tight color palette for dark mode, generally 2 to 3 colors. In most instances, it will be easier to manage and maintain consistently. Ditch the drop shadows. What good does a shadow do in the dark? A shadow is something that’s connected to a light source, which is why they can feel natural in light mode designs. Shadows are completely unnecessary here. Maximize use of white (or in this case, dark) space. Give elements plenty of room to breathe. Additional space can make a dark design feel less cramped or intimidating, while putting more emphasis on key design elements or text. Use less saturated colors with dark mode to improve readability and accessibility. For most hues, start with a 20% saturation and tweak the intensity against the background. Run all color choices through an accessibility checker to ensure there’s enough contrast between background and foreground colors. Conclusion Dark mode, and dark user interfaces, are increasingly popular and can provide a deeper user experience for a variety of websites and apps. More operating systems are including dark mode by default, so it’s important to start catering to this growing need. Design a dark mode that works with your brand and website or app aesthetic, and don’t rely on an OS to do it for you. Creating a successful dark mode can be a complex and rewarding design challenge that will enhance user experience.

As designers, we’re paid for our ideas. We build brands from the ground up and draw out entire platforms. We imagine, dream and invent, not just because it’s our career, but because it’s our passion. Like any other professional, it’s hard to admit when you’ve reached the limits of your capabilities, or when you’ve hit a wall and are unable to use your creativity to solve a problem. Sometimes it can make you feel like a fraud or that you’re bad at your job. We want to feel competent and creative. Encountering a roadblock can make us get defensive about our skills and retreat inward when, in fact, we should be opening up and reaching outward for solutions to our problems. If we can admit that we can look to others for inspiration, we can elevate ourselves as creatives. We don’t have to be the end-all-be-all of original thinking. Where our ideas come from is irrelevant as long as we’re doing our job well. Stop reinventing the wheel It’s common to feel like you need to have entirely original ideas. Working in a creative field is largely subjective, and our ideas are what we’re getting paid for, so it’s reasonable to feel that your work needs to be completely new. However, this mindset is actually hurting your designs and your development as a designer. Drawing inspiration from others’ work isn’t “cheating”; designers do it all of the time. Even big companies will mimic styles or UI elements. For example, Google’s Material Design FAB (floating action button) made its way into many popular iOS apps, despite not being in the Apple guidelines. Instagram, too, has “borrowed” Snapchat’s stories and redesigned them in a way that made more sense for their platform. Using other designs as a springboard is a great way to start working on a feature with a sense of what works and how it can be implemented. It also saves you from trying to do something completely new for UI elements that are already common and don’t need to be reimagined. For example, if you are implementing a photo gallery upload in your app. Trying to make something completely different than what the native modal looks like–or messengers and social media apps use–will prove not only difficult, but also counterproductive. Going out of your way to use different elements from the ones they’re using will likely lead to an awkward implementation that isn’t user-friendly. Instead, looking to those existing features will allow you to see which parts of them would work well for your specific needs and how to approach your design with those observations in mind. Learn to look at different designs and pick up small parts that you feel would make sense for your project, whether it’s layout concepts, sizing, or navigation. Look for inspiration Where to go Bookmarking a list of go-to places for design inspiration is a boon for any designer, but it’s important to know what to look for and how to use them. It’s a good idea to look at current web design trends regularly, even when you’re not working on a specific feature. There are also many talented designers out there whom you can follow for general research and aesthetic inspiration. When looking for ideas pertaining to a new feature, there are a lot of different places to draw ideas from, but they largely break into three categories. Design sites: Well-known websites like Dribbble and Behance act as both portfolios and social networks for designers. Using design and web design inspiration sites is a great way to challenge yourself to improve your skills and research how others have imagined a feature you’re working on, and to see the feedback they received. An important caveat when browsing these designs is that they’re usually UI-centric and not as UX-focused. This doesn’t always matter, but, occasionally, you’ll see stunning re-imaginings of common features that are lacking functionality or have confusing UX upon closer inspection. Even when designs look very impressive or are created by well-respected designers, you should still look for where they can be improved. Your opinions and insights always matter, no matter whose design you’re looking at. Relevant apps and websites: When you’ve been assigned a feature that’s been done in other platforms, the first thing you should do is look at how they approached the design. This will set the standard for what’s already out there and give you ideas on how a similar take might work on your platform. Sometimes, very different products have overlapping features. For example, a TV-streaming app and an online course library might each have a “my list” feature that allows you to save videos to watch later, but the nature of the platform will dictate how the feature is implemented. A list of TV shows is much lower commitment than a list of courses, so a TV-streaming platform can present you with shows you’ve saved but aren’t currently watching on your homepage. And don't forget to look beyond the obvious: here's why the best web experiences won’t look anything like what Big Tech built. Courses, on the other hand, are long and require your full attention. Seeing a long list of those every time you open the page might be overwhelming. The context of a platform makes a big difference in implementation, and, sometimes, that’s what’s going to drive a concept forward. No one person can do everything, and no one is expected to. Don’t hold yourself up to imaginary standards; celebrate your abilities from time to time. Competitors: It’s likely that several of your features will overlap with your competitors since you have similar platforms. While it’s difficult to try to build something differently than what you’re already seeing, it’s a great design challenge and an opportunity to make something better than what your competitors have. They’ve set the bar; now it’s your turn to raise it. If you’re not the only one in your space, you may find yourself implementing a feature already built by one or more competitors. Obviously, you should never copy someone else’s designs, but when you’re implementing features already built by competitors, it’s important that there are fundamental distinctions. Ask yourself the following questions: How does this feature specifically fit within your product and cater to your user base? This will determine what sets your use of the feature apart. What steps can you cut out? Where can the layout change? These questions can sometimes allow you to figure out how to articulate your core value proposition in contrast to your competitors. Dos and Don’ts Make sure you’re using your time productively when drawing inspiration from others’ designs. The best time to do this is before you’ve started any design work on the feature and are at a preliminary doodling phase. If you only start looking for inspiration after you’re deep into the design, you might not be as receptive to changes that could improve it or need to undo work you’ve already done. Avoid the classic pitfalls by following these rules: Do: Look for elements you can incorporate. Learn to look at different designs and pick up small parts that you feel would make sense for your project, whether it’s layout concepts, sizing, or navigation. Don’t: Copy something as-is. You should always rework things to make them your own and use ideas rather than exact designs. Do: Rethink your approach. Come at the process with an open mind and be willing to let go of ideas you had before, especially if they weren’t working for you. Don’t: Obsess over a specific design that’s impractical due to your abilities or implementation times. Always know your weaknesses and play to your strengths. If a design is heavy on illustration and that’s not your forte, it’s best you move on to something that will work better with your set of skills. Do: Get an overall sense of what you like or don’t like about a design and think: How can I approach this differently? We all have different design sensibilities, and you can bring something to the table that no one else can. Don’t: Look over polished work and feel deflated or intimidated. If you see something that you like but don’t think you’re able to reproduce it, it might not be for you. Think about other ways to achieve a similar result. If you think it’s something you can learn, you can use it as an opportunity to acquire a new skill. Look up the specific method for tutorials or take an online class. If you talk to your employer (and there’s available time), they’ll likely encourage this and allow you to do it on company time. After all, your development benefits them, too. Some of the designers we stack ourselves up against have been working for much longer than us and have different tools available at their disposal. No one person can do everything, and no one is expected to. Don’t hold yourself up to imaginary standards; celebrate your abilities from time to time. How drawing inspiration makes you a better designer Using existing designs as prompts keeps you from putting unnecessary stress on yourself and will allow you to get through your tasks more efficiently. At the end of the day, the quality of your output is what matters most, and whether or not you borrowed ideas from different designers or products is irrelevant. Looking at other creatives’ work, you might find there’s an aesthetic or particular UI element type that you didn’t realize you liked or you could implement. Being exposed to more content allows you to understand yourself better as a designer. You might also see alternatives to things you were doing that make more sense. and incorporate them into your own design language. We’re best at our jobs when we’re learning and evolving, and we should look to do that whenever and wherever we can. Watching tutorials, taking classes, and looking at others’ work challenges us to be better and learn more about ourselves. There’s a certain amount of defensiveness about other people viewing our work and the quality and originality we want to have as designers. When developers code something, you can judge it relatively objectively by how well it performs the task at hand and by bugs found. As designers, our work is much more subjective and complicated. Often, we don’t get feedback on features from users until months after we’ve designed them and moved on. We want to feel a sense of pride in our work - which we should - but we also shouldn’t let that pride and defensiveness hold us back. Our job is to make the best products possible, and we should use any and all tools we have at our disposal for that purpose. It may be hard to let go of that defensiveness and accept that we could learn from looking outward. Yet drawing inspiration from others’ designs is a standard practice that most designers use. For the good of your company, but mainly for your own good as a designer, open up and see what’s out there. Get inspired and inspire others While it’s helpful to draw inspiration, it’s also important to give back. Become an active member of design communities to learn from others and to show your work, too. People will often seek out new designs to check out, so even if you don’t have any followers at first, your work can still be seen. Designers are usually respectful and give insightful and encouraging feedback. Uploading your work allows you to get notes on where things are working and where they can be improved. Challenging yourself to give others (constructive) feedback can also sharpen your ability to look at your own designs and figure out where you can elevate elements to make it better. Feeling like you’re part of a larger design community and that you can also contribute to others’ processes can help make drawing inspiration from community members feel more natural and reciprocal. We should always strive to be the best designers we can be. Being a designer is no different than any other job, in that you’re never going to know everything there is to know and there will always be room for growth and improvement. Instead of feeling prideful of our skills and weary of the knowledge that we are still lacking, we should embrace it as an opportunity. What makes a good UI/UX designer isn’t that they have reached their full potential and have no more room to grow; it’s that they continue to learn and better themselves and their products.

If market domination isn’t what your client is after, you can stop reading here. Carving out your own place in the market landscape is no easy feat. It’s about knowing your audience, knowing your product, knowing your competitors and knowing how you fit in as an essential part of the puzzle. Let’s face it, we all want to be that missing je ne sais quoi. We all want customers to buy our products thinking, saying and feeling: “You complete me.” And your clients aren’t any different. In order to successfully scale your client’s business, you need to have a pulse on market trends, their competitors and their company’s strengths and weaknesses. Then, translate all that data and key insights into an actionable marketing plan that sets their brand apart. Welcome to the world of competitive analysis, a methodology to assess one’s place in the market, identify competitors (direct and indirect) and build a marketing strategy in response. Regardless of your client’s industry, reaching their target audience is more competitive than ever before. So you need to stay ahead of the curve—because this is about the livelihood of you and your clients What is a competitive analysis? Competitive analysis, or competitive intelligence, is the process of gathering and assessing data about other companies vying for market share in your client’s industry. Your ultimate goal is twofold: 1) See how your client’s business and their products or services stack up against competitors. 2) Develop strategies to make their brand the clear choice among customers. Pooling data from multiple sources and touchpoints, both internally (your client's sales records, quarterly goals/projections) and externally (market forecasts/reports, competitor promotions), gives you a broad picture of where their brand ranks and how to penetrate new areas of the existing market. The importance of competitive intelligence and analysis in marketing Conducting an in-depth competitive analysis has far-reaching implications, impacting every aspect of your client’s business. Here are just a few benefits of how market research and analysis can make a difference. Understand your client’s strengths, weaknesses, challenges and potential The core of any competitive analysis comes down to a SWOT analysis. A 2x2 matrix assessing your client’s business’ (as well as products) strengths, weaknesses, opportunities and threats. When identifying strengths and weaknesses, focus on your client’s business alone. Items that fall under weaknesses and opportunities relate to your client’s market or industry as a whole. Strengths: Things your client does well, including qualities and values that set them apart from their competitors. They can be product or resource focused. Don’t discount the expertise and strength of your client’s team. Human capital is incredibly valuable. Weaknesses: Things your client’s business lacks, limitations to their resources (finances, inventory, technology, employees, knowledge) or areas their competitors simply do better. Opportunities: An underserved or emerging audience for your client’s products or services, lack of competition, a growing need for your client’s products or services (Did somebody say face masks?), or trends in the market. Threats: New competitors or an oversaturation of competitors in your client’s market, instability in the industry or new regulations/laws that make doing business more difficult, negative changes in public perception about the products or services your client offers, bad publicity (your client’s product is being recalled), or quite possibly the worst situation, no product-market fit. Enhance product features or service offerings Complete an audit of your client’s products or services. Do a side-by-side comparison of their products or service offerings with their competitors, tallying their strengths and weaknesses. When conducting your audit, here are some basics to consider: Does their product have better specs? Does it have a unique selling point (made in the USA, locally sourced, vegan leather or Fair Trade Certified)? Do they offer services that are hard to find? Is their staff more experienced, or more sought after? Are their products or services over-priced, at-market cost or below the market standard? How does this price point position your client—as a luxury brand, or value for the money? Clearly identify areas in which your client’s products or services make them stand out in the market and areas they can improve to better compete. (By the way, you can do the same for your own agency positioning.) Diversify a product line or develop new products Building on a product or service audit, you may realize your client needs to up their competitive game by expanding business offerings. Look outward at your client’s competitors and see how they’re able to take a larger share of the market by giving customers more of what they want. If your client has a service business, they can quickly up sales by creating custom branded products promoting their brand, or dropship products related to their industry. Let’s say your client owns a pilates studio. They can diversify their business offering by selling pilates and yoga related products, such as mats, fitness rings, foam blocks and more. Plus, with print on demand, they can create tees, tanks, leggings and totes with their logo and studio name. Chances are their most avid clientele will buy these items, boosting sales while promoting their business. Assess the market landscape Analyzing your client’s competition gives you vital info about the market as a whole. When you identify the major players of any market, you soon realize if it’s oversaturated, dominated by one MVP or if there’s healthy competition and room for growth. In an oversaturated market, or one that has a clear leader, you need to be honest with your client. Draw attention to hidden opportunities and strengths they have and how they can potentially pivot their products or services to capitalize on the market. For example, if your client is in an oversaturated drone market, they could pivot their product offering and focus on high-end drone accessories, like cameras. If your client is in a market with fair competition and no clear market leader, overhaul their marketing plan. Harness the power of influencers to reach new audiences, incentivize repeat business, change up their product line or offer popular services in bundles and more. Moreover, clients in this kind of market need to be made aware of possible threats. What are their competitors doing now that could cut into their future market share? How can they stay smartly on the offensive? Support your clients with strategic planning that accounts for their current situation while anticipating changes to the market. Identify emerging segments Combining what you learned from your client’s SWOT analysis and the current market landscape, you should be able to start connecting the dots to new opportunities. Emerging market segments and niche audiences in particular could mean big rewards for your client. New segments enter markets with more or less buying power, while others in the population age and their needs shift. Additionally, public perception about certain products and services change over time. Pay attention to the root of evolving attitudes. Nowadays, many businesses are directly impacted by a lack of economic stability and consumers that are choosing to save instead of spend. Your clients need guidance on how to adapt their marketing efforts and messaging to cater to new segments, or the fluidity of existing ones. What worked for their initial target audience or customer-base may not lead to conversions with new audiences, especially in times of economic uncertainty. However, if they are able to speak to these segments in a meaningful, authentic manner, they’ve come more than halfway to building a loyal consumer base. When addressing niche audiences, research is the only way to their hearts and their pockets. Invest the time in thorough research, engaging with focus groups and developing buyer personas for your client. Ultimately, it’ll come down to truly understanding the unique pain points of this group and then putting a spotlight on how your client’s products or services is the solution they’ve been waiting for and can’t miss out on. Create a strategic marketing plan Chances are this is why your client called you in in the first place. They have a product. They have potential customers. They just need help communicating to their audience why they really need this product. Your client won’t realize all the research involved to get your agency here, down to the planning stage. But that’s why you're the pro. Knowing your client’s industry and target audience are the working variables in a performance-driven marketing plan. You have to live, breathe and believe in their product or service like a devout cult follower. To ramp up the conversion process, create an archive of marketing and promotional messaging your client’s competitors use. Then, ask yourself the following: What words keep appearing? Are they industry specific, or more friendly and familiar? Is the ad copy text heavy and loaded with stats, or just a simple and direct call to action? What kind of visual story do they create to sell their products or services? What emotions are they appealing to? Which part of the market audience are they targeting? Would you or your client click on the ad if it popped up on your Facebook feed? Maintaining an archive of competitor ad exemplars is a great way to engage with your client about marketing materials and ad formats. All conversations are centered around shared examples, giving you common ground for dissecting the competition and plucking morsels of winning material to use and A/B test in your own marketing campaigns. Review operational processes Product and process are no doubt interconnected. A competitive analysis prompts you to take a hard look at the tools, systems and technologies that your client and their competitors use. Investigate the structures and processes at play in your client’s business: How can your client best allocate their resources (human included)? Which routine tasks or processes can be automated, or perhaps even cut altogether? What SaaS programs do businesses in their market use and why? What new technologies address common challenges in their industry? Be open and honest when you share your findings. It’s not an attack. You're helping them streamline operations. Oftentimes inefficient company processes and workflows go unchecked for years and an outsider looking-in, even for a short time, can offer invaluable feedback. Improve distribution models Similar to inefficiencies in operations, companies offering the same product or service might employ distribution channels that are outdated, no longer practical, or worse, no longer financially rewarding. Get a firm grasp of your client’s distribution model. Do they get their products directly from a manufacturer, or do they work with one or many wholesalers? Track your client’s expenses end-to-end—from purchasing products, stocking them or storing inventory, to selling it to their customer. Where along this chain can they reduce costs (inventory, handling, transport)? How’re your client’s competitors able to cut distribution costs while maintaining the integrity of their products or services? Like a detective, it’s your task to uncover mysterious clues that point to how your client can maximize profit margins. Shape company culture From employee satisfaction to customer-experience indicators, corporate culture can be a central ingredient to a business’ success or failure. While no company is living it up 9-to-5 in utopia, continually working towards a work environment where all employees feel valued and respected is critical. Get a sense of your client’s company culture from all levels. Does top management feel one way about the company’s vision and quarterly goals while middle management and support feel another? Do employees like coming to work, why or why not? Are they passionate about the products they sell or the services they offer? Do your client’s company values match their employees' values? Their customers? For clients in larger companies, you can anonymously poll employees using tools like SurveyMonkey or Google Forms. If your client is smaller, or prefers a more intimate setting, consider gathering info informally through a custom generated game, like Kahoot!. When employees are on board with the company culture, they understand the importance of business objectives, own their role and responsibilities, and want to make an impact—regardless of their job title. Forge new relationships Valuable competitive intelligence should yield solid leads on potential partners in your client’s industry. These could be influencers, or brand collaborators (even those that worked with your client’s competitors in the past, nothing is off limits). Connecting with these individuals can expand your client’s reach, building brand awareness among a whole new audience. Also consider linking your client to a non-profit, NGO or a social cause that aligns with your client’s values and brand mission. Customers these days are more inclined to buy from businesses that care about their impact on the community and world, not just turning a profit. When going the altruistic route, make sure to choose a cause that your client truly believes in. Make it personal. Here, authenticity is a must. Identifying market competitors A central element to competitive research is focusing on strong and relevant competitors. Depending on your client’s industry, this can feel like an overwhelming task and major drain on resources. But it needs to be done. In early stages, the focus is on breadth not depth. Before you start digging deep into competitor data, quickly reflect on the following aspects of your client’s business: Target audience: Who are their customers? Pain point: What problem does their product or service solve? Unique selling point: How are they solving this problem? How does it bring value that’s different from the competition? Your client’s direct competitors will be targeting the same customers, that have the same problem, using more or less the same products, services or methods. For example, Blue Apron and Hello Fresh are direct competitors. They both target working professionals in urban areas who don’t have time to buy groceries and make a home-cooked meal. Their solutions are near identical, a delivery service offering meals-in-a-box. We can quickly sum up their competitor relationship using a chart like the one below: While it’s critical to get a sense of your client’s direct competition, don’t focus solely on these companies. A narrow view of the market landscape makes it harder for you to recognize and seize new opportunities as they arise, such as emerging audiences. Moreover, it makes it near impossible for your client’s business to safeguard itself against threats, like new companies encroaching on their market share. Aside from your client’s direct competitors, you’ll want to map out and keep an eye on competitors that share the same target audience. These competitors may offer different products or services and solve slightly different pain points, but they have the same or more in-depth knowledge about your shared target audience. Because of that, they’re in a strategic position to expand their business offering when they see fit, easily cutting into your client’s market. Let’s throw in a couple indirect competitors for Blue Apron to illustrate. As you can see, each of these indirect competitors are addressing slightly different pain points or offering a nuanced solution, but they are all targeting the same audience as Blue Apron. If one of these competitors decided to expand their product offering to include quick home-cooked meals, they could conceivably attract and convert portions of Blue Apron’s market share. Once you have a roster of your client’s direct and indirect competitors, choose 5-10 companies that pose the biggest threat. If your client has a specialized niche audience, choose 5 to analyze. If your client is in an extremely competitive market, go with upwards of 10. From your shortlist, dig into the research and start mining the data. Myk Pono, a marketing and product growth specialist, developed a 4-tiered framework for competitor analysis. Each layer is made up of several telling metrics that capture how a company fits in a given market . To organize your research, create a chart with each of your client’s competitors and gather info on the following: Company specific Year they were founded Net worth Location Number of employees Who are their investors? Were they acquired, or looking to be acquired? If so, by who? What makes this acquisition strategic? Who are their partners? Estimated market reach Overall strengths Overall weaknesses Target audience and messaging What products/services do they offer? Who is the primary buyer of this product/service? Secondary buyer? Who is their target audience? What messaging do they use to market their products/services or brand? What is the feel of their brand? What brand links do they use? Product specifications Include specs for products/services that are similar to the ones your client offers. How do they price their products/services? Above market, at market or below? How does this price impact its perceived value? Is this product/service offered as part of a bundle, package or subscription service? Product/service’s strengths Product/service’s weaknesses What do their customers say about their products/services? Unique positioning How can your client compete and win? Why should customers choose your client’s brand over the competition? Once you’ve mapped out your client’s competition in detail, you’ll be able to clearly see how to adjust their business and marketing plans in a way that highlights their brand’s strengths and addresses their weaknesses before it can be detrimental. Basic principles when conducting a competitive landscape analysis for clients There are as many ways to analyze a market and the major players as there are people willing and wanting to weed through the jungle of data. Regardless, there are a few basics that will inform your approach, keeping you focused on what matters. Set specific goals or KPIs Before you begin, sync with your client to establish the depth of analyses needed. If your client has never looked into their market before, they’ll rely on your guidance. As mentioned earlier, a SWOT analysis is a great place to start. Use details from this matrix to define the scope of the research and create measurable objectives. Do they want to bolster their strengths? Are they interested in aggressively seizing more of the market? Or do they need to work defense, reevaluating company weaknesses and plausible threats? How far back in the history of their industry do they want you to research? How far into the future do they want market projections? Prep work for a market analysis is similar to how you’d construct a design brief. Map out all aspects of the research in advance so you and your client are on the same page. You’ll be accumulating a lot of data. It’s vital to stay focused on your client’s unique needs and how to better their current positioning in the market. Know the product Oftentimes a client is too invested in their offering, making it near impossible for them to be objective. While you may not be their target audience, you have an unbiased understanding of how their products and services are perceived and used—at least at the awareness level. Harness this fresh perspective and pair it with some childlike wonder as you deepen your knowledge about their products or services. Play around and tally up all the features. What are the primary benefits to a consumer? What are some peripheral values? Does this product satisfy you on an emotional or rational need? What else does your client offer (or should) that can compliment this product or service? Challenge yourself to think unconventionally. Standardize research and reports While there’s no hard-fast structure or definitive framework to organizing your research, creating a unified standard for your agency should be a go-to play. Templatize all aspects of what your agency covers when conducting competitive research for your clients. This will strengthen communication with your clients as well as ensure nothing gets left out if project’s are passed between members of your team. Regardless of the template you choose, it needs to work for both your agency and your clients. Make sure that it’s easy to use and digest critical data at a glance. Ideally, your adopted framework should tell a story about the market and inspire action. Think like your customers (always) Get in the habit of viewing your client’s market from the consumer’s vantage point. The closer you get to your client’s business, the easier it is to overestimate the value of their products or services. Benefits, features and use cases may all be obvious to you, but are they obvious to your audience? Remember how you felt about your client’s business when you first took on this project? Channel that spirit and hold onto this customer mindset. Study the competition Studying goes well beyond taking mental note of what the competition is up to. It demands that you ask yourself: Why are they doing what they’re doing? And, why now? What’s the driving force behind the products and services they offer? What’s different about their mindset that shapes their approach to this market? It's a constant head game, challenging your ability to anticipate the competition’s next move. But brands with more mental stamina will always come out on top. Review data routinely Competitive research is not a one-off project. It’s an ongoing effort that requires sustained, thoughtful attention. Markets are fluid, trends evolve and competitors come and go. Regularly review the competitive landscape to buffer your client’s business from the unexpected and put them in the best position to succeed. Set routine check-in dates to prompt you to return to the data and update your research as needed. 9 tips to staying on track with your competitive market analysis Now that you’ve mapped out goals for your client and started looking into the data. Here are 9 tips to keep you on track and focused for the research ahead: Explore competitor funnels Follow social footprints Review customer testimonials Dissect the SEO Connect with the competition Be a customer Check competitor job listings Consult your team Focus on the future 1. Explore competitor funnels Visit competitor sites with the mindset of a customer. Do you know what their business is about? What they’re selling? Which demographic does their site appeal to and why? What cues do you get from the visuals and the language they use? When you land on their homepage, do you know what to do (shop, or book a service)? Is the site easy to navigate? When you click on CTA buttons, do you end up where you’d expect? Is the buyer journey and checkout flow seamless? Explore all these consumer touchpoints to get a sense of how your client’s competitors engage, support and close a sale with their shoppers. More than ever, companies go well beyond an online store or about page to establish their online presence. As part of your funnel exploration, pay close attention to content marketing resources. Subscribe to blogs, newsletters and become a regular reader. Watch their ads, tutorials, unboxing videos and more. You'll be able to track new product releases, brand messaging, upcoming promotions and all customer-facing news. Whatever content your client's competitors release is prime source material worth studying. 2. Follow social footprints Friend or follow your client’s competitors and get a sense of the brand story they tell on social. Which platforms are they on and why? How’re they using this platform—marketing, educational, engagement, another sales channel? Which formats do they gravitate to? Are they working with influencers or brand partners? What kind of content gets the most engagement? Take it a step further and identify the decision-makers behind company social accounts. Then, follow their personal accounts. You’ll get an insider look into what inspires them and see what translates into the brand. 3. Review customer testimonials Nobody tells a product story better than a satisfied or unsatisfied customer. While browsing competitor sites, scope out their product/business reviews and testimonials. Get a sense of the competitor’s strengths and weaknesses on a product or service level. Use this insight to position your client’s business in a way that highlights added value, particularly in your messaging. 4. Dissect the SEO There’s a good chance your client and their competitors have a similar online presence. Nonetheless, web-traffic could be considerably different. What gives? Most likely, their SEO approach. Step to the dark side and explore how competitors structure their URLs, optimize meta tags, add structured data and more. This should yield valuable clues to their positioning, as well as give you direction on how to improve your client’s competitiveness in the SERP game. 5. Connect with the competition Take advantage of multiple customer-service channels. You have ample opportunity to make direct contact with your client’s competitors. Use real-time services (phone call, live chat, Messenger), to get more info on their product specs, new features or upgrades, troubleshooting issues and more. You might even uncover something critical to your strategy that you’d never find in a market or industry report. Plus, you’ll have the added benefit of experiencing their customer service first-hand. How long did it take till you connected with a representative? How did they treat you? Was your issue resolved? How did this interaction leave you feeling? Customer service and satisfaction are key elements worth investigating and including in your analysis. 6. Be a customer Companies typically don’t spend enough time inside their marketplace. If you want to get to know your client’s industry and the competitive landscape better, become a consumer of their products or services. Keep in mind, using the product or service is only part of a very big picture. Reflect on your end-to-end buyer journey—from what made you decide to click “Buy Now” to how you felt unwrapping the product packaging. Every little detail matters. 7. Check competitor job listings Are your client’s competitors hiring? No, don't jump ship. The point here is for you to take stock of the talent they look for. How do they list job postings (on their site, social, job marketplaces)? What terms stand out to you? Is this language reflected in their consumer-facing brand voice? What positions are they currently hiring for and what kind of experience do they require? You might discover open positions that reveal entirely new directions or divisions for the company. Use this knowledge to buffer your client from upcoming threats. 8. Consult your team You might be sitting on an untapped resource—your own staff. It’s entirely plausible to have an employee who once worked for the competition, and/or has a direct connection with someone currently on the “other side”. Conduct an informal but thorough interview with this individual. Encourage openness and transparency. This isn’t an interrogation meant to extract corporate secrets, it’s about understanding the company culture of others. 9. Focus on the future Once you’ve finished a competitive market analysis for your client, you’ll be able to draw plenty of conclusions and note new directions for followup research. Remember, despite all the work, competitive research is never a one and done project. For this research to serve as an effective tool that informs your client’s business decisions, you’ll need to continually track fluctuations in the market, consumer behaviors, competitors and more. View your analysis as a panoramic snapshot of where the market is now, where it’s heading and where your client fits into that picture. Based on the data, include a personal market forecast and suggestions for what your client should do to strengthen their positioning and take over greater portions of the market share.

Symbiosis. Where two organisms interact with one another, and both benefit equally. Symbiosis is a part of life, and it has been crucial to the success of many creatures (not just humans) for many years. For example, let’s talk about the oxpecker and the zebra. In the wild, the oxpecker (a bird) will reside on a zebra’s back, and it will eat ticks off their body. The oxpecker gets a meal and the zebra loses the parasites. That’s a symbiotic relationship. When both individuals are benefiting from each other’s interactions. Now, what does this have to do with learning to code or design? Good question, and we’ll get to that. All too often I see people discussing/arguing about how designers should learn to code and developers should learn design theory. I’m not on either side of the argument, but I’d like to highlight the benefits and drawbacks of each option. Essentially I want to highlight the opportunity cost of learning to code as a designer. Benefits of learning to code Coding is a world of its own. I have been coding (at a professional standard) for a few years now, but I started my journey around seven or eight years ago. I now focus on front-end web development, but I have worked on projects involving databases and backend functionality too. What this has given me is an oversight of the level of effort and difficulty of implementing certain design decisions. Timelines For example, if - as a designer - I wanted to suggest we develop an advanced piece of map input which lets the user drag around a pin, pops up nearby cafés on the map, and allows a user to drag some cafés into their favourites, I would know this is a complex piece of functionality and would take at least a few weeks to get right. Therefore, if I knew the project was on a tighter schedule, and we only had a week, maybe I would consider suggesting a simpler input, and mentioning the map functionality for a future development sprint. Having this understanding for difficulty and timescales helps avoid conflicts with developers who may be overwhelmed by what is being asked for in a tight timeline. In addition, if I suggest something I know should take relatively little effort and it gets pushed back, I have enough understanding of the work involved that I could question the decision. Maybe the suggestion was not properly understood, or got lost in translation. Learning to code - even if it’s mainly the basics, can help you (and your colleagues) communicate better via a shared language. Feasible solutions An integral part of any design process is understanding constraints and working out how to get around them. However, with no knowledge of code you will be unaware of the different constraints each platform you are designing for will have. This could seriously impact your design process, and most likely slow it down. For example, if you were designing a number of email templates for a company, you might be tempted to include a beautiful, complex layout and some nice interactivity. However, if you know how difficult it is to create email templates from scratch (seriously, why is it still this hard?), you might choose to go for a simpler layout. Without the knowledge of this constraint, you’d likely design a beautiful email template, only to be knocked back by the person developing it and have to start over again. This wastes a lot of time for both you and the developer. Solving common problems As a designer, you’ll likely be focusing your learning on the front-end, as it’s a lateral move into the development world from design. Understanding the front-end code - which styles the application or website - allows you to solve common issues that may arise. For example, imagine you are working with a full-stack developer who prefers working on the back-end functionality more than perfecting the front-end. This may lead to a few inaccuracies between your designs and the final product. Let’s say one of the inaccuracies is that the spacing between different sections is too little. With knowledge of HTML and CSS, you would probably be able to spot a problem in the code for padding or margin, and suggest a fix to the developer (or if you have access, fix it yourself). This knowledge would enable you to quickly pinpoint a problem, and therefore the solution could be realised sooner. Collaboration and language One pain-point I’ve noticed when working between design and development teams is that the language used to describe a problem can vary. A project I worked on in a past role used a document which provided terms and their definition to help everyone use consistent and unambiguous language. This began to get quite verbose, and let’s be honest, nobody is going to re-read the document before a meeting or quick conversation. Learning to code - even if it’s mainly the basics, can therefore help you (and your colleagues) communicate better via a shared language. With more precise and accurate terminology in your toolbelt, you could describe issues with better precision, suggest changes, avoid misunderstandings, and generally communicate more efficiently. We’ve discussed the benefits of learning to code, however it’s not a one-sided argument and there are also some drawbacks to consider. Let's dig into those. Drawbacks of learning to code Time Learning to code takes time - there is no shortcut, no easy way out and no way to just read a book and know how it's done. There are a lot of courses out there that make big claims, like you'll learn to code in a week. Personally, I highly doubt these claims, because there is such a wide range of languages, devices and platforms in the coding world. If you do find a course that teaches you everything in a week though let me know, I’ll try to get a refund on my £40k degree. For example, when making an Android app, you might use Java or maybe Kotlin. However on the web, you'd probably use HTML, CSS, and JavaScript or TypeScript or Python or PHP. The best way to become good at coding is to constantly train yourself, like you would at a gym. A few days or weeks off and you're rusty again (believe me, I've had a few holidays and come back to coding like "what am I doing again?"). My point is: learning to code at any sort of helpful level will take a significant amount of time. As a designer, that time could be spent elsewhere. For example, you could choose to improve your accessible design skills, ensuring any design you pass along is already meeting accessibility guidelines (like those by WCAG). You could also learn how to use a prototyping tool instead, giving you the possibility to create complex interactions that help better convey your desired designs and ideas to developers. These interactions could take you far longer to mock up with your new coding skills. So, there is an opportunity cost of learning to code. You are sacrificing weeks of time that could be dedicated to honing your skills in another way. This isn't to say that you shouldn't learn to code. This is just highlighting that it's not the only thing to invest your time into in order to improve career prospects and team efficiency. Learning to code at any sort of helpful level will take a significant amount of time. As a designer, that time could be spent elsewhere. Thinking inside the div tag box Often when I work with great designers, they produce experiences and interactions that I wouldn't have ever dreamt of, because they are coming at the problem with a clean slate and fresh ideas of how the problem can be solved. However, when you learn to code, I believe you are coming at the problem already aware of some of the restrictions of your platform/language/device. As a result, the solutions you come up with are likely to be a little safer. This isn't always a bad thing - producing more sensible designs can save time, potentially be more usable and avoid disagreements between yourselves and the developer(s). But sometimes you don't want sensible designs. You want something that's going to make the users say "wow!" So before you jump into coding, remember to keep pushing the boundaries of your designed experiences too. Respect the professions Consider the Oxpeckers and the Zebras of this world. They live in symbiotic harmony because they work together. Designers and developers should be no different. Design is a real job. Development is a real job. Both provide crucial deliverables during each stage of the production process. A great app can't exist without code, and it can't exist without great designs to base that code off of either. The value you add to a team isn't defined by how much you can contribute in terms of lines of code. It's how much value you add while working together. So, should you learn to code? That's down to you. If you really want to make things yourself, go for it, it's pretty fun after you get the hang of it. If you just want to do it for better career prospects or because it's become trendy, consider which other options could take your current design skills to the next level first, as there may be a better opportunity out there.

In recent years, designers have welcomed a variety of approaches to creating new technologies. From social science research methods, to scientific styles of inquiry, to engineering-based models for problem-solving, designers can choose from a variety of ways to tackle any design challenge. One approach that has gained momentum in recent years is speculative design. Popularized by Anthony Dunne and Fiona Raby in their book Speculative Everything, the speculative design movement sparked an interest in critical and imaginative methods for design. The introduction of Speculative Everything in 2013 coincided with a burst of new consumer technologies and the rapid integration of new products and services into our daily lives. When a product or service enters into our daily life, it becomes a part of our reality. The simple act of buying, in part, has direct implications on our future. With so many possibilities for new consumer technologies, we as designers need to continually ask, Is this the reality we want? How might we shape our future through the products and services we create? Speculative design provides a framework for asking these critical questions. It allows designers to imagine what the future might look like if different solutions were adopted. It provides designers with the tools to speculate upon social, ethical, and political implications of new technologies. What is speculative design? In a typical design setting, designers create products and services that are sold to consumers. In a speculative design setting, designers create artifacts and prototypes meant to provoke thought and reflection. Speculative design operates on a more conceptual and philosophical level, by inviting us to question how new technologies might alter our everyday lives, and how they might impact our futures. The core question asked within speculative design is, “What if…?” With speculative design, we start by asking, Is this a good idea? Before asking, How do we make it happen? Speculative design aims to provoke thought about our current world, and our possible futures, through the lense of technology. An example of speculative design can be found in the automotive industry. During annual auto shows and media events throughout the year, car companies showcase a variety of new concept vehicles. Though they’re typically never planned for production, concept vehicles invite the public to speculate upon a future in which the vehicle exists as a part of everyday life. In their book, Dunne & Raby believe that auto shows can take the speculative element further by demonstrating how different concept vehicles could impact the way people move in a future ecosystem. With speculative design, we start by asking, Is this a good idea? Before asking, How do we make it happen? The future is full of possibilities Futures are central to speculative design. Within this context, the future is seen as a range of possibilities. Futures can be characterized as probable, plausible, possible, and impossible, depending on the likelihood of it occurring. A time horizon of ten years (the near future) is considered ideal for speculative design. According to Phil Balagtas, founder of the Design Futures Initiative, if we project too far into the future, we’re more likely to end up with mere speculation. At the other end of the spectrum, if we stay too close to the present, our predictions would have to be thoroughly and critically researched. Speculative design, therefore, exists somewhere in between. It also allows us to identify wild card scenarios, or low-probability, high impact events, that can jolt society in a major way. Based on this model, the future is something that we shape and build through the choices we make today. Speculations based on hard evidence Despite its theoretical nature, speculative design relies on thorough research and analysis. In order to avoid pure speculation, plausible scenarios must be built upon a strong body of well-researched evidence. This can be developed by following evidence-based trends over time, or by examining how certain events have played out in history. Superflux is a London-based design agency which specializes in futures-oriented design. In their various projects, the agency creates scenarios by extensively scanning for trends and signals, while relying on historical and contemporary datasets to derive evidence-based scenarios for the future. Some of their work aids government officials in determining policy changes for the future. Inspiration from literature and contemporary art Designers today come from a variety of disciplines, ranging from art and architecture, to computer science and biotechnology, to psychology and anthropology. With the proliferation of consumer technologies, design in recent years has turned to engineering-based models and social science protocols for problem solving and for studying how people interact with technology. Breaking away from this trend, speculative design looks toward literature and contemporary art for inspiration. From literature, it borrows techniques for crafting fictional narrative, as well as literary devices for keeping readers immersed in a make-believe world. Like literature, speculative design is also a way to explore human nature, constrained only by what’s possible through language. One genre that closely mirrors speculative design is speculative fiction. A key figure in this genre is Booker prize winner Margaret Atwood, author of many books, including The Handmaid’s Tale. In an interview to The Guardian, Atwood distinguishes speculative fiction from science fiction by noting that it is based on events that “could really happen,” drawing it away from the fantastical and towards the realm of the possible. Speculative design also borrows practices from contemporary art, such as the use of objects for social commentary, rather than for commercial or functional purposes. Speculative designers may also use museums and galleries as spaces to display their work for public consumption. One interesting example of speculative design is Facestate, a project by Amsterdam-based artist collective Metahaven. This work speculated upon the possibility of a social network becoming an independent state. The artists created objects that represented the type of government, currency, and surveillance system such an entity might have. According to Metahaven’s Vinca Kruk and Daniel van der Velden, these objects were meant to be “more of a prototype, a sketch, than a finished product,” in contrast to the polished commissioned pieces which we often see in galleries and museums. Building upon an evidence-based foundation, speculative design adopts techniques from literature and art, placing an emphasis on the use of criticism and fictional narrative. Finally, speculative design also draws from a range of specialized disciplines, including critical design, design fiction, design futurism, and strategic foresight. Speculative tools and frameworks Below are some tools and frameworks to provide a sense of what speculative design practices might look like. A number of these are borrowed from strategic foresight frameworks, and can be used on their own, or combined with other design approaches: 1. Scenario building Scenarios are stories about what the world might be like tomorrow. Scenario building involves following trends across time, and recognizing how key technological, social, and political forces might impact the future. Some scenarios can seem far fetched, but they are important reminders that we can overlook possibilities, simply because they seem implausible to us now. Scenario building starts with a focal point, such as how biometric tracking might be used to monitor health. We can map out known trends, such as age demographics in the next ten years. Then we can consider possible unknown forces, such as government regulations, public opinion, or potential misuses of biometric data. Questions to ask are: What are the most important technological, social, and political forces to consider? How certain are we about each of these forces? As a key feature of speculative design, scenarios can be illustrated through writing, storyboarding, film, or a number of different ways. By developing complex, detailed scenarios about what might lie ahead, these exercises serve to inspire thought about the hopes and fears surrounding different technological futures. They also allow us to explore alternatives that don’t necessarily sit comfortably with our current understanding of the world. 2. Backcasting Backcasting is a framework that involves working backwards from a chosen scenario. A scenario is chosen to illustrate a precise and detailed situation from the future, and backcasting provides a framework for working backwards in time, breaking down the steps needed to achieve the prospective goal. Key events, or milestones, are identified to illustrate a path toward this future. For example, backcasting can be used to establish milestones for working towards a future in which certain sustainability criteria is met for electric vehicles. Working backwards enables us to determine how technologies and policies need to fall in place for the desired future to come to fruition. This exercise allows designers to think about how the products in question can shape our life and society, instead of focusing merely on the product and the technology behind it. 3. Artifacts from the future Artifacts from the future can be imagined as items that an archeologist traveling ten years into the future would bring back, as an illustration of what daily life would look like then. These artifacts serve as tangible conversation starters, in order to make scenarios more concrete. Tangible prototypes also serve as great starting points for critical discussion. For example, this might be a news feed from the year 2030, a face mask worn in futuristic New York, or an object from a remote workplace of the future. Artifacts from the future are objects that provoke thought and dialogue and, according to Dunne & Raby, may knowingly include contradictions and cognitive glitches to make us think twice about its purpose and impact in the world. Although these prototypes are not meant to be preliminary versions of a commercial product, they can nonetheless help designers gather information about what and how to design products and services that can bring us closer to our envisioned goal for the future. 4. Futures wheel The futures wheel framework is an exercise for exploring the direct and indirect implications of a new product, service, or technology. By placing the object of inquiry in the center, designers can map out the first- and second-order consequences of introducing a new product into the world. With engineered (or “clean”) meat, for example, a direct implication may be the availability of greater supermarket options or new restaurant menu items. An indirect implication could be the preservation of rainforests normally cleared for livestock grazing, with further implications being a deceleration of climate change due to large-scale efforts in producing meat substitutes. This exercise allows designers to think about how the products in question can shape our life and society, instead of focusing merely on the product and the technology behind it. 5. Fictional narrative Narrative can be used as a design tool to articulate scenarios in a rich and compelling way. It helps us illustrate a point of view, in a way that logical arguments fail to do. Speculative design also employs fictional narrative in order to craft future scenarios, weaving together fact and imagination. Narrative within speculative design can bring in elements of humor, satire, or subtle forms of absurdity for emphasis. The use of narrative also allows for unconventional framings, such as viewing a futuristic city from the perspective of an autonomous vehicle. In the film Where the City Can’t See, speculative architect Liam Young crafts a narrative entirely from the perspective of a driverless car, through the lens of laser scanning technology. The film follows a group of factory workers in search of a spot in the city that exists but doesn’t show up on a map, wearing clothes that camouflages them from machine vision technology. One famous example of narrative used for exploring technological futures is the Netflix series Black Mirror, which eerily speculates upon the implications of new technologies embedded into daily life. Critiques of speculative design A lack of actionable solutions Without the emphasis on creating commercially-viable products, speculative design can seem like a futile exercise, producing outputs that are not immediately actionable. Nonetheless, speculative design has the potential to enrich product and services development, especially when companies like Visa, Ford, Pepsi, Samsung, and NATO have hired science-fiction writers to craft visions and speculations for the future. For whom? By whom? An important question to raise in any design practice is, For whom? By whom? It’s crucial that designers are not placed at the center of the process, assuming a single reality, when there could be seven billion possible ones. Designers can mitigate this bias by bringing in different perspectives throughout the design process, while playing more of a facilitator role. Understanding who the audience is, is crucial for framing outputs in an impactful and accessible way. A bias towards dystopian worldviews While a healthy balance of optimism and pessimism may be important for speculative design practices, the discipline can veer dystopian at times. Exposure to too many dark and estranged scenarios may be paralyzing, and lead to a passive and fearful view of the future. Speculative design is not meant to be a disheartening practice, rather to encourage designers to be proactive about shaping the future. Final thoughts Design can be a useful tool for provoking thought and discussion around what we’d like to happen in years to come, and shaping, instead of reacting to, what’s ahead. While it’s important to design products and services to meet today’s needs, it’s also important to explore the social, ethical, and political implications of the new products and services we produce. Speculative design helps us realize that there isn’t just one way, but many ways to go forth into the future, through the roles that we play in helping it to take shape.

Whether you’re thinking about your short-term or long-term business goals, B2B lead generation is as important today as it’s ever been. A strong approach to generating B2B leads can set up your agency for big gains now and well into the future. Of course, it all depends on the effectiveness of your methods. This is where things get interesting, because there’s no “one right way” of snagging top leads. The key is to get a clear handle on the various factors that go into the process, then to build a system that works—and keeps working—for you and your clients. The 3 steps of the B2B lead generation funnel The obvious goal is to quickly convert leads into customers. But what steps are taken to get them from initial point of contact to the conversion? In each case, the customer moves through a process that can be broken into 3 basic steps: 1. Initiation The customer becomes aware of the product or service. 2. Evaluation The customer assesses the offerings by comparing it with competitors. 3. Conversion The customer takes action by buying a product or joining a program. The main channels for B2B lead generation There are many channels to choose from when generating leads. Using multiple channels at once will help boost your conversions. Here are some of the main marketing channels you can use when targeting your leads: Content marketing Writing content that’s strategized to meet the target audience’s needs. Social media Creating engaging ads and sharing posts on Twitter, Facebook, Linkedin and Instagram. Website features Building landing pages, minisites and online forms with tracking tools and analytics. Email marketing Sending out marketing emails with outbound correspondence aimed directly at potential leads. Traditional ad buys Buying PPC (pay-per-click) advertisements on Google and Facebook. Interpersonal initiatives Hosting in-person and online events for potential leads to attend. 23 tips to optimize your B2B lead generation strategy Creating a successful strategy for generating high-intent B2B leads can be a challenging endeavor. That’s why we put together this list of top strategies to help your agency achieve success. Here are 23 tips to optimize your agency’s B2B lead generation strategy: 1. Optimize your website’s user experience 2. Engage visitors in real-time 3. Boost SEO with a blog 4. Write for other blogs 5. Join an online marketplace 6. Publish research 7. Host webinars and podcasts 8. Use engaging videos 9. Cross-index assets 10. Offer freebies 11. Produce evergreen blog content 12. Stay updated on the latest trends 13. Launch a minisite for your agency 14. Track data and analytics 15. Market on social media 16. Master LinkedIn 17. Incentivize customer referrals 18. Take time to build client relationships 19. Hire relevant micro-influencers 20. Add site automations 21. Network with potential clients at events 22. Host your own live or online events 23. Mix and match marketing tools 1. Optimize your website’s user experience Your website is your agency’s online foundation and it’s important to make sure that it makes a good first impression on visitors. Because B2B customers traditionally begin with a clear idea of what they want, minimize the barriers to starting and sustaining the customer-company relationship. Imagine you’re visiting your site for the first time, see where you can make improvements. Spend some time interacting with different elements like watching your videos, navigating through different pages and viewing your site on mobile. Take note of what you liked and what you would change and use those insights to optimize your website. To ensure you’re converting visitors into actual leads, add signup forms to your pages and collect visitor information. The more you customize your forms, the more accurate your segments will be. 2. Engage visitors in real-time No matter what your online strategy is, you always want to remind potential clients that there’s a human behind every interaction. Consider implementing live chat to engage customers directly on your website. You can respond to questions, offer special deals and increase conversions in real-time. To drive more conversions, set up auto-greetings to inform visitors of recent updates and add a lead capture form to collect their information while you’re offline. 3. Boost SEO with a blog Virtually all studies of B2B lead generation tactics indicate that creating a blog is as effective as it gets. Blogs are great for SEO. Their posts appear in search results more than any other type of content. Blogs can also raise your industry profile and help define and promote your brand. Many B2B buyers depend on reading multiple pieces of content before making any decisions. Plus, the more you blog, the better your results will be. Hubspot reports that companies posting more than 15 blog articles monthly generate 4 times as many leads as companies publishing 4 or fewer pieces in the same span. So make sure to keep creating fresh content on your blog. 4. Write for other blogs Writing for other blogs is considered one of the top practices suggested by SEO experts. It’s also another great area of opportunity for lead generation. If your article can find a home on an established blog, you’ll tap into pre-existing sources, increased domain authority and built-in site traffic. 5. Join an online marketplace Another great way to quickly generate qualified leads is by joining an online marketplace. Businesses typically use a marketplace to hire an agency or freelancer to help with services like SEO, marketing and web design. Adding your agency’s offerings in a reputable marketplace will help you generate high intent leads, so you can further filter projects by budget, service and intent. 6. Publish research B2B customers tend to appreciate hard data, well-researched advice that’s freely accessible online. By this point, there are countless forums that deliver research on demand. Crafting an eBook remains a popular tactic, especially if you explore a topic that speaks directly to your target. For something shorter, consider writing a white paper or illustrating an infographic. The best content is not only engaging but shareable, generating conversation around your brand. 7. Host webinars and podcasts Webinars and podcasts have become increasingly easy to produce and promote—a positive development for agencies. Most webinars are used to sell, but leading with educational materials will bring real value to your potential clients. Webinars are also a great way for agencies to build and establish their areas of expertise. Focus on topics your agency knows best. Doing this will draw in your target audience and build a sense of trust. Plus, webinar participants are typically encouraged to provide their email addresses, so you’ll be generating leads right off the bat. Podcasts still draw a relatively small number of people but can be very effective for the quality of those audiences. Podcast listeners are likely to follow a series and tune in on a weekly basis, making them loyal and highly engaged with your content. 8. Use engaging videos YouTube isn’t just a place to share and watch video content, it’s actually the world’s 2nd biggest search engine behind Google. Today, creating quality videos is easier and more affordable than ever with intuitive video maker tools. Find ways to create and post engaging content of your own, for example on YouTube or other growing platforms like Vimeo. Consider making how-to guides or serialized features inspired by your product. Be sure to keep these videos fast and fun to prevent losing interest. 9. Cross-index your assets By generating various kinds of content, you give yourself opportunities to cross-promote, which will then widen your reach. In your webinar, feature a link to your blog. On your blog, embed a video that’s posted on YouTube. In your YouTube video description, include a hyperlink to your eBook. You should be able to leverage every piece of content through cross-promotion. 10. Offer freebies Free, gated content can help further qualify your leads. Prospects will be more educated on what your agency has to offer. Data also suggests that customers build both strong awareness of and positive associations with companies that serve up free valuable content. You have a wide range of options you can offer your potential clients, from a free eBook to a free online workshop. Try creating a few different types of content and see which asset attracts your target audience. 11. Produce evergreen blog content With any content marketing strategy, it pays to keep long-term objectives in mind. Sure, you want your content to address hot topics that will draw immediate interest. At the same time, seek out subjects that stay relevant, and that will generate traffic later down the road. 12. Stay updated on the latest trends Lead generation strategies and tools are constantly evolving. It’s important that your agency adapts to these changes to get ahead of the game. A good way to stay up to date is by following the latest agency trends and innovations. Take the updates that are relevant for you and integrate them into your strategy. 13. Launch a minisite for your agency If you want to further segment your customer base, consider creating a smaller, self-contained version of your site that focuses on a particular feature or area of interest. Such sites can be especially effective for long-tail keywords. For example, “Hire digital agency for web design.” While pure search volume for long-tails isn’t particularly high, potential clients are more likely to convert when they find the exact thing they’re searching for. 14. Track data and analytics With site analytic tools like Google Analytics or Hotjar you can track your site visitors’ activity and assess exactly how well your lead generation is working. Once you’ve collected this data, use it to determine what visitors like on your website, then optimize your webpages to boost engagement. 15. Market on social media Social media marketing always causes a lot of debate, and the data around its effectiveness in B2B lead generation remains uncertain. For example, the numbers indicate that Twitter is not a strong tool for B2B leads, despite previous claims to the contrary. Facebook, on the other hand, appears to work better—when used properly. If you do intend to budget time and resources for social media marketing, dig deep into the figures and make sure you’re using the latest trends to make the most of your ads. 16. Master LinkedIn If there’s a social media option that’s ahead of the pack for B2B lead generation, it’s LinkedIn. It’s currently the platform of choice for content-distribution among B2B marketers. According to recent studies, 80% of B2B leads come from LinkedIn and 94% of B2B marketers use Linkedin. You can also use their tools like the LinkedIn Sales Navigator. This tool helps agencies target the right audience, understand key insights and create a personalized outreach on their platform. 17. Incentivize customer referrals While it may seem old-fashioned, word-of-mouth is still a very powerful sales tool. It remains the primary engine driving roughly half of all buying decisions, and agencies that lean on referrals generate significantly higher conversion rates and faster closing times. Think about incentivizing the referral offers you make, for example, you could offer your clients a discount on your monthly site maintenance subscription. 18. Take time to build client relationships Landing the best B2B leads typically requires tenacity and resourcefulness. From the start, you must be dedicated to nurturing prospects, cultivating relationships and seeking opportunities in unlikely places. B2B relationships tend to have long lifespans. If you make your lead-generation efforts as distinct and personalized as possible, you’ll set the right tone going forward. Take time to get to know your target audience. Look at their offerings, goals and overall mission. Bridge the gap by sending them emails, setting up calls and attending relevant events to find out what they’re interested in. Remember, this is a 2-way relationship, so you’ll want to feel as comfortable with your customers as they are with you. 19. Hire relevant micro-influencers Famous influencers can be pricey and overexposed. Micro-influencers, on the other hand, represent a less-tapped and more cost-effective source for lead gen. Despite having fewer followers, they can exert the same relative sway. Take travel photographers with 10,000+ Instagram followers—they might have a smaller reach, but they have direct access to an eager, engaged subculture of nature lovers. Consider finding a professional that’s relevant to your agency. For example, if your agency offers SEO, find SEO experts and ask them to write a post for you. Then, ask the micro-influencer to share it. 20. Add site automations Automations can be a big game-changer when it comes to getting more conversions. For example, you can send automated emails triggered by site actions. Let’s say a visitor signed up for a webinar, and that triggers an automatic confirmation email that showcases your related services. This will entice them to learn more about your offerings and increase the chances of them converting. 21. Network with potential clients at events Although COVID-19 has minimized interpersonal activity these days, it’s only a matter of time before we’ll resume in-person engagement. And it’s worth remembering that B2B lead generation is not exclusively an online concern. When the time comes, embrace opportunities to connect with potential clients and really get to know them. This includes setting up booths at trade shows, attending as many conferences as you can and participating in panels and forums. 22. Host your own live or online events B2B marketers traditionally allocate about a quarter of their budget for live events. When things settle, consider assembling your own slate of activities. The goal is to excite prospective clients and generate buzz that starts after the event ends. Try to emphasize variety, maybe have your micro-influencer host a webinar, followed by a panel that gathers industry leaders to discuss a pressing issue, and then a happy hour where you talk about anything but business. Each event gives you the opportunity to send out signup forms and follow up with questionnaires. 23. Mix and match marketing tools Peak lead-generation is rarely achieved by a single tool, but instead through a combination of tools. Lead generation tools come in a wide variety whether it’s contact forms or email campaigns. Choosing the right tools and organizing them into a logical flow can actually multiply the value of each individual tool. Research the best marketing tools to carry out your lead generation strategy and build a martech stack. In the B2B world, the biggest clients often play by their own rules. While the above tactics are useful, quickly consider a few additional considerations when attempting to score a high-end account. Learn their methods Take time to understand the particulars of how the company does business, both in terms of its operating systems and its corporate culture. Know their decision-makers Find out as much as you can about company leaders. Follow them on social media and directly reach out at the appropriate time. Get everyone involved A big pitch is an opportunity to organize your whole team around a collective endeavor, and solicit ideas every quarter. Conduct frequent group meetings and keep your communication lines open. Maintain balance Be careful about allocating a disproportionate amount of your resources to landing a specific account—you don’t want to put all your eggs in one basket. Enjoy the process Big companies are particularly methodical when making important decisions. Don’t force anything. Like all the best B2B generation strategies, emphasize the organic. The results will follow. #Experts #Marketing_Tools

Some might say UI design is all about the visuals, but is it really the only aspect you should care about? Obviously, everyone is responsible for their own part. All the parts, however, influence each other, as they add up to the same final product. You might be able to create the prettiest graphics in the world, yet they won’t get you far if they don’t go in line with a wider concept. Good interfaces don’t exist in isolation from information architecture, user journeys, and written content. In this article, we’re going to focus on the last part: the words. This responsibility lies with the UX writers. Their role is to create good user experience through product copy. They are the people who write interface (UI) copy, from CTAs and button text to tooltips and app notifications. It’s a relatively new discipline. Not every design team has a dedicated UX writer, especially when it comes to small companies. Quite often, creating the copy (or at least the first draft) is the responsibility of a designer. And here comes the question: do designers actually know how to get it right? When you started learning how to design websites and digital products, you probably didn’t think much about the words. You know everything about visuals, you know a thing or two about typography, but writing might not be your cup of tea. Of course, not everyone has to be an excellent writer. On the other hand, the vast majority of interfaces come with a certain amount of text. As a usability professional, you can’t just ignore that fact. The words are there, and you need to tackle them accordingly. Acclaimed thought leaders, such as John Madea, go as far as claiming that writing is the unicorn skill in design. Even if you don’t have a UX writing expert on board, you can still use some of their expertise. Here are 5 things UI designers can learn from UX writers: Content-first approach We’ll start with a general rule. However tempting it is, drop the lorem ipsum. Without exaggerating, it’s what UX writers hate most – and not without reason. Placeholder text may somehow work for very early-stage UX sketches. UI design, on the other hand, is always high-fidelity. The prototypes can be shown to stakeholders and users for review. Dummy content doesn’t help them concentrate on the purpose of your design. If you use lorem ipsum, your test results won’t be of much use. It’s all because words are an essential part of the experience. Did you know that more than 95% of the information on the web is written? While graphic design can do wonders, it’s still just a part of the equation. At this stage, there is no space for placeholders. High-fidelity means your design should be ready to use. Dummy text can even depreciate your interface and make it feel like just a matter of aesthetics, while there should be so much more to it. A quote by renowned web designer, Jeffrey Zeldman, sums it up perfectly: “Content precedes design. Design in the absence of content is not design, it’s decoration.” Both words and visuals are there to help the users achieve their goals. Here’s how you can make them work together: Use relevant copy to avoid space issues This is a great way to cut down on design iterations. Have you ever created something you were really proud of, and then it turned out that the text doesn’t quite fit? If you were working with real content, this would be much less likely to happen. Dummy text can even depreciate your interface and make it feel like just a matter of aesthetics, while there should be so much more to it. This strategy is also hugely helpful for responsive design. When you have the actual copy from the start, it’s much easier to decide on device breakpoints. Working with lorem ipsum, on the other hand, will almost definitely lead to countless redesigns. In other words, a content-first approach will help you create a design that improves the product instead of squeezing the product into a pretty visual frame. Of course, it doesn’t mean that you need perfectly polished text to start working. Even the messiest draft is a whole lot better than lorem ipsum. And here comes another thing you can learn from UX writers: Involve your writer in the process So, what exactly is the value of having a writer on board? If you’re working on a website redesign, they’re going to start with a content audit. What’s more, writers are storytellers, and UX writers are no different. They’re with you to make sure that your product is telling the right story, both verbally and visually. Have a look at an example of a successful collaboration between the UI/UX team and a writer. If you’ve ever used Mailchimp, a well-known email marketing tool, this GIF probably rings a bell: This screen appears after you send an email campaign. It can be a really stressful step, considering huge volumes and marketing budgets. Mailchimp saw the opportunity and they took it. They used an animation of their brand hero, a chimpanzee named Freddie, along with a friendly message. Here’s the secret: the animation wouldn’t be as effective without the text, and vice versa. Both parts of this design complement each other to create a user experience so good it gained a cult status. It’s so popular that people are sharing images of this feature on social media. It didn’t take me long to find an example on Instagram: Consider translations Designing for different language versions? There’s a rule of thumb among UX writers: if the German text fits, all other translations will fit as well. Although it serves as a good indicator, it’s still just the tip of the iceberg. Other important issues have been raised by Rachael Bundock, the UX Writer of Booking.com, in her article about writing interface copy for translation. For example, different languages may have dramatically different grammar rules. What makes a nice and concise call to action in English might be much longer and more complicated in Russian, Hebrew, or Portuguese. Last but not least, working with translations in mind will also help you create relevant graphic designs. A message may work well as an idiom in one language, but it may turn out less witty (if not offensive) in another. Before you come up with a funny visual touch, make sure it doesn’t get lost in translation. Using expressions like “the bee’s knees” or “in a nutshell” may not work very well in languages other than English. Plain language Yes, the Holy Grail of UX writing. Plain language is the art of using simple words and not using more words than necessary. Although it’s a wide discipline on its own, it’s not rocket science. Even if you’re not a natural-born writer, basic plain language principles are quite easy to master. Here are some of the most important ones to get you started: There’s a rule of thumb among UX writers: if the German text fits, all other translations will fit as well. Although it serves as a good indicator, it’s still just the tip of the iceberg. Use active voice Simple as that. Passive voice will make your copy unnecessarily wordy. What’s more, the message in active voice sounds more persuasive. Have a look at this example: Save your card details to pay. vs. Card details need to be saved for payment. See the difference? The message is virtually the same, yet the first version is shorter and more actionable. The user knows exactly what they’re supposed to do. Choose familiar words It might be tempting to strive for elaborate expressions in order to make yourself sound knowledgeable. See what I did there? When you write copy for the interface, it’s good practice to read it out loud. If it sounds like something you wouldn’t normally say, it probably doesn’t fit. Remember that probably not all your users are native speakers. Using overly complicated vocabulary is only going to confuse them. If you’re not sure about your choice of words, you can have a look at this plain language guide from the US government. Their list of simple alternatives is sure to come in handy! Stick to the limits In her book Strategic Writing for UX, Torrey Podmajersky provides a handful of actionable tips for interface copy. As a UI designer, you might be particularly interested in these rules: Stick to a maximum of 40 characters – Have a look at the headers used in this article. They all have less than 40 characters in total, which is not a coincidence. Torrey Podmajersky suggests that this amount of text (roughly three to six words) can be processed very quickly. You can use this knowledge as a guideline when writing button text, CTAs and other kinds of short copy. Limit your text to three lines – People are able to focus their attention on up to three verses at once. When the copy is longer, they start referring to it as a “wall of text”. If you can’t get rid of anything else, consider breaking the copy into smaller chunks to make reading easier. Leave space for translation – As I’ve mentioned before, some languages may require much more space to express the same thing. When writing in English, use around two-thirds of the available space to leave a safe margin. This leads us straight to another rule of UX writing: Simplicity In most cases, less is more. We’ve already covered this to some extent in the plain language section, but there’s still so much more you can learn from UX writers. User experience professionals often turn to different psychological principles. Have a look at some of the most prominent examples: Miller’s law Have you heard of the tyranny of choice, a term coined by Barry Schwartz? He was the one to claim that more choice doesn’t necessarily make us happier. So, how much is too much? And what is the golden mean? Here’s where Miller’s law may come in handy. It states that an average person is only able to keep seven items (plus or minus two) in their working memory. This rule can be applied to paragraphs, or chunks of text, as well as elements of the interface. Jakob’s law Jakob Nielsen of the Nielsen Norman Group, one of the most acclaimed UX research institutes, has come up with possibly the simplest and the most widely applied rules in the field. Jakob’s law states that users expect your website to work the same way as other websites they know. In other words, there’s no point in reinventing the wheel. Most of the time, using fancy words instead of “log in” or “sign up” is only going to cause confusion. Same rules apply to visual design. Before you apply something revolutionary, make sure it’s not going to distract your users from reaching their goals. This goes in line with the next principle: The principle of least effort The choice of plain language is dictated by a range of reasons, including the principle of least effort. It’s quite simple: why should we choose the more complicated road when there’s an easier solution available? It applies to designers and users alike. The mission of a UX writer is to use words that make the user journey as simple as possible. UI designers are supposed to achieve the same objective through visuals. How do you know if this works, though? There’s a simple solution available: Peer testing It might sound fancy (you might have seen this term used in the context of software development), but the idea is simple: test your design on your colleagues first. Every writer knows that proofreading your own text is the worst nightmare. It’s not because they’re lazy or simply tired – it’s because human brains are actually quite smart. Because of a process called generalization, we find it hard to notice our own typos. Our brain takes a shortcut to focus on the overall meaning instead of the details. This is why UX writers ask their teammates to read the text. Other people are much more likely to find weak spots and come up with fresh insights to improve the copy. The same approach can be just as helpful for UI designers. Before you turn to tests with real users, ask your colleagues to have a look at your design. Although they’re not the target group, they’re still able to catch errors, evaluate your drafts, and come up with valuable suggestions. Consistency Last but not least, UX writers can inspire you to improve your product’s style guide. You probably already have a handbook for the visuals, but what about the content style guide? If you’re striving to create consistent interfaces, you won’t get far without it. As I’ve mentioned above, you don’t have to create everything from scratch. I recommend starting with the Microsoft Writing Style Guide. It’s a well-written comprehensive source that’s used by many companies who don’t have their own style guide yet. Other examples of brands with great style guides include Atlassian, Mailchimp, and Apple.

Still figuring out what timelines to offer your clients? In the beginning, it’s easy to ballpark an overly ambitious timeline that doesn’t give your designers, SEO-specialists, writers and developers enough time to meet the deadline. Especially when your team is still figuring out the most efficient workflow. Creating a realistic project timeline will help you build your client relationships and wrack up those good reviews. Not to mention standardize your workflow, empower your team and keep the energy positive. So even if your client is eager to get the ball rolling, setting a project timeline that works for your team will make sure your project starts and ends on the right foot. So how can you anticipate an accurate and consistent timeline? Consider these 7 steps and speak with each team lead to better understand how much time each step takes at your unique agency. 7 steps to consider when creating a realistic client project timeline 1. Planning and market research 2. Design mockup 3. Content and SEO 4. Final design and development 5. Beta testing and QA 6. Ongoing maintenance, edits and updates Step 1: Planning and market research When creating your timeline, factor in planning and market research, so you’re well-informed on your client and their competitors. Here are key tasks that you should consider in the early stages of your project: Do your background research Make sure you’ve done your market research after meeting with a client, so you’re familiar with their business, content, design, marketing approach and competitors. This will help you create informed opinions and offer solutions that actually make sense. Get a lot of answers now, so you’ll save time later down the road when your team comes back with questions. Consider developing a web design survey for your client to fill out in advance so you can gather more important details to reference. Create a great design brief When done right, a great design brief will get your clients, SEO-specialists, writers and designers all on the same page, so they can start planning out their individual timelines per deliverable. Creating an effective design brief should include the following: Your client’s business history, goals and KPIs Their target audience and key competitors Their content voice and design look and feel Their inspiration and media List of deliverables/assets Project budget, including maintenance and upgrades Project timeline Step 2: Design mockup Give your designer enough time to gather web design inspiration and create a few mockups that match your clients’ expectations and even push the boundaries. Strive to impress your client by producing precise mockups that include user journey, and content elements. Once you have the mockups, you can share with your client for feedback and approval. During the client feedback process, it’s particularly important to ensure you have enough time to create truly impressive mockups that are close to the final end result. Using a website builder like Wix Studio will allow you to share in-progress work for live feedback and get comments right on site, so you can accelerate the approval process. Be sure to check in with your designer on how much time they need to create mockups for both desktop and mobile. In this Google study, users who have a negative mobile experience are 62% less likely to purchase from that brand in the future. So knowing exactly how the mobile site will behave is equally important as the desktop view. Step 3: Content and SEO The design is only as good as its content. SEO-optimized content that speaks to the “Why,” “How” and “What” will help bring in the right visitors and persuade them to click. Users are also more likely to share quality content, which can boost a site’s search ranking—all the more reason to give your writers enough time to write compelling text. Your writer will need time to cover key messaging, calls to action, SEO essentials and brand voice. However, the content creation timeline will vary greatly depending on how large the project is and what your client needs, for example a blog content strategy will take much longer than a single landing page. So check in with your content team lead to understand how long it will take them to fulfill the task. Step 4: Final design and development Depending on the design and development needed for the project, this step will also vary greatly, especially if custom applications are part of the plan. Using a website builder like Wix Studio, will help your team save time by designing right on the web page and previewing code implementations immediately. Step 5: Beta testing and QA Beta testing and QA can take much longer than you anticipated, especially if you’re building a more complicated site. Give your team a full week to QA, just to make sure no detail is left behind. Once approved, all that’s left is to share the final product with your client for review and feedback. Hopefully, this step doesn’t add an extra few weeks to the process. Here are 3 tips to keep in mind while QAing your clients’ website: Make sure the old site redirects to the new site Once your client’s new site is live, help visitors go straight to it using a 301 redirect. As you may know, this ensures that visitors and search engines are automatically redirected to the correct site. Without them, visitors may never find the new site. Check off all the SEO boxes Amidst all the excitement of launching, don’t forget to connect your client’s site to the Google Search Console. Remember, SEO results take time, so put in the groundwork now, so your clients’ site continues to drive traffic long after handover. Check how the site looks on social During your QA process, preview the site on social to see how it looks when shared. With Wix Studio, you can customize the social share settings, so your clients’ site looks exactly the way you intended. Step 6: Continue ongoing maintenance, edits and updates A successful launch doesn’t mean your work is done. Your clients’ sites should evolve just as Google’s ever-changing algorithms do. New content should be regularly updated to stay competitive and meet the latest micro-moments. User feedback and requests can give insight on how to optimize your sites for a better ROI. Using a website builder like Wix Studio will ensure you can make any edits and updates fast, while reducing site maintenance—so your clients’ can continue scaling long after you’ve shifted focus.

Website animation has become commonplace these days. And there’s a good reason for that: Because it works. But have we reached a point where there’s too much animation on the web? Or, rather, are we moving into a phase where animation is no longer as useful to us as it once was? In the following guide, we’re going to debate the value of animation in web design and lay down some ground rules for animation going forward. The pros and cons of website animation Every animation choice we make — from the slight “wiggle” of a button to a full-blown animated hero image — directly affects our visitors. Let’s have a look at all the reasons why animation can be great for a website and its visitors’ experience as well as some reasons why we should be more careful about using it: The pros: More engaging than static content which can help drive more conversions More effectively calls attention to important elements and messages Succinctly tells a story in a small space A multitude of animations means many different ways to surprise visitors Unique animations can improve a brand’s competitiveness The cons: Ill-timed or poorly designed animations become distractions and roadblocks Too much motion can slow down the loading of a web page Too many animations prevent visitors from knowing which parts of the page to focus on Website animation doesn’t always translate well to mobile, which leads to poor experiences Can present accessibility issues for disabled or elderly visitors Tips for designing website animation the right way Clearly, animations in web design range from the effective to the distracting. That said, I don’t believe it justifies doing away with website animation altogether. It just means being more mindful of how it’s used. Here are some things to keep in mind as you design with animations in the future: 1. Start by designing them on mobile Over the last couple of years, more and more visitors are searching the web on mobile devices, and, consequently, the mobile version of a website has become an important part of the user experience. In tandem, Google has repeatedly stated that we need to design websites with a mobile-first approach. So, what happens when you animate a website with only the desktop user in mind? The worst-case scenario is that the mobile experience is compromised as a result of the desktop focus. For example, consider that parallax scrolling works across devices, unlike a mouse parallax effect which requires a device with a cursor. There are a number of ways this could play out: Mobile site design becomes an afterthought because the hyper-engaging visual spectacle on desktop can’t be executed there. Mobile visitors miss out on all the extra value animations provide on desktop (for example, not being able to see animated software walk-throughs). The inconsistency between mobile and desktop might, when not done intentionally, create a jarring experience for users that switch between their devices. The mobile design or functionality breaks as a result of the animation built for larger screens. The best-case scenario is that the animation on desktop is so minor that it doesn’t hurt the mobile user’s experience all that much. The only real issue would be a lack of consistency from mobile to desktop, but even that can be smoothed out. For example, this is the Plenaire website viewed on desktop: The particle background is the first thing users see at the top of the page. When they scroll down to the first set of images/links, a hover triggers a card flip animation. Now let’s look at that same experience on mobile: The particle background and title card that welcomes visitors to the site remains the same. What’s different is the next section where visitors are deprived of the card flip. Does it compromise the experience? Absolutely not. They still find images inviting them to explore the products further. Bottom line: If you design animations with a mobile-first approach, you’ll reduce unintentional inconsistencies across the user experience while also ensuring that you only use the most essential of animations to begin with. 2. Make sure the animation serves a purpose It’s easy falling into the trap of believing that animation automatically makes a website better. It’s moving! It’s eye-catching! It’s unpredictable! But those aren’t the reasons why animation is an effective engagement tool in web design. Good animation serves as a guide for visitors, pointing out elements they should be engaging with and taking them on a journey — a journey you designed for them. When animation is used simply for the shock and awe of it, you’re not likely to see much come from it in the end. Purpose-less animation can cause a ton of friction as users move through your website. For example: They view the site (and brand) as gimmicky as it relies on spectacle instead of on honesty and professionalism. They get distracted by all of the moving pieces, never knowing where to focus. The unpredictability of the animation makes the website too difficult to navigate. They become exhausted by all of the animation, eventually abandoning the site entirely. When animation adds no value and provides no direction, visitors will either become blind to it or avoid it entirely. That’s the exact opposite of what you want to happen when you set out to build a site. So, let’s look at an example of a website where all of the animations serve a clear purpose. This is Build in Amsterdam: There are only a few kinds of animation on this site: Text moves or appears upon hover Scroll controls open in the bottom left, middle, and right of the screen Modular rectangle blocks move in and out of view Each instance of animation is handled cleanly and consistently throughout the site. What’s more, the animations give the design and brand a controlled and sleek look. Nothing is out of place or unexpected and it’s all where it should be, which is indicative of what this company would be like to work with. Bottom line: There’s nothing wrong with using animation site-wide. It’s when that animation is applied without any moderation or goal that you’re going to have a problem with it. So, if you don’t have a good reason for using animation other than wanting to grab attention, stick with a static design until you do. 3. Be mindful of implication on page speed One of the biggest killers of web traffic and conversions is slow-loading pages. The longer visitors have to wait to see the content on your page, the more likely they are to abandon the page altogether and never return. Because animations can be so draining on web hosting — especially when you use more than just a handful of them — it’s important to keep an eye on what they’re doing to loading speeds. You can use Google PageSpeed Insights to monitor these effects. For example, this pagespeed score and analysis comes from a website that is chock-full of complex animations: Google has failed this website with a score of 38 on mobile and a mediocre score of 43 on desktop. Neither is good — not for the users and not for the website’s search ranking (which is negatively affected by slow-loading pages). And so much of it has to do with how taxing the animations are. Unfortunately, when you use animations, you put your website at a greater risk of that happening if you don’t properly optimize your assets. Let’s compare this with eCommerce site unspun: The website uses a loading animation, page transitions and auto-scrolling text, along with other animated elements along the way. In addition, it’s an eCommerce site, so it’s chock-full of large, high-resolution images. Page loading times can be problematic for eCommerce websites because of all the images and pages on the site. Imagine what happens when you add animation to the picture. But that’s not the case for unspun: Google PageSpeed Insights gives the mobile site a passing score of 96, and desktop an 82. These are fantastic scores considering how many complex and heavy elements are on the site. Bottom line: Consider the downsides of an excessive amount of animations on your website. If the site is just used as a portfolio to impress potential clients, for example, then the slow speeds wouldn’t matter as much and maybe you can afford it. However, if your website needs to grow your online visibility and sales, you have to be very careful about how much animating you do, as it could throw the whole thing in jeopardy. If the animations are absolutely necessary, look for ways to further optimize your site for speed. It’s the only way to keep from losing visitors before they’ve had a chance to see them. Wrapping up To answer the question at hand: Yes, website animation is still a good idea. While you can certainly impress visitors with static content, there’s something in the way animation commands our attention that you can’t really get anywhere else. However, while there’s a lot of good that can come from adding motion to a site, it’s a tricky balance to maintain. How much animation is enough for users to be engaged and intrigued, without crossing the line into annoying or exhausting them? By committing to the best practices explained above, you should be able to create animations that allow you to reap all the pros and none of the cons.

With so much focus on readability, there’s a reason why websites are packed with sans serif fonts. But what if I told you to throw that idea out the window and try a handwritten font? There’s so much “vanilla” typography out there; it’s time to try more handwritten and novelty display styles. Injecting some personality into your design projects can actually be in your favor, as long as you don’t go overboard. While it isn’t the most conventional opinion, there’s a strong case to be made for using more handwritten typefaces. Let’s explore how to do it while creating better, more beautiful website experiences. Handwritten fonts have more personality Maybe the best argument for using handwritten fonts is that they can emphasize the unique character of your project or design. Think of how a ragged font, for example, can take the formality out of words and provide a rough edge. A long tail or beautiful swash can contribute to the graceful tone of wording. The right script can feel like a personalized signature or action. It’s much harder to form these distinct emotional ties with a geometrical sans serif. The individuality and sense of honesty that comes with a specialty or experimental typeface is almost incomparable. In regards to personality, a handwritten typeface can do for a design what great wine does for a meal. It sets a mood, a tone, and a feel for everything that is to come with the presentation. Interesting typefaces are disruptive Have you ever stopped to look at something just because it was different? That’s what handwritten fonts can do. It’s a disruptive visual element that helps draw attention to the design as a whole. It stands out because so many websites use sans serif font palettes. It’s a font style that’s become so dominant, that you are almost shocked to see anything else. And that’s precisely what makes users stop to look and read. The website visitor might first notice the typeface, but will soon after start to take in the surrounding content. A choice as simple (or complex) as typography creates a distinct first impression, fostering that initial engagement. Every second that you can keep a new visitor engaged increases the likelihood of a conversion. It’s much harder to form distinct emotional ties with a geometrical sans serif. The individuality and sense of honesty that comes with a specialty typeface is almost incomparable. Handwritten fonts are a time-tested option The use of handwritten styles in website design is often seen as a bit of a controversial topic. Nevertheless, graphic designers have been creating amazing pieces with this style of typography for hundreds of years. Some of the first fonts were hand-drawn logos and letterforms. More recently, handwritten styles remain popular in other graphic design areas, such as book and magazine publishing - perfect for drawing attention among a sea of competing titles - as well as poster and other print design. If handwritten fonts can work for all of these other graphic design applications, what makes web design different? This comes back to a simple rule that website designers created in the early days of the internet: Sans serif fonts are easier to read on screen. That may have been true back when screen resolutions weren’t the super-sharp and crisp visuals we have today. As technology keeps getting better, it’s time for the sans serif bias to make room for more diverse uses of type online. Choose from almost unlimited text options While the argument here is primarily for using handwritten fonts, it also extends to almost any novelty or display typeface. Combined, these styles provide an almost unlimited smorgasbord of fonts to choose from: Scripts Cursive Outline Block letters Fancy swashes Comic styles Pen or marker styles Dashed or dotted-lined In addition to types of fonts, there are also plenty of weights and styles. Thick strokes, for example, add weight variance and visual importance to projects that need extra emphasis. Rough edges or lines feel casual and rugged. A handwritten font that isn’t cursive or script can add unexpected flair to a project. Classical handwritten styles that include cursives, long tails, or swashes are elegant and somewhat formal. That’s why this style is often used for wedding lettering, but there’s nothing that says you can’t incorporate that same sophistication on a packaging label or an eCommerce website. Comic or cartoon styles feel more lighthearted and childlike. They should be used scarcely, and only when the emotional tone matches the content. Marker styles, as well as mixes of print and cursive lettering, can seem rushed and informal. On the other hand, these font choices can add a personal touch, like a hurried note to the design canvas. Handwritten fonts generate focused attention Every design needs a focal point to draw attention and ensure that the message is understood. If you are lacking other strong design elements, such as a stellar photo or video, an amazing font can be the perfect fix. Use a handwritten font to create a special art element for the design that is equal parts beauty and function. Incorporate color or other design divots to increase impact. Conversely, the right font can also function as a stand alone element, without resorting to too much secondary ornamentation. This can make it even more important to design a strong type hierarchy with good use of whitespace, so that the special text area of the design stands out in the best possible way. Handwritten fonts can generate attention in another way as well. Because these fonts often do require a little more brain power for full comprehension, they force people to look at the design for just a few milliseconds longer. While it doesn’t sound like a lot, that’s a lightyear in website time-on-site land. Any extra time a user spends with the design provides all the more opportunity for you to get your message or information across. Handwritten fonts are beautiful and readable The idea that handwriting fonts aren’t readable is a myth. When used well, a high-quality handwritten or novelty typeface is readable. That being said, most of these fonts will get cumbersome when used for body copy. As a headline or logo, however, they can be amazing. To ensure readability, look for a handwritten font that can check these boxes: Is high-quality and sharp. Not any freebie font will do; many lack all the characters you will need, and some are even mildly pixelated, or simply not crafted with enough care. Uses swashes, ligatures, and alternates. These let you control lettering if there are trouble spots. Will render online as a font and you don’t have to embed it as an image. Otherwise, you may run into quality, accessibility and search issues. Pairs well with a font from your current palette. When not done well, matching a handwritten font with a serif or sans serif can be jarring and result in readability concerns. How to use handwritten typography As with almost any other design tool, there are right and wrong ways to use handwritten fonts. Let’s focus on some of the best practices. Incorporating a handwritten font isn’t always easy. Here are a few ways to help ensure success: Pair handwritten styles with super simple fonts everywhere else. Elaborate font styles can easily overpower another typeface, so try to avoid fonts that visually compete. Limit your use of handwritten typefaces. It is seldom that you’ll find a large block of text in this style. Use it in moderation - only a handful of words - and avoid these fonts for repeating elements such as headers (H2 or H3). Employ whitespace. Handwritten fonts may need more space around them in order to create focus and facilitate readability. Consider larger letter sizes. Many handwritten fonts aren’t designed for small letter sizes, and work best when used for display and headline text elements. Tone down all other visual clutter. Anything that demands extra focus will add to the cognitive load, and you don’t want to overwhelm users with too many things to look at all at once. Go beyond cursive. Play with other options. Examine specific use cases. Consider handwritten fonts for branding, logos, or stand alone art elements. Think outside the box. Use handwritten styles when you need something interesting and unexpected, such as a “the,” “and,” or another connecting word in a phrase. Opt for a handwritten font when the project or brand calls for it. Projects that revolve around creativity and flair, or need to feel familiar and inviting, are probably a more likely match than conservative or instructional ones. Websites featured (from left to right): Zooba, Exlibris Berlin, and Papamusic. Recommended handwriting fonts What makes for a great handwriting font? It has to be versatile, readable, technically sound, and render perfectly when your website loads. And that can be a tall order. The following typefaces are developer-friendly and load pretty much any- and everywhere: Blankenhorn by Linteo – This handwritten font has a marker style that’s fine and full of personality. With multiple weights and curved lines, it is a sophisticated take on this style. Mazius Display by collletttivo – With a strong, classic feel, this handwritten font has an old-world feel that exudes strength. Line by Letters from Sweden – The strokes here look like they were drawn by hand with an extra-fine tip hand. The faux-penmanship is somewhat geometric and structurally solid and readable. Betina Script by Paratype – Rougher strokes make this font a suitable display option. It renders particularly well at larger sizes. Brenner Script by Typotheque – With smooth shapes that transition well from one to the other, this typeface is especially versatile. Multiple weights add to its intrigue. Odesta by Urtd – Designed in a style that’s appropriate for the most formal black tie event, this font features exquisite shapes and a nice slant without feeling overly one-sided. And four reasons not to use handwritten fonts While a handwritten font can add much value to a design project, it’s not for everyone. For this style to be successful, it has to match the rest of the project. Certain industries and types of content almost always avoid this style because it isn’t a solid match. Financial institutions, for example, tend to play it straight with website typography. That works, too. More straightforward styles are associated with formality and trust. Reasons to rethink the use of a handwritten font include: It doesn’t match the mood or content of the design. For lengthy texts or heavy blocks of text, avoid handwritten styles. These fonts are best used in moderation. If there are technical problems with font loading or rendering on devices or screens, opt for something else. Legibility concerns: Some fonts don’t work well with some letter combinations. Test your font and your actual copy to make sure it’s clear and readable. Conclusion Incorporating handwritten fonts can add emotional meaning, create visual disruption, and offer just the right visual tone for all kinds of design projects. While many web designers tend to shy away from them, this is the time to explore a little more personality into our typography. Contrary to common belief, most handwritten styles don’t pose technical or loading difficulties online. With many foundries creating quality, web-optimized typefaces, using a handwritten style is equitable to any other. The number one thing to remember when designing with a handwritten font is that as a strong visual element, it requires plenty of room to do its magic. When using a handwritten font, the rest of the design should probably be a little simpler and more subdued. Put aside the prejudice and treat handwritten fonts just like you would any other special visual element.