Archive

Archive for August, 2022

Poster Design Ideas – Fundamentals of Creating Eye-catching Posters

August 4th, 2022 No comments

What is the most effective way to generate interest in a new film, book, product, or future event? Posters.

Posters are a global favorite because they work for everyone; no matter who you are, what you do, or what you’re marketing, a poster is a powerful and eye-catching way to provide information and excite your audience about upcoming events. They’re inventive, daring, funky and may elicit a wide range of feelings. 

Some movie or music posters grab your attention, while other poster kinds may be informative and instructive. Finding the ideal balance between the title, content, photos, and design is crucial. Your poster will be ready once you achieve that.

The first and most crucial step in making a poster is understanding your target audience and product. Following that, you may experiment with color, alter forms, modify background textures, and apply stylish typography in order to complement the content. Here are some suggestions and poster ideas to help you find the best approach to convey your message.

The Principle Ideas of Poster Design

Understanding the elements of poster design is crucial for comprehending contemporary poster design concepts. The right poster will express your brand message and connect with your target audience, from storytelling aspects to title treatment design, technological requirements, and data-influenced decisions that you will make to convey the story and attract desired audiences. When you select these unique components, you will enhance your brand message, increase your audience’s recognition, and increase your product’s interest.

Here are some principles that help you strengthen your message.

Creating Color Harmony

Choosing the right colors is not always simple, especially if you have to stick to a logo or a certain theme. In this situation, you need to adhere to a color palette to create appropriate and attractive color combinations. In order to discover the ideal color combinations, you may also try working with the PowerPoint color palette.

To keep things basic and appealing at first, try not to select more than two colors in addition to white and black. Use various shades of your current color choices if you need to add extra colors to your design. Also, remember that each color is symbolic and can represent a range of emotions. The colors that you pick will each convey a different feeling. Keeping color symbolism in mind is advised in poster design.

Below is a chart to help you.

https://www.linkedin.com/pulse/color-psychology-brand-development-brooke-janousek/

Text and Font

Remember that your poster should be simple to read. You wouldn’t want your information lost due to incorrect font selections or sizes. Avoid using elaborate typefaces that might strain the eyes. Less is more! If your poster has a clear, straightforward, and readable font, your audience will be able to comprehend your content easily.

Instead of utilizing a distractive typeface, try using vibrant colors or intriguing imagery to show creativity and originality. It is important to utilize bright and intense colors as a crucial element in poster design since this will draw the focus and ensure it is a main component in the design.

Additionally, we advise you to ensure that the color of your text and the background contrast significantly. For instance, using the white font on a dark backdrop will ensure that everyone can see your message.

The Visual Hierarchy

An order of significance indicates that the most critical elements must be noticed first. Designers should adhere to this rule since it directs viewers to focus on the most crucial elements. You must ensure that the size of symbols and forms match their significance. The most important symbols should be highlighted on your poster.

The title, subtitle, and body content of the poster should be arranged according to size. Since the title is always the first thing readers will see, it should take up most of the page and be written in a standout font. The subtitle should support the title even if it should be smaller. The body copy must also be easier to read and smaller. Also, keep the information on the poster to a minimum. It is natural to want to include all pertinent information, but doing so risks cluttering your design and diverting the reader from the message.

What is the most important piece of information you want a viewer to remember? Your design should center on this statement.

The human eye is practically ‘conditioned’ to follow a Z-shaped pattern, which means it starts at the top left of a page, scrolls to the right, then returns to the left before continuing down the page. Keeping this in mind, it is typical to position the attention grabber in the top left of the page, followed by the necessary information about the product or event in the bottom right-hand block.

https://vanseodesign.com/web-design/3-design-layouts/

Take this into consideration while designing your poster.

Now that you’ve given your poster design some semblance of order and piqued your viewer’s interest, you can fully unleash your creative side!

Spacing and Alignment

A key design element is to align and space your text properly. Text that is spread out rather than jammed together is more readable, and readers will almost certainly retain the information better.

Additionally, it creates a scene that looks more integrated and unified, which is appealing to the eye.

Your components must all be in harmony with one another. The edges of one element must intersect the edges of another element if you extend their edges. This guideline is true for both text and pictures!

Creative Ideas for Poster Making

1. Use Color to Evoke a Feeling.

Use complementary colors to convey the mood and tone you want to see in your poster. Look into some correlations between emotions and color! An illustration of how to use hues like green and blue to evoke a sense of tranquility, peace, and nature is seen on the following poster

[image 1]

Take note of how the usage of the color blue in this poster elicits a sense of isolation, iciness, and dread.

[image 2]

2. Use Typography

Experiment with different fonts to create a great impact on your viewers. 

[image 3]

This poster used the imagery of food through typography to further emphasize the message.

[image 4]
[image 5]
[image 6]

3. Create Hierarchy

Making one element noticeably larger than the others is one of the quickest and easiest methods to establish hierarchy in your design. 

The main emphasis of this poster is a collage of jazz instruments and musicians.They compliment each other in terms of space and color, resulting in one large photo that serves as the design’s focal point. The audience quickly recognizes this as a promo for a jazz music performance. The poster also includes the event dates, venue, and artist information at the bottom. 

[image 7] 

This poster design captures your attention not just via the use of scale, but also through the use of leading lines and perspective. The word “Blame” is surrounded with a black background and connected to a silhouette standing within a doorway as the main design element. The use of colors instantly gives us the impression that this is a murder mystery film narrative.

[image 8]
[image 9]

4. Use Minimalism

Sometimes, simple is better. Using basic design components to express whatever thing you want to say to your audience is possible with a minimalist approach to design.

[image 10] 
[image 11]
[image 12]
[image 13]

5. Focus on Graphics

When it comes to making a compelling poster, reducing text to a minimal and focusing on the graphics is sometimes the best way. Instead of overloading your audience with words, graphic posters are a great choice for marketing a movie or event since you can leave it up to them to make sense of the imagery.

[image 14]

[image 15]

6. Use 3D effects and Play With Dimension

Posters that appear futuristic and extraterrestrial steal the show. These designs have futuristic-looking color combinations, neon hues, semi-transparent effects, liquid effects, iridescent effects, and 3D effects.

[image 16]
[image 17]
[image 18]
[image 19]
[image 20]

7. Use Only Black & White

A poster may still make a big impression even with a limited color scheme since sometimes using too many colors might divert the audience’s attention from the content. Simple black and white posters are simple to read.

[image 21]
[image 22]
[image 23]
[image 24]

8. Experiment With Different Shapes

Using shapes is another approach to direct and lead a reader’s eye. They are used to contain text, to make an unusual composition, or to focus the viewer’s gaze in a specific direction. To bring attention to your message, you might utilize a background full of shapes and forms or build shapes with your text.

[image 25]
[image 26]
[image 27]

9. Use Creative Illustrations

Instead of using photographs to produce a poster, use an illustration to create a poster that is uniquely intended for your purpose. Be creative!

[image 28]
[image 29]
[image 30]

10. Go Vintage

Retro is undeniably trendy right now. Vintage clothing and film photography are closely intertwined, as is your new poster design concept.

Check out some of these poster design ideas to get inspired!

[image 31]
[image 32]
[image 33]

Now, It’s Your Turn !

That’s all. We hope you found this article as inspirational to read as it was to write. Now that you’ve seen many types of posters and some crucial principles to follow, it’s time to figure out which strategy is ideal for your company. Finding the right pictures, shapes, and fonts to convey your message can result in a wonderful design. You are now ready to design your poster!

The post Poster Design Ideas – Fundamentals of Creating Eye-catching Posters appeared first on noupe.

Categories: Others Tags:

OKRs: A Complete Guide for Success

August 4th, 2022 No comments

Every organization that wants to grow should have a tried-and-true method of setting goals. There are a few different frameworks to choose from, but which one is right for your business and goals? Today, we’re here to give you the inside scoop on OKRs so you can decide if they’re the best fit for you. 

This article will answer all your questions surrounding OKRs, the framework and some examples of strategic OKRs.

What is an OKR, and what does it stand for?

OKR stands for Objectives and Key Results. It consists of an Objective, which is the goal or thing you want to accomplish. Several Key Results are attached to that objective, which are the results you need to attain to get to your objective. 

OKRs are goal-setting frameworks that help businesses implement and accomplish their strategies. OKRs help teams identify key company objectives, set realistic goals, come up with a timeline to achieve those targets and ensure those goals are related to the overarching objectives of the business. Many companies use OKRs as a quarterly goal-setting technique. 

Why are OKRs important?

Most organizations set smart goals at the beginning of each year. The team will work on them for about a month, then forget about them. This leads to passive management, making it difficult for team leaders to measure performance and track employees’ progress towards achieving those goals. 

Team members may feel disconnected from the overarching company goals, and employee engagement may decline. To combat this, organizations can set tactical OKRs.

Benefits of OKRs 

The benefits of OKR goal setting are almost endless, but here are a few key reasons why you should set OKRs. They: 

  • Allow for a better understanding and a focus on results that matter most
  • Provide increased transparency and clear direction to all team members 
  • Boost efficiency and alignment with corporate goals
  • Track progress updates toward team goals 
  • Inspire teams and help move the company strategy forward

What is the OKR framework?

The OKR framework includes a few rules to help employees prioritize, position and assess the outcome of their efforts. OKRs help close the gap between planning and execution so that employees have more of an outcome-based, rather than output-based, approach to their work. 

OKRs consist of two components: the Objectives, and the Key Result(s).

The Objective is the goal you want to achieve sometime in the near future. Typically, it is a high-level objective, and it is not a technical, numerical or quantitative goal. Some broad examples include: 

  • To increase the number of sales
  • To reduce employee turnover
  • To improve the time it takes for customers to make a purchase 

The Key Result is the part where you get into the nitty-gritty details. It is a quantitative, measurable outcome needed to achieve the objective. For OKRs to be effective, you need to break down the goal into realistic results that you can track. 

Let’s say your objective is to increase the number of sales. Some key results might be to close five more deals per week and to grow your customer base by 20%. 

To break it down a little bit more, think of the objective as a point on a map. Think about where you want to go and set a clear direction for getting there. You can think about key results as road signs along the way that tell you how far you have to go. They show how well you’re progressing towards achieving the objective. 

Examples of OKRs 

Here are some real-life examples of OKRs, broken down by category. 

Company OKRs

Some of the most common team OKRs in different departments include:

Marketing OKRs

Objective: Increase the number of weekly newsletter subscribers by 3x

Key results: 

  • Implement more CTAs on the website home and subsequent pages 
  • Begin a campaign that offers discounts for new subscribers 

Objective: Increase brand awareness by the end of the next quarter 

Key results: 

  • Secure a spot at the annual business conference
  • Conduct 10 media meetings 

Sales OKRs

Objective: Personalize the sales approach for new customers

Key results: 

  • Reach 80% on the customer satisfaction survey
  • Ask customers three personalized questions 

Objective: Increase sales in the US

Key results: 

  • Hire a salesperson local to the US
  • Research 10 US competitors and see what they do differently 

Product development OKRs

Objective: Start user-testing the product 

Key results:

  • Conduct 30 virtual user-testing sessions
  • Get 50 customer feedback responses through surveys 

Objective: Expedite delivery speed of a new version of the product 

Key results:

  • Hire two more product development team members
  • Reduce the number of untested features to 3 

Customer service OKRs 

Objective: Improve customer retention and reduce the number of customer complaints

Key results: 

  • Reduce call wait time to less than 10 minutes
  • Implement weekly meetings with the customer success team 

Objective: Improve customer experience with support

Key results:

  • Reduce ticket resolution time to 3 business days 
  • Implement a chatbot to help with less complicated customer queries 

Management OKRs 

Objective: Improve employee engagement by 10%

Key results:

  • Provide more training opportunities each month
  • Provide opportunities for employees to give anonymous feedback 

Objective: Reduce operating costs by 5%

Key results:

  • Talk to HR about a company restructuring to eliminate late payment fees
  • Improve supplier payment process 

Individual OKRs 

Personal OKRs are just as beneficial as company OKRs. Employees prioritizing personal development often see higher success in their professional lives, too. Here are some examples of personal development OKRs. 

Objective: Increase productivity at work

Key results: 

  • Take a short break when feeling distracted 
  • Set smaller productivity goals 

Objective: Become confident at public speaking 

Key results: 

  • Lead one team meeting per month
  • Practice speaking to small groups of people more often 

How to track OKRs

OKRs won’t be effective unless progress is reviewed regularly. Tracking OKRs every week will ensure that everyone keeps the top priorities in mind and help adjust the roadmap accordingly.

It’s best to start with a simple spreadsheet for your first cycle of OKRs. There are many new concepts to learn, and it’s best to minimize the disruption for the team. Then, you can switch to a more scalable OKRs software once you’re comfortable with the framework.

Final thoughts

All OKRs should align with the company’s direction and focus on long-term improvements and goals that can be accomplished within the next quarter. With an outcome-driven goal-setting process, employees can prioritize their work and clearly understand how they contribute to the bigger picture.

The post OKRs: A Complete Guide for Success appeared first on noupe.

Categories: Others Tags:

Migration From jQuery to Next.js: A Guide

August 3rd, 2022 No comments

jQuery has served developers well for many years. However, libraries (like React) and Frameworks (like Next.js) are now bringing us more modern features to help with our code’s performance and maintainability. This guide will show you how to rewrite your jQuery site using Next.js to take advantage of all these new features, such as client-side routing for smoother transitions and the ability to separate code into components to make it more reusable.

Getting started

The easiest way to get started with a Next.js is to run npx create-next-app. This will scaffold a project for you. However, to understand what this command does, we’ll create our application from scratch.

First, we’ll create our Next.js project using npm init. You can proceed with the default settings, as we will change them later. Then, we want to install React and Next.js using:

npm install react react-dom next

Next up, we can open the package.json file and replace the default scripts with:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

This allows you to run npm run dev to start the development server; npm run build to build your application; and npm run start to start a server of that built application.

To add pages — like you would index.html with jQuery — create a directory named pages and create a file named index.jsx in it. Inside this file, place the following code:

export default function Index() {
  return <h1>Hello World</h1> ;
}

Now, by running npm run start and navigating to localhost:3000, you should see a h1 tag displayed. The name of this function isn’t important, so you can call it whatever you want. However, don’t use an anonymous arrow function, as this will prevent fast refresh from working.

CSS

In jQuery, you can specify CSS by page, importing different stylesheets for different pages. This is also possible in Next.js using the next/head component and a link tag the same way as jQuery. Anyhow, there are more performance-friendly ways to to this in Next.js.

Global Stylesheet

The first way is with a global stylesheet. To do so, we need to create a custom App by making the file _app.js inside the pages directory. The starting point for this file is as follows:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

At the top of this file, you can add an import statement and import any CSS file you want. For example, if you created a separate folder at the root level called styles and put main.css in it, then you would add:

import "../styles/main.css"

Now, whatever you put inside this file will be applied throughout your application.

CSS Modules

The next option is CSS modules — which allows you to specify CSS anywhere in your application. They will create unique class names from the classes you provide, so you can use a same class name in multiple places in your application’s code.

Expanding the initial hello world example, you could create a file index.module.css in the same directory and then write the import:

import styles from "./index.module.css"

Afterwards, if you were to define a heading class in the CSS file, you could do the following:

export default function Index() {
  return <h1 className={styles.heading}>Hello World</h1> ;
}

and those styles will be applied only to that element.

Styled JSX

The final built-in option is styled JSX. This is most similar to including a tag at the top of your page to define some styles. Simply add jsx to the tag, and use a template string inside, like this:

<style jsx>{`
  .heading {
      font-weight: 700
  `}</style>

This option has the advantage of being changeable at runtime. For instance, if you wanted to supply the font weight in your component props, you could do:

<style jsx>{`
  .heading{
      font-weight: ${props.fontWeight}
  `}</style>

The one disadvantage of this method is that it introduces additional runtime JavaScript into your application, increasing the size by 12kb (3kb gzipped).

Events

In jQuery, you might have events set up to respond to DOM elements. To give you an idea, you might want to execute code when a p tag is clicked and do so like this:

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

Instead, React uses event handlers — which you might have seen in HTML — like onclick. Note that React uses camelCase instead, and so onclick should be referenced as onClick. Therefore, rewriting this small example into React would look like this:

export default function Index() {
  function clickParagraph(){
    console.log("You clicked a paragraph!");
  }
  return <p onClick={clickParagraph}>Hello World</p>;
}

Each method comes with its advantages and disadvantages. In jQuery, it is easy to have something happen for all paragraphs, whereas in React, you have to specify per paragraph. However, for larger codebases, having to specify makes it easy to see what will happen with the interaction with any element, where you may have forgotten about the jQuery function.

Effects

Effects are used in jQuery to show and hide content. You might have something like this already:

$( "p" ).hide();

In React, this behavior is implemented using conditional rendering. You can see this by combining it with the replacement for events we just saw:

import {useState} from "react"
export default function Index() {
  const [show, setShow] = useState(true);
  function clickButton(){
    setShow(false)
  }
  return (
    <div>
      <h1>Hello world</h1>
      {show && <button onClick={clickButton}>Click me</button>}
    </div>
  )
}

When you click this button, it will change the value of show to false and so, the statement won’t render anything. This can be expanded with the conditional operator to show one thing or another, depending on the value like this:

show ? <p>Show this if show is true</p> : <p>Show this if show is false</p>

Data Fetching

In jQuery, Ajax is used for external data fetching without reloading. In React, this can be done by using the useEffect hook. For this example, we’ll fetch the exchange rate from a public API when the page loads:

import { useState, useEffect } from "react";
export default function Index() {
  const [er, setEr] = useState(true);
  useEffect(async () => {
    const result = await fetch("https://api.exchangerate.host/latest");
    const exchangerate = await result.json();
    setEr(exchangerate.rates["GBP"]);
  }, []);
  return (
    <div>
      <h1>Hello world</h1>
      <p>Exchange rate: {er}</p>
    </div> 
  );
}

useEffect takes in a function and a dependency array. The function does the data fetching, using async as the fetch API asynchronously. We can then set any state we want in there, and it will be updated on the page. The dependency array determines which value changes will run the function. In this case, it’s set to an empty array which means that the function will only run when the page first loads.

Beyond this, Next.js also provides options for fetching data on the server or at build time. For build time data fetching, the function getStaticProps can be used. This function provides an improvement in performance as the data can be provided with the page — rather than waiting on an external service. To use it, create this function in a page as it doesn’t work in components.

export async function getStaticProps() {
  return {
    props: {},
  }
}

You can perform any data fetching you want before the return, and after that, pass the data through to the page under props — then, the data is provided to the page and can be accessed under the props.

By replacing the function name from getStaticProps to getServerSideProps, the function will be called on every request, giving you the flexibility to use Node.js functions if needed. It also allows you to make many data requests on the server and to process them to reduce the bandwidth used by the client.

You also have the option of a middle ground between the two called Incremental Static Regeneration. This option will generate a static page in the same way as getStaticProps, but it allows you to specify a revalidation period — which will regenerate the page when a request comes in at most as often as the period you specify. To do this, alongside props, you should also include a revalidate key with the time in seconds you want.

Objects into DOM elements

With jQuery, you have to be careful with which method you use for turning an object into DOM elements. The most common example of this is to create a list of items because, with jQuery, a loop over items would add each to the DOM one by one. With React, the virtual DOM is used to create diffs of the new state from the current one. This means that despite adding items in a loop, they are added to the real DOM as one operation.

This is done using the map function in JavaScript, where you can map each item to some JSX.

export default function Index() {
  const fruits = ["Apple", "Orange", "Pear"];
  return (
    <div>
      <h1>Hello world</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

Notice that the element inside the map needs a key prop. This is used in the diffing process discussed above, making it easy for React to distinguish between each element, so each of these should be unique.

Deffereds

The use of deferreds in jQuery can be replaced with the native JavaScript promise functionality. The syntax for deffereds was designed to mirror the functionality of promises, so the syntax should be familiar and not require too much alteration. One example of where deffereds might be used is in data fetching. If you do this with the fetch method in JavaScript, then you can add a .then to the end of the fetch as it returns a promise. This code will only run when the fetch is completed, and so the data (or an error) will be present. You can see this functionality in use here:

fetch("example.com")
.then((response) => {
  console.log(response)
})
.catch((error) => {
console.error(error)
})

This will fetch example.com and log the fetched response unless an error occurs — in this case it will be logged as an error.

In addition to this syntax, the newer async/await syntax can also be used. These require a function defined as a`sync`, in the same way as you might export a function. You can declare it like so:

async function myFunction(){
  return
}

Inside this function, you can call further async functions by placing await in front of them, for example:

async function myFunction(){
  const data = await fetch("example.com")
  return data
}

This code will return a promise that will resolve when the data is fetched, so it needs to be called inside an asynchronous function to await the result. However, in order to also catch errors, you will need to write a conditional to check the response status — if data.ok isn’t true, an error should be thrown. Then, you can wrap these away statements in a try catch block, rather than using .catch. You can read more about these methods in this article.

Improvements

Routing

Next.js uses file system routing, which is very similar to using different .html pages in a traditional website. However, this system also offers features beyond that, providing dynamic routes and allowing one page to be accessed under a range of urls.

For example, if you have a blog, you might keep all your files under /blog/*, creating a file [slug].jsx inside the blog folder — which will allow that content to be served for all pages under blog. Then, you can use the router in Next.js to find which route has been navigated to, like so:

const router = useRouter()
const { slug } = router.query

API routes

API routes allow you to also write your backend inside your Next.js application. To use these routes, create an api folder in your pages directory — now, any files created inside it will run on the server rather than the client, as with the rest of the pages.

To get started with these, you need to export a default function from the file, and this can take two parameters. The first will be the incoming request, and the second will let you create the response. A basic API route can be written like this:

export default function handler(request, response) {
  response.status(200).json({ magazine: 'Smashing' })
}

Limitations

jQuery UI

You may use jQuery UI in your application for user interface, but React doesn’t provide an official UI library like this. Nevertheless, a range of alternatives has been produced. Two of the most popular are Reach UI and React Aria. Both of these alternatives focus very strongly on Accessibility, ensuring that the project you create is usable by a bigger range of users.

Animation

While you can use conditional rendering instead of effects, this doesn’t provide all the same functionality, as you can’t do things such as fading content out. One library that helps to provide this functionality is React Transition Group — which allows you to define entering and exiting transitions.

Conclusion

Moving from jQuery to Next.js is a large undertaking, especially for big code bases. However, this migration allows you to use newer concepts (such as data fetching at build time) and sets you up to have simple migration paths to new versions of React and Next.js — along with the features they bring.

React can help you better organize your code (which is particularly important for large codebases) and brings a substantial performance improvement through the use of a virtual DOM. Overall, I believe that migrating from jQuery to Next.js is worth the effort, and I hope that if you decide to migrate, you enjoy all the features React and Next.js have to offer.

Further Reading on Smashing Magazine

Categories: Others Tags:

Implicit Grids, Repeatable Layout Patterns, and Danglers

August 2nd, 2022 No comments

Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it?

The specific situation is when a layout grid expects an even number of items, but is supplied with an odd number instead. We’re left with a “dangling” element at the end that throws off the layout. Sounds like what’s needed is some Defensive CSS and Dave accomplishes it.

He reaches for :has() to write a nifty selector that sniffs out the last item in a grid that contains an odd number of items:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Breaking that down:

  • We have a parent container of .items.
  • If the container :has() an .item child that is the last of its type,
  • …and that .item happens to be an odd-numbered instance,
  • …then select the first .item element of that type and style it!

In this case, that last .item can be set to go full-width to prevent holes in the layout.

If… then… CSS has conditional logic powers! We’re only talking about support for Safari TP and Edge/Chrome Canary at the moment, but that’s pretty awesome.

As chance has it, Temani Afif recently shared tricks he learned while experimenting with implicit grids. By taking advantage of CSS Grid’s auto-placement algorithm, we don’t even have to explicitly declare a fixed number of columns and rows for a grid — CSS will create them for us if they’re needed!

No, Temani’s techniques aren’t alternative solutions to Dave’s “dangler” dilemma. But combining Temani’s approach to repeatable grid layout patterns with Dave’s defensive CSS use of :has(), we get a pretty powerful and complex-looking grid that’s lightweight and capable of handling any number of items while maintaining a balanced, repeatable pattern.

CodePen Embed Fallback

Implicit Grids, Repeatable Layout Patterns, and Danglers originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

Tips for Successful Cold Calling

August 2nd, 2022 No comments

Cold calling can be daunting but it can yield amazing results if done right.

While it hasn’t had a great reputation, cold calling isn’t dead. This survey by Rain Group has shown that 82% of buyers accept meetings with sellers who proactively reach out. A cold call done with the right techniques can indeed attract buyers.

What is Cold Calling?

Cold calling is a sales strategy where businesses call prospects who have previously not indicated interest nor interacted with their business.

It helps you identify the needs of your prospects, reaching out to them with your services or products that can solve those needs of theirs and getting them to patronize you. Cold calling can be difficult but it is certainly not impossible to master. 

Cold calling in 2022 might look quite outdated: many businesses have switched to other social media platforms to generate leads and sales. But, cold calling still has a place in our time and age.

Benefits of Cold Calling

Cold calling can be frustrating, but it holds great benefits for people who are willing to implement it in their businesses.

1. Gain Insight

Cold calling is a good way to access information and learn new things. Learn why your techniques aren’t really working or why you’ve recorded very little progress.

Unlike cold emailing, you get to interact with a human being, get real-time feedback, try out different techniques, know what works and what does not and get better at what you do. 

You get to establish human connection, and while on the call, you might find information that’ll be useful for you in the course of time.

2. Instant Feedback

Cold calling affords you the opportunity to get instant feedback from your customers. With cold calling you get instant reviews from your customers regardless of their location.

This helps you to adjust where necessary. With cold emailing, your message might end up in the spam folder or even get deleted before your intentions are known but cold calling puts you right in front of your customers and you get access to feedback instantly.

3. Increase Conversions

The more people you reach out to through cold calls, the higher the possibility of converting them.

Cold calling helps you to inform a wider audience about your business on a personal basis. Even if you have a slim 1% close rate and you reach out to 1,000 prospects in a week, that’s 10 new leads who’re interested in your product!

This can lead to an increased number of people buying from you. However, in order to increase conversion, you must be fully trained on what works and what does not in cold calling. This helps you to apply the right technique and achieve your desired goals.

4. Master Your Sales Pitch

Whether you’re a newbie or you’ve been doing sales all your life, you will definitely need to sharpen your skill regularly. Cold calling helps you to master your sales pitch and improve on it.

You find out if you’re monotonous, chatty or extremely salesy, which can get your prospect uneasy and unresponsive and you get to make the required adjustments. This way your skills are refined and you get to make more successful cold calls.

Disadvantages of Cold Calling

Cold calling is exciting and thrilling but it has some drawbacks you want to be mindful of.

1. It Can Annoy Prospects

Have you ever put a call through with all the courage and charisma you can muster only to be shut out and rejected before you could even make your intentions known? Frustrating right?

Cold calls can be really annoying for some prospects either because of the timing, tone or because of the fact that scam artists usually adopt the same method. 

Some people find it intrusive and discomforting, and don’t have the patience even to let you introduce yourself.

2. It Can Be Time Consuming

Cold calling might yield results but it is definitely time consuming. This research by Revenue.io shows that the most successful sales prospecting calls average 14.3 minutes in length. Imagine when you have to speak with twenty or more prospects a day. More so when you do not know if these prospects will eventually buy from you or simply drag you on for nothing.

Not only is cold calling time consuming, it can be tiring especially when you get rejected time and again. It requires resilience and tenacity to keep on going despite rejections.

3. It Can Be Difficult To Handle

Thing is cold calling entails reaching out to humans and humans can be individualistic. You cannot fully predict how your prospect will respond to you especially given the fact that they’ve never expressed any sort of interest in your product. This makes cold calling arduous.

Some prospects politely decline, some do so rudely while some even resort to verbal abuse. And remember it’s not just about the prospect, don’t forget employee experience. Simply put, with cold calling there are so many uncertainties to deal with and it can be difficult to handle. 

4. It’s Not a Sustainable Prospecting Method

Cold calling requires that you make many shots before finally getting one right. It is clearly not an efficient method of gathering prospects and making sales.

The uncertainties that come with cold calling can make record keeping difficult and can put your business in financial jeopardy.

It also means you have to spend several resources on prospects that you cannot really count on. It can be exhausting when you reach out to several prospects daily and you can hardly close a deal or even move to the next step.

7 Tips for Successful Cold Calling

Here are some tips to help you make the most of cold calling.

1. Every Call Is a Learning Channel

Cold calling is one way to refine your prospecting skills as quickly as possible. Use call recording. Learn from every call. Note what works and what does not. Get to understand what individuals are likely to respond better to and step up your game.

Unlike other sales channels, cold calling gives you feedback and reviews – instantly. This helps you to make more informed decisions and you get to improve. 

2. Rejection Is a Great Teacher

You can’t avoid rejections – and many of them. You might get a lot of ‘no’s before you finally get one person who seems interested in your business.

Learn to handle rejection by firstly learning from it. Ask yourself important questions. Did you sound intrusive, did you sound salesy? Did you sound rude? Or was it just an unfortunate match?

You have to learn to not take anything personally. Whether you engage in cold calls or not, rejections will always be a part of life. If you let them get to you, you’ll be doing yourself a disservice.

3. Show Value First

Cold calls are unscheduled and unsolicited for. You’re basically stealing people’s time. This means you have to go the extra mile in order to grab the attention of your prospect. 

A sure way to achieve that is by highlighting what’s in it for them, why they should spend their valuable time (and then also money) on you – as soon as possible. 

Doing so increases your chances of retaining the attention of your prospect.

4. Prepare an Outline

If you’re new to cold calling or sales, then you’ll feel a bit anxious handling your first few calls. This is where an outline becomes necessary.

Preparing an outline for a cold call is important as it gives you a guideline to stick with, especially in a case where you’ve forgotten a line or two. Note that the outline is what it is – an outline that guides you. You should not read off an outline like an actor rehearsing a script. You’ll only bore your prospects.

Your outline should contain things like FAQs and key points so that you’re not caught off guard in a situation where your prospects ask questions you’re not familiar with. 

5. Do Your Research

Research has shown that 27.3% of sales reps’ time is wasted due to incorrect B2B contact information. 

Doing your research is by far the most important aspect of cold calling. You don’t want to go about calling people who have no need for your products. You’ll wear yourself out, get rejected and waste the time of your prospects. You might even end up with a bad company image.

You want to ensure that you’re onto the right person before clicking away on the dial. Ensure you have adequate information concerning the product you’re about to pitch to your prospect so as to avoid getting in a messy and tense situation or being a nuisance to your prospects. Acquiring basic information about your prospect will make things easier than expected.

6. Don’t Focus On Selling

Your prospects don’t want to know how good your products are, they want to know how it can help solve their problems. Prioritizing sales ahead of giving value is like placing the cart before the horse, you’ll get nowhere.

Even when a prospect has declined your product, you can still offer them information or tips to look out for when purchasing such products elsewhere. Make them feel acknowledged as individuals not just as sales figures.

7. Follow Up

Follow up with prospects who’ve indicated interest in the products you pitched to them, regardless of the outcome of the call.

You can send an email, thanking them for their time and attention. Another tip that will make your follow-up productive is to offer some form of value.

You can refer to an article or inform them of discount offers but by all means, do not make it excessive or your prospect will loathe you . These are all follow-up tips that will increase the chance of converting a prospect into a customer.

Conclusion

Cold calling has proven to be effective even in our digital world. 

Certain mistakes however can hamper the success you wish to achieve. All it takes is tact and commitment to the right procedures in order to reach out to decision makers and start closing deals.

The post Tips for Successful Cold Calling appeared first on noupe.

Categories: Others Tags:

How To Measure Your Content Marketing ROI

August 1st, 2022 No comments

How do you know if your content marketing efforts are working? How do you know if they’re making you money? And just what does your content marketing impact? If you’re struggling to answer these questions, then you might be due for a refresher on how content marketing ROI works.

Many marketers are unsure of how to calculate the ROI of their marketing, and many others don’t even measure the return on their marketing! This article will take a look at content marketing ROI, explain how you can calculate it, and then how you can leverage ROI in conjunction with other metrics and KPIs to understand whether or not your content marketing campaigns are working.

Content Marketing ROI Explained

Content marketing ROI, in a nutshell, is a way to measure how much money you make from your content based on how much you spent. Frequently, marketers and business managers will measure this return as a percentage.

When you have a higher content marketing return on investment, it means that you are more efficient at generating sales with your content. Remember, ROI essentially is a way to compare your sales with the cost of making your content and marketing. Understanding this is essential to keeping your sales pipeline functioning.

How Can Your Business Calculate Content Marketing ROI?

Calculating ROI is a snap with a simple formula. All you have to do is subtract the amount you invest in a project (INVESTMENT) from the total income (TOTAL INCOME) from the project and then divide that result by the amount invested (INVESTMENT). Finally, to see your ROI as a percentage, you multiply that amount by 100. This formula can be written as:

[(TOTAL INCOME – INVESTMENT) / INVESTMENT] x 100

For example, imagine that you spend $750 to film and edit a social media video. In the end, the video generates $1,500 in sales. Let’s plug this in:

[($1,500 – $750) / $750] x 100 = 100%

As you can see, in this case, the project generated a 100% return!

Why is Measuring Content Marketing ROI So Important?

Measuring content marketing ROI is huge for businesses. In our previous example, we saw a 100% return, but imagine how returns can potentially be much larger! Today, the power of social media means that content marketing ROI often exceeds 100% and can potentially be far higher. Today, content impressions cost very little compared to the returns they can generate. In short, content marketing can give you returns unlike any other. This means more cash flow at the end of the day.

In addition, content marketing can help you grow your audience. This means more likes, more shares, and more retweets. All of these types of interactions will help you generate insights into your market and audience. In the end, content marketing ROI is another insight that goes beyond just looking at page views and impressions.

Unite Content Marketing ROI and Traditional Metrics

Remember, it’s not one or the other. Keep track of both your primary metrics and content marketing ROI to understand whether or not content marketing is working. Traditional metrics are great at indicating whether or not marketing is working. For example, tracking cart abandonment over time can give you insights into whether or not you’re reducing cart abandonment, but it does not tell you how much money you’re bringing in as a result.

Content marketing ROI gives you that insight. When your numbers are in the red, you’ll know you need to shift your tactics.

Metrics To Leverage Your Content Marketing ROI

When building your marketing plan and leveraging content marketing ROI, it’s important to also track these key metrics:

  • Track Your Leads: Qualified leads are visitors or impressions that have shown interest in making a purchase during their customer journey.
  • Measure Web Traffic: Web traffic through SEO and content marketing can help bolster your digital footprint. Web traffic helps ensure customers are seeing your products and services. Consider how fast your landing page is too.
  • Keep an eye on engagement: Content marketing ROI is all about social media engagement. Social media is where most of your content should end up. Think of your social media as the start of your funnel. Today, platforms like Facebook and Instagram even make it easier to bring your products straight to the eyes of consumers.

When it comes to social media, keep an eye on the following engagements:

  • Likes
  • Shares
  • Comments
  • Follower Growth
  • Views (for Instagram Reels, TikToks, and other videos)

Analyze Content Marketing ROI

In addition to all your other metrics, remember to track your content marketing ROI and analyze it. Calculating your ROI and analyzing it are actually two distinct processes, but they’re both a part of measuring whether or not your content marketing ROI is working.  Think of analyzing as an in-depth look at your calculations to understand how well your content is working. Just how do you go about analyzing your content marketing ROI?

Set Goals

Setting goals is important because goals will tell you whether or not your campaigns had any impact and were a success. Think about your primary metrics: conversions, traffic, etc. Establishing a straightforward objective related to these metrics can make it easy to measure whether or not you’re successful. It can also help you understand the returns from your investments in campaigns and projects. When picking goals, remember the following:

  1. Choose worthwhile goals and be realistic. Picking unachievable goals or goals that are too distant can make things discouraging. For example, if you wanted to “boost Instagram video post impressions 10%” but have typically run Facebook campaigns, then maybe it would be better to set a goal of learning about making the perfect promotion video for Instagram first.
  2. Be specific about your goals. Goals that are too amorphous or vague are also prone to breaking down. This means that a goal such as “generate more diverse content” sounds great on paper, but it gives no actionable guideline for you or your team. A better goal might be to list out some content areas that are lacking and then shoot to tackle those.
  3. Commit to your goals. When you commit, this means giving yourself a timeline for completion and then sticking to it. This goes hand-in-hand with being specific and picking goals that are achievable. Committing means investing resources and time into achieving those goals.

Unite Goals and Metrics

Measuring your content marketing ROI isn’t just about how much money you make, but it also means understanding how other metrics are impacted. When you unite your goals with important metrics, you get more insight than if you just look at each individually. Your goals should incorporate the most important KPI metrics when possible. This means looking at engagement, bounce rate, cart abandonment, comments, likes, shares, and follower growth.

When you monitor these metrics you’ll quickly begin to see how your marketing campaign is performing. This is a great way to measure the success of your content marketing.

Cast a Wide Net and Look at All Metrics

When you cast a wide net and look at more than just primary metrics, you can gain deeper insights into your progress and also identify additional areas. Consider the last time you performed a compliance audit on your credit cards. Or for example, if you set out to improve your website traffic but also grow your total number of social media followers, you can leverage the information gleaned from one campaign when you’re ready to launch the next one.

Implementing Everything

If you’re still struggling with content marketing and whether or not you’re receiving the ROI you need, then it might be time to revisit your campaigns. If you’d like to dive deeper into digital marketing, consider reading a guide to help you get started

Using ROI and metrics, you can see how much money your content creation has generated and what the impact has been on your KPIs. In the end, measuring content marketing ROI is just one tool in your marketing toolbox to measure your success.

The post How To Measure Your Content Marketing ROI appeared first on noupe.

Categories: Others Tags: