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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A blog is a great way to share content with your audience and drive leads from organic search (SEO).
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 email@example.com
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.
Page titles, meta descriptions, and Open Graph images are set for every page. You’ve also added a Favicon to your site settings.
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.
All internal links (within your site) should use the following format “/pagename”. This can be accomplished by using the link to page feature. If you use direct links, such as “sitename.pagecloud.com/pagename'', the links will break once you add a custom domain.
Make sure you’ve replaced all placeholder text and images.
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.
Are you ready to build a professional website? Click here to start your free trial.
Join our monthly newsletter for helpful tips on SEO, Web design, and more!