Learning Target
The student uses critical-thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources.
Success Criteria
I can create a wireframe for my project using PhotoShop.
Assignment Overview
The purpose of this assignment is to help you understand wireframing.
Why
When creating a website for a client, we need to understand what content they are wanting to have on their site. That is just the beginning! For example, will there be images, videos, media to download, how much text, what is the purpose of the site, who is the audience, and many other questions that need to be asked.
Once we reach an understanding of what the client needs to have on their site, our job is to find a way to organize all that information in a way that captures the intended audience's attention and provides them with the information they need as quickly and easily as possible. If they cannot access the information they need quickly and easily, they will leave your site and go looking somewhere else.
So, how do you go about organizing all that information and showing the client what you have in mind before you start coding their site? Wireframes! This is very much a collaborative exercise. Typically, you will sit down with the client and have a conversation about what they want on their site. Once you both understand the scope of the site and the intended audience, you can begin the process of wireframing.
Wireframing is simple. All you are doing is showing the client where you intend to put things on the page so they can see if your ideas correspond to their wishes/needs. Drawing a wireframe out on paper is always the first step. It will ensure everyone is on the same page. Next, we need to make a visual representation of the hand-drawn wireframe into an image so that they can see what the site is going to look like once it has been coded. Once this image is created, we can take it to the client and get feedback. It may take a few conversations to get the layout finalized. However, this is the whole point of doing a wireframe. Can you imagine writing several hundred lines of code only to take it to the client and they not like the look of the site? You would have to start all over! No one wants that!
Once you and your client agree to the look of the site, you are ready to begin coding! The great thing about coding using the PhotoShop document you created, is that you already have all the information you need. You just need to put it all in the code. Below are the steps once you have created your digital wireframe.