Step by step guide to designing, building and launching a beautiful website for free from Scratch in 2020. Ideal for solar or renewable energy companies.
So you’re thinking of building a website for your business?
You want a free website, and you don’t want to code.
But you also want it to create a professional website that is different from your competitors.
I get it.
Don’t worry, I’m here to guide you through the process from start to finish.
Step by step.
After you’ve followed this guide, you’ll have a pretty good functioning website that you can then add to, modify and enhance in the future.
This ultimate guide is ideal for solar companies (Because that’s what I specialise in). But businesses in other industries may also find it useful.
Here are be some good reasons why you may want or need a website:
All the above are valid reasons for wanting a website.
But there are other ways to build a website for free (see below). They may help you achieve what you want without needing a full website.
A Facebook page is free to set up, works on mobile (responsive), and hosts 2.5 Billion users per month. Facebook is great for B2C businesses. If you’re starting out, Facebook may be all you need.
So if you sell your solar installation services to residential customers, you should consider having a Facebook page.
Instagram is a great tool to showcase your story, your projects, your staff in photos or video format. Like Facebook, it is free to set up and works responsively across all mobile devices.
Here are some solar Instagram pages for you to take a look:
One of the main concerns people have of solar installers is whether they are trustworthy or not. Youtube is the king of video content and a great place to start growing your audience. People would love to see behind the scenes video of your work on video.
Even with all these free alternatives, you’re still convinced that you need a website for your business, then keep reading.
To get started, your website needs to have these 5 pages:
It’s enough to get you started.
Once all this is complete, you can look into something more advanced. This includes keeping it updated on a constant basis.
Why?
Think of your website as your storefront. If you own a restaurant, you will need to mop the floors and wipe the windows today if you want customers tomorrow.
A customer persona is the creation of a single fictional person based on the research of real customers. We know the name, the age, education and motivations of the person.
For example:
Name: Bill Strider
Bill is 40 years old. Married with 3 kids. A 15-year-old boy, and 2 girls aged 12 and 10.
He is an accountant, and his wife is a receptionist.
Annual family income $200,000.
Drives Mercedes C class to work. The family car is a Toyota SUV.
They have lived in their Ashwood home for 10 years. Their home is a 2 storey home. 4 rooms, 2 bathrooms.
Enjoys playing and watching cricket, as well as barracking for the Hawks.
“Our electricity bills are too high. Especially in the summer when we turn on air conditioning.”
Bill knows his numbers. He doesn’t care much about the environment but cares about his pocket. He analyses his options carefully before making an informed decision. He has heard about the solar rebate but doesn’t have time to understand it in detail.
Never had solar before. Only interested because his friend’s recently got solar, and said that it saved them a lot of money.
Wants to compare prices.
Doesn’t want to think about the detail, just wants a job well done.
So we can better understand their pain points, their fears, motivations and drives them to act.
Without a clear understanding of who we are speaking to, we will end up speaking to nobody.
For Bill, our target customer, what would be a better strategy?
Seeing as Bill is more concerned about getting the best value, we should be talking about option 2.
Now that we have a better understanding of what a customer persona is, and why we need one, we can craft the message on our website with clearer intent.
Who is your ideal customer?
Every business needs a logo. It symbolises who they are and what they stand for.
If you already have a logo, skip to Colour Scheme. If not, keep reading.
Canva is a great app to use for designing logos.
It’s fantastic for people like me who don’t know how to use Photoshop.
It is a perfect place to dip your toes into the water for logo creation. Light the fire and let your creativity out.
Head over to Canva, and get started. Their tutorials on how to create one will be far better than what I can produce.
If you’re not creatively inclined, there are other inexpensive methods.
Fiverr is a website that connects businesses to freelances in low-cost labour countries. They can help you with all sorts of design work.
There are hundreds of “logo designers” that you can choose from.
The cost of logo ranges from $5USD to $500.
Be aware that results vary dramatically. Your designer will need hand-holding, especially the newer ones.
Have you seen a website that appear unprofessional, yet you can’t put your finger on it?
It may be due to inconsistent colour scheme.
Here’s how to use the colours from your logo throughout the site.
Say you have designed or were given this logo, and you didn’t know the colour codes.
Navigate to: www.colorcodepicker.com
Click on “Upload Image”
Choose your logo, then wait until the upload is complete. Now that you can see your logo uploaded, you will see something like this:
You can see that the three main colours are Blue, Green and Orange. But let’s dive deeper and get their exact HEX codes for use.
Click on an area of the logo that you think will be a major colour. In this example, I clicked on the green portion, and this is what I can see:
The magic is in the HEX Code. #3fBa38.
If we repeat for all other colours, we get the main colours:
You don’t need to have 3 colours. It really depends on your logo. Even 1 major colour will be enough.
But now you will need to get the shadows and greys of each colour.
Go to Google, and search for “Hex Colour Chooser”, and it will show you a little app that looks something like this:
Type (or paste) in your main colour. In this example, it is #224d9b.
To get a grey version or a shadow version, click and drag the colour picker and move it left. Try and keep the Hue unchanged. This is the first number in HSV. In this case, it’s 219.
Similarly, to get a darker version, we moved the picker to the right and down.
So there you have it, the main colours are complete.
To deliver good user experience, colour consistency is very important.
Use the main colour and different shades of it throughout. And use the alternate and accent colours a bit less for highlights.
Your visitors will thank you for it.
Download the FREE PDF, implement these changes, and you may increase your solar installations by 5-10%.
Get the book
Now it’s time to think about what to put on your site - the content.
As described in Step 1, at a minimum, your solar website will consist of the following pages.
Let’s look at what we can include in each page.
Your visitors will come onto your site not knowing who you are, or what you do.
You need to be able to capture their attention in 2 seconds.
That's all you have.
How do you capture their attention?
Answer You need to be able to answer these two questions for them in the first 2 seconds:
If and only if you are able to do that within 2 seconds or less will they begin to scroll down (or scroll past the fold.)
After you capture their attention, start creating the story.
What is the story?
Everyone sees themselves as the hero. In almost every good story, the hero needs to overcome an obstacle or adversity in order to achieve their goal. (If not, it’s not a good story)
For example, in “Empire strikes back” (The best star wars movie), our hero, Luke, is seeking revenge on Darth Vadar for killing Obi-Wan Kenobi. He seeks out his guide, Yoda, who trains him in the ways of the Force in order to achieve his goal.
In your website’s case, your visitor is Luke, the hero.
You need to be Yoda.
Be the guide that helps your visitor understand their problems. Their pain points could be one of many. They could be wanting to help reduce their carbon emissions or save money on their electricity bills, or a number of other issues.
They are looking for to you for the answers.
So as the guide, what do you do?
Show understanding and empathy. What are their pain points, and what are you going to do in order to help them overcome their pain points?
Why you?
Your visitor may have seen other websites before yours. They need to see you in a different light so that you’re seen as the expert, not the commodity. You need to be unique such that your Unique Selling Proposition (USP) makes sense.
Experts can charge a higher fee. Commodity services can’t.
It will also help immensely if you can show them that you've helped other people in their shoes overcome their problems too. This is also known as Social Proof. Social Proof can be portrayed through the number of projects you’ve worked on, testimonials, publications, etc.
Finally, just keep in mind that your front page is not about you. It is about them, your visitors. If you want to write about yourself, that goes in the About page.
This page is self-explanatory.
Describe what you do. Images and videos will help immensely.
For a solar company, this could be a few paragraphs with images on their solar installations for homes, offices, schools, the like.
You may also put in services such as home batteries and electric vehicle charging stations.
Pro-tip: Features and Benefits:
“Features” are what you do.
“Benefits” are what the customer gets out of what you do.
Concentrate on delivering benefits. Don’t worry about describing what you do. Your visitors certainly don’t.
The Portfolio page is where you show off your experience.
This is a page where a visitor comes to see how experienced you are. The better clients you can show, the more likely the customer will trust that you will be able to deliver.
As an example, this is from the coronalenergy.com portfolio page:
Only put in projects that are relevant.
Your visitors will be confused if they see a picture of you shaking hands with the Prime Minister if you don’t describe what it is about.
In addition to showcasing all these great projects you worked on, the next step would be to create case studies.
What's a case study?
This is where you show how a client came to you with a problem. How you managed to solve their problem, and what the outcome of your involvement was.
For example, an office manager wanted you to help lower their bills. You were able to determine that installing a 10kW solar system would lower their monthly bills by $100 and that the payback would be within 7 years. You were able to deliver that project on-time, on budget, and the customer is thrilled with the results.
Below is another example
Results can be replicated. When a visitor sees your results, they will immediately think about how these results will transform their business (everyone just thinks about themselves).
You may be surprised, but your website's "About" page is generally the second most visited page after the home page.
This page is all about you. Here is your licence to flaunt your achievements, and scream to the top of your lungs what you're all about. People are interested to find out about you, your personality, your stories, your purpose.
Why?
They want to be able to trust a guide.
A guide that is human and relatable is much more trustworthy.
We all love stories. Tell your story.
Be vulnerable. Show your failures, not just accomplishments.
To fail is to be a human.
This is a critical page for all the information to be correct and accurate.
If you want to capture leads with your website, you will need a form with appropriate fields for your visitors to submit their information to you.
Keep the form small with the least number of fields that you absolutely need. The more fields you have, the less likely a visitor will give you their contact information.
Along with the form, have it extremely clear how else they can contact you. This could be by phone, email, text, see you in at home, at your office.
You may also want to have a map widget that shows where they are on the map.
Your site needs an address.
Although it is not critical, it is very preferable to have your company name as the domain name. That way, it is easier for your visitors to remember your site and associate it with your company.
If you want a worldwide reach with a .com domain name, then go to Google Domains and buy one there.
If you want to concentrate on the Australian market, then a .com.au domain will suit you best.
One of the most well known is GoDaddy.
Go in an put in your preferred domain name.
Choose a different one until you get one that’s available.
Follow the prompts until you get access to the domain that you were after.
Now that you know exactly where your customers will be finding you, it is time to start designing how your website looks like.
Wireframing is a process of putting all your content ideas onto a piece of paper and seeing how to best lay them out on each page visually.
It will also give you a 10,000-foot perspective of the website.
It is much easier to start with wireframing so you don't get bogged down with the exact text, font, colour, size or the minute details, or even the picture or media on the page.
Wireframes are also easy to move content blocks in different locations, or even across pages.
Think of it as a draft of your website that you can chop and change however you see fit.
Wireframes can be either hand-drawn or designed with software. Depending on the project, I generally start with hand-drawn wireframes first, once I have a pretty good idea of how to layout each page, I can go into the second draft of the wireframes on design software.
Design software is specifically made to help you transition the design on paper or in your head onto the computer.
The main ones are Sketch, Adobe XD and Figma.
Sketch is not free, so I never tried it. I used to like Adobe XD. Now I like Figma.
I REALLY like Figma.
Even on the free version, it has a ton of good features. In addition, it is a web-browser based app that you can use everywhere.
But of course, you should go try out different ones and see which one suits your style.
After we’ve chosen a design software, I hear you ask, “Why don’t we go straight to developing the site?”
Just like wireframing, it is much easier to chop and change ideas locations, sizes, and fonts before going straight into development.
Also, if there are other stakeholders on the project, it is much easier and quicker to produce a good looking design on Figma and get everyone's buy-in first.
Imagine the scenario where you've put in days of work into the development of the website, and the other stakeholders don't like the design, colour schemes.
Even without other stakeholders, it will be easier for you to come back and make changes to it yourself after looking and something else.
To see it with a fresh pair of eyes is always good.
I used to develop webpages in HTML, CSS and Javascript.
When I was 13 years old.
You can still do it if you like, but it will take you too much time. There are far better choices out there that will make your life much simpler.
There are website builders now that will speed the process.
You may have heard of Wix, Squarespace, Weebly, Shopify, etc. I think they may have their own little niche. I have personally used Wix and Shopify, and I didn’t find them to be user-friendly.
Wordpress is great.
It’s free, open-source, powers more than 30% of the web. I built a number of websites using Wordpress. Because it was the only platform that I was familiar with, I was blinded by its limitations:
I think there’s a much better solution for web development now.
I believe Webflow is such a great product that it may one day power a large portion of the web. More and more users are moving away from Wordpress into Webflow.
Here are just a few advantages:
Pricing is a little steep, and a little confusing at first. (I was confused for a while I admit)
To get started, go to Webflow click on Get Started. (This is an affiliate link)
Sign in with Google or your email address.
Follow the prompts and answer questions about you and the business.
Once complete, you’ll be greeted with this screen:
Click on Business Starter, and you can get started with their free Business Starter Template.
Start giving life to the creation you made in the design phase.
If you get stuck or want to learn more, Webflow university is one of the best guides online that makes it easy to transition to Webflow. Their tutorials are also some of the funniest.
Once you have completed the design and are happy with it, you are ready to launch it.
All you need to do is click on the top right hand corner and hit publish.
Well done! Your site is finally launched.
You can sit down and enjoy a drink.
No.
This is only the beginning. There’s still a ton more work to be done.
This is the place to go if you want to let Google know that you’ve created a new site, added a new page, see what search terms you’re ranking for, what you had for dinner and who’s wedding you attended on Saturday.
No, I’m only kidding. You don’t do that here.
Google already knows.
Seriously, if your site ever gets hacked, this is the place to recover it.
Webflow has a hilarious tutorial video about it already. Check it out here.
Google Analytics provides vital statistics for you to make informed decisions on. Such as which web pages perform the best, which pages have the least viewers, how many people become a subscriber, etc.
Almost every web page should have Google Analytics installed. Also, it’s free.
Here's how to get it installed.
You have 5 pages on your website.
But almost all your competitors will have the same as well.
To start standing out, you need to start offering more value than them.
A blog shows your expertise in your field by offering free advice and value to your customer. You can begin writing articles that you believe your customers will find useful.
Here are some examples:
Create landing pages for specific types of audience members. This page is offering them something of value in exchange for their email address, or contact details.
Once you have their email address, you can continue to offer more value to them over a period of time.
I hope this was helpful for you and your business.
Remember, your website should always be changing and improving. It is okay to launch without a perfect website.
I did.
Download the FREE PDF, implement these changes, and you may increase your solar installations by 5-10%.
Get the bookBook a Free Strategy Session and find out how your solar company can be more profitable
