Businesses in the market for a cheerful, eye-catching design should consider utilizing bright landing pages. Developers can know all the elements a great landing page should have, but if the plan doesn’t mesh, they wasted valuable time building something that doesn’t convert. The webpage must be more interesting than other things the user could be doing in a given moment to stand out against the competition.

Learning how to design a page that grabs attention requires a bit of thought. Designers should begin by studying some of the top examples of bright landing pages and take notes on what does and doesn’t work. Each company has its own style, so select only what seems to mesh well with the brand. Here are some favorites and why they perform so well.

1. Cut Clutter

Put the focus on the call to action (CTA) by removing unnecessary elements. Focus only on the goal of the page and the next step users should take and point them toward the action cohesively.

Source: https://www.airbnb.com/host/homes

Airbnb has a very simple landing page for those looking to become host homes for vacationers. It provides an interactive sliding scale of how much landlords might earn based on the number of nights booked at a standard rate for the area.

To the right is a map that shows the region and the average pricing for different neighborhoods. The white space creates a clean, crisp look that draws the focus to the CTA button to get set up.

2. Grab Attention

Bright landing pages don’t have to be filled with white. A pop of color can grab user attention and even influence mood. For example, a brand that is youthful and exciting might use fuschia. Pay attention to the color wheel and which hues complement each other. Know the typical emotions associated with each shade and choose those that drive users to convert into customers.

Source: https://odysseytestprep.com/

Odyssey Test Preparation uses bold orange and some pops of purple to attract its perfect target audience — those getting ready to take the LSATs. It keeps the design minimalistic, but the bold hues give it a different feel than the more traditional look of Airbnb’s landing page.

Note the addition of the trust factor under the CTA to give users assurance it’s a valid site that’s helped others.

3. Use Visuals

Add a professional appearance with relevant images. There’s an old saying that a picture is worth a thousand words. Humans process images better than text alone, and adding an image enhances the copy. Companies that tap into the power of a graphic to show results from the product or fill the background with an image grab attention. Adding illustrations and photographs takes the landing page design to a new level.

Source: https://www.wix.com/wix-lp/illustration

Wix has several landing pages, depending on where and how users enter the site. This one has an orange illustrated background, which is a warm color often associated with joy. Note the bright pop of blue to draw users to the single CTA on the page. There is little doubt what someone’s next action should be.

4. Adopt a Tone

Bright landing pages call for a light tone that pulls the user into the brand’s personality. Before creating a landing page, determine the brand’s mood. Officials should write a company persona that is a mock person with a running list of preferences, jokes and favorite words. Tap into the description when creating a new landing page.

Source: https://hellotushy.com/

Tushy has a simple and light-colored palette that pulls the user in. White and baby blue create a bright, sunny look that is calming and interesting at the same time. It’s a bit different than some of the earthy tones others in the same industry use.

A pop-up almost immediately appears when someone lands on Tushy’s site. The humor behind the words ties perfectly into the light, bright colors. The company invites visitors to “stay for the butt jokes.” The CTA reads “Sign My A** Up.”

The tone can easily convert those with a certain sense of humor into paying customers. Even if visitors exit out of the pop-up, they’ll be invited to shop.

5. Combine Unusual Colors

Designers who want a bright, vivid look may want to combine colors people don’t normally think of together, such as red and purple, blue and yellow, or anything that pops. Keep working with the saturation and hues by adjusting shades through online color palette generators.

Keep brand colors in mind, but if they aren’t bright enough, it’s OK to stray outside the norm for a landing page. It can have its own design without worries about the logo hues.

Source: https://emailoctopus.com/

EmailOctopus uses a soft minty green and pops of bright purple to draw users in. The octopus is at the forefront of the landing page design with the purple logo. Everything else adjusts around the accent color, and the result is bright and eye-catching. Notice the varied hues of green to create some texture in the design.

Why Are Bright Landing Pages Crucial to Success?

Businesses have just a few seconds to grab user attention. The clock starts ticking the minute they land on a page. Everything, from color choices to images to headlines to the CTA button, must be just right to engage site visitors and convert them into leads. Try adding some vivid hues to the next landing page design and see if the return on investment increases.

Eleanor Hecks is the editor of Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.

You may have heard that you should stick to a specific color palette or try to go with a simplistic look. While this works well for some websites, others benefit from bold bursts of color. If you want to create a more modern, edgier design, then a colorful landing page may be the way to go. You can also choose something a bit different from the rest of your site for a landing page.

Your choice of colors can impact the emotions of site visitors. Choosing a particular hue over another might increase conversion rates. In one peer-reviewed study on the psychology of color, Satyendra Singh found that it takes only 90 seconds to form a first impression, and as much as 90% of that impression is based on color.

For years, people have used red to create excitement. Blue is seen as a color of trust. What becomes truly powerful in marketing is combining bold colors into a gorgeous mix that draws the user into the page. You want your design to stand out from others in your industry.

1. Supremo

Supremo is a UK-based website with modern animations and bold color choices. The use of yellow and purple clashes the tiniest bit, but the unorthodox use of color combinations also grabs attention.

The animations create moving parts, drawing the user’s eye to the bright colors and then the text on the page. There aren’t a lot of other elements to distract from the overall design. When you use something unexpected, you should keep other choices on the page to a minimum.

2. iSpecimen

iSpecimen uses a mix of greens, blues, yellows and geometric patterns to grab user attention. Because they are a science-based business, showing the data points and the lines arcing out from each one helps the user have a sense of connectedness. The design screams innovation and modern technology.

Utilizing a rainbow spectrum of colors allows the user to decipher lines, circles and triangles at a quick glance. The layout helps set the tone for the site and reflects the cutting-edge attitudes of the company.

3. Loopring

Loopring focuses their attention on a brilliant blue. You don’t have to use a bunch of different colors to make an impact. You can keep it to one bright color that sums up everything you want to say. Remember that blue lends a sense of reliability. However, they’ve chosen a brighter blue, which also screams contemporary.

This design also utilizes negative space with the color white to create some unusual patterns and draw the user’s eye. When you land on the page, your attention is drawn to the headline and then the call to action (CTA) to watch a video. As you scroll down the page, you’ll see additional icons and elements in the same shade of blue.

4. First Sip Brew Box

First Sip Brew Box uses a bold yellow design. Yellow isn’t a color you often see in web design as one of the primary shades, but it works well for a beer site, since many beers have a yellowish cast to them.

The use of black for the CTA button adds a nice contrast against the yellow horizontal bar across the bottom of the page. Notice how carefully they place typography, so it shows up against the yellows and medium-toned browns on the page.

5. Vans

Site visitors might arrive on your company’s landing page because they are looking for information or an answer to a question. Providing valuable details about your company is helpful. However, your real purpose with any landing page is to grab users and turn them into leads. One way of doing this is promoting services on the pages people are most likely to see first.

The highest-performing landing pages come in at 27.4% conversions. However, most industries have an average of no more than 6%, and some even less. Your first step should be to figure out what your average conversion rate currently is, so you know what works to improve that rate and can adapt as you go along. You’ll want to try adding new language, features and even placement and test each change to see how well it works for your conversion rate optimization.

A good place to start is by showing site visitors what is available to solve their problems. Here are some ways to promote services on your company’s landing page and improve your conversions.

1. Speak to Your Audience

Around half the people who arrive on your website aren’t going to be good prospects for what you sell. State upfront what you offer. If someone is looking for a local trash pickup service and you run an HVAC company, they aren’t a good match for you. Knowing what you do and what areas you serve is vital information that should be easy to find, no matter what page the visitor lands on. You may want to put this information above the fold, so the user doesn’t have to hunt for it.

Curt & Jerry Sewer Service shows where their audience is by using a map of the state of Indiana with a marker for their headquarters. They then use rings to show their service area. This tactic allows visitors to immediately see if the services are available n the location where they live.

2. Create Categories

If your company offers several different services, you may want to separate them into categories, so users don’t feel overwhelmed. Businesses with a wide range of services may also attract both business-to-business and business-to-consumer clients, creating very different types of landing pages. However, some of these clients will naturally cross over into different kinds of offerings, so make it easy for them to access all the services listed on your website.

3. Name Drop

You’ve worked hard to build a reputation in your industry. Don’t be afraid to drop the names of your biggest clients, so potential customers see even the big guys trust you to do a good job. Talk about the history of your company and some of your best work. Doing so highlights what you’re capable of providing to your clients.

Flinchbaugh Company outlines the custom machining and manufacturing they provide their customers. They then talk about their 80 years of experience in the industry and that the U.S. Department of Defense and Fortune 500 companies trust them for their needs.

4. Add a Comparison Chart

Do you have some stiff competition in the market? Don’t try to hide that you have competitors. Your site visitors likely already know you do, and they may have even visited the websites of some of those companies to gather information. Instead, include a comparison chart that outlines how you match up and where you exceed others in your line of work.

5. Offer a Live Demo

People often want to try a service before they sign up. If you offer a service online, provide a live demo so users can try out the program and see whether it is a good match for them. Not every person will like the way your service works, and that’s OK. Your goal is to attract loyal customers who get something out of what you sell. Promising live demos is an excellent way of separating those who need your services and those who don’t.

Sonicwall offers a product demo so small businesses can ascertain if the service meets their needs. Since security is an integral part of protecting your business’ data needs, showing how their systems work allows users to decide if the programs are right for them.

6. Add a Free Quote Button

If your landing pages don’t already have a “Request Free Quote” button, now is the time to add one. Visitors need to know there’s no need to pay to gather additional information. Yes, it will take a little more of your time to offer free quotes, and not everyone will become a customer, but you’ll also collect their email and be able to continue marketing efforts in the future. Your conversions over time might increase as browsers become buyers.

Small Changes Equal Big Results

When revamping your landing pages to highlight your services, start small. Change one thing at a time, test it to see how visitors respond and then move on to the next idea only when you’ve perfected that one. Little changes, such as call-to-action button placement, may have more impact than you’d expect. Refine your language until it highlights what you do and grabs the exact audience you want to reach.

Author

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Whatever industry you’re in, your landing page is often the first interaction a person has with your brand. If you don’t hit all the high notes and keep things focused on the goal, you risk losing your site visitors to some other distraction or a competitor’s page.

Manufacturing is a $5.4 trillion industry in the United States that mainly lies in the heart of the country in states such as Indiana, Wisconsin and Iowa. If you want to capture your part of the market share as a manufacturing company, you have to be smart about your online presence as well as your offline one. Your landing page is a good starting point to gain higher conversions and increase your return on investment (ROI).

The cost of paying web designers and developers can add up quickly. Fortunately, you can do several simple things to improve your industrial landing page while staying well within budget.

1. Set a Goal

Before you hire someone to create or tweak your landing page, figure out your page’s goal. Keep in mind you can have multiple landing pages on one site. Each should feature one offer and speak to a particular segment of your audience.

For example, you might wish to collect email addresses so that you can continue marketing to potential customers in a specific area. Gear your entire page toward that audience, and keep the focus solely on how to get them to share their email and sign up for future news. You can do this through a freebie offer or promise of discounts.

2. Study Trends

Did you know that by the year 2022, video viewing will compose the majority of Internet traffic? Spend time on competitor websites and other industrial sites to see what design elements are trending. Do most of them employ video in some way? How many of them feature parallax scrolling? Pay attention to everything from the headlines to the images on these sites. Your goal isn’t to copy what they are doing but to recognize trends you can implement while still staying unique in your approach.

3. Focus on Content

While not exclusive to manufacturing websites, focusing on the content you serve up improves your landing pages instantly. Create unique and relevant items that inform the user of your business. Show off some of your best testimonials. Add video while ensuring the information it contains highlights something unique about your brand. Gear everything to your target audience and the details they’d like to have.

Summit Steel features both recent blog posts and customer testimonials on their landing page. The use the heading “Our Customers Support Our Work” to showcase a testimonial. Blog topics include the robotic welding process and an award they won. Everything on the page centers on gaining the user’s trust and showing why Summit Steel is a reputable company to do business with.

4. Fix Your Headline

Your headline is the first thing a person sees when they land on your page. It needs to answer the question of “what.” What do you do? What product do you sell? What can you do for them?

The headline doesn’t need to be overly long or complicated. It needs to answer a question and get to the core of your business model. If you sell raw materials, you can simply state “the best [blank]” available. Work on your headline, test it and see what performs best with your target audience.

5. Highlight News

Does something about your brand make you stand out from the competition? One way you can grab site visitors’ attention is by sharing that news. If you’ve won an award, add a link to the press release and the emblem to your landing page. If you recently launched a new, innovative product, highlight it with a video or article. Share new developments with your site visitors to keep the page highly relevant to your company’s unique qualities.

Vollrath does an excellent job of sharing news on their landing page in a box that highlights the information’s importance. Note the box’s outline and the way a call to action (CTA) invites visitors to “read now” and learn about the custom fabrication expansion. They also add a list of new products just under the news.

6. Show Your UVP

Your unique value proposition (UVP) is what your company brings to the table that no one else does. You might have the best customization, the fastest turnaround or the most personalized service. You may need to poll your customers to find out what your UVP is from their perspective. Why do they choose to do business with you rather than a competitor?

Once you know your UVP, consider it your subheading — the second question you should answer on your landing page. While your headline explains what you do, your subheading explains why you do it better and why the user should choose your brand.

7. Offer Tools

Attracting new users to your websites takes time and effort. Once they are there, you’ll want to grab their attention and then engage them. Figuring out ways to get them interacting with your site is a good first step. Think about what tools might be most useful to your audience. You might offer free webinars, a download of an ebook or a calculator relevant to your industry.

Martin Marietta offers a calculator to help construction companies estimate the cost of materials for a project. Business owners will likely bookmark and return to this tool time and again to estimate their own expenses before bidding on a project. They will also likely choose Martin Marietta for their needs when it comes time to place an order.

8. List Locations

Do you serve specific regions or countries? Be sure to list locations. There’s no need to waste the time of someone in an area you don’t serve — and you don’t want them eating up your bandwidth. Offering an “Areas Served” or “Locations List” section benefits you and the user at the same time.

9. Improve Your CTAs

Your CTAs are the features that drive the person on your site to taking some type of action. Make sure they carefully align with your goals for your landing page. Then, work on placement, color, and language.

If you haven’t already developed a buyer persona that represents your typical customer, now is the time to do so. Gear your CTAs to the persona you’ve created. Then, test and retest to see which CTAs perform best. Use A/B testing to discover the best button placement, color, language, and even size.

10. Align Images With Text

Never choose a generic or stock photo for your website. Instead, make photos relevant to the topic at hand. Ideally, the images will showcase what you do for your customers or the finished product you create. You can also use a video in the background to showcase some of your operations and even highlight your workers and their dedication.

Images say a lot more than text alone, so choose them carefully and make sure they tie back into the message you wish to send and your overall goal for your page.

Special Considerations

An industrial website typically seeks business to business (B2B) traffic, although some may serve as a business to many (B2M). Today’s busy executives don’t have a lot of extra time, so keep your landing pages simple and to the point. If you know where you’re headed, you can guide your buyers through a clear journey with an end goal in mind. Change the small elements of your page and continue improving it until it gains the attention it deserves and meets your goals for your online presence.

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

A portfolio highlights your best work. No matter what type of business you own, designs you create or photographs you take, it’s a personal calling card that shows what makes you unique. However, figuring out the best placement for your portfolio isn’t always easy. Obviously, you want it linked to from your landing and home page, but do you use thumbnails, sliders, full images or what?

Around 96% of site visitors aren’t yet ready to make a purchase. Your job is to convince them they can’t possibly live without what you have to offer. Showing off some of your best work is one way of engaging them and showing them what you might be able to do for them. Fortunately, there are several ways of incorporating your portfolio on the landing page without being too spammy about it.

1. Add a Slider

Some experts will say sliders are yesterday’s news, and you shouldn’t use them. However, with internet speeds faster than ever before, a slider is a nice way to highlight some of your best work without taking up a lot of space. Placing it at the top also shows site visitors that this is one of the most important elements on your landing page. Keep a few things in mind when creating sliders, such as how they appear to mobile users and limiting the number of screens, so the user isn’t overwhelmed with an endless sliding loop.

Tom Peters Art naturally lends itself to sharing images from paintings in a slider. When you land on the site, you see a slide that goes through several different pictures. From time to time, the offerings change based on the season or newer work. The slider and thus a few key offerings from the portfolio are the main focus of the page.

2. Use Thumbnails

If you want to give users a quick taste of what you have to offer, you could also add a few thumbnails of your best work and a CTA button inviting them to view your complete portfolio. When choosing thumbnails, look for images that translate well in a smaller size. You should also vary the type of thing you show. For example, if you are a photographer, you might want to highlight studio work and outdoor shots along with a few black and white images.

3. Make Images Clickable

When you share pictures of your work, make sure they are clickable so they take the user where you’d like them to go. If you show a product package you designed, make the picture clickable to a page of other examples or information on how to get in touch with you to create a unique design. Another option is making any photos go to the full online portfolio so the user has a chance to see more of your work.

However, ideally, the user takes an action that leads them to become a customer. Think about how clicking on the image creates a unique call to action (CTA) of its own and where the person goes next in the buyer’s journey.

USA Shade makes each of the images highlighting its shades clickable so users can get more information both on how they are used and how to purchase their own. For example, the first image in the slideshow is of the YETI corporate campus. The portfolio picture becomes a case study when you click on the link and it explains the uses of the shade and the size and style of the wing structure. A CTA button reads “Products in Use,” and a second one reads “Contact Us.”

4. Include a Logo and Tagline

Even though your goal for a landing page might be simply to highlight a specific type of work you do, you should still include a logo and tagline. It’s important to brand your business and not focus too much on a single project or image. While a portfolio highlights your best work, your brand is what shows you’re capable of continuing similar items and creating custom projects. Your logo and tagline should show clearly what you do and be memorable, so users keep you in mind when they need what you offer.

5. Show Different Sides

A popular trend in websites this year is showing dual sides of a brand personality. You can easily do this while highlighting your portfolio. Split the page in half and show each type of work you do with images and descriptions. Use grids to break up the different types of projects you do, with pictures that are highly relevant to what you’re trying to showcase.

Breather offers office space for small-business owners. It shows the different types of workspaces by placing two images side by side. It shows locations for a few hours of work or some of the benefits of leasing for a longer term. Depending upon the user’s needs, they are taken to additional information on available space when clicking on the image. For example, they discover monthly options that offer high-speed W-Fi, cleaning, furniture and no long-term commitments. They also find out what locations are available and see additional portfolio images.

6. Place in Nav Bar

Another simple way of incorporating your portfolio is by placing a tab in your navigation bar that says “portfolio” or “examples.” This allows you to guide users to it no matter which page they land on. It might not be as fancy as adding sliders or a video, but it is a practical way of keeping the information available on every landing page, home page and subpage on your website.

Test Placement

Put your portfolio images and links in different locations on your landing pages. Conduct split testing to see where it performs best. You can track performance through clicks and heat maps, seeing where users spend the most time on the page and which links they click on. If your portfolio is performing poorly, try moving images or links to a new location on your landing page and see if that helps improve conversions.

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.