The formula: Great web designs that generates results

As you start your Web Design journey, you notice that the most successful websites focus a lot less on aesthetics, and more on navigation, user experience and results.

As we improve as web designers, our focus tends to lean more on the aesthetic side of things. And important elements such as Accessibility, UX or Conversion, take a back seat. Which disables our opportunities to bring the clients a hub for conversion, and it becomes just a reminder of missed investment opportunities.

Heeey! Name’s Codedgar, we’re gonna talk today about what Great Web Design should aim for: Aesthetics, Accessibility, UX and Conversion. As a whole, instead of every bit itself separated and joined with glue.

Why is this important? Well, web design has a small nuance, and it’s that as much as we’d like to focus on aesthetics, our priority should be the end users. All the visitors are entering the site expecting something, and is our task to deliver it.

Introduction: The bias of “Good Web Design”

When we speak about Good Web Design, few things might come to mind: Contrast, Color, Typography, and Look and feel. And these are all correct! Good Web Design respects the limitations set by patterns, the concepts on what makes it aesthetic to see.

This is the reason that most companies stop here, because it looks good. For the client, and for the end users, everything is set in place, nothing stands out as incomplete, and it integrates gracefully into the design of the brand.

But here’s where the hidden challenges remains, the UX, and conversion of the web design in place. A bad integration of these, confuses your users, making navigation and taking decisions harder. And most importantly, it makes the events that the company could count as conversions, less common.

This is an issue that has become more prominent with the usage of platforms such as Webflow, Framer, and Wix Studio, and their availability of scrolling animations, section interactions and more. Hypnotized by the effects we’re seeing, we forget if this is the best approach for our users.

But there’s a light behind all of this. The power of us as web designers, to control the flow of the user, the information that they see, and the points in which we call for their interaction.

Let’s dive into what’s the best approach for our users, and how a deeper look into design choices might make the difference between a high converting site, and just a good looking one.

Main things to consider

We already know what’s aesthetic-based design instead of conversion-focused design, and how it affect users. But I want us to take a moment, and dive deeper into practices that we should do the websites that we design. Let’s dive in.

Keep animations mindful

As someone who loves to have animations in his websites, I can understand the urge to animate everything. But now that I have moved further in my career, I can say with confidently that more animations is not always better.

To keep animations tamed, and making sure that you’re having animations that add value to the experience, I’d recommend 2 main things:

1. That your animations are subtle, guide attention where it’s most needed, and don’t change drastically background colors or element positions.
2. That you take a look into Apple’s Motion Guidelines it’s a short read, and it’s applicable to most animations you might be thinking on integrating.

Provide clear navigation

Most web designers will try to add their spin on navbars and navigation. Whether full-screen navigation, or navbars on the bottom of the screen, make sure you’re communicating 2 things clearly to your user always: We’re they are, How to get back to the start.

This may seem simple, but hiding the title of the screen, and all the links of the website behind a hidden menu, can make users forget where they’re going. Complicating navigation on the website.

Provide just the right amount of incentive

Respecting client control is one of the most important aspects of conversion-focused design, just as much as providing the right amount of incentive for clients to direct themselves into the action that you want them to take.

For example, if you want them to take action, you might feel compelled to make the button shake, illuminate once in a while, and even change colors. However, using all 3 can overwhelm users, as it provides a level of feedback that might make them feel like you’re desperate.

Understand the focus of the website

All websites are created with an intent in mind. These intents become the objective that the website needs to accomplish, and to be able to get to these objectives, a clear question needs to arise.

How do further support this objective?

Further supporting this objective means more than just the design that you’re crafting. Those small integrations that will help boost conversions, sign ups, and more.

Let’s take an example, one of my clients, Hostal Juarez needed to maximize the amount of bookings they got from the website. And after careful thought, I added a “Book Now” button, that follows you all across the page.

This might seem simple, but the idea of someone reading the content and feeling compelled to book right away, was something that sparked in my head, and by including this simple button, the client received more bookings than ever before from the website, and got more reservations on the website than other platforms.

This is the power of those hidden gems, simple things that you might add to the website, and will improve greatly how conversions are handled.

Function over Form: How Focusing on Conversion Can Lead to a great Result-Oriented Website

We already talked about a website as a tool for business, and how important it is to help its business objectives to become a reality. Now, I want to direct our focus on how to achieve this, what are some clear examples, and actionable items we can introduce in our designs.

Understanding user flow and navigation

Understanding user flow and navigation is key for an effective website design. As you’re designing the views, and sections of the page, ask yourself the following questions:

• When a user is visiting this page, what questions might come up, are we answering them all?
• Are the content and actions available effective for users to continue their journey forward?

By constantly asking yourselves this questions, you’ll find yourself answering them through design, and improving the flow of the user throught the site. If the journey gets interrupted at any moment, is just a cause of the website not providing the answer the user came looking for.

The pillars of great result-oriented web design

Creating a great web design requires a lot of different knowledge about fundamentals of design that I won’t directly cover in this article, as this has already been covered by other blogs Blush Blog.

The idea that we’ll be covering here, it’s what makes great result-oriented web design. The nuances inside, and how to further improve.

Why Strategic CTA Placement Matters

Having CTAs is already important, and having them strategically planned is the key to improve conversions and acquisitions of the website. The best way you can plan these, is after a good piece of copy, before closing your content, or after you have provided the necessary information that might incentivise users to take action. Of course if possible, A/B testing will give you better results to further adjust the placement.

Simplify navigation

We already touched up a little bit on this early on the article, but it’s something really important. Keeping navigation easy, consistent and ensuring you have a clear structure on URLs, and pages, will set your website apart.

Best way to make sure your navigation is clear, is having someone unrelated to your company, project or team try the website for you, without telling them anything first. And then, ask them direct questions of navigation, “If you wanted to find X product, what would you do?” and observe what steps they take without interrupting.

If they go to an undesired page, or have to look search to be able to find what they’re looking for, it’s generally an issue with the way the navigation is set up.

Keep an eye on loading times

I cannot stress enough how it’s not just the main loading time, but if you have your page processing huge stuff every time, it gets repetitive soon.

And it discourages users from staying on the website, and keep waiting every time they take an action. Things to keep an eye on are images, JavaScript, and CSS. If you’d like me to create an article on website optimization, just follow me at @codedgar_dev

Importance of Mobile Optimization

Mobile is now more than 50% of all web traffic , so make sure you’re doing an extra step not only to verify usability, but also optimize sections as much as possible for the space available in mobile and for interactions on these devices. You might be surprised on how many opportunities arise once you see mobile as its own platform instead of a mini version of a computer

Strike a balance between form and function

Function is always over form. The simplest interaction even stripped down of design wins over a complicated interaction with amazing design. So understanding how to make good interactions and then polish them with great design becomes a step necessary to ensure people can have a pleasant experience while using the site.

Going Beyond: Accessibility

Accessibility sadly is one of the elements that keeps being ignored through web design altogether. It’s not just ensuring that the font sizes are legible, or that the background color has sufficient contrast.

It’s making sure users can navigate using only a keyboard, that the media queries are set in place to reduce motion through prefers-reduced-motion. All of these slowly adds up to a more consistent experience for users, and makes sure that everybody can enjoy the end result according to their needs.

Conclusion

Ah, congratulations on finishing the article, and I hope this article has inspired you to design with results in mind. By applying the ideas that we have discussed on this article, your web design can be elevated to be not only aesthetically pleasing, but also provides a great experience to users, and improve the business and leads that they receive on the website.

Keep in mind, that all of the things touched on in this article are things you need to abstract yourself and understand while in the process of creating a page. Making sure that you understand the underlying concepts on how take these decisions, think as a client, and consistently improve their experience, it’s something that takes time. So always make sure you document the knowledge you get from applying these, and make sure to pair it with more UX reading.

Until the next one! Cheers.