A Not-So-Scary Process for Designing a Killer Website

Without a structured process, your website creation can very well turn into a monster, scaring potential customers away and leaving your company in the graveyard.

Follow the 6 steps below to help ensure that all of the elements on your site are working toward the same goal and your website launches without a fright!

1/ Wireframe. Making sure all the pieces all fit together.

The thigh bone's connected to the knee bone. The knee bone’s connected to the shin bone. A song we've all sung when we were young, and when it comes to web design, this applies. You need to make sure all of the pieces are in their proper place. This is where wireframing comes in. It allows you to focus on the information’s structure and functionality. Plus it helps you to identify potential challenges and gaps within the sitemap early on. Ask yourself two questions: 

• What pages is the site going to have?
  

• What are the goals of each of those individual pages? 

Remember to create a list of all the pages that need to be redesigned. It’s easy to forget pages like 404s, privacy policies and thank-you pages.

Now that our pieces are fitting together, it’s time to add a personality.

2/ Messaging is vital. So let’s add the organs. 

While both messaging and design affect personality, the tone of voice in your web copy can have a huge impact on how your users view your company. Be sure to think through how you want your audience to view your company. In many cases, the main headline in the hero section of your website is the first interaction a user has with your company. A study found that 80% of users don’t make it past the headline, so what you say and HOW you say it is vital. Be strong, confident, and direct. Don’t end up with an awkward hello.

3/ Design. Creating the perfect smile.

The wireframe is complete, you’ve got your body. The content is ready, you’ve got your organs. Now it’s time to dress to impress. While a lot goes into the design of a website, we’ll focus on a few main points here. One being the marrying of your tone of voice and your visuals. It's vital that your design closely matches the personality of your copy. 

Think of Wednesday Addams morbid wit and personality paired with a tie-dye shirt. Does the personality and visual fit, or is it sending a mixed message? 

Remember, first impressions are EVERYTHING. (Let's see how that awkward hello turned out…)

Humans process visuals almost 80% FASTER than they process copy. So be sure to create an engaging visual that reinforces and supports the main headline. According to the statistics, 91% of people prefer visual content over long boring written content. Video is a great way to add interactive information to your website without overwhelming the user with long pieces of copy. Icons and bullet points are another great way to make your content more digestible.

Pro Tip: Start with the homepage. This is where you will create your design system. The design system is the visual language of your entire website. It will speed up the design process as you move along to other pages, plus it will ensure consistency especially when working with a team of designers. It includes CTA buttons, fonts, icons, animations, and other UI elements.

4/ Development. Time to bring your website to life!

Once your client approves the mockup/prototype, it’s time to move the site into development. But there are a few things before we pass off the final design file to the dev team.

Always make sure that all of your fonts, images, icons, or animations are embedded in your file and accessible to the developer. Anything missing can lead to delays. Also, be aware to optimize ALL of the mentioned assets. One file that is too large can vastly slow down your page speed and kill your SEO. Speaking of SEO, images should be saved using keywords. But we’ll have more on SEO in a future blog.

Where will this site live? Even websites need a home. It’s also a good idea to figure out what platform you are developing your website on. There are countless options out there including HubSpot, Wix, WordPress, and Weebly to name a few. Each has its own benefits. Planning this in advance can help avoid any delays in your launch date.

5/ Test it. Or be afraid. Be very afraid.

The development team has sent back your brand-new website. Time to launch, right? NO! Prematurely launching your site could lead to…well…this.

Ok, maybe not to this degree, but failing to do a thorough QA of your website can lead to a number of issues, frustrating users, and leading to a bad customer experience.

We need to check for any issues hiding around the corner. The QA process is an important (and often overlooked) part of the process. The website needs to be tested on ALL devices and browsers to make sure everything is loading properly. 

It’s also important to check EVERY link on your website. Just one wrong link can send a user to an unexpected page, leading to frustration and a bad customer experience. Make sure 404 pages are set up so that if a link does have an error, the user can easily get back to where they were and isn’t lost or confused. (Bonus points for 404 pages that are aligned with the website’s tone of voice.) And don’t forget to test your forms to make sure the correct people are receiving the messages. QA also gives you an opportunity to optimize for page load speeds before the website hits the real world.

6/ Launch. It’s alive!!!!!

If you’ve followed the steps above, your website is ready to launch without a scream. 

But remember, this is not the end of your website's journey. Once your website is live, you can continually run user testing on new content and features, monitor analytics, and refine your messaging to show up in search engine results pages (SERPs). Learn more about search engine optimization in our blog HubSpot SEO Tools: Easy to use, but are you making these SEO mistakes?