Nearly every business on the plant either has or plans to have a website. Your online presence is often the first thing people see of your brand. You can make a positive impression or one you’d rather not make. Fortunately, designing a professional website only requires a bit of knowledge about how sites are put together and what consumers respond best to.
What Makes a Good Professional Website?
Around 1.8 billion websites exist in the world, some active and some not. Understanding the elements to put together a functioning website is a good place to start. Most people start by looking at sites designed by others to get an idea of what’s on trend and how to capture your audience’s attention.
To design a professional website, take a few specific steps most designers follow. We’ve come up with what we think are the key indicators to a top quality website and shared a few examples of some stellar designs you can study and learn from.
1. Check for Functionality
It might seem like common sense but it’s vital to test your website and make sure everything works as expected. Do all links go where they should? If you click on a call to action (CTA) button or fill in and send a form, does the result equal the action?
Source: https://weltio.com
Weltio limits the number of elements on each page, which makes checking for functionality easier. If your site is minimalist, you should still check that everything aligns correctly, all links work and your CTA button performs.
2. Know Your Audience
You’ve likely heard this advice about marketing and sales. You also should understand who your website is for. Know your customers and their preferences so you can choose the right color combinations to tap into their emotions.
What are their biggest fears and problems? If you can solve their pain points on your website, you’ve taken great strides toward developing a loyal customer. Create buyer personas to represent your audience segments and design to them.
3. Use Beautiful Images
Your site’s visuals can make or break the customer experience. Big hero photographs can set the tone and help highlight your product. If you offer any type of product pages, offering various angles so users can see just what they’re getting is beneficial.
The human brain processes images much faster and more efficiently than it does text alone. Use pictures to highlight your main points and to drive facts home for the viewer.
Source: https://mondocontractflooring.com
Mondo Contract Flooring utilizes photographs that show their premium rubber flooring from the exact right vantage point. Note how the majority of the image is of the floor and the other elements fade into the background. By going with a grayscale image, they keep the site minimalist looking and have plenty of negative space to add headlines and CTA buttons.
4. Stick with Traditional Features
It might be tempting to come up with a unique type of navigation bar. However, straying too far outside the norm creates confusion for some users. Rather than reinventing the will, go with what users expect. When you meet expectations, you can put the focus on what you sell.
For example, the navigation bar should almost always be near the top of the page. The CTA should be easy to find and contrast nicely with the other elements. Step back and consider if anything is confusing or needs refined to better meet user intent.
5. Check for Mobile Responsiveness
eMarketer recently reported mobile usage is up yet again. In 2021, it rose at a fast-paced 17.7%, and 4.6% in 2022. If your site isn’t ready for all those smartphone browsers, now is the time to get it there.
Ideally, your website works exactly the same on mobile as it does on a desktop computer. Images, functions and forms should adapt for a smaller screen. If you can automate any forms, so things get filled in based on what the user has already input, you can make the accessibility much better for the mobile version of your site.
6. Stick with Traditional Features
It might be tempting to come up with a unique type of navigation bar. However, straying too far outside the norm creates confusion for some users. Rather than reinventing the will, go with what users expect. When you meet expectations, you can put the focus on what you sell.
For example, the navigation bar should almost always be near the top of the page. The CTA should be easy to find and contrast nicely with the other elements. Step back and consider if anything is confusing or needs refined to better meet user intent.
7. Check for Mobile Responsiveness
eMarketer recently reported mobile usage is up yet again. In 2021, it rose at a fast-paced 17.7%, and 4.6% in 2022. If your site isn’t ready for all those smartphone browsers, now is the time to get it there.
Ideally, your website works exactly the same on mobile as it does on a desktop computer. Images, functions and forms should adapt for a smaller screen. If you can automate any forms, so things get filled in based on what the user has already input, you can make the accessibility much better for the mobile version of your site.
Source: https://webgi-jewelry.vercel.app
We really love the soft dusty rose background for the Mancini & Co. website. The design is minimalistic, so users can quickly find the CTA and scroll through the jewelry. Note how the mobile version pulls up a similar look and layout. You’ll easily recognize the brand no matter which version you own.
One thing we would do differently is to not blur out the images quite as much on the mobile version. This is an example of a fun design feature not translating as well on a smaller screen. The site still functions well and has an excellent design, but would be vastly improved with clearer images of the rings.
8. Add Content
If you want people to come to your site and stay there, you must add quality content. Think about what pain points your customers have. Answer them in articles, videos, and infographics. Once you draw people to your pages, you need something to keep them there. A nice blend of topics is one of the best ways to keep them engaged.
9. Embrace Color
Even when trends point to monochromatic color palettes, or your business hues are pale, don’t be afraid to use pops of color to grab user attention. You can add color to your CTA buttons, as accents to point users in the direction you wish to go or within your images.
Source: https://cricut.com
Cricket’s color choice is fairly monochromatic and neutral. Even the machine is a soft shade. However, they add in some attention-grabbing pops of red, yellow and purple with the display of paper flowers made from the machine.
10. Try, Test and Try Again
The best way to create a professional website users respond to is by trying different things and seeing what works best with your audience. Conduct split testing when you try a new design. See what is most effective with your audience. Over time, you’ll create a site your customers flock to and are proud to tell others to visit.
Author
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.
What is a persona web design? When you create your site for buyers, you hone in on the key characteristics of a particular segment of your audience. Every business reaches people with a specific set of demographics and psychographics. Knowing who yours serves best allows you to meet their needs.
According to the United States Small Business Administration, there are approximately 31.7 million small businesses in America. The country boasts an additional 20,139 large enterprises. No matter your industry, you’re up against some stiff competition online, both from local and international sectors.
One way to stand out from the crowd is via your website’s approach. People respond to pages personalized to their needs. Create a persona-driven web design by following these steps.
1. Speak to Their Preferences
Once you understand who your buyers are, it’s much easier to meet their needs directly. The entire customer experience on your website improves as you use the colors, images and language your customers prefer.
Run every element of your design through the filter of what your personas might think. For example, if most of your customers are working women, the color brown might be a turnoff. Studies show most women prefer blue but brown ranks low.
Gillette Venus uses some soft blues with brighter pops of color. Notice how the gold is a deep hue to avoid the use of brown on the page. When you first land on the site, a pink strip appears across the top, offering a discount code. Everything about the page’s color scheme considers the typical person who buys these razors and targets their preferences.
2. Rank the Importance
Almost all businesses have more than one customer demographic. You likely have several personas representing different segments of your audience. However, one faction usually buys more than all the others. Rank your personas, paying the most attention to the one bringing in the most revenue over time.
You may find some personas only buy once and don’t return, while others purchase repeatedly. Figure out who represents your bread and butter and put the emphasis on the persona.
3. Create Separate Landing Pages
Each persona has unique needs. While your homepage can focus more on your primary audience, you should also offer options for the other personas. Each landing page should have language, images and calls to action geared to the group you most want to reach.
Fidelity Life separates personas by their current situations, such as single, partnered, with kids or partnered with kids. The four categories represent their four buyer personas. When the user clicks on one of the options, they arrive on a landing page geared for their needs. They ask for additional information along the way to further personalize the experience.
4. Offer Escape Routes
People potentially land on your website from any page. While you might address the needs of all your personas on your home page, what happens if a user lands on a page not pertaining to them? You must offer an easy escape route that takes them back to the home page or a place specific to their needs.
5. Identify Needs
Your buyer personas each face unique pain points. How can you solve the problem they have? Once you identify their needs, it’s much easier to separate the solutions into pages on your website.
While it’s wise to separate your landing pages into solutions, you also must keep in mind some buyers may need more than one solution. Persona A may have some of the needs of Persona B and vice versa.
CIT Bank does an excellent job of meeting the needs of their customers by offering tabs for the different solutions, with the categories of bank, borrow, learn and resources. If Persona A needs a new money market account, they know to click on the “Bank.” On the other hand, if a business owner isn’t quite sure what their needs might be, they can click on “Learn.”
Offering a clear path to different solutions meets the needs of all personas. The website avoids a situation where the person lands on a page unrelated to their expectations and bounces away.
6. Categorize Content
You likely developed an extensive repository of resources for site visitors. This could range from blogs on how to better connect with your customer personas to guides on how to create a website from scratch. You may host all of this content in one location, such as a blog or library. However, you should recategorize it to better meet the needs of each of your buyer personas.
You should personalize content to each segment. Separate topics into sections and create a page targeted at the buyer persona most interested in the piece. Use categories and tags to separate blog content. Name your ebooks according to the need met by the material.
7. Customize Your CTAs
You’ve already developed separate landing pages for each of your buyer personas. Now, spend time tweaking the language of your calls to action (CTAs) to target each segment of your audience. Would your persona respond positively to the word “free?”
Do some surveys and A/B testing to see what combination of phrases works best with your audience. With a little effort, you’ll improve your conversion rate and your customer experience (CX).
Focus on the User
A user-centered approach takes into account the needs and preferences of your customers. The better developed your personas, the more you can customize your site and create an outstanding CX. The best way to stand out from your competitors is by personalizing your website and solving client pain points.
Author
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.
There are a plethora of web design features to choose from these days. One trend comes on the scene, and before you can get used to that one, there is something to take its place. Figuring out which elements to include and which to ignore can pose a real challenge for some businesses and the designers who create their websites.
People judge whether or not a website seems credible based on a number of facts, but 75 percent of website’s overall design falls on aesthetics. You need to carefully consider each aspect of your overall design and how each feature works together as a whole if you want visitors to see you as trustworthy.
Even though there are dozens of possible features you could add to your site, we’ve narrowed the list down to five that we feel are musts for any type of website.
1. Large Typography
When it comes to typography, you have a lot of choices to make. How big should it be? How will it translate on smaller screens? Your typography choice also has a personality and lends an overall identity to your site. It should be immediately recognizable as your brand, but at the same time the font needs to look good both on PCs and on mobile devices.
Adding larger typography for headers or as part of your logo is one way to give the site visitor an immediate feel for what you are about. With that in mind, try to use something not too far out of the norm. Stick with more traditional fonts or at least fonts that have traditional elements to them. It’s probably best to avoid, for example, a font that puts a heart over every “i” on the page.
Take a look at the typography on The Next Rembrandt. The bold font with serifs gives the site a look of yesteryear, which ties into the theme of an artist from the Baroque period in Europe. At the same time, the font is fairly simple and should be easy to read on any size device. Notice how the bigger typography draws the eye to the title.
2. Navigation
Your navigation is one of the most important elements of your website and you need to carefully consider how and where you place navigation on your page. Most visitors will look for your navigation to orient themselves with your website. Make sure you place it near the top of the page and keep it there throughout your site, so it is easy to find and navigate to various areas.
You also need to ensure your site is friendly for mobile users as they navigate to various areas. About 67 percent of mobile users state they are more likely to buy from a mobile-friendly site. You can easily achieve this with text links and hamburger menus.
3. Background
Remember when sites used tiled backgrounds and you could clearly see where the edges of the image were? That wasn’t a good look at the time and one we are far from these days. You’re more likely to see a beautiful photograph, a faded video or some type of custom texture in the background.
The key to creating a background design your site visitors will enjoy is to come up with something that reflects the overall tone of your website without distracting from your message. You don’t want a background that is too busy or too bland. The best choice is somewhere in the middle.
Custom Shingles manufactures cedar and hardwood roofing, so it makes sense that their background has a texture that makes you think of natural materials. Note how the color blends nicely with the blue tinted, wooden heading, enhancing the other elements on the page but not overwhelming.
4. Videos
More than half of marketers cite video as the type of content with the best return on investment (ROI). This is likely because people are more likely to engage with and share video than other types of content. Utilizing video on your website is a smart idea.
As Internet speeds increase and video is more easily streamed in a variety of locations, expect the trend toward videos to continue. You can either include a video that the user can begin to play if and when they are ready, or you can include a video background that begins to play when the user lands on your page. Each method has advantages and drawbacks — survey your target audience and decide what works best for your site.
5. Use of Negative Space
As a web designer, you need to carefully consider the use of both positive and negative space on your page. There needs to be a nice balance between the two. Don’t be afraid to edge your positive elements into your negative space in order to draw the reader’s attention either.
Multimedia Guides to Polish Culture features an interesting design and use of white space. The image on the right crosses the border between the negative and positive space. This draws attention to the hands. Note how the man’s arm and hand are extended to the heading so that the site visitor’s eye is drawn to the title.
Most Important Design Features
The most important design features for your site will vary depending on your industry and your target audience. Knowing which ones stand out and stand the test of time is a good place to start. However, don’t limit yourself to only the five examples listed above. There are many different design features available to use in your designs.
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.
Gone are the days when businesses used a landing page as a placeholder just for their company’s address and phone number. Today’s websites need a friendly user experience, fast load time, blog, social sharing ability and, perhaps most importantly, quality design.
Although your company doesn’t require award-winning design to stand-out, it does need to be attractive to an audience to keep them engaged. Fortunately, that doesn’t mean the design needs to be complex. According to a study done by Adobe, 41 percent of respondents say they prefer a website that’s plain and simple.
Here are five optimal steps to create a winning online presence.
Design with the user in mind
Today’s website design focuses on the user experience. This may sound intuitive, but many companies struggle to understand the user intent and how to simplify that process.
Start with a solid design and navigation hierarchy that makes it easy for your customer to find what they’re looking for. For example, Apple Rubber’s site is simple and to the point, and their material selection section is an intuitive process where customers can quickly pinpoint the information they need.
Strive for readability
Before you design a single pixel of your website, think about what you want your audience to do. If they’re simply looking at your photography business portfolio, then loading them with gorgeous visuals makes sense. But chances are you need your readers to consume information, from your blog to your call to action (CTA). That’s why it’s crucial for your blog to be highly readable. Readers are likely to need a large text font, oversized headers, bullet point lists and tables that clearly define the information you want to convey.
Keep it simple
Readability and simplicity are key for building a successful website. Focusing too much on long, complex text and visuals can ultimately backfire and drive your audience away. In fact, according to Adobe, 41 percent of people will stop viewing a website if the content is too long or takes too long to load.
Look to Quid’s website for inspiration. They focus on functional minimalism with only the essential elements on a page to start exploring. With fast load time and readability, this business website delivers on what consumers are looking for in their online experience.
Include a call to action
Don’t assume your customers will know what you want them to do when they land on your site. They may just want to look around, consume content and go. Or they may need you to tell them exactly how to use their site and get the most value.
This is where a rock-solid call CTA comes in. For instance, you can add an opt-in box for customers to signup for future discounts or a free video series that helps them resolve a problem. Evernote, for example, prompts consumers to signup for their service for free to get started using their tool quickly.
Focusing on readability, load time and simplicity on your website all point back to the same thing: the customer experience. Get this step right and you’ll keep your customers coming back for more to a site they trust and see as a credible resource to resolve their needs.
Web design is all about striking a fine balance between flair and function. You want your content, visual design and UI to wow your audience, without being so flashy that it hinders the user experience and bogs down your site’s performance.
So, trying to be bold and tenacious on the web can get a bit tricky. The bolder you get, the higher the risks. But there are definitely ways to make it happen.
Keep It Real
With modern design, it’s all about visuals. You’re better off saying as much as possible with a stunning, high-quality photo or image than a wall of text. The good news is that it’s easier than ever to optimize high-resolution images so they load quickly and effortlessly, even on older devices and browsers. Mobile is a huge concern, too, especially considering it’s the major browsing platform of today.
The website for Forklift and Palate — belonging to an exceptional restaurant in Pennsylvania — is one of the best examples of this concept. They’ve chosen to use a deep, yet solid, header to accent the top portion of their front page. Right below that is an image of one of their delicious meals. Look at that plate! Our mouths are watering already.
Parallax the Page
Parallax scrolling and design techniques are a love-it-or-hate-it deal. But even if you’re not fond of the practice, you have to admit when web designers use it effectively, it really spruces up the aesthetics and feel of a site.
Take a look at the Spotify front page, for instance. It’s not too flashy, but there are enough design elements and pops of color to keep the overall look fresh and engaging. Not to mention, the colors and theme of the page mesh well. As it turns out, it is possible to be tasteful with such a design technique.
Here are some more inspirational websites that use parallax scrolling.
3. Animate When Possible
Animation, when used properly, can be absolutely stunning on both desktop and mobile. For a solid example of the proper use of animation, head on over to the Symbolset website. Feast your eyes on the entire front page for sure, but make sure you watch that animated carousel right at the top. You see, most elements like this use sweeping visuals and flashy photos to stand out. The Symbolset team used minimal colors and fonts to achieve the same goal.
Animation is still unequivocally one of the best ways to make a bold statement on your website without destroying the bulk of your design. Yes, you do have to work to optimize everything so your site loads quickly and reliably. But once you get everything right, it’s perfect — and that’s exactly the kind of mojo you’re looking for.
4. Take It Back to Basics
If you only get one takeaway from reading this article, it should be this: Minimal and subtle are not synonymous with unattractive and bland. In design, less is often more. Keeping a minimal design means you’re staying clean, straightforward — and, more importantly, simple. Trust us when we say your customers and audience will appreciate an effortless, straightforward approach.
The Dropbox site is perhaps the best example of this concept. Newcomers who land on the site get a quick tour of the service, features and support they can expect. Returning users, meanwhile, immediately get a login prompt, along with the option to download the desktop or mobile app. It’s simple, clean and efficient — not to mention, it looks and performs well no matter what platform or device you’re browsing on.
5. Choose Your Spaces Wisely
Animation can definitely spruce up any site, but sometimes it’s better to crop the canvas and keep things a little less — well — resource-intensive. Take a look at the front page of the Squarespace hub. As you may know, the service makes it extremely easy for just about anyone to build a professional-looking website, even with little to no coding, design or website development experience.
What really stands out, however, isn’t necessarily the subtle animations and visuals they implemented throughout the page, but the location choice for each element. The large, top-seated carousel shows a small, animated tablet screen. Further down on the homepage, there’s a series of side and background images with brief pops of animation. The visuals are subtle and unobtrusive — almost to the point that you might overlook them — but still visible enough to keep the entire design modern and delightful.
Follow Squarespace’s lead, and remember to choose your spaces or elements wisely. You don’t always have to go with a sweeping animated frame to capture attention or focus.
Go Big or Go Home… Sometimes
Bold and tenacious is not always conducive to reliable and enjoyable, especially when it comes to modern web design and visual elements. If you plaster your website with high-resolution, large-sized images, your audience is going to run into some issues. More specifically, your site’s loading times will be slower than average, and since Google does penalize sites for performance issues, you’ll take some hits regarding your SEO, too.
Ultimately, the idea behind any good website design is to remain tasteful and engaging. If you follow the rules set forth here, you should do just fine. Don’t be afraid to experiment and step outside the box a little — just make sure you optimize the experience for your user base as much as possible while you’re at it.
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.