Francis Tuttle Web Design and Development

Our Workflow

Every company has their process of developing a website. This is our process and it is constantly being updated to reflect new technology or become more efficient. You will need to follow this process when starting any of your projects. In the real world, everyone’s process will be a bit different. Individuals do what works best for them as do companies.

All deliverables should be submitted in your weekly status report.

Discovery

This stage is about information gathering. You will begin to understand more about the client’s business / project. Who are their competitors? What are their goals?

1. Have Your Client Complete a Questionnaire

This is something you can do onsite with them or have them complete it and send back to you. There are several questionnaires available on the Internet. We have modified Clear Left’s Questionnaire to meet our needs.

When completing the questionnaire, since we don’t have “real” clients. You will need to complete the questionnaire as if you were the client. This will help you think like a company and really understand the businesses goals.

Tools:

Process:

  1. Complete the Questionnaire

Deliverables:

  1. Completed Questionnaire

2. Brainstorming

Get inspired! Check out the competition and browse inspirational sites. You could create a Pinterest Board to save ideas. Some individuals might get inspired from being outside. Everyone’s creativity works differently. Sometimes we need to complete this step away from work so we can get truly inspired! Take time to notice color, typography, features/functionality and layout.

Answer the following questions:

Begin getting in the mindset of the target audience.

Tools:

Process:

  1. Determine your method / strategies to get inspired.
  2. Create a Pinterest Board or keep a sketchbook of your ideas.

Deliverables:

3. Content Inventory & Wireframe

You will need to list the content you want to have on the site. Make sure to number each item so that when you build the Wireframe you can identify what content is going where.

Next you will create the wireframe. A wireframe is black and white, no color and it is just boxes or circles to highlight the placement of items. The wireframe is to help you begin identifying where the content will be placed. Some individuals like to sketch this on paper and some like to create this digitally. Again, this is your preference. Since wireframing isn’t too difficult to generate, you will want to create a wireframe for at least two breakpoints. On your wireframe, you will want to make sure to add your content list and label the items on your wireframe.

Remember that question What problem are we trying to solve? Are you solving that issue with your wireframe layout?

Tools:

Process:

  1. Complete the Content List
  2. Wireframe (Example | Example)

Deliverables:

  1. Wireframe with Content List

Design

1. Designing in Text

This is going to be one of the toughest steps! Clients usually do not provide content — they expect you to do it! In reality, you are not the subject matter expert, they are. You wil need to give clients deadlines for providing this content. If they do not meet the deadline, charge them for every week they are late. Clients understand money!! This will help them deliver the content to you. At some point, you might consider working with a Copywriter. They can help you take the clients content and make it a bit more web friendly. Again, there is tons of advice and resources available on the Internet for web content writing.

In this stage you will gather all the content from the client. Since we don’t have real clients, you will need to develop the content for the website. Content means text and logo.

Gather content from the client based off the content list. In our case, you might have to write the content.

You can NOT develop a website if you do not know the content that you have to work with. How will you build the navigation if you don’t even know what content you will have?

Process:

  1. Gather / Write Content
  2. Markup the Content with HTML only

Deliverables:

  1. Content marked-up with HTML

2. Style

This is where the fun begins! You get to start applying your design skills (color and typography). Photoshop is not responsive and we can not create a layout for every single device in the market. Nor do we know what device will be coming out tomorrow. If we tried to do this, we would never get the site launched!

To communicate with our clients, they want to see something visually. If we aren’t creating mockups in Photoshop what can we show them? Well we can show them our wireframes and our Style Tiles.

If a client does not have a logo, you will need to create a logo or “contract” the logo design out to a peer.

Tools:

Process:

Deliverables:

3. Prototype

Once you have approval from the boss / client, begin coding a basic prototype of the site. This means that you don’t have to have full functionality. It is a discussion visual to use with your client. The basic prototype will be one page and be basic HTML and CSS and all links should be dummy links.

Remember you are not designing for devices! What device is coming out tomorrow? You don’t know and you need your site to be future friendly. Start designing for a small screen first and then design up by setting break points where the content needs adjusting. Remember fewer breakpoints are easier to manage.

Tools:

Process:

Deliverables:

 4. Test

Once you have approval from the boss / client on the prototype, begin coding the rest of the site.

Tools:

Process:

Deliverables:

Deliver

1. Launch

It is time to officially launch the website. You will hand the website over to the client. Many of these steps we will not complete in class, unless directed by the boss.

Process:

Deliverables:

High Five! David passed JavaScript 1.5 Fundamentals