SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

DIY Web Design For Solopreneurs: How To Get Started

By Eva Barnes , Oct 19 2016
DIY Web Design

Featured Image: iStock/jacoblund

Entrepreneurs have a tough life because building a business takes a ton of dedication, hard work, and creativity. But, when you have decided to walk this path on your own, the problems increase tenfold.  A solopreneur has to worry about every aspect of the work on their own.

Solopreneurs love to take the DIY approach to everything. However, when it comes to building their business website, they have to rely on web designers. This is mostly because business owners don’t have the technical skills to code, host and maintain their own website. It also takes away creative control and wastes precious time.

DIY website builders are the ideal tools for startups and solopreneurs. These tools come with built-in templates that you can easily customize. It usually takes about a day to set up your website, and you don’t have to write a single line of code. Website builders allow you to take the DIY approach with ease, no need to fiddle around with HTML, complicated CSS, and messy Java Scripts.

Simply fire up the website builder editor and use the drag-and-drop interface to design your brand new website.

DIY web designers need to think carefully when it comes to choosing the template, color scheme, layout etc. We show you all the tricks and take you through the process of creating a sample website step by step.

Let’s begin.

Choose Your Tool And Template

Making a website is a piece of cake with DIY website builders, lets learn how this can be done. The first thing is to choose the website builder and a base template. We customized one of the website templates available on the website builder UtterWeb.

Template Choices

There is a ton of beautiful templates available on UtterWeb, we will choose a relatively simple one to make this tutorial easy to understand.

Template Choices

Our Chosen Template

This is what the chosen theme looks like before customization. The design is clean and minimalistic, something that is sure to please your visitors and customers. Experts suggest that simple websites work best, a study found that visually complex websites are considered less aesthetically pleasing than simple websites.

Our Chosen Template

Responsiveness Check

Other than the design, you also need to check if the website builder templates are responsive. A responsive website scale according to the screen size of the device used to access it. This is important because people are increasingly using smartphones and tablets for browsing. In fact, global internet traffic originating from mobile phones accounts for 38.6% of the total traffic. This trend will continue to rise in the upcoming years; therefore, business owners need responsive websites to reach potential customers.

The UtterWeb templates are completely responsive and look great on a smartphone, you can use the Preview option to view smartphone and tablet displays.

Responsiveness Check

Responsiveness Check

Responsiveness Check

Customize The Chosen Template

The overall look of the design works well with what we want; let’s go ahead with the customization. Utterweb lets you customize the logo, color scheme, images, pages, page layout, and more. You can make the changes in whatever order you prefer. The first thing we changed was the logo, you can use the UtterWeb logo editor to edit the default template logo or upload your own image. We designed a new logo using the built-in logo designer.

logo editor

We also changed the default background image to something more suitable. Simply click on the small black camera icon that appears and upload the image of your choice.

background image

Next, we went ahead and added more pages to the main navigation menu. All you have to do is click on the editor icon as shown below:

main navigation menu

A navigation editor pops up; use this to alter the order of the pages, page titles, and URLs. We added a Blog, Portfolio, etc.

page titles and URLs

You can also edit the page layouts using the layout editor tool.

page layouts

Click on the edit icon and a popup similar to the one below will be displayed, choose the layout you want to apply and click save.

layout editor

The template comes with default content; this obviously has to be edited according to your needs. Click on any heading or paragraph to open the text editor.

text editor

text editor

The specific pages and their layout depend on the kind of business you are running. However, a few pages such as About Us, Contact, Blog, and a page to display previous work or clients are a requirement for any well-built website.

Building A Great About Us Page With UtterWeb

An About Us page serves as an introduction to you and your business philosophy. Make sure you write clearly and concisely. Keep the focus on your value proposition and tell visitors what your business aims are.

Here is our sample About Us page.

About Us page

Building A Great Blog Page With UtterWeb

Blogs help you keep in touch with your customers, industry experts, and fellow entrepreneurs. What you write about is entirely up to you. Blog about your business success stories, failures, business tips and tricks, anything that your reader might find useful. Keep the content informative and engaging to attract more visitors and drive up social shares.

The blog page from our website looks like this:

blog page

Building A Great Contact Us Page With UtterWeb

A contact page is a must-have for every website. Potential customers and visitors will view this as a signal of trust and therefore know that your business is legitimate. Anyone that wants to reach out for support or questions will definitely look for this page. A well-designed contact page has the following elements.

  • A neat and clean contact form that doesn’t have too many input fields and is easy to fill out.
  • An embedded map that shows the physical location of your business
  • A phone number so that mobile visitors can contact your right away.
  • Links to social media accounts and icons

Contact Us Page

As you can see all the necessary elements are in place, simply click, edit the text and your contact page is ready!

Finalized Website

After the customization and content addition, this already stunning template takes on a different look. Let’s take a look at the end product.

Finalized Website

Also, check out the mobile and tablet version show in the following images:

mobile and tablet version

Just a few changes and you have your very own fully responsive website.

Free Branding Options Offered By UtterWeb

Creating a consistent brand cost a lot, luckily UtterWeb offers a few goodies that will help solopreneurs market their business both online and offline. Along with a website, you get free access to the following tools such as, a logo designer/editor, business card designer, letterhead designer, envelope designer and much more.

business card designer

Let’s take a closer look at each of these.

UttwerWeb Logo Maker

UttwerWeb Logo Maker

UtterWeb Business Card Designer

UtterWeb Business Card Designer

UtterWeb Letterhead Designer

UtterWeb Letterhead Designer

UtterWeb Envelope Designer

UtterWeb Envelope Designer

Solopreneurs can take control of web design even if they don’t know how to code. DIY website design tools are a low-cost way to set up a professional-looking website for your business. You get access to tons of templates and layouts that will definitely match your preferences.

Have you used website builders?

Let us know about your experience in the comments below. If you have any feedback about the tutorial we would love to hear it!

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply