Website Designing Process

Mychelle Blake
Hand placing component of website design

There are six logical phases of the website design process. Instead of jumping right into the site design itself, it is important to start with the fundamentals of discovery, content and SEO to reduce the number of issues that may arise after the website launches. These steps can then guide your decision-making process for the design and implementation of the site.

The Discovery Phase

The very first step in the web design process is to determine what is the goal of your website. Whether you are creating the site for yourself or for someone else, it's important to look at its "end use." This can determine many factors such as the platform and design elements you use.

Client Profiles and Measurable Goals

A useful way to perform the discovery process is to create "client profiles." You imagine what your potential end users are like, what their needs are, and how your site will fulfill them. For example, if you intend to create a site for a business, you want to picture their typical customer. What would they want to get out of the site? Possible desired information may include business hours, pricing, product specifications, warranties or even e-commerce to purchase the products and services online.

Demographics of the end user are also critical. If the site will be visited by a significant number of older individuals, you would want to create a design that's easy for the less technically-inclined to use. Likewise, a medical office site would need a look that conveys a sense of expertise to potential clients with features such as the ability to schedule appointments, download patient forms and view the physicians' background. If there's a level of functionality to the site that requires advanced coding expertise that is beyond your skill level, you can decide on either removing some of these features or consider hiring a developer to work with you.

Finally, how will you measure the success of your site? Have measurable, specific SMART goals to base your design on. For example, a site for a non-profit organization could measure the success of the site from the number of online donations they receive. A site for a musician could measure success by the number of music file downloads. An e-commerce site could use sales figures and visitor traffic as a measure of the site's worth.

The Content Phase

Laptop with content curation concept onscreen

The second phase in the process is to decide what type of content your site will have and then create this content prior to starting your design. It might seem counterintuitive to write page content or blogs before setting a site up, but what your content will be is a serious consideration for how you develop your design. Having your content ready also makes the actual building process easier when you have content to add to a page rather than using lorem ipsum dummy text and temporary photos or placeholders.

If you intend to use blogs on your site, you should develop a schedule ahead of time for when you will publish new content. Blogs that are not updated regularly can lose traffic and may also give off a sense of an "abandoned" website if users see a flurry of blogs written within a short amount of time and then nothing for weeks or months.

Writing for a website is somewhat different from other types of writing and you need to follow general guidelines to create effective copy. If you feel uncomfortable with writing, you can seek the services of a professional website writer. In addition to writing, there are other types of content you may wish to include on your site. These include images, video, forms, and animations. These items can assist you in brainstorming how to create your design and it's easier to work with what you have rather than creating a design and adding content later that doesn't quite fit your concept. You may need to purchase some of this content, create it yourself, or hire an expert to create it for you.

The SEO Phase

SEO brainstorming on napkin with coffee

Search engine optimization (SEO) is often developed on a site after it has been built, which is a definite mistake. Just as with content, it's much more efficient to create your design with SEO in mind first than having to make adjustments later. Crucial SEO considerations include responsive and mobile design, information architecture, keyword research and utilization, coding and more. If you don't know much about SEO, there are consultants you can hire to help you. There are also good tutorials and articles online if you want to do it yourself. Free resources can be found from Yoast, Moz, and Search Engine Land, among others.

The Design Phase

Now you're ready to plan out how your site will look. During this phase you need to make several decisions.

Web Platform

Which platform will you use to build your site?

You could utilize drag-and-drop web builders like Wix, Weebly and Squarespace. Content management systems like WordPress are also very popular. Depending on your needs, you can make a simple WordPress site with minimal coding skills or you can design a more advanced site requiring more advanced knowledge of HTML, CSS and PHP. At the most custom and most advanced end of the spectrum, you may build a site based on the use of a number of possible coding languages such as Javascript, PHP, Ruby, Python, Java and C#.

Creative Process

How do you prefer to create your design?

Some designers choose to use wireframes to develop their site plan. A wireframe is basically a "blueprint" for your website and you can either use an online tool for this or draw your design on a piece of paper. If you have Adobe Photoshop skills, another option is to create mockups of your site as PSD files, which gives you a better idea of the visual look of the site compared to a wireframe. Another way to create your design is to get online and start with your blank website as a canvas and work "live" to create your site design.

Design Skills

It is important to note that you don't need to be a professional designer to make a quality website. If you don't feel competent with your visual design skills, there are many resources you can use to learn the fundamentals of design. A highly recommended book is Robin Williams' The Non-Designer Design Book which consistently receives high remarks on Amazon.

Choosing a color palette may also be difficult. There are some free tools online to help you choose colors such as Coolors, Colormind, and Adobe's Color generator. If you truly don't feel confident creating a design, or prefer to focus on the code, it's not uncommon to work with a web designer who can create a PSD file for you to serve as a foundation for your design.

Remember to check out design trends for ideas and make sure your site has a modern look. There are several websites which curate the best web designs, including Behance, Awwwards, and Best Website Gallery (BWG).

The Construction and Testing Phase

Using wireframe & HTML to build website

During this phase, you roll up your sleeves and put together your website! If you find yourself needing help during the process, don't hesitate to reach out to support forums for your platform of choice and groups for website designers. There are also many website designer-focused groups on Facebook. Most fellow designers and developers are happy to help beginners with their questions and offer words of encouragement. Many groups and forums will let you post your work-in-progress for feedback and suggestions.

There are also many tutorials online if you get stuck. YouTube is a great free source for tutorials on just about any platform, plugin or coding language you can name. Lynda.com also has an incredible library of video tutorials and downloadable exercises, although it does require a monthly or annual subscription.

An extremely important part of construction is testing your website to make sure it functions correctly across a range of devices, operating systems and web browsers. This means using every feature in every possible way you can imagine ensuring that they work. Enlisting some other people unfamiliar with your site, as well as other web professionals, to test the site out can also provide valuable input.

Site Testing Checklist

Create a checklist of items to go through before you publish your site. The list should include, at the very least:

  • Test all functions, multiple times, and with different users.
  • Test your site on multiple mobile devices (e.g., iPhone and Android). You can also test how your site will look using the Inspect Editor tool, which lets you change the size of your screen on your working desktop or laptop.
  • Different browsers may display your site differently and may have bugs you are not aware of. You can use different browsers on your computer to view the site, or you can use a cross browser tool to speed up the process.
  • Make sure all of your images are sized properly and if you use stock photos, they are paid for and your licenses are valid. If you use images from a professional photographer or artist, make sure they are credited on your site.
  • Your site should be accessible to people with disabilities so that everyone can equally enjoy your work.
  • Site speed is an important factor in your SEO. There are many free tools you can use to check your page loading speed including Pingdom and GTMetrix.

You may find after testing that you have to go back and make changes to your site. Take your time to make sure everything is 100% correct. First impressions of your site are important and influence whether people will come back. A site that does not work correctly, has design flaws, or does not work well on mobile or other browsers is a turnoff for users.

The Launch Phase and Beyond

Once you've launched your site for all to see, this doesn't mean you're done! It's important to continue maintaining your site. This includes updating plugins, themes, code, and content. You should also regularly review your site's Google Analytics to see how it's performing to make changes over time to improve the site.

Launching your site is also a time for promotion. This can include using social media, forwarding the links to friends, family, donors, business associates and anyone else who may have an interest. You should also add the site to the Google Search Console to improve its visibility in searches.

Web Design Is a Process

While there's a clear artistic element to creating a website, you will find the most success following the fundamental steps from the beginning. Using these phases as a guide will make your web design a seamless experience with a result you'll be proud of.

Was this page useful?
Website Designing Process