Web Design Features

 

The typical website has some fairly standard features, such as forms and CTA buttons, but you may have overlooked many other features that add value to your site. Every year, new trends and standards filter their way into the design world. While it’s good to add new things and keep up with the trends, there are also some traditional features you’ll want to make sure you have, no matter what is and isn’t trending.

 

There are nearly 2 billion websites online, but not all are active sites. Still, you’re competing against a high number of other sites to grab people’s attention. If you want your site to stand out and to keep the visitors once they do land on your page, you should add as many of the following 17 features as possible.

 

1. Social Media Links


Social media is here to stay. Experts predict 2.95 billion people will be on social media by 2020. However, those people have to find your business easily, and one way to ensure your current customers and leads find you is to include social media links on your website. It’s relatively straightforward to add links or icons that encourage people to follow you on Facebook, Twitter, Instagram, YouTube and more. How you implement your social media links is up to you, but the key is to get them out there and start gaining followers now.

 

2. Value Proposition


What value does your brand bring to the table that no other brand does? Make this clear to your readers from the moment they land on your page. If you have the best customer service out of any companies in your field, share some testimonials about this from satisfied customers. If you have a stellar safety record, show consumers how you stack up to your competitors. Highlight what makes you unique and better than the competition.

 

3. Hover Features


Mini animations are on the rise, and users respond well to features that bring a website to life. Things such as hover features allow the user to stay engaged with your website. A hover feature might be as simple as a button changing colors when you place your mouse over it, or as advanced as elements dropping in from the side or top of the page or a video playing.

 

houck

 

Houck does a good job using the hover feature. When you hover over any of the image boxes in their grid-style layout, the page animates and becomes text rather than an image. The hover makes it clear exactly what you’re looking at, such as flooring or industrial repair systems. It’s also fun for the user to run the cursor over different boxes and learn more about the site and the different offerings of the company.

 

4. Hero Images


You’ve probably noticed more and more sites using hero images to draw site visitors in. Hero images are typically part of the background design, with text layered over the top. Keep in mind the image needs to be highly relevant to your brand and topic at hand. You also need to pay attention to the color palette of the text you’ll use. You want high contrast, so if your text is white, you’ll need an image with dark colors to serve as the background.

 

5. Background Videos


About one-third of all online activity is video viewing. People respond to videos, which is why incorporating them into your web design is a smart move. People process images better than text, so you can say a lot in less time with a video. Consider using a looping video as the background of your landing page. However, you can also add instructional videos that allow the user to see your product in action.

 

6. Responsive Design


Mobile responsiveness is no longer an option — it is a necessity. Google even ranks your site based on how well it adapts to mobile devices now, so if you want to rank well and reach the many users who access the Internet via their smartphones, you’ll need to ensure your site is mobile-friendly. Seventy-two percent of people state they want a mobile-friendly website, but many small businesses haven’t achieved that goal.

 

7. Quality Content


Content is still king when it comes to drawing people to your website, and quantity isn’t nearly as important as quality. Try to answer the common questions your site visitors have, and make sure your content covers material your competitor’s content does not. Keep in mind, content is more than just articles, but includes images, videos and possibly things such as guides and infographics.

 

urban decay

 

Urban Decay has a blog area called All Access where they share tips on how to use their products. Note the big, vivid and highly relevant images highlighting their products. They gear their topics toward a younger audience, which is their main demographic, so you’ll see topics such as how to make your makeup last all night or ways to command attention.

 

8. Contact Info


If you want to build a level of trust with your readers, your contact info needs to be easy to find and clearly laid out. Include a toll-free phone number. Add live chat so users can reach you during business hours and get instant hours. Add an address and email information. Basically, you want to show users that if they order from you and have a problem, they have a way to get in touch with you. Consumers who have had negative experiences in the past want to know they have a way to contact you if things don’t go as planned.

 

9. Linked Logo


In one study, researchers found people expect the logo to link to the homepage. Not only that, but the logo placement should be predictable as well. People use the logo as a marker for the entire website and a sort of shortcut back to home.

 

10. Straightforward Navigation


Obviously, your site needs navigation so site visitors can go where they want. However, is your navigation structure straightforward and intuitive? Go through your navigation as though you are a first-time site visitor. Ask others to test your navigation and adjust as needed.

 

adriat luxury hotels

 

Note how simple and intuitive the navigation is on Adriatic Luxury Hotels. The horizontal navigation bar across the top features the main categories for the site. They also have linked their logo to the home page, serving as an anchor for the rest of the navigation.

 

11. Breadcrumb Navigation


If you run an e-commerce site, take time to add breadcrumb navigation, or a trail of links to show where users have been on their journey through the site. So, if a visitor to a clothing site navigates to women’s, coats and finally ski vests, they can go back to any of the main categories by clicking on a link that shows where they’ve been.

 

12. User Reviews


Eighty-four percent of consumers state they trust online reviews as much as a recommendation from a personal friend. Reviews are a powerful tool that helps build trust with your target audience. Add a link to your Google reviews page or allow users to add reviews. You can also offer testimonials from happy customers, but these aren’t quite as convincing as a review is.

 

13. Easy-to-Read Font


Choose a font that’s easy to read, no matter what size screen consumers use. Choose a font that adapts to mobile devices and is easy to read on all types of devices. The font should have good contrast and a heavy enough stroke weight to appear vivid. At the same time, you don’t want such a heavy font that it looks ridiculous and blocky on a larger screen.

 

14. Larger Typography


One trend in recent years has been custom typography, which includes larger fonts that look better with a specific style. Think about some influential newspapers, such as the New York Times, and how unique their typography is. You’ll see larger type for the headlines, which pulls the reader in and instantly makes the site recognizable. Don’t be afraid of custom fonts and making the size larger for headlines.

 

new york times

 

The New York Times has been around for more than a century and a half and has an established font for their print newspaper. They’ve translated this online with a digital version of the font that works well and adapts to different screens. Note the unique swirls and angles of the letters for the title of the site. At the same time, they’ve chosen a type for their headlines that is a bit simpler than the script font of the title, but meshes well because the serifs are similar.

 

15. Search Bar


Pull up research on search bars, and you’ll find sharply divided opinions. Some people insist they are a must-have item, while others say you can do without them. The truth is somewhere in the middle and depends a lot on your particular audience. A search bar is an excellent function because it allows visitors to search for a specific item and save time, thus improving the user experience. However, if the search function returns too many results or results that are off-base, it is an aggravation, and you’re better off removing it until you can perfect the process.

 

16. Strong Call to Action


Your call to action (CTA) invites site visitors to do something specific, such as subscribing to an email list or taking advantage of a coupon offer. If you want to convert visitors into customers, you need a strong CTA. Many factors play into how well your CTA performs, including first-person wording, the color of the button and even the placement on the page. Your best bet is to try different styles and wording and conduct split testing until you perfect your CTA.

 

17. White Space


One important feature you need on your website that isn’t anything at all is white space. If you clutter up your page with too much stuff, visitors may feel overwhelmed and bounce away from your site. An aesthetically pleasing site has a nice balance of positive and negative that allows the eyes a break from time to time and helps set off important content.

 

Important Website Features


These are just 17 things every website owner should take a look at and implement where needed. However, many intricate components make up your site, and how those pieces work with your particular target audience varies. Your best course of action is to rework your site, conduct A/B testing and continuously make tweaks until your site visitors respond to your website design and features.

 

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.

 

 

Call to Action - CTA

 

When it comes to efficient salesmanship, there’s more science than art involved in achieving success. Selling is a highly behavioral and psychological activity that focuses on persuasion with a transaction as its ultimate goal.
 
The science of selling is often brushed aside by e-commerce designers, which is a major detriment to business success. There seems to be a flawed belief that any website with a functional shopping cart module will convince visitors to make purchases. As a result of this defective thinking, many important elements of a website are often disregarded.
 
If you have a website that offers goods, services or activities, one of the things you need is a convincing call-to-action (CTA) element. Most of the time, this CTA element will be capped with a button that simplifies the completion of an action for the visitor. Here’s are several things you need to know about CTA buttons.
 

The Influence of Color


Themes, templates and Web design guides are usually grouped into color combinations that pay attention to balance and contrast. In the past, behavioral researchers believed that CTA elements needed to be of a specific color for the purpose of being effective; however, this is not true. What drives website to click on CTA buttons is contrast.
 
In general, a CTA button should stand out from the background. For example, a fashion boutique that caters to younger female shoppers can choose a light pink background, but the CTA button to sign up for a newsletter should be fuchsia. This is only one possible example, but the point is clear – always color your CTA button so that it stands out from the background.

 

Here’s an example of CTA and color usage.

 

Pagewiz

Image Source: Pagewiz

 


Size Matters, and So Does Shape


Website visitors tend to respond better to rectangular shapes due to familiarity, so take that fact into account when creating your CTA. This is not to say that other shapes should be avoided at all cost, but it might be best to use recognizable elements. In any case, avoid sharp edges as they are perceived as being stern; rounded corners are friendly and inviting.
 
When it comes to size, CTA buttons need to be more than conspicuous, which means that they should be proportionally larger than other page elements. You want your CTAs to be noticeable and tell your visitors where to click, so make sure they are not too small.
 

Where CTA Buttons Should Be Placed


Years of Web design and development have conditioned visitors to expect a certain layout format. Most landing pages follow the formula of headline, persuasive message, sign-up form, and CTA button.
 
In general, Web designers should take cues from print media. Above the fold CTA buttons work better when visitors are already acquainted with the product, service or activity. For example, a pizza shop offering coupons to existing customers should place the CTA button above the fold, near the top. On the other hand, if the pizza shop is new to the neighborhood, the CTA button will work better when it follows the marketing copy below the fold.
 

The Message is the CTA Button


Like anything else that is being sold, a CTA button should present a value proposition. In other words, it must clearly answer the ever-present question of “what do I get by clicking this button?”, and appeal to human psychology.
 
The CTA message should be friendly while avoiding the use of passive voice. It should also not be pushy, so avoid imperatives like “submit”, “pay now”, and so on. Instead, make sure to always convey a clear message like “educate me” or “get my free e-book”. In general, keep it short, simple, and to-the-point. You can also benefit from words that create a sense of urgency like “now” and “today”.

 

Here’s a great example of messaging within the CTA.

 

Power Habits

Image Source: Noah St. John

 

CTA Narrative


The CTA button needs to be part of a larger narrative that should appeal to website visitors on an emotional level. To a certain extent, effective narrative should overcome the deficiencies of pedagogy, which means that it should teach visitors about something that is interesting and that can have a positive impact on life.
 
Try to think outside the box and regard CTA buttons as educational technology tools. In other words, if your visitors know they will learn something by clicking the button, they will more likely make that click. For example, an auto repair shop in Arizona can teach visitors about how high temperatures affect tires. In this case, the narrative can provide a quick physics lesson, and the CTA button can prompt readers to get on the email marketing list to learn more about how climate influences vehicle maintenance. Surely, you get the point – CTA buttons should always be put in an educational and informative context.

 

Prezi

Image Source: Prezi


 

 

Designing Climactic CTA Buttons


The most effective marketing narratives evoke curiosity and build suspense. CTA buttons should be designed to look like they will reveal a secret with a click of the mouse or a tap of the touchscreen. This can be achieved by explaining some concepts in the narrative while promising a resolution that will come after the CTA button is clicked or tapped.
 
In the end, ideal narratives should keep visitors guessing while the CTA button should bring enlightenment. Think of it as a series episode that ends with a cliffhanger. Design your entire page in a way that it climaxes at the CTA – more clicks are guaranteed.

 

Final Words


 Web designers who pay attention to colors, shapes, sizes and placement will ensure that their CTA buttons will be clicked on or tapped. However, it is equally important what the CTA says and what kind of a story it belongs to. So, when designing your CTAs, make sure to take all these facts into account in order to increase your click rates.

 

BIO: Natalie Smith, a freelance writer from Seattle, enjoys covering topics related to marketing, customer service, and social media. For more information, reach her @Natalie Smith

;