Welcome! My name is Javon Isaac and I am an Art director at a PR agency. I help out on a lot of new business opportunities and sometimes that includes building landing pages. These landing pages for the new business pitches help bring in millions of dollars in revenue. I also recently created two websites for client work. One of which was able to get XXX MIL visitors and won an award at Cannes.

I am creating extremely valuable sites and our team is using them seamlessly with their pitch strategy. The only downside is, as of now, I'm the only one on our team that knows how to create these good-looking sites fast, while also making them look amazing in a short turnaround time. 

So I am currently working on a guide to building great-looking websites, fast. I am building this guide to help me train my colleagues. The goal is to help anyone looking to learn how to build a website no matter what your end goal is. If you are not aware of the benefits of creating a website, checkout my article on that.

In this article, I will go over some things to consider when building a website. If you are still on the fence about creating a website because you don't know how to code or do know how to code but just hate coding, don't worry, I am going over all NO CODE Solutions. So stick around to learn everything from Planning to designing, to optimization and will even cover some basic SEO and basic marketing for your website. To keep this article from being 8000 words, >I will give you the overview of each topic briefly and link it to a more in-depth article covering the topic, so continue reading and enjoy getting lost in the rabbit hole I created. 

‍

Planning and Preparation 

Goals and target audience

First, you need to determine what type of sire you need to create. Some platforms tailor closer to specific needs than the next platform. For example, if your website has a huge blog platform and that is your primary focus you should prioritize a platform that is great for blogs. That platform would probably be WordPress. On the other hand, if you need to create a large e-commerce platform with a lot of small variations between products, also known as product variations, Shopify would probably be the best option. 

My favorite web platform to use to build websites is Webflow. Webflow is a service that allows you to build websites with a visual designer and hosts them. I love the tool and highly recommend you try it. Many people would prefer to use WordPress. I have used both, and prefer Webflow over WordPress. Check out my comparison of Webflow versus WordPress. You don’t have to use Webflow or WordPress. There are many different platforms to choose from that may fit your needs better.

‍

Market Research and Competitor Analysis

Market Research and Competitive Analysis are important steps in figuring out if the website you are creating will have a chance of being successful. These steps are business steps and less of a design and development step. Unfortunately, I do not have any content about how to do market research Competitive Analysis correctly, so here is a link that might be a good starting point for getting started with market research and Competitive Analysis. 

‍

Website's Structure and Navigation

This is all about getting the user where they need to go in the shortest amount of clicks possible. 

To create a strong website structure you need to outline the hierarchy of your website also known as a Sitemap. Start by figuring out what are the main sections or pages that will be part of your website. For example, a typical business website will have sections like Home, About Us, Products/Services, Blog, and Contact. Sketch out a few boxes and place each one of these sections into a box. 

INSERT Image

Here is a simple version of the wireframe for my site javonisaac.com. Users are immediately taken to the homepage, which is why it is at the top. Then you are immediately given the option to go to Work, About, Blog, and Contact. These are my key pages. I will highlight these in blue because I want them to be grouped together and form my main navigation. Everything else on my site falls under one of these four sections. 

Insert Image

I have a blog that has content on Graphic Design and Marketing. Under the graphic design category, I have sub-categories, Animation, Web design, and Print. The animation subcategory is where I write animation articles. The web design category is where I write articles about web design, and somewhere inside this subcategory is where you can find the article you are reading now. 

‍

Create a wireframe or sketch to visualize the design

Wireframes and sketches serve as visual guides for your website's design. I definitely recommend starting your design process with some sort of wireframe. You can use super complicated software like Photoshop, or something that was made specifically for web design like Adobe XD or Figma, or you can even just use a pencil and a piece of paper. 

It is easier to think quickly and make changes on the fly using one of these options compared to making these decisions at the same time you develop. Is it possible to build a website without a wireframe? Yes, I do it all of the time. I work on a lot of microsites that are templatized and the website is more or less the same, but with different skins or themes. When I create a website that is 100% custom I create the wireframe and then send it to the client to make sure they approve of the design and layout before I start the development process. I adjust and make changes to the wireframe based on the conversation with the client until it aligns with the vision they have for the site. Again the development process is very technical and making last-minute changes can add to the overall time to the process. 

Here is a wireframe of the Home page of my website. 

Insert Image. 

I start out with everything in GreyScale. At this point, we just want quick blocking. 

Insert Image

‍

Domain and Hosting

Let's talk about the domain name. A domain is what the user types into their web browser to get to your website. My domain is javonisaac.com. In some cases, you would want to do this step early. Domains are available on a first-come first-serve basis. If you have a good idea for a website, if it truly is a good idea, chances are someone else also might have the same idea. So you need to get that domain name before they do. 

When selecting a domain you should keep a couple things in mind. 

• Try to make the domain name your business name. Ex. Nike Inc. has nike.com
• Try to keep it short. People have to type these names into the search bar, so we need to make it as easy as possible. Ex. American Airlines has aa.com 
• If you do not have an official business name, it should somewhat reflect the content on your site. Ex. A website for a personal blog would be, FirstnameLastname.com. Some other examples other than mine would be bySophiaLee.com and NeilPatel.com

Selecting Hosting is a little different than selecting a domain name. Hosts take all of the files that are used to create your site (HTML, CSS, SVG, JPG, and Pngs) and place them on the internet so people can visit your website and view your domain name. This process is called hosting. Getting hosting is easy, just select a provider and pay the fees. Here is a list of some hosting plans you should consider. Again, my favorite hosting plan is Webflow hosting, the best part, it comes standard with Webflow. It even comes with a SSL Certification, with other platforms you would have to pay extra for this security protection. There are many benefits to Webflow hosting, and with many benefits comes with increase pricing. I do want to point out that Webflow pricing is a bit higher than other platforms because you get a lot in the bundle. 

‍

Web Design and Development

Now that we got all of the technical information out of the way. Let's talk about the thing you are all here for, The design part. No matter what platform you use to build and host your website you need to design it. In the Design stage, I open up the wireframe and save a copy and design the wireframe to look like what I want the finished product to look like. 

Design

Here is a fully designed version of the wireframe from earlier. 

Insert image

Now that everything is designed. I export every design element to a jpg or png to be pierced back together in HTML later. 

Here are the sections of the website

Navigation

This is where the logo is located along with links to the main pages for the site. My specific site has this navigation hidden inside a hamburger menu.

Header

The header is the first section of the website. 

Insert the image of section 1 - which has the images separated 

Project CMS

This is where my recent projects are listed

Insert image of the section with the project CMS is

Past client section

This is a section where my recent clients are listed.

Insert images of the recent clients and the images separated. 

CTA/Footer

Cool catchphrase to encourage people to get in touch with me. 

Insert the image of the Cta section and the images separated.

Development

Everything is designed and we have the assets exported and ready to be inserted in your development tool of choice. Again, I use Webflow. Webflow is a powerful tool but it can be a little hard to learn so if this is your first time building a site, you might want to start with an easier platform. But if you want to jump straight into one of the most powerful no-code builders, check out Webflow University to learn how to use the Webflow platform. If you are not using Webflow I recommend going to youtube and finding some tutorials on how to use the web platform you choose. 

‍

Content Creation

Now that your website is built, you need to add useful content. Again, I am a designer, I do a lot of things but creating content is not one of them. For this step, I put the responsibility of creating the content on to the client. They know their business better than I do, so having the content come from them will lead to a better depiction of the company and its values. I just help that content look professional on the webpage. 

Most people would like to have their website show up on the first page of Google. To do this you need to focus on search engine optimization, also known as SEO. If you do decide to use Webflow, you are probably wondering, is Webflow good for SEO, and the answer is Yes. It can do everything WordPress can do but the only difference is, you don’t have to purchase additional plugins for each feature, you will have to use custom code to enable some features.  

SEO is very complicated and I will probably cover that in detail in another article. But the basic principle of SEO is to create helpful content on the term you would like to Rank for, and if Google's algorithm finds your content worthy of being on the first page it will do so. The more helpful content you have the better odds you have of ranking. People normally use blogs to add this type of content to their websites. Check out this article to see how I made a Webflow blog using CMS.

‍

Website Optimization

Web optimization is also a ranking factor that Google takes into account for deciding who goes on the first page of Google. If your goal isn’t to get on the first page of Google, you should still try to optimize your site so that everything works smoothly for the best user experience for the visitor. 

Here are three things to keep in mind when optimizing your site. 

Load Speed - Large images take longer to load. You can use Image compression software like Tinypng.com to lower the file sizes. 

Broken Links - If your site has broken links users will not be able to navigate to the content they are looking for. If you do have to remove a page or change its name you can use Webflow 301 redirects to update the link path so the user gets to where they need to go.

Mobile-Friendly - Some designers like to take the mobile-first approach to building websites. Everyone is on their phones nowadays so making the website work on mobile devices is a must. Unfortunately, Webflow doesn’t take a mobile-first approach to building sites but they do allow you to create different designs for various breakpoints. 

 

Launch and Maintenance

Everything is designed, optimized, and ready to launch. I recommend that you get a friend or two to help test the website before you officially go live. You must test it on different browsers to make sure it works for everyone. If you implement a testing phase you can find issues and fix them before the public views your site. 

Monitor website performance

Now that everything is launched and it is live for everyone to see. You might want to monitor your visitors and track their actions on your site. You can do so by attaching google analytics, google tag manager, and google search counsel to see exactly what actions people are taking on your site. 

‍

I hope this was helpful!

You do not have to be a web developer to make amazing websites these days. Whether it's Webflow, WordPress, or even Wix you have plenty of options to build a website. If you do decide to use Webflow and get stuck on something feel free to send me a message and I’ll try to send you in the right direction to figure it out. Also, check out the section on my blog dedicated to all things webflow. 

‍