Today, building a website is easier than ever. On most website building platforms, you can launch a passable website by choosing a template, adding your content, and connecting it to a custom domain. 

However, if you want to build a website that best represents your business and brand, and gets consistent results online, this simple approach just won’t cut it. 

Luckily, we’re here to help! This article will guide you through the step-by-step process used by web designers to build professional, custom websites that perform well in search. 

The best part? Using PageCloud, you can use these same steps to build your website regardless of your technical experience and you’ll get access to the best tools to get the job done. 

Table of contents:

Step 1: Goal setting

Before diving into design, it’s important to determine the overall goal of your website. Ask yourself the following questions: 

  • What’s the purpose of my website? (e.g. sell, inform, entertain, etc.) 
  • Who is my target audience? 
  • How will users reach my website?
  • What will users expect from my website? 
  • What do I like or dislike about my competitors’ websites?
  • What sets me apart from my competitors? 

Understanding your target audience is crucial when beginning to build a business and/or set up a website. We’d recommend taking some time to research your audience and your competitors in order to best understand the purpose of your website and what your users will expect to see when they visit. 

Once you’ve answered the above questions, write a summary or statement that clearly describes the goals you are trying to achieve with your site.

Step 2: Collect existing assets 

During these early stages you can begin to take inventory of any available information that can help with the scope of your project. For example: 

  • Existing design assets (logos, images, videos, brand guidelines, etc.) 
  • Existing written copy (taglines, mission statement, etc.) 
  • User research or user personas
  • Competitor analysis 

In the web design industry, this process is often called a creative brief. This step is important as it will help you determine what information or assets you’re missing before you get started.

Step 3. Create a sitemap

A sitemap helps you visualize the hierarchy of the pages you will need on your website. You can create a sitemap the old-fashioned way (pen and paper), or use an online tool. 

The steps above will help you determine what your users will expect from your site, which will help you understand what pages you will need. Map out your pages and add a short description in order to clearly define the purpose of each page. 

Here is a sitemap of a photographer looking to showcase their portfolio online: 

Home: Guide visitors as quickly as possible to the information they are 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. 

Step 4: Create a wireframe

A wireframe provides a framework for how your content will be laid out and how visitors will interact with the content. Use placeholder titles and buttons in order to develop your layout in a way that will make the most sense to your users. 

Here’s an example of a wireframe drawn by hand: 

The goal of a wireframe is to illustrate the different elements on the page and think about how your users will interact with them. Focus on how your page will flow, and making sure you’ve included all the necessary elements. 

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

You can use PageCloud to accomplish this by creating a simple site using Sections and Columns. These features will help you quickly build out a layout for your page. 

Above is an example of an available wireframe template on PageCloud. Creating a wireframe on PageCloud is beneficial in several ways:
  • Your mockups are actual websites that can be tested by anyone
  • Placeholder copy, images, etc, can be replaced in seconds
  • Styling, such as fonts, colors, and spacing, can be easily adjusted
  • Sections and Columns can be duplicated
  • You can collaborate with others using the Teams function, or you can hire a professional designer to help you out

Notice how the wireframe above is split into horizontal sections. Sections are a PageCloud feature that help you organize your content into manageable building blocks and can be duplicated, rearranged, and hidden. 

Learn more about Sections

Step 5: Creating a design system

In order to ensure your website is scalable, it’s important to create a design system. Your design system acts like a style guide that will help you maintain consistency as you build out new sections and pages of your site. 

There are many places to find inspiration for your design system, but here are a few of our favourites to get you started: 

PageCloud website templates can also be a great source of inspiration. Browse our Collections to find templates and predesigned Sections organized by style such as our Modern and Classic Collection.

Once you’ve found your inspiration, you’ll want to focus on these main components: 

  • Fonts and typography 
  • Colors 
  • Forms and buttons

Here are some helpful resources to help you narrow those down: 

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

  • Grids and spacing
  • Interactive elements (like hover text or animations)
  • Shadows
  • Image treatments
  • Icons, arrows, and other design elements

We recommend creating a page on your site to store the different design elements for easy access. This page might look something like this: 

Now you’re ready to start applying these styles to your wireframe. PageCloud offers dozens of helpful shortcuts that speed up this process. 

Check out our Ultimate Guide to Website Design for the best tips on adding content to your website. 

Step 6: Building your pages

With PageCloud, you can build your pages using Sections and Columns. As stated above, both Sections and Columns can be duplicated in order to quickly build out your pages while maintaining your design system. For example, you can style a Section and copy paste it to another page. As you scale your site, duplicating pre-style Sections will save you valuable time and effort.

Once you have all your pages built, you can start adding your content such as text, images, and videos. PageCloud optimizes your images for you so your website runs quickly. You can also choose from our selection of available buttons, galleries, forms, and site menus.

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. 

In order for your pages to rank well in search, make sure each page has a Title, Description, and an Open Graph image. These settings can be found in the Sidebar in your PageCloud editor shown below: 

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.  

If you’ve followed these steps, you’re well on your way to creating a high performing website that is functional, aesthetically pleasing, and ranks highly in search. 

Step 7: Third party integrations (optional)

PageCloud offers 100+ easy-to-use integrations such as Shopify, Google Maps, Mailchimp and OpenTable. Most apps can be added simply by copy pasting an embed code onto your PageCloud page! 

You can integrate e-commerce, marketing tools, and contact tools to best manage your business. PageCloud also has integrations with design features like fonts and animations. 

Here are some of the most popular integrations with PageCloud: 

Videos

You can add videos to your PageCloud through a third party app like YouTube, Vimeo, or Wistia. Copy paste the video URL and PageCloud will automatically create a player for you that you can edit. Video settings can be adjusting in 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 as seen above. 

E-commerce

There are several different apps you can use to help you sell products or services through PageCloud. One of the most popular e-commerce solutions is Ecwid as it allows you to create a free online store with up to 10 items. When your store expands you can upgrade to one of their affordable ecommerce plans. 

Above is an example of an online store integration with Pagecloud! 

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

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.

Learn more about font pairings and adding fonts to your website.

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. Here's an example of animated text and button:

Marketing and booking software

You can add forms provided by marketing automation software, such as Mailchimp, to your PageCloud site. 

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

Website analytics and tracking

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

For advanced users: 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. 

Step 8: Setting up a blog (optional)

A blog is a great way to share content with your audience and can drive leads from organic search (SEO). With PageCloud, you can import an existing blog from WordPress or create one from scratch. 

Create a new blog post by clicking 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, use the post settings to add an author, a feature image, and create a category and tags to help your post rank in search.

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.

Pre-launch checklist 

Congrats! You’ve set up your site and now you’re ready to publish your site. Here’s a helpful pre-launch checklist to ensure your site is good to go: 

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

No broken links
Double check all links to make sure they are functional. On PageCloud, internal links should follow the 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, videos, etc.

Step 9: Setting up a custom domain 

The last step for your site is connecting it to a 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, you can purchase one here. 

Note: Pagecloud business 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 green, your website is properly set up and an SSL certificate has been issued for your site. 

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

Bonus tips

  • If you’ve set up a new domain, you’ll want to submit your site to Google to ensure it gets properly indexed. You also want to add a link to your preferred URL within your social media properties.
  • If you’ve changed domain names, you will want to redirect your old domain name to your new name and replace the links within your social media properties.

Now you’re ready to build a professional website!  Be sure to check out our blog for more tips and tricks on web design, or click here to start your free trial today!

Tags

Branding

Fonts

Website Builder

Web Design