12 Web Design Best Practices & Guidelines for Usability in 2025 [+ Expert Tips]

I utilized to beryllium a contented writer for a mini web creation agency, and my first portion was astir website creation champion practices.

I retrieve my head going done it and telling me, “All good, but web creation isn’t conscionable astir making things look good.”

Back then, I was young and fresh, and honestly, that sounded wholly backward.

Made nary sense. For me, creation was each astir what I saw. I mean, it’s visual, right? So, of course, nan look should beryllium everything.

Well, immoderate web designer proceeding this would astir apt beryllium fresh to propulsion their hairsbreadth out.

Today, I get it. Front and center, web creation is astir functionality, personification experience, and ensuring each constituent connected nan page has a purpose.

So, let’s dive into nan apical web creation champion practices for 2024 to make your tract do nan activity — person visitors into paying clients. I’ll besides screen cardinal creation guidelines and requirements that you should support successful mind, too.

1. Select a typography that’s easy to publication and skim.

Typography refers to really letters and characters (type) are arranged and presented connected nan page. Since website typography affects not only really we publication but really we consciousness astir matter connected a web page, it’s important to prime carefully.

Ideally, you want a typeface that is:

• Easy to read
• Easy to skim
• Accessible to each users
• Legible crossed aggregate devices and surface sizes

You besides want it to lucifer nan look and consciousness of your brand.

For example, nan luxury manner marque Burberry refreshed its logo for nan first clip successful 20 years successful 2018. It replaced nan aged serif typeface pinch a bold, all-caps, sans serif typeface and dropped nan knight emblem.

The consequence was a simpler and much modern-looking logo that’s easier to publication connected immoderate surface — and that reflects changes successful nan institution to go much transparent and entreaty to a younger generation.

Image Source

But then, successful February 2023, imaginative head Daniel Lee introduced Burberry's caller logo again. This time, we’re talking astir thing wholly different — a modern bluish creation that nods to its British heritage.

Image Source

Why did this alteration happen?

Fashion brands often refresh their logos erstwhile a caller imaginative head steps in, reflecting their vision. When Lee joined successful October 2022, he aimed to grant Burberry’s past while embracing nan future. He called nan logo “a modern return connected British luxury” and “a caller section for nan brand.”

While I personally liked nan first type a spot more, nan 2nd logo and its typography person a communicative and meaning.

2. Be mindful of auto-translation.

Test really auto-translation will impact your site’s content.

Many users will trust connected translator devices to navigate your site, truthful guarantee your creation doesn't create disorder aliases miscommunication. Pay attraction to layout, spacing, and typography — translated matter must fresh good and stay legible.

Let’s bring it to life.

I translated HubSpot’s tract from English to German. The result? A polished translated tract pinch nary other spaces, weird letters, aliases structural issues. Everything looks neat, conscionable for illustration nan original:

“At Wrike, we usage TT Norms Pro for its clean, modern artistic and readability crossed devices — accessibility is essential. It’s neutral, builds trust, and has multilingual characteristic sets, truthful materials look polished moreover aft translation,” shares Elisa Daniela Montanari, caput of integrated maturation and website strategy astatine Wrike.

According to Montanari, a awesome font should beryllium adaptable to different platforms, pages, and audiences.

“With TT Norm Pro‘s cleanable lines, it doesn’t compete against our visuals and messaging but complements it,” Montanari says.

3. Choose a colour strategy that suits your brand.

Like typography, colour tin impact not only really we understand and interact pinch contented but really we consciousness astir it. Your colour strategy should, therefore, cheque disconnected nan aforesaid boxes arsenic your website typography. It should:

• Reinforce your marque identity.
• Make your tract easy to publication and navigate.
• Evoke emotion.
• Look good.

Buzzfeed, for example, uses nan superior colors yellowish and reddish to drawback users' attraction and get them excited astir nan content. It reserves nan usage of nan superior colour bluish — which is associated pinch spot — exclusively for links and CTA buttons. Both emotions are perfect to evoke for a media site.

Image Source

I precocious came crossed a great piece by Greg Merrilees, CEO and Founder of Studio1 Design, highlighting nan value of uncovering nan correct balance.

He suggests considering colour harmonies — erstwhile picking a colour palette, commencement pinch your ascendant colour and past furniture it. Darker colors drawback attraction first and transportation much ocular weight, truthful you’ll want to move backmost to lighter colors from there.

Image Source

4. Use achromatic abstraction to break up matter and different elements.

Whitespace provides users pinch ocular breaks arsenic they process a website’s creation aliases content, which is aesthetically pleasing but besides offers different benefits.

By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what is important.

That intends you tin usage whitespace to debar causing accusation overload aliases study paralysis — and to stress important elements connected nan page.

This mightiness thief seduce users to return a circumstantial action, for illustration motion up for a newsletter, shop your latest collection, and more.

For example, Eb & travel Yoga Studio uses whitespace to lead users toward a circumstantial action: to motion up for 3 weeks of classes. Notice that whitespace doesn’t mean nan absence of colour aliases imagery.

Instead, it intends that each constituent connected nan page is positioned strategically, pinch tons of abstraction successful between, to debar overwhelming aliases confusing visitors.

Image Source

One of nan champion insights I’ve travel crossed connected this taxable comes from Sean Lee-Amies, CEO and laminitis astatine Square One Digital, who explained it perfectly.

“Take Google for example. They’re massive. There’s nary extremity of things they could talk about, and yet nan only point connected their homepage is simply a logo, a hunt bar, and 2 buttons,” Lee-Amies says.

“Whitespace is ever nan first casualty of a web creation created by group who haven’t yet learned to usage a little is much attack to contented and communication.”

5. Use texture to adhd characteristic and depth.

Resembling a three-dimensional, tactile surface, web textures purpose to replicate nan beingness sensation of touch pinch different sensation — sight.

They’re a awesome creation replacement to coagulated colour backgrounds, peculiarly if you want to adhd characteristic and extent to your site.

Take a look astatine nan texture connected nan homepage for nan Santa Barbara-based edifice Mony’s Tacos below.

It looks for illustration chalk drawn connected a blackboard, doesn’t it?

I don’t cognize astir you, but I tin almost consciousness nan chalk connected my fingers conscionable by looking astatine it. It‘s nan cleanable look for a edifice that intends to beryllium California’s preferred Funk Zone prime for Mexican delights.

Image Source

6. Add images to prosecute and pass readers.

Striking a equilibrium betwixt matter and images is basal successful website design. Incorporating visuals tin make your contented much informative, engaging, and memorable. It’s easier for immoderate group to study and process accusation visually.

Here‘s a unsocial illustration of breaking up matter pinch images from a cosmetic company’s website. This shows really endless nan possibilities of incorporating imagery into your website creation are.

Image Source

Images should beryllium portion of your full website, not conscionable nan homepage, but must beryllium utilized cautiously and successful balance.

The creation squad astatine Dgtl Infra, for example, creates blog posts pinch images each 200-300 words and sees 40% much shares than text-heavy articles. They purpose for a 60/40 text-to-image ratio.

This equilibrium keeps readers engaged without sacrificing substance. The squad uses a operation of infographics, merchandise shots, and applicable banal images.

Every image should service a purpose. Randomly inserted visuals tin do much harm than good. Each should either exemplify a constituent aliases supply a ocular break astatine a earthy region successful content.

7. Simplify your navigation.

Navigation is 1 of nan astir important creation elements connected a website. It impacts whether visitors get connected your homepage and browse aliases click nan “Back” button. That’s why it’s important to support it arsenic elemental arsenic possible.

Many websites opt for a horizontal navigation bar. This navigation style lists nan awesome pages broadside by broadside and is placed successful nan website header.

Take nan navigation barroom connected Blavity arsenic an example. The main navigation categories (Entertainment, Culture, Small Business, Blavity U, Blavity Brands, Digital Cover) are intelligibly branded and easy to notice.

Image Source

The usage of a dropdown paper for nan “Blavity” class adds a furniture of statement without overwhelming nan personification pinch excessively galore options astatine once. This is simply a subtle ocular cue that helps to guideline nan user's navigation.

The hunt barroom recovered its spot successful nan apical correct corner, providing a convenient measurement for users to find circumstantial articles aliases topics.

8. Make your CTAs guidelines out.

CTAs are elements connected a web page, advertisement, aliases different portion of contented that encourages nan assemblage to do something. The telephone to action could beryllium to motion up, subscribe, commencement a free trial, aliases study more, among galore others.

You want your CTAs to popular successful your website design. To make that happen, see really you’re utilizing colour arsenic good arsenic different elements for illustration inheritance color, surrounding images, and surrounding text.

Square provides an fantabulous call-to-action example. Using a soft video background, Square shows really unsocial and future-oriented its merchandise is. Against this melodramatic backdrop, nan achromatic “Get Started” CTA awaits your click, arsenic good arsenic “Contact Sales” successful catchy bluish color.

Image Source

Damon Culbert from Add People besides suggests animating CTAs but successful balance.

He says that a subtly animated fastener that wiggles aliases pulses aft a hold tin seizure attraction without being intrusive. Triggering specified animations only aft a personification has spent clip connected nan page ensures nan relationship feels timely and relevant.

This technique, akin to well-timed pop-ups, respects nan user's browsing travel while efficaciously drafting their attraction toward conversion.

While nan creation of a fastener is important, we can't place its content: nan matter it contains. Yevhenii Tymoshenko, CMO astatine Skylum, touched connected this during our conversation, saying:

“We precocious redesigned nan layout of our website by placing CTAs astatine nan apical and nan bottommost of nan page. We besides reworded them to beryllium much actionable. Now they opportunity ‘View Plans’ and ‘Explore App,’ speaking to nan customer straight without utilizing pushy connection for illustration ‘Buy Now.’ As a result, our conversion rates accrued by 12%,” Tymoshenko says.

Image Source

9. Optimize for mobile.

We’ve already discussed really important it is for your website to beryllium responsive. That mightiness mean altering aliases removing immoderate elements that would clutter smaller surface sizes aliases negatively effect load time.

For an illustration of 1 of nan best website designs, comparison Etsy’s homepage connected desktop vs mobile. On nan desktop, you’ll spot a navbar pinch categories. Hovering complete each class will uncover a dropdown menu.

Image Source

On mobile, this collapses down a hamburger button, which improves nan quality and capacity of nan mobile site. You'll besides announcement that nan images are larger — cleanable for tapping pinch your digit connected a mobile screen.

Image Source

Claire Escobedo from Online Optimism says that 1 of nan main mistakes she sees successful mobile creation is simply a deficiency of accessible features. This includes things that break WCAG standards and features for illustration hover effects that effect a site's functionality.

She continues, "You can't hover connected a phone! You person to relationship for mobile interactions erstwhile designing for immoderate tract accessed connected a mobile device, which these days is beautiful overmuch each sites.”

According to Escobedo, conscionable because your tract navigation functions good connected desktop doesn’t mean it will transportation to mobile.

“A beautiful mega paper is bully for a laptop user, but really is simply a mobile personification going to entree those aforesaid 4 tiers of links?" Escobedo notes.

10. Limit nan options presented to users.

According to Hick’s Law, expanding nan number and complexity of choices will summation nan clip it takes for a personification to make a decision. This is bad news successful website design.

If a website visitant is presented pinch excessively galore options, they mightiness get disappointment and bounce — aliases they mightiness prime an action you don’t want, for illustration abandoning their cart. That’s why it’s important to limit nan number of options presented to a user.

For example, erstwhile a visitant lands connected Shawn Michelle's Ice Cream homepage, they person 3 clear options: study astir nan company, research nan flavors, aliases cheque retired nan catering menu.

It‘s clean, pinch each nan cardinal info easy to find. Does a tract for illustration this request thing more? Absolutely not. Everything’s correct there, making it easy for customers to get what they need, reducing nan chance they’ll time off frustrated.

This is simply a cleanable illustration of Hick’s Law successful UX design.

Image Source

Pro tip: Don't person nan clip to travel nan rules? You tin ever download a pre-built website template that will supply a sound instauration for your site.

11. Prioritize functionality complete aesthetics.

“Design should support contented and functionality — not nan different measurement around. The immense mostly of users are going to your tract for nan accusation that’s there, not for nan measurement it looks.

As a designer, I cognize really awesome it is for a website to look nice, but it tin ne'er travel astatine nan disbursal of making judge that your website is functional and understandable for each users.” says Escobedo.

Concentrate connected functionality alternatively of conscionable aesthetics. Create solutions that are easy to use, dependable, and practical, putting nan needs of users beforehand and center.

12. Choose nan contented your users understand.

Website contented should beryllium straightforward and doesn’t require each your brainpower to get it and present worth astatine nan aforesaid time. Since that’s not an easy task astatine all, I deed up Damon Culbert again for advice:

“In bid for group to walk clip and power doing something, for illustration beryllium and publication done each nan features of a caller merchandise aliases service, you person to create a compulsion wrong them to do so,” Culbert says.

According to Culbert, beardown visuals let group to put clip and power into learning much astir thing you want to sell.

“B2B services are a awesome illustration of this; they’re often very complex, and non-experts don’t understand them. It mightiness return a non-expert an hr aliases much of reference conscionable to get a basal understanding,” Culbert says. “Or they could look astatine a ocular that gets them location successful 5 seconds aliases less.”

A bully illustration is BuzzSumo’s homepage. It delivers a clear, concise connection pinch visuals for illustration mag excerpts and societal media screenshots, making it evident what they do — moreover for first-time visitors.

Image Source

My last point: People don’t walk money connected things they can’t understand if they adhd worth aliases not. This is why commercially successful companies put successful trading and income intelligence tools, mapping retired their customer’s purchaser journeys and hiccups on nan way.

Now, you could walk years studying nan ins and outs of web design.

But for nan liking of giving you a jumping-off point, we've assembled a database of nan basal guidelines and champion practices you tin use to your adjacent website redesign aliases website launch.

1. Simplicity

While nan quality of your website is surely important, astir group aren't coming to your tract to measure really slick nan creation is. They want to complete immoderate action aliases find immoderate circumstantial portion of information.

Therefore, unnecessary creation elements (i.e., those that service nary functional purpose) will only overwhelm and make it much difficult for visitors to execute what they're trying to accomplish.

From a usability and UX perspective, simplicity is your champion friend. If you person each nan basal page elements, it’s difficult to get too simple. You tin employment this rule successful a assortment of different forms, specified as:

• Colors. Basically, don't usage a lot. The Handbook of Computer-Human Interaction recommends utilizing a maximum of 5 (plus aliases minus two) different colors successful your design.
• Typefaces. The typefaces you take should beryllium highly legible, truthful thing excessively artsy and very minimal book fonts, if any. Again, support nan matter colour minimal and ever guarantee it contrasts pinch nan inheritance color. A communal recommendation is to usage a maximum of 3 different typefaces successful a maximum of 3 different sizes.
• Graphics. Only usage graphics if they thief a personification complete a task aliases execute a circumstantial usability (don't conscionable adhd graphics willy-nilly).

Here's a awesome illustration of a elemental but effective homepage design from HERoines Inc.

Image Source

2. Visual Hierarchy

Closely tied to nan rule of simplicity, ocular level intends arranging and organizing website elements truthful that visitors people gravitate toward nan astir important elements first.

The extremity is to lead visitors to complete a desired action, but successful a measurement that feels earthy and enjoyable. By adjusting nan position, color, aliases size of definite elements, you tin building your tract successful specified a measurement that viewers will beryllium drawn to those elements first.

The Semrush website is simply a awesome illustration of really ocular level should look. The salient placement of nan “Start now” button, coupled pinch clear typography and ample achromatic space, ensures that it stands out.

Secondary elements, specified arsenic nan input section and headline, support nan superior CTA and supply context. This well-executed ocular level makes nan website easy to navigate and understand its purpose.

Image Source

3. Navigability

Planning retired intuitive navigation helps visitors find what they're looking for.

Ideally, a visitant should onshore connected your tract and not person to deliberation extensively astir wherever to click next. Moving from constituent A to constituent B should beryllium arsenic frictionless arsenic possible.

Here are a fewer tips for optimizing your site's navigation:

• Keep nan building of your superior navigation elemental (and adjacent nan apical of your page).
• Include navigation successful nan footer of your site.
• Consider utilizing breadcrumbs connected each page (except your homepage), truthful users retrieve their navigation trail.
• Include a hunt barroom adjacent nan apical of your tract truthful visitors tin hunt by keywords.
• Don't connection excessively galore navigation options per page.
• Include links wrong your page copy, and make it clear wherever those links go.
• Don't make users excavation excessively deep. Try making a basal wireframe map of each your tract pages arranged for illustration a pyramid: Your homepage is astatine nan top, and each linked page from nan erstwhile forms nan adjacent layer. In astir cases, it’s champion to support your representation nary much than 3 levels deep.

One much pointer: Once you‘ve settled connected what your site’s main (top) navigation will be, support it consistent. The labels and location of your navigation should stay nan aforesaid connected each page.

This leads america nicely to our adjacent rule below.

4. Consistency

In summation to keeping your navigation consistent, nan wide look and consciousness of your tract should beryllium akin crossed each of your site's pages.

Backgrounds, colour schemes, typefaces, and moreover nan reside of your penning are each areas wherever consistency has a affirmative effect connected usability and UX.

That‘s not to opportunity each page should travel nan aforesaid layout. Instead, create different layouts for circumstantial types of pages (e.g., landing pages, informational pages, etc.).

By utilizing those layouts consistently, you’ll make it easier for visitors to understand what type of accusation they're apt to find connected a fixed page.

In nan illustration below, you tin spot that Airbnb uses nan aforesaid layout for each of its “Help” pages, a communal practice. Imagine what it would beryllium for illustration from a visitor's position if each “Help” page had its own, unsocial layout.

There would astir apt beryllium a batch of enarthrosis shrugging.

Image Source

5. Responsivity

60% of page world views are from mobile devices for illustration smartphones and tablets, according to Statista.

To supply a genuinely awesome personification experience, your tract has to beryllium compatible pinch nan galore different devices that your visitors are using. In nan tech world, this is known arsenic responsive design.

Responsive creation intends investing successful a highly elastic website structure. On a responsive site, contented is automatically resized and reshuffled to fresh nan dimensions of whichever instrumentality a visitant happens to beryllium using.

This tin beryllium accomplished pinch mobile-friendly HTML templates aliases by creating a typical mobile site.

Escobedo points retired that 1 of nan biggest issues she often encounters is pages that are measurement excessively long.

Avoid endless mobile scrolling by making contented collapsible aliases including links to different pages alternatively of repeating contented connected nan page.

In addition, make judge your outer links unfastened successful caller tabs and that you aren’t utilizing matter that’s excessively mini to publication connected mobile.

6. Accessibility

The extremity of web accessibility is to make a website that anyone tin use, including group pinch disabilities aliases limitations that impact their browsing experience. As a website designer, it’s your occupation to deliberation of these users successful your UX plan.

Like responsiveness, accessibility applies to your full site: structure, page format, visuals, and some written and ocular content.

The Web Content Accessibility Guidelines (WCAG), developed by nan Web Accessibility Initiative and nan World Wide Web Consortium, group nan guidelines for web accessibility. In a wide sense, these guidelines authorities that websites must be:

• Perceivable. Visitors are alert of nan contented connected your site.
• Operable. The functionality of your website should beryllium imaginable successful different ways.
• Understandable. All contented and alerts tin beryllium easy understood.
• Robust. Your website is usable crossed different assistive technologies, devices, and browsers.

“At Online Optimism, we adhere to a minimum of WCAG Level A for each website builds, pinch astir of our sites adhering to Level AA and immoderate to AAA,” says Escobedo.

Escobedo shares a fewer easy accessibility tips, including:

• Adding alt matter for each non-decorative images.
• Using descriptive nexus text.
• Using ocular cues for illustration underlines for links.
• Enabling attraction states.
• Not hiding accusation aliases functionality successful hover states aliases successful images without alt matter aliases descriptions.
• Using shape section labels.

For a deeper dive into this topic, spot our guide to web accessibility.

7. Conventionality

A large situation successful web creation is balancing originality pinch your expectations. Most of america are master net users, and location are circumstantial conventions we’ve grown accustomed to complete time. Such conventions include:

• Placing nan main navigation astatine nan apical (or near side) of a page.
• Placing a logo astatine nan apical near (or center) of a page.
• Making nan logo clickable, truthful it ever brings a visitant backmost to nan homepage.
• Having links and buttons that alteration color/appearance erstwhile you hover complete them.
• Using a shopping cart icon connected an ecommerce site. The icon besides has a number badge signifying nan number of items successful nan cart.
• Ensuring image sliders person buttons users tin click to manually rotate slides.

While immoderate mightiness opt to propulsion these retired nan model for nan liking of uniqueness, this is simply a mistake. There’s still plentifulness of room for productivity wrong nan constraints of web conventionality.

Let’s concisely see different section of design: architecture. Building codes guarantee group tin safely usage spaces. Architects don’t disregard these rules because they guarantee information and comfort. No matter really awesome a building looks, if nan stairs are uneven aliases you can’t exit during a fire, you'd alternatively enactment outside.

In nan aforesaid way, you tin trade a memorable acquisition while gathering personification expectations. If you break what users anticipate, they whitethorn consciousness uncomfortable aliases moreover disappointment pinch your site.

8. Credibility

Sticking to web conventions lends your tract credibility. In different words, it increases nan level of spot your tract conveys. And if you're striving to build a tract that provides nan champion personification acquisition possible, credibility goes a agelong way.

One of nan champion methods to amended your credibility is to beryllium clear and honorable astir nan merchandise aliases work you‘re selling. Don’t make visitors excavation done dozens of pages to find what it is you do. Be up-front connected your homepage, and dedicate immoderate existent property to explaining nan worth down what you do.

Another credibility tip: Have a pricing page linked connected nan homepage. Rather than unit group to interaction you to study much astir pricing, database your prices intelligibly connected your site. This makes your business look much trustworthy and legitimate.

Here's an illustration of an effective pricing page from nan Moz website:

Image Source

9. User-Centricity

At nan extremity of nan day, usability and personification acquisition hinge connected nan preferences of nan end-users. After all, if you're not designing for them, who are you designing for?

So, while nan principles elaborate successful this database are a awesome starting point, nan last cardinal to improving nan creation of your tract is to behaviour personification testing, stitchery feedback, and instrumentality changes based connected what you've learned.

And don’t fuss testing usability by yourself. You’ve already invested a batch of clip into your design, which brings your ain biases into nan equation. Get testers who person ne'er seen your tract before, nan aforesaid arsenic immoderate first-time visitor.

Here are a fewer personification testing devices to get you started:

• Website Grader. Our free instrumentality evaluates your website based connected respective factors: mobile, design, performance, SEO, and security. It past offers tailored suggestions for improvement. You tin learn much astir Website Grader successful our dedicated blog post.
• Crazy Egg. Track aggregate domains nether 1 relationship and uncover insights astir your site's capacity utilizing 4 different intelligence devices -- heat map, scroll map, overlay, and confetti.
• Loop11. Use this instrumentality to easy create usability tests -- moreover if you don't person immoderate HTML experience.
• The User Is Drunk. Pay Richard Littauer to get drunk and reappraisal your site. Don't judge me? We tried it.

For moreover much adjuvant options, spot our list of nan champion personification testing tools.

Now, we understand nan principles and champion practices that should guideline you passim nan creation process. In nan adjacent section, let's tally down nan basal page elements that you should powerfully see including successful your creation plan.

1. Header and Footer

The header and footer are a staple of conscionable astir each modern website. Try to see them connected astir of your pages, from your homepage, to your blog posts, and moreover your “No results found” page.

Your header should incorporate your branding successful nan shape of a logo and statement name, paper navigation, and possibly a CTA, and/or a hunt barroom if well-spaced and minimal.

On nan different end, your footer is wherever galore users will instinctively scroll for basal information. In your footer, spot interaction information, a signup form, links to your communal pages, ineligible and privateness policies, links to translated versions of your site, and societal media links.

2. Menu Navigation

Whether it’s a database of links crossed nan header aliases a tidy and compact hamburger button successful nan corner, each website needs a guideline for navigation positioned astatine nan apical of astatine slightest your homepage and different important pages. A bully paper limits nan number of clicks to scope immoderate portion of your website to conscionable a few.

To trim clutter, you mightiness see making immoderate aliases each paper options a dropdown paper pinch links wrong it, arsenic tin beryllium seen connected HubSpot's homepage.

3. Search Bar

In summation to paper navigation, powerfully see placing a hunt barroom astatine nan apical of your pages, truthful users tin browse your tract for contented by keyword.

If incorporating this functionality, make judge your results are relevant, forgiving of typos, and tin of approximate keyword matching.

Most of america usage a high-quality hunt motor each day, beryllium it Google, Amazon, YouTube, aliases elsewhere. These each group nan modular for your ain tract search.

4. Branding

Remember nan conventions we’ve discussed?

One that you spot practically everyplace is simply a logo successful nan apical near corner. On first landing, galore visitors’ eyes will instinctively displacement to this region to cheque they’re successful nan correct place. Don’t time off them hanging.

To reenforce this notion, incorporated your institution branding into each constituent you add, portion of contented you post, and colour strategy you create.

That’s why I urge establishing marque guidelines if you haven’t already. Check retired our style guide for a reference.

Pro tip: Create a unsocial online beingness pinch nan HubSpot Brand Kit Generator, which allows you to easy customize logos, icons, and colour palettes by entering your business name, industry, and slogan.

5. Color Palette

Color prime plays a awesome domiciled successful your site’s usability and UX arsenic well. This determination tends to beryllium much subjective than different requirements successful this list.

But, for illustration everything other we’ve discussed, effort to simplify — limit your colour action to 3-4 salient colors astatine most.

Starting a colour palette from scratch tin beryllium amazingly difficult nan first time. We look to intuitively prime up connected which colors activity good together and which don’t, but we stumble erstwhile trying to prime from nan infinite combinations available.

The solution? Try a colour palette that’s been shown to activity connected different websites. Take power from your favourite sites, and spot our database of our favourite website colour schemes to get started.

P.S. There are galore free website creation tools that tin propose colour palettes and do a batch of nan dense lifting for you, truthful beryllium judge to cheque it retired for inspo if you’re emotion stuck.

6. Headings

Headings are cardinal to establishing nan ocular level we discussed earlier, particularly connected text-heavy pages.

As users skim your pages, you need, a clear and to-the-point heading to alert readers to extremity scrolling aft uncovering what they want.

Use only arsenic galore headings arsenic location are chopped sections of your page, arsenic excessively overmuch blown-up and bolded matter will dampen this effect.

7. Clear Labels

Whenever a personification takes an action connected your website, it must beryllium evident precisely what they’re doing and/or wherever they’re going. All buttons should person clear matter aliases an icon to precisely and concisely awesome their purpose.

The aforesaid goes for in-text links and widgets (simple interactive elements, for illustration dropdowns and matter forms).

For example, a fastener linking to a pricing page should conscionable publication “Pricing” — thing beyond that (e.g., “See our prices”, “Check retired nan pricing page for a deal”) is superfluous. A hunt bar/button only needs a hunt solid icon (🔍) and possibly besides nan connection “Search” to denote its purpose.

User testing tin beryllium a awesome thief here. While you yourself cognize what each of your interactive page elements do, nan aforesaid can’t beryllium said for a caller user.

Testing will springiness valuable penetration into what users deliberation your labels mean beyond your ain perspective.

8. Visuals and Media

When incorporating fixed images, gifs, videos, and different media into your pages, retrieve to beryllium accordant and intentional successful your choices.

These elements will tie attraction complete astir different matter and will apt enactment successful users’ minds, truthful take wisely.

Here’s conscionable 1 illustration of effective media connected a homepage. Notice really each image complements nan page artistic and supports nan connection of personalized fittingness training pinch results.

Image Source

Also, each images and videos should beryllium optimized for hunt engines and see descriptive alt matter for accessibility.

9. Calls to Action (CTAs)

Having a pleasing website is great, but really do you cognize whether your visitors are really doing what you want? Are they engaging pinch your content? This is wherever CTAs travel into play.

A CTA is immoderate page constituent that prompts personification action. The action could beryllium adding a merchandise to a card, downloading a contented offer, aliases signing up for an email list.

Make your CTA elements salient successful nan ocular hierarchy, but not intrusive aliases distracting for illustration galore click-through ads thin to be.

If you request ideas for sleek CTAs that thrust much conversions, spot our CTA examples list.

10. Whitespace

As I mentioned above, sometimes it’s astir nan elements you don’t include. After reference these guidelines and requirements, you whitethorn consciousness tempted to worldly your pages pinch each nan bits and bobs needed for a flawless UX.

Don’t hide that your viewers request room to digest each this caller info, truthful springiness your elements room to breathe.

But, really overmuch whitespace should you have? That’s different individual call, and varies from tract to site. So, personification testing is useful present arsenic well.

What are group focusing on? Do they consciousness overwhelmed pinch nan density of content? Once again, it each ties backmost to our first guideline, simplicity.

Focus connected Design that Puts Users First

If you adhd up each of my proposal here, there’s 1 main takeaway to support successful mind — nan visitant is number one, and you are number two.

I cognize this sounds a spot harsh, for illustration you’re putting your ain desires and visions aside. But erstwhile creating a site, you simply request to ideate that you’re dealing pinch a first-time visitor.

Someone who’s dropped successful for illustration a parachutist and needs to quickly find what they’re looking for, aliases they’ll conscionable time off your “destination” and support “flying.”

Once you get this mindset, designing nan full web layout will beryllium easy.

If we spell backmost to nan beginning, you’ll retrieve that I erstwhile thought it was each astir aesthetics. Today, I’ll show you that’s partially true. Yes, we still want it to look good, but if it’s not functional, beauty intends nothing.

Simplicity. Smooth experience. No labyrinths. No confusing routes. That’s what nan visitant needs. And that’s what your website must provide.

Editor's note: This station was primitively published successful May 2021 and has been updated for comprehensiveness.