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.
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.
- Complete the Questionnaire
- Completed Questionnaire
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:
- What problem are you trying to solve? (A good article to read to help you answer that question!) Link went bad but I am hoping they update their page to bring it back because it was good content. So click and see if you get lucky! If you don’t get lucky, you can read this one.
- Who is the customer?
Begin getting in the mindset of the target audience.
- Determine your method / strategies to get inspired.
- Create a Pinterest Board or keep a sketchbook of your ideas.
- Idea Generation
- Answers to Questions
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?
- Sketch Paper
- Digital Wireframe Tool
- UI Stencils: Quick Framer | Pixel Ruler (Located on the cabinet in front of room, next to book shelf)
- Browser Dry Erase Board | iPad Dry Erase Board (Located on the cabinet in front of room, next to book shelf)
- Wireframe with Content List
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?
- Gather / Write Content
- Markup the Content with HTML only
- Content marked-up with HTML
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.
- Logo Development
- Create 2 Tiles to present to the client / boss. Google Style Tiles and go to the images tab to see more examples of Style Tiles.
- Meet with client / boss to show them wireframe and style tiles. (Repeat this process until you have an acceptance from the client / boss)
- If you will be developing an application, you will need to wireframe the process. How is the application going to function.
- Logo, if required for the project.
- Style Tiles
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.
- Web Developer Toolbar – Click on the Resize button and you can check show Window Size or Show Window Size in Title. This will help you determine where you need to set breakpoints.
- Determine the folder structure you will use for the project. Create the structure.
- Obtain FTP and database connection information.
- Write the code for the prototype. Remember start with small screen and size up for breakpoints.
- Adhere to company coding standards.
- Meet with client / boss to get approval on prototype. (Repeat this process until you have an acceptance from the client / boss – this might mean revisiting prior steps)
Once you have approval from the boss / client on the prototype, begin coding the rest of the site.
- Create any forms or functionality for the site.
- Walk through every single page and make sure everything is in working order and that nothing is missing visually or functionally.
- Transfer to live / production server.
- Perform a usability test.
- Perform browser compatibility checks.
- Apply SEO strategies.
- Install Google Analytics.
- Check website performance by running page speed tests.
- Have the client review and update the website with corrections.
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.
- Determine how backups / updates / maintenance will be handled.
- Train the client on how to use the Content Management System.
- Provide the client with a style guide.
- Check in with the client a month after launch to make sure everything is going smoothly.
- Style Guide