Web Design Process – How we build websites

Web Design Process – How we build websites

In this entry, we’ll be going over our web design process. It’s really important to us that our clients have a level of understanding and transparency with how our work is conducted. This entry is written to show you how websites are created at Y-Designs.  We’ll be talking you through our steps to explain why our website design process works.

Request for website work and proposal - P1 Web Design Process

Typically, a client reaches out with a request for work. This can be in the form of a full RFP or by just contacting us. Let us know if you’re looking for a Seattle based web design team!

From there, we gather information based on your requirements to create a proposal. The proposal differs a lot between jobs, but generally speaking includes these sections:

  • Introduction
  • Our Team
  • Prior Work and References
  • Plan and Process (what we’re going over in this entry)
  • Project Overview
    • Goals for new website
      • What should be improved/kept
    • Sitemap
      • This is used to quantify the amount of work (quantified by number of templates and pages/migration requirements)
    • Timeline
    • Hosting suggestions/requirements
  • Estimate
    • Based on amount of work as specified in the project overview
  • Additional items
    • Any additional items you requested or we may suggest

Once you’re happy with the proposal we prepare an agreement and start the project.

web design process - Creative Discovery and Brief

Creative Discovery and Brief - P2 Web Design Process

With the proposal in hand, we write a brief to note the challenges you’ve faced with the existing website. If you don’t have an existing website, we talk about the audience you’d like to foster with the new site.

The most important part of this process is understanding who will be buying your services or products. For example, if your clients are mostly female, we don’t want to create a brand that doesn’t cater to your main audience. That said, if your audience is shifting, or your business is changing, we can adjust to meet your needs.

The goal of the brief is for us to understand your audience, competitors, goals and site structure. Once you feel that we understand those core items, we’ll move to the next phase. This is where we go from writing ideas down to visuals.

web design process - Discussion and Brainstorm

Discussion and Brainstorm - P3 Web Design Process

Once you’ve approved the brief, we’ll create a visual moodboard to match your audience and a strategy to match each of your goals.

The moodboard will contain images from similar brands, other websites and ideas which are all relevant to solving your visual identity. This will allow us to match your existing brand while solving issues in a realistic and proven manner. We’ll discuss with you the ideas behind each item so you can understand how the goals will be met.

We move onto the design phase once we’ve all agreed on the goals/issues around the visuals.

web design process - Design and Reviews

Design and Reviews - P4 Web Design Process

We will use the information gathered in the last two phases to create a home page design first. The home page is very important for all websites as it sets the pace for the rest of the templates.
The layouts will be presented using an online layout viewer. This way, we can place comments visually onto the layouts to explain each section. We typically have the client approve the home page design prior to moving on to the rest of the pages. We also start the site development once the home page is approved. This allows us to ramp up the site development as the other layouts become approved.

web design process - development testing and staging

Development, Testing and Staging - P5 Web Design Process

We build most of our websites on WordPress to ensure future compatibility and flexibility. While WordPress isn’t the most sophisticated content management system, it is extremely flexible and within budget for most clients. Its back-end is also relatively easy to learn.

Here are some technical things your tech savvy peers might ensure that we use/do:

  • Mobile Responsive
  • HTML5/CSS3 and Animations/Transitions
  • SASS and Bootstrap
  • React/jQuery/Backbone based JavaScript development
  • Content Management System (WordPress)
  • Source/Version Control
  • Browser Testing (up from IE10+)
  • Speed Testing (site load times)

These are all terms that may change, but we make sure that what we build is up to current standards, if not a little forward.

Once we’re ~95% with the build, we’ll show you the site on our staging server. Once all the kinks are worked out, this is when we’ll give you an account to play with WordPress and to fill in the content.

We’ll move to the next phase once the content is filled in and ready for launch!

web design process - Deployment, Optimization and SEO

Deployment, Optimization and SEO - P6 Web Design Process

For deployment, we’ll help you choose the right host type depending on your needs. This might be a shared host like a Webfaction account or a VPS like DigitalOcean.

We’ll place the files and the database on the host and setup the DNS (domain name system) to point to the server. Once everything is up and running, we’ll ensure that the site is running at optimal speeds (compression and caching if applicable).

Search engine optimization can be added to the plan as well. With the addition, we’ll more finely optimize each page to relevant keywords. By default, the site will come shipped with Google Analytics.

web design process - Tutorial and Maintenance

Tutorial and Maintenance - P7 Web Design Process

We usually have a tutorial for the site usage at this point or at the time of content population. Either way, we give you an in-person tutorial to show you how you can change out the content in the back-end. Since WordPress is easy to use, it’s usually not an issue with most of our clients. If you’d rather have us maintain the site, we can have an ongoing retainer agreement as well.
As for maintenance services, we recommend a quarterly cycle at a minimum to keep your WordPress instance running.

Conclusion

We hope that this is helpful in explaining how websites are created at Y-Designs. If you have questions about the web design process, feel free to contact us!

 

Related and similar resources:

Share with friends