Method Explained

This article was written by Derek Long, owner and web designer of Tin Cans & Strings.

I'm constantly revising and improving the way I operate. The web is ever-changing and as a web designer I must adapt as well. I've put this here so you can see how we will work together. Each step is so very important, no detail is too small. During several points during the process I rely on feedback to keep things moving smoothly, whether the communication be email, phone, video chat, or face to face. I want to ensure we are adhering to the goals and mission of the project, so feedback from my client and partner ensures we are on the same page. Yes I said partner. After we agree to work together, we are partners. We both share the same goal. I want your project to succeed just as much as you do. Customer service, honesty, kindness, and timeliness are all implied when parters work together and these qualities are something I seek in the clients for which I choose to work for.

The following are the five steps I use when working with clients:

01. Discover

This step is about gathering information and getting to know you and your project. It's also where you get to know me and we'll determine if we are a good fit. If possible, we'll meet in person, but chatting through email or the phone is acceptable as well. I'll provide you with a client questionnaire that will help us determine what is needed for your project. Your answers to these questions will effect every decision made throughout the process.

I'll do some preliminary research about your brand and identity, understand your business, competitors, goals and needs, discover any expectations, determine timelines, and what is needed technically - basically a project analysis. I want to answer the who, what, and why before moving forward. I like to create a mission statement for the project. It serves as one statement that we can constantly refer to, along with the other discovered information, that will keep the project on track and guarantee we reach our goals. What I discover in this phase will constantly be referred back to during each of the steps that follow.

02. Devise

Based on the information gathered in the discovery phase we can come up with a strategic direction to ensure that your project meet it's goals and is delivered on time and on budget.

It's in this stage that we'll also nail down what content is needed for your site whether it be text, images, audio, video, social media, etc. After all, content is the reason for the website, so a bit of time planning our content strategy is time well spent.

We'll also determine what content gets priority and establish and describe content elements. All content will be written in the form of text, site maps, and content outlines. I think this step is often overlooked, but I think it's so important that I gave it it's own step. The content, along with the knowledge gained from the initial meeting and questionnaire, will serve as a blueprint to ensure that we’re able to create a successful project.

03. Design

I design your site from scratch, from a blank sheet of paper in my sketchbook to devices that can be seen anywhere in the world. It's quite amazing and one of my favorite things about web design. (Yes, I'm as excited as you are about your project!) There's several important steps in this phase, but it's basically designing the visual aspect people will see when they visit your site. This is where the planning starts to pay off.

The general process is as follows: (I gather feedback and repeat/refine if needed.)

Sketch

I begin by capturing ideas with pencil and paper. This includes sketching site layouts and other design elements of your site.

sketch

Early sketches

Prototype

I then produce HTML wireframes based off of the sketches I made. This will be the foundation or "skeleton" of what your site will be built upon. Since we will be designing in the browser early, this phase allows me to do early testing for responsive designs if needed.

prototype

From our paper sketches to the browser

From this example one can see the basic layout in mind, established content defined in step two, and see how the site will look in a browser. You are also able to see how the site will respond by resizing the browser. Jumping into the browser early rather than designing an entire site inside of Photoshop not only saves time and money, but it also gives you an idea of how your site will behave.

Research

Until this point we haven't explored typography, colors, or shapes which allowed us to focus on the content and the layout of the site. In this step I will do a bit of design research, if you do not already have an established set of design elements, for your identity. Why don't I ask about font or color before now? I want us to focus on the design itself and not base our decisions on color you prefer or a certain font you like.

Visual

Here I will put that design research to use as I create style tiles for you. Style tiles allow me to refine the aesthetics, color, shape, fonts, branding, and other interface elements without defining the layout. In addition to style tiles I may also jump in photoshop to adjust other interface details or further enhance our browser-based prototype. To learn more about style tiles see this article on A List Apart.

style tile

Style Tile - colors, typography, and other styles are decided

Style Guide

Depending on the project I may produce a basic style guide. A style guide is an HTML document that reflects the decisions about colors, typography, and other design elements . It's a collection of various elements that will be contained throughout the site. These elements may include grids, typography (headings, body copy, lists, etc) colors, links and navigation, images, and any other visual components necessary. This ensures consistency throughout the site during the initial design and for future updates.

Test

As always, I test to be sure our project is on track before moving to the next step. Testing early and often will avoid big surprises in the development stage.

04. Develop

Upon the approval of the designs created in the last step I can get started on the really nerdy stuff. I take the visual design and HTML prototypes and bring the design to life by writing semantic HTML and CSS, HTML5 and CSS3 in fact. If we determined that a CMS was desired then I'll also convert your site into the CMS at this time. I'll then migrate in the content including text, photos, audio, video, social media, etc.

develop

Semantic clean code

There's quite a bit of testing throughout this stage to keep any sort of bugs out when we go live. I typically support IE8+, Firefox, Chrome, Safari, and Opera browsers. I also test for various mobile devices. Through semantic, clean code, best practices, and rigorous testing I will be sure your site runs like a champ before we proceed to the next phase. Optimizing images, using icon fonts, minifying code, minimizing http requests, and eliminating 404s are just a few ways to speed things up.

05. Deploy

This step is where I help train you to use your new site, release our creation to the public, handoff the site to you, and where our partnership will hopefully continue. I'll provide documentation and training if needed and make sure you are comfortable with your site. When you are ready and all issues have been addressed we'll go live with the site. I'll also hand off any deliverables agreed upon.

So your site is live and you know how to use it. The work is done for now, but hopefully our partnership continues. This is only the beginning of your website and hopefully I will be able to assist you as your website grows.

I know this was quite a bit of reading, but I hope this explanation about our process here at Tin Cans & String has been helpful. If you have any questions or ways we can improve please let us know.

Discuss further with us on twitter or by contacting us.