FREE TRIAL

web design

The easy way to build a professional website with PageCloud

Philip Westfall, September 18, 2019

Building a website is easier than ever.

With most website building platforms, you can launch a passable site in just a few minutes by choosing a template, adding your content, and connecting it to a custom domain.

However, if you’re looking to build a professional website that represents your unique brand and gets consistent results online, this overly-simplified approach just won’t cut it.

In this article we will guide you through the step-by-step process used by professionals to design custom websites that look and perform at the highest possible level.

The best part? With PageCloud, you can use these same steps for your website, regardless of your technical experience.

Table of contents:

Information gathering and goal setting

Before jumping into the design, it’s critical to answer a few questions:

Pro tip: use Google Docs to share your answers and collaborate with your team.

If you’re just getting started with a new site or business, we’d recommend taking the time to research your potential audience and competitors. Without this information, your project can quickly set off in the wrong direction.

Once you’ve answered these questions, it can be useful to write out a quick summary that clearly highlights the goals you are trying to achieve with your site.

The early stages are also when you want to catalogue any available information that can help with the scope of your project:

In the web design industry, this process is often referred to as the creative brief.

Sitemap and wireframes

Sitemap

A sitemap will help you visualize the hierarchy of the pages you need on your site.

You can create a sitemap using a whiteboard, pen and paper or your favorite online tool.

If you’ve properly answered the questions in the previous step, such as: “What do users expect to do or find on your website?” this should be fairly straightforward.

To illustrate, here’s the sitemap of a photographer looking to showcase their portfolio online.

This is how the photographer came up with their sitemap:

Home: Guide visitors as quickly as possible to the information they’re looking for. Offer a visual overview of the different pages with short descriptions and links.

About: Many people choose photographers based on their experience, style, and story. Showcase these elements to connect with potential clients.

Portfolio: Present the variety of styles and link to more information.

Weddings, corporate, and family: Dedicated page for each style as it provides clients with additional samples and helps rankings in organic search.

Pricing: Provide clients with a price range and packages to ensure our services fit within their budget. Not too specific as we want clients to reach out for quotes.

Contact: Provide potential customers with an easy way to get in touch. Form for quotes, phone number, address, and business hours.

Wireframes

The next step is to create wireframes for the different pages within your site.

This will help provide a framework for how content will be laid out on each page and how visitors will interact with the content.

Note: If you have a group of pages that share the same purpose and information type, like the portfolio examples above, only create one wireframe. Essentially, these pages are using the same template.

Here’s an example wireframe drawn out by hand:

As you build your wireframes, it’s important not to think about aesthetics, colors, or design elements. These will come later.

The goal is simply to illustrate the different elements on the page (images, text, buttons, etc) and think about how people will interact with them.

It can be helpful to use placeholder titles and button copy to facilitate user testing.

As you gain experience as a designer, you’ll want to create higher-fidelity mockups before moving on to the next steps.

Many designers use PageCloud to accomplish this.

Although it takes a little bit more time than drawing wireframes by hand, there are several benefits to using PageCloud:

Notice how the wireframed page above is split into horizontal sections. This PageCloud feature helps you organize your content into manageable building blocks that can easily be sorted and reused across your site.

Creating a design system

In order to ensure your website is both scalable and coherent, it’s important to create a design system.

Your design system acts like a style guide that helps you be more efficient as you build out new sections and pages for your website.

If it’s your first time creating a design system, you will want to focus on the main components:

Here are some helpful resources to get you started:

As you progress as a designer, your style guide will expand to include additional elements such as:

We’d recommend creating a page on your site to store the different design elements. Here’s an example of what that could look like.

Your design system can be inspired by an existing website or by something you’ve found online. Here are some of the most popular spots where designers go for inspiration when sparking up a new design:

Don’t forget that website templates can be a great source of inspiration for your design system. Each template comes with its own unique style that can be adapted to your needs. If you find a color, font, button, form, or element that you like, feel free to add it from the Section browser.

To see how your style choices look on a live page, duplicate one of the high-fidelity mockups you created in the previous step. By applying styles to your wireframe, you can quickly test out different combinations until you find something that works for you.

Once you're happy with your design system, it’s time to turn your wireframes into live web pages.

For advanced users:

Tip 1: PageCloud offers dozens of helpful shortcuts to help speed up the design process.

Tip 2: To maintain the horizontal spacing between the different elements on your page, you can use PageCloud’s guides. This action allows you to add columns to your pages.

Building your pages

Before applying styles to your high-fidelity wireframes, it’s important to take a look to see what sections are repeated between your different pages.

If you have a section that’s used several times throughout your website, you’ll want to style it once and then copy and paste it to the other pages.

As you scale your site, duplicating pre-styled sections and pages will save you valuable time and effort.

Pro tip: adjust the styles and position of elements on desktop and mobile before making any copies.

Once you have all your designed pages created and linked together, it’s time to start populating them with amazing content, which includes text, images, and video.

There is no need to shrink and compress your images, PageCloud’s Automatic Image Optimization takes care of that for you.

Pro tip: Professional websites need stunning images to stand out. PageCloud’s integration with Shutterstock provides you with live previews and preferred pricing for all 300 million available images.

As you build out your pages, remember to include buttons, galleries, forms, site menus, links, and more. Third party applications will help you expand on this functionality. We will discuss this in the next step.

In order for your pages to rank in search engines and properly display when shared on social media, you’ll want to make sure your pages have a good Page Title, Description, and Open Graph image.

These settings can be found under the gear icon in the Sidebar.

For advanced users:

PageCloud gives you full access to the source code of your website. You can add custom code to the <head> or <body>  of your pages. You can also use JavaScript or even edit your website directly in the DOM

Adding apps for additional functionality (optional)

PageCloud was designed to work with third party applications such as Shopify, Google Maps, MailChimp, and OpenTable.

Whether you’re looking to sell products, connect to marketing tools, or simply give your site a little extra sizzle, PageCloud offers 100+ easy-to-use integrations for every website need.

Note: Most apps can be added by copy and pasting an embed code on a PageCloud page.

Here are some of the most popular integrations used with PageCloud.

Website analytics and tracking

To track the performance of your website and marketing activities, PageCloud integrates with the most popular analytics software. Apps like Google Analytics can be added through the Site Settings tab of your website.

If you’re going to be using multiple tracking tags and pixels, we’d recommend using Google Tag Manager to manage everything in one place.

Video

The best way to add videos to PageCloud is through a third party app like YouTube, Vimeo, or Wistia. To add a video, simply copy and paste a video URL and PageCloud will automatically create an editable player for you. Video settings can be adjusted through the video panel.

If you want your videos to pop open after a user clicks on an element, you can use the video lightbox feature.

Ecommerce

There are several different apps you can use to help you sell products or services through PageCloud.

One of the most popular ecommerce solutions is Ecwid as it allows you to create an online store with 10 items for free. When your store expands or requires additional functionality, you can upgrade to one of their affordable ecommerce plans.

Just like many of the apps mentioned on this list, you can integrate with Ecwid by copy and pasting your embed code on a page and positioning it so it fits your design.

Note: if you need help setting up your online store, you can reach out to our support team or consider hiring a PageCloud Pro.

Marketing and booking software

Forms provided by CRM and marketing automation software, such as Mailchimp, can easily be added to PageCloud.

Many businesses also use chat tools, like Tawk.to, to connect with websites visitors as they browse their sites.

If your website needs to provide customers with a way to book appointments or reservations, take a look at integrations such as OpenTable, booxi, and YouCanBook.me.

Fonts and animations

Integrations can also help you add style and flair to your website. Google Fonts and Adobe Fonts give you access to thousands of free and premium fonts to help you stand out online.

PageCloud’s integrations with Animate.css and Hover.css make it easy to add interactive effects to elements without having to write a single line of code.

Setting up a blog (optional)

A blog is a great way to share content with your audience and drive leads from organic search (SEO).

With PageCloud, you can import an existing blog from WordPress and Squarespace or create one from scratch.

To create a new blog post, choose one of your sites, click on the Blog tab, and then ‘Write Post’.

You will enter a focused writing mode where you can write, add images, videos, and embed third party code.

When you’re happy with your article, we’d recommend adjusting the post settings before scheduling it to be published.

Your blog index page (/blog) will automatically be created after you publish your first article.

We’d recommend adding a link to your blog in your site menu to help your visitors find it.

Note: The PageCloud blogging tool is currently in Public Beta. You can send your feedback to support@pagecloud.com

Pre-launch checklist

If you’ve followed the steps above, you should be pretty close to launching your website. However, it’s important to run through a final test to ensure your site is good to go. Feel free to publish your site in order to test it in a live environment.

SEO and Social Media

Page titles, meta descriptions, and Open Graph images are set for every page. You’ve also added a Favicon to your site settings.

Pro tip: experienced users might want to add additional markup to the <head> of their pages, such as a canonical tag.

All pages load quickly

PageCloud is one of the fastest website builders on the planet. However, there are a couple scenarios where a page might load slowly:

Problem: A page contains a large mp4 file.
Solution: Add the video to a third party service like Vimeo and paste the link on your page.

Problem (rare): A page contains an image that failed to upload correctly.
Solution: Delete the image and upload it again.

No broken links

All your links should use the following format “/pagename”. If you use direct links, such as “sitename.pagecloud.com/pagename'', the links will break once you add a custom domain.

No lorem ipsum

Make sure you’ve replaced all placeholder text and images.

Everything works as expected

You’ve tested all aspects of your website, including forms, anchor links, etc.

Setting up custom domain

Once you’ve completed testing for your site, the last step is to set up your custom domain.

You will need access to your domain name registrar in order to complete this step.

If you don’t have a domain name yet, you can purchase one here.

Note: PageCloud annual plans come with a free domain name for 1 year.

The Domain Setup and SSL section under your Site Settings will let you know if your domain is properly set up.

If you see a green: Congratulations! Your website is properly set up and an SSL certificate has been issued for your site.

If you see yellow or red: Reach out to our support team or check out our troubleshooting guide to help you get set up.

Bonus tips

Are you ready to build a professional website? Click here to start your free trial.

Written by

Philip Westfall

Enjoyed the read?

Join our monthly newsletter for helpful tips on SEO, Web design, and more!