Web Design & Development - An In-Depth Guide

Building a website.

It’s a daunting, time consuming task. But the hard truth is, it’s vitally important if
your company is going to break through irrelevancy in today’s business world.

But what actually goes in to building a website?

We’re here to explain the web design and development process, and how, when working together,
these concepts merge art and functionality to create a foundation platform for your company’s marketing efforts.

CHAPTER 1

Design vs development

What is web development?
What is web design?

CHAPTER 2

Your website’s role in inbound marketing

CHAPTER 3

SEO (search engine optimization)

CHAPTER 4

The website process

Discovery phase
Gathering information, purpose, goals, target audience
User experience
Persona development
Information architecture (IA) and sitemap
Planning ahead: site flow, user flows, and wireframing
Page layouts, review
Content migration
Coding
Testing, delivery and review
Launch
Maintenance and support
Analytics
Continuous content creation

CHAPTER 5

Final thoughts

DESIGN VS DEVELOPMENT

Potato, potatoe. Right? Not quite. Web “design” and “development” are two words that are often used interchangeably in our line of work—but the truth is, they’re both very different and play a distinct role in building a website. Let’s take this opportunity to look at each and how they fit together when constructing a website.

WHAT IS WEB DEVELOPMENT?

WEB DEVELOPMENT IS THE PROCESS OF TAKING A STATIC LAYOUT AND TURNING IT INTO A FUNCTIONING WEBSITE OR APPLICATION.

There are a lot of different tools one could use to implement a design, and an experienced developer can help guide you in selecting the right tools for the job. This is where you’ll hear tech-terms like HTML, CSS, Javascript, PHP, .Net, and the list goes on… and on…

and on...and on...and on...

The choices available to build your site are seemingly endless, but this is where a developer can help you out. Good developers make your site, great developers work with you to create your best solution. Ultimately, the purpose of development is to bring the design to a more advanced or effective state. It takes the plan and layout created during the design phase and turns it into a working and effective application. In short, development makes the design work, with the goal of creating a functioning website that speaks to your company and resonates with your brand.

WHAT IS WEB DESIGN?

IF WE HAD TO SUM UP WHAT WEB DESIGN IS IN THE MOST BASIC TERMS, WE WOULD SAY IT’S THE AESTHETIC PART OF THE PROCESS.

Or, the look and feel of a site. It’s the flow of the user’s experience as they interact with a website.

In reality, design involves a great deal more than just the aesthetics. Certainly, there is an artistic aspect to it, but there are also some technical guidelines and best practices that great designers follow that contribute to the appeal of a particular piece. Skilled designers can take the concept of a site or application and create a physical layout that is both pleasing to the eye and that follows good design principles.

Good design tends to evoke a response from the viewer—it’s everywhere. You may be responding to a well-executed design without even knowing it.

YOUR WEBSITE’S ROLE IN INBOUND MARKETING

Inbound is taking your buyer through the stages of their buyer’s journey (attract, engage, delight), and using relevant, timely, and valuable content to do so. Your website plays a tremendous role in your overall branding and inbound strategy. Especially if you’re not a brick and mortar company, your website will act as your home base for your consumers to make purchases, where your central information exists, where you will turn strangers into leads, where your blog will be, where you will link your social media efforts back to, and where the bulk of your high-quality content lives.

WHAT IS INBOUND MARKETING?

ATTRACT, ENGAGE, DELIGHT!

Your website is the foundation of your digital and web presence—and a key player when it comes to your branding. A website increases engagement and helps you establish footing when it comes to attracting, engaging, and delighting prospects. It’s the place where you can make the most out of your unique brand identity system. What’s more, it offers a way for you to measure success in your company’s goals for engagement and sales.

Today, a strategic digital strategy is necessary, and an established website is a must to help your SEO ranking and ROI results.

SEO

SEO. You can love it. You can hate It. But it still runs the show. That’s why we say PAY ATTENTION.

SEO, OR SEARCH ENGINE OPTIMIZATION, IS AN IMPORTANT CONSIDERATION FOR MARKETERS AND WEB DEVELOPERS ALIKE.

It’s a process that includes optimizing your webpages, blog, and other aspects to your website by entering keywords that are most associated with your services or product for the search engine—and more importantly, for the people who will find you.

There are a variety of ways to improve your company’s rank in the search engine, but the most important is optimizing those popular keywords across your webpage. And you don’t do this by keyword stuffing—the search engine knows when that happens. Instead, make sure you are focusing on your ranking for your user rather than the search engine. Remember, your website will be the largest traffic source when it comes to the organic search. So, keep in mind that the content you create for your site will have to keep both the SEO and your users happy in order for you to be found. That’s why it’s important to build an SEO-friendly site that will allow the search engine, and your users, to read your pages easily across your website. We will refer back to SEO in the website process.

THE WEBSITE PROCESS

Building a website takes time, work, and collaboration. A good web developer will want you to be a part of the process, keeping in mind the needs of your stakeholders, employees, and especially your customers. Here’s an example for what the web development process might look like:

DISCOVERY PHASE

GET YOUR DUCKS IN A ROW!

The web development process is typically broken into phases. The first phase being the Discovery phase. This is the time to “get your ducks in a row” and understand the overall goal of your website. This phase includes research, analysis of current data, developing personas, and planning. Consider this the part of the process where you

GATHER INFORMATION; DEFINE YOUR PURPOSE, GOALS, & TARGET AUDIENCE

The first step in the Discovery phase is dedicated to gathering all the research and information you will need for the scope of your website. For developers and designers, this means having a complete understanding of the company they are working with and any stakeholders involved. This includes asking why a website, or why a new website, is necessary and what target goals you are hoping to accomplish from it. Gathering information also includes:

  • Understanding the needs and expectations of the user(s), or your target audience
  • Understanding the needs and expectations of stakeholders involved
  • User frustrations associated with existing or previous website platform and completing a site audit
  • Completing a competitor analysis to understand not only the user, but competitor’s landscape
  • Determining what content management system (CMS) you will want to use

All of this information gathering serves a purpose as you build your website—everything should be based on the evidence you compile from your research. This research can be completed externally or in-house.

USER EXPERIENCE

When designing a website, it’s always important to consider the user’s experience (UX).

Is the design aesthetically pleasing? Is the content informative? Is the design easy to navigate? Do the pages load quickly? Is it responsive on mobile? It’s looking at the structure of the design, conducting A/B testing, and finding out how to optimize your site to best fit your user’s needs. 

PERSONA DEVELOPMENT

This takes understanding the needs and expectations of your target audience from the Discovery phase a step further by developing personas. A persona, in user-centered design, is a semi-fictional representation of your target customer. It represents the needs, interests and goals of someone who uses your product or service…or someone who doesn’t, that you want to convert into a customer. You may have a single persona you can focus on, or you may have several.

Begin by thinking of your target consumer. Talk to current customers and keep track of their responses. It can help to ask customers to complete a survey or create a focus group so you have accurate information to base your persona profile on. Give the persona a title that is specific enough to identify their needs—it can either be a name or a role, like “Marketer Martin,” “Software Developer Suzie,” or anything else you’d like that relates to your buyer market. An image can help identify the persona and reflect their role.

With these basics in place, begin to add details to your personas that describe who they are, including their:

GOALS

NEEDS

CHALLENGES

MOTIVATIONS

DEMOGRAPHIC INFORMATION

EDUCATIONAL BACKGROUND

WHAT SOCIAL NETWORKS THEY USE

WHERE THEY PRIMARILY FIND THEIR INFORMATION

Just to name a few details that you will continue to develop over time as you refine your persona. Remember, a persona is going to be a very in-depth review of your target buyer. It pays to learn who your target audience is rather than making assumptions and it’s what will drive your content creation as well as your website’s design and functionality. 

INFORMATION ARCHITECTURE (IA) AND SITEMAP

The art and science of organizing content and the flow of a website is called “information architecture.”

The end result of the information architecture = the big picture for your website’s design. This comes together by planning out your sitemaps, user flows, and wireframes, which we will get into shortly. Your information architecture is based on research, research, RESEARCH. It’s more than having a nice design for your website—it’s understanding that your customers would prefer to have your products listed in alphabetical order on your site or understanding that they would rather have a slide bar price range than a dropdown. It’s understanding that your website is designed for someone, not everyone. And, like all good design, getting down to the gritty details matter.

In developing your sitemap, user flows, and wire framing, you will find it easier to categorize your pages by the following:

Consumption pages: Where your user will go to find the blog post they are looking for, or pricing information for your product, or your “About Us” page

Interaction pages: Pages that will allow your users to enter data, including a search page or a form

Navigation pages: Typically, the home page and search results pages, but any page that intends on sending the user someplace else.

*It’s important to note that your content should already be in place prior to mapping out your design. Make sure you have developed enough quality content to get your pages started, understanding that you will continue to develop content for your website as you progress.

Get ready for a new term. The information architecture, defining all areas of the site then informs the sitemap which determines the hierarchy, content, and functionality of the pages. In short, it connects the relationships of your pages to the search engine, so you will be found. Developing a sitemap will ultimately allow you to become found while organizing your content for future functionality of your website—so if you’re asking if you really need one, the answer is yes.

PLANNING AHEAD: SITE FLOW, USER FLOWS, AND WIREFRAMING

If you’ve stuck with us as we’ve discussed information architecture and sitemaps, you’d know that the concepts include mapping out the “big picture” for your website. But, to get to understand the “big picture,” it helps to map out the details:

SITE FLOW

A site flow allows you to see what pages will be linked to each other throughout your site which allows them to flow seamlessly together—hence, the site flow. It’s essentially a large high-level map of all of your pages. Site flows can help you streamline the user navigation experience and is especially critical when helping developers understand the work flow of the pages as they plan ahead for the coding process.

USER FLOW

A user flow is more equipped for handling, you guessed it, users. Not everything can be streamlined by a site flow because user behavior affects what pages they will go to. That’s where user flow comes in. It looks at what paths a user is likely to take as they go through a series of actions to get from point A to point B—or what is called their “user journey” through your site. This could mean the user is going through the process of purchasing a product or subscribing to a newsletter, or another task related to your pages. If you are in the mindset of a user, you must also consider how they will find you—meaning the entry points to your site. This could be via organic search, social media, email, paid ads, etc.

WIREFRAMING

A wireframe is like a skeleton. It gives a basic visual guide for what a user will expect to see from a website and the functions that will be on that page. Once a sitemap is approved the wireframe typically follows, giving you an idea for what your visitors will see and the content they will interact with on your pages. Just remember, a wireframe is the visual aspects of a page and the site map shows the relationships for how pages connect.

WEB DESIGN

PAGE LAYOUTS, REVIEW

This is where creativity begins to merge with functionality.

It’s bringing together everything up to this point with the goal of making your information and content on your website clear, concise, and user-friendly. Your page layout is more than just making sure your page “looks nice,” it should be a visual pattern or framework that defines your site’s structure. It gives your users paths to easily navigate, ultimately with the hope that you will increase conversions by getting them to take a desired action. The designer should show the website client their thoughts early on for an initial page layout concept to illustrate a very basic “look and feel” of the website’s pages.

WEB DEVELOPMENT

CODING

Everything leading up to this point has played a critical role in the planning and creation of your new site.

And after everything has been approved from the previous steps, your developer can finally start to build your site—with coding. Coding is a precise set of instructions that your website needs in order to function. Typically, a developer begins by creating the home page, then adds on the subpages—again, this is where your CMS comes in to help content migration run smoothly. The designer will also be working with the developer to make any changes or additions to the design and checking over the content, making sure there are no typos, running a spell-check software, making sure every photo is high resolution, ensuring your site has working links, ensuring your call-to-action pages work, checking for consistency with each template, making sure it is compatible on mobile etc.

CONTENT MIGRATION

After you’ve met with your content team, decided what content you are going to use, and have established your content management system (CMS) it’s time for content migration—or moving from one platform to another.

SOURCE PLATFORM (WHERE YOU ARE NOW)

TARGET PLATFORM (WHERE YOU WANT TO BE)

The more content you have planned and ready for content migration, the easier it will be to migrate, come your site’s launch day. You may choose to be responsible for your content migration internally, or you may want to hand it off to an external source, which may depend on a variety of factors, including the organization, cost, and complexity of your content. If you are not using a CMS, just keep in mind that your content may end up in a variety of formats that may not migrate easily to your new website. Plus, with a CMS, you will have one place for ALL of your content. But, especially for those who don’t have the most technical experience, know that additional training may be required. That being said, you have two primary options for content migration:

HTML

CMS

CMS

CMS

REMEMBER, THIS IS JUST HOW YOU WILL MOVE YOUR CONTENT FROM YOUR OLD WEBSITE TO YOUR NEW WEBSITE

PRE-LAUNCH

TESTING, DELIVERY, AND REVIEW

As we get closer to launching, it’s critical to test your site to make sure it complies with current web standards, is running at optimal function, and is accessible to your target market.

Again, a designer is brought back to test the final details and make sure all the graphics, texts, and other pieces of content and pages are performing as they should be. They will also make sure that the site is compatible on all web browsers. Once you give your designer the final approval, you can deliver your site—a File Transfer Protocol (FTP) program is used to upload your website files to your server. The designer and developer may have recommendations for website hosting services or they may offer the services themselves. After your site has been uploaded to the server, you should do at least one more check to make sure all of your files are present and functioning.

LAUNCH

Launching your website might include a “pre-launch,” which promotes the actual launch of your site on social media and creating additional content for your new site.

This is a great way for you to develop quality content, connect with your target market on social media, network with influencers, and start getting information from leads even before you’ve launched. Creating hype around your new site is especially a good idea if you are starting a new business or launching a new project alongside your site. Then, if you have confirmation that your domain is ready, and you’ve checked every box LAUNCH! Try to launch on a day/time where you know you will reach your target audience—meaning don’t launch on a Friday after 5:00. Once you’ve changed your Domain Name System (DNS) or send the launch IP address your site has been launched! But your work is far from over. Post-launch, make sure everything is functioning correctly, verify Google Analytics is collecting data, search for yourself to make sure everything appears correct in the web browser as well, and market yourself on social. Also, celebrate!

MAINTENANCE AND SUPPORT

You can’t just drop your website off and leave it.

Testing your website will become routine, to make sure it’s always optimized for the user. If there are any software issues, security risks, or bugs, your top priority should be to fix them as quickly as possible. You may want to consider monthly maintenance or optional monitoring on your site to ensure your users are provided with the best site possible or have a full-time developer on staff.

Post-launch maintenance and support is a critical part of an ongoing process—from optimizing your website’s domain authority to protecting your website from harmful malware, and everything in between. Taking care of a website is like routine maintenance on your vehicle. You will continuously have updates, repairs, troubleshooting, and new features to consider. That’s why it’s important to choose a maintenance team who knows your website and who you can count on to ensure your website is at optimal SEO performance and that takes a proactive approach to any security updates or bug fixes that may arise.

ANALYTICS

After you’ve launched your new website, you’ll find opportunities for growth have just begun.

But in order to gage your traffic behavior, you must monitor and interpret the data you receive in the form of analytics. You’ll want to know what pages get the most views, where you are gaining or losing conversions, what trends seem to be working and what isn’t. Don’t fight the SEO—work with it. And work with a team who implements solid solutions to help you retarget your efforts as you move forward with design/development recommendations with real data that will allow you to see results.

As your company continues to grow, it will also change—so will the needs of your customers. Analytics matter. It’s more than just how many visitors you’ve had visiting your website—ultimately, those numbers don’t matter, you want conversions. Analytics is the answer for how you can better tailor your content and website to fit the needs of your target audience while revealing what isn’t working for you. You can set your SMART goals for what you want to see, like: let’s see a 5% conversion rate to our newsletter by the end of the month and use analytics to help you determine what paths your users are currently taking and what type of content they are gravitating towards, so you can reach your company’s goals.

CONTINUOUS CONTENT CREATION

Possibly the best way to attract the attention you want to your site, is to keep creating and sharing quality content that is timely, relevant, and valuable.

This goes hand-in-hand with maintaining your website’s optimization and focusing on analytics. It means revisiting your buyer persona(s) and making changes to your content where and when you need to. Remember, content is key to building trust with your customers. Yes, creating content is time consuming, but the more high-quality content you create for your target audience, the higher you will rank in the SEO. Long story short, content creation is worth it.

FINAL THOUGHTS

Building a website is an ongoing process. It will require designers, developers, and the stakeholders all working together throughout each stage of development.

Creating a successful website takes patience, creativity, and constant commitment to ensuring your site’s visitors have an exceptional experience.

 

Questions about any of our services? Call us at 218-464-6648
or email us at info@creativearcade.design.

Creative Arcade Snapchat