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
- Goals for new website
- Estimate
- Based on amount of work as specified in the project overview
- Additional items
- Any additional items you requested or we may suggest
- Photography
- Video work
- Content/Copy writer
- Additional Graphic Design work
- Any additional items you requested or we may suggest
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.
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.
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.
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)
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.
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:
- Smashing Magazine – web design process
- Print Magazine – web design process
- Invision Blog – web design process (mobile first)
- How to write a web design RFP