Jan 20, 2021
|
Design

Build Your Website for the Future of the Web, Not the Past

Sell your services in a professionally designed website
More about Web Design

First impressions last.

You might not be fully aware of it, but your website plays a major role in your marketing and sales funnel. Having a modern, professional website means that the first impression you're causing will have, later on, a tangible impact on your business.

This article is for you if:

  • You've built your website by yourself and are thinking about optimizing it.
  • You already have clients coming to your website and reaching out.
  • You don't have a website and are thinking about creating one.

The role a website plays in your business

Let's say you've started selling your services online and decided to create a website from a WordPress or Squarespace template. That's fine. In the beginning, it's reasonable to save money to invest in other areas of your business.

But one or two years have gone by. Those who have become your clients respect you and recognize how good you actually are at doing what you do. The website built from a template, though, doesn't fully communicate that: you have happy clients, but doubtful prospects.

If your website is currently a gateway from which clients come to your business, start thinking about it as an investment.
david talas website displayed on mobile version
David Talas website sells his online course

How to create a professional website

These are some of the ways you can invest your money to create a professional website:

Hire an agency

Definitely the most expensive option. Agencies are great because they have a full team devoted to understanding all the nuances, pain points and goals of medium and big size companies. That is not to say that agencies are flawless: in 2019, a website redesign project led car rental giant Hertz to proceed with a $32 million lawsuit against Accenture.

Hire a developer

Developers are those who know how to code. Some of them are back-end devs and others are front-end devs, responsible for how things work and how things look like, respectively. In an agency, the dev is the one who makes the designer's vision (or prototype) come to life.

Hiring a UX/UI designer and a dev makes up the dream team. But most devs work solo and they usually use platforms like WordPress to build you a customizable website.

Hire a web designer

These are primarily designers focused on building for the web. To use me as an example, I'm a User Experience (UX) and User Interface (UI) designer and, although I don't know how to code, I use tools like Webflow to develop a website.

I decided to focus on "company of one" businesses (consultants, lawyers, architects...) because that's the niche I can generate more value for.

One of the cons of hiring a web designer is that they usually won't be able to implement complex functionalities in your website (in my case, I'd probably partner up with a developer). One of the pros is that the website will be created from a solid, strategic foundation that aims at helping users find what they're looking for - and you achieve your business goals.

Here's how a professional website is made:

1. Strategy

If you already have a website, we'd go through an audit to understand its strengths and weaknesses. The next step is getting clear about how it will help you achieve your business goals, so we can then determine the main action we want users to do on each page. That usually means:

  • Getting in touch
  • Subscribing to your newsletter
  • Downloading something
  • Reading a blog post and going to a landing page.

That's strategy.

2. User Experience

Now let's say a woman called Emily found you on Instagram, or LinkedIn, and got interested in your services. Emily then goes to your website to find more information about your process and pricing.

  • Will she find what she's looking for?
  • Will the content displayed address her objections?
  • Will your website works as good on mobile as it does on desktop?
  • Will the information guide her to a big contact form used to filter unqualified leads, or to a short form used to boost conversions?

The better we understand Emily's pain points, needs, goals and objections, the better we provide a great experience that ends up converting her into a lead - and hopefully into a client. During this phase, we also analyze competitor's websites, we structure the pages and all the information that will be displayed on each one.

a frustrated woman is the user persona
Maya & Braga's website user persona
website sketches
Website sketches
website wireframes
Maya e Braga's website wireframes

3. Copywriting

Information architecture done? The website content is then written taking into account SEO best practices, but also focusing on the goals defined during the strategy. Remember that we want Emily to get in touch, to subscribe to your newsletter, to download something...

Content is key to creating visuals. That's where templates go wrong because you end up creating content based on a pre-established structure instead of structuring everything around the content.

4. User Interface

Here's where a prototype of the final website is created: brand identity, images and other design elements are applied to the written content.

Ten years ago, web designers used Adobe Photoshop to create layouts, but in 2021 modern tools like Figma make the process a lot more efficient (and fun). By using the prototype, you'll be able to scroll, navigate through pages and give solid feedback based on what you've seen. A prototype also allows us to test the layout and get feedback from those who matter the most: the potential clients.

website's grid
Maya & Braga's website grid

ā€

Website final mockup

5. Development

It's finally time to make the website come alive with functionalities and interactions. During the development, I ensure it will adapt across different screen sizes and it's optimized for mobile. Domain and hosting are configured, as well as on-Page SEO (meta tags, etc), XML sitemaps and integrations like Google Analytics and email marketing tools.

Traditionally, websites have been developed through coding on platforms like WordPress. But as it happened with Adobe Photoshop being replaced by tools like Figma, there are now far more powerful substitutes to WordPress.

Website development on Webflow

The future of web design has a name: Webflow

Whereas WordPress is heavily based on templates and needs lots of coding to make a website personalized, Webflow was born to allow designers to build professional, custom websites without coding.

How does this translate into a benefit for you?

Remember that I mentioned the dream team formed by a UX/UI designer and a developer? Well, Webflow empowers UX/UI designers to develop, so your dream team is now composed of only one person. And let's be honest here: opposed to developers, designers are well known for their attention to detail, precisely what you need to cause a good first impression on potential clients.

Reasons to use Webflow instead of WordPress

Design / Customization

Having a professional website means it was tailored to your business needs. It didn't rely on generic templates, but instead, was built from scratch. Webflow allows web designers to be creative while respecting web best practices.

Interactions

These are used to provide feedback to users once an action is performed.

  • Did their mouse go over a button? Then we change the color of the button.
  • Did they scroll the page? We may show them a progress bar to indicate how long the page is.

These are called micro-interactions, and they exist on both platforms. But interactions build to engage the user and enhance the user experience, like cool scrolling effects or mouse click effects, are way more powerful on Webflow. Take a look at an example on the "process section" of my service landing page.

interactive website showing elements
Vero Motti's website interaction

SEO

Both platforms allow optimizing websites for search engines, but SEO tools are native in Webflow so you don't need to rely on plugins (and updates that can cause security issues), which is the case with WordPress.

No plugins

WordPress is built on plugins - they're so crucial that to work properly a website needs to have at least five plugins. Some of them add so much custom code to the website that ends up making it slower.

What's really frustrating, though, is when you need to update plugins or WordPress itself hoping that nothing breaks.

On Webflow you can't install plugins, but before taking any conclusions take a look at this list of top used plugins on WordPress:

  • Yoast (SEO management)
  • Akismet (anti-spam)
  • Contact Form 7 (form building)
  • TinyMCE (text editor)
  • Google XML (sitemaps)
  • UpdraftPlus (backup)

All these functionalities that require plugins on WordPress are already native on Webflow. Plus, you won't need to spend hours of your life on installations and risky updates. You'll focus on making your business work, not your website.

Integrations

If you need to enhance your website with third-party integrations (Google Analytics, TagManager, Mailchimp...) it's just a matter of adding some lines of custom code. Forget plugins and start focusing on integrations.

Clean Code

WordPress is an open-source platform: anyone can create a plugin. So with each new plugin you install, you're adding lines of code that will end up making your code kinda dirty.

Google doesn't like that. Google likes clean codes (which means faster websites), precisely what Webflow does for your website.

Site Speed

Google likes fast websites (site speed affects your search engine rankings), but you know who likes more?

People!

People hate waiting, especially nowadays when everyone looks to be in a hurry.

Take a moment to reflect on your own behavior online. If you need to wait more than 5 seconds for a page to load, will you wait?

While WordPress is notoriously known for having slow page speed, it's the opposite with Webflow. All websites are hosted on servers around the world, so when someone is loading your website the system will load it from the closest server.

Security

WordPress websites are also known for their security vulnerabilities when not properly maintained.

There's no shortage of stories of people updating plugins, crashing the whole website, and end up allowing hackers to invade it.

Webflow, on the other hand, has no plugins, so the probability of your website crashing down and allowing people to hack in is almost zero.

Customizable CMS

Do you know when a blog post page uses the same layout for 10, 100, 1000 posts? This is the power of CMS, and we can apply it to your services, products, portfolio projects, books...

While WordPress is, in its essence, a blogging platform, Webflow is great for different types of dynamic content. If you want to build a landing page for your services, you don't want CMS fields like post body, tags, category... You want fields like service features, pricing options, process description...ā€

Easily edit content

When teaching my clients how to edit their content I usually send a 5min video tutorial - for the whole website.

It's so easy to edit the content using Webflow because you do it right on the page, not on old dashboards with all these forms in which you need to find the right field to update.

website editing live on the page with webflow
Sou's website editing live on the page

Custom forms

Forms are powerful because they allow you to collect emails for your newsletter or get work inquiries from potential clients.

Webflow forms are fully customizable (without plugins) and easy to integrate with email marketing tools like Mailchimp.

Hosting

Webflow hosting is what supports some of the benefits mentioned before (speed, security, cms, editing...). Although their $16/monthly may sound expensive compared to other hosting services, that ends up not being the case once you look closer at the features and compare them.

Webflow hosting is powered by Amazon Web Services & Fastly: it has a global infrastructure that delivers content in milliseconds.

Optimization made easy

Creating new pages and optimizing existing ones it's easy with Webflow.

If you want to have the autonomy to do that, we might work on a CMS base (the blog post example mentioned earlier) or we can create a series of elements that you can just drag and drop to build a page the way you want (not what I'd recommend, but still, it's possible).

Conclusion

If you had to purchase a rusty old beat-up car for $1000 or a new one for $10.000, which one would you purchase? Let's say you depended on your car to visit clients, pick up your kids from the school bus and travel short distances during weekends.

You'd choose the car that doesn't give you headaches because it breaks once every three months, am I right? I mean, spending money to fix it every time it breaks doesn't seem so sexy...

You're going to pay extra for a professional website, but rest assure it will compensate in the long term. When it comes the time, choose the right platform for you instead of using the same old one simply because it's more widely known (aka WordPress).

If you're serious about your business, you might wanna stop doing everything by yourself and start delegating more. Handing over your website for a professional web designer to optimize it (or build it) it's an investment that will surely make you money in the medium and long term.

  • Think of your website as an investment.
  • Build your website for the future of the web, not the past.
Share
MORE LIKE THIS
Cookies! They are used here to improve your experience.
ok