Design Guide in Progress
Sometimes, the things you learn are hard for you to grasp. This project was one of them. Design guides are a way for aspiring web designers to put the plan for a website they create into a document we can present to clients. They hold specific information related to the design of the website. However, when designing, there are some things you need to understand first. The top item is the design principles. I have focused on the main ones within the book Universal Principals of Design by William Lidwell, Kritina Holden, and Jill Butler. Within the pages, they teach items like the rule of thirds, consistency, and progressive disclosure, all necessary to create a website design or a design in general. We spent some time on them even while making the design brief.
The Problem
I didn’t know what a design guide holds or what the purpose of it was. We followed these steps to learn this design process while creating a website from scratch. My website was solving a problem faced by readers. Books don’t have a content rating system or an easy way to find out what the book entails in terms of story. I decided to create a website that helped solve these problems.
Objectives
- Create a design guide.
- Follow the steps of concept maps, personas, site maps, wireframes, surface compositions, and prototypes.
- Have two pages of a finalized website version that makes sense to the viewer.
The Process
To start the design guide, you create a cover that clearly states what it is. This can also include the title of the website. You then design your cover based on your topic. Within my design guide in progress, the cover changed at least three times. My cover changed because when I was building the previous one, the teacher didn’t understand the concept behind my website. I changed my initial vision to something that would make more sense.
The next item to create within your guide is the Project Brief. Project Briefs are a written summary of your intention for what you are planning to develop. I had some conflicting ideas on what my website was actually about. This caused some confusion throughout the entire project. The categories within the project brief were what type of site it was going to be, the topic, content, the why of the idea, and who the audience was.
The next step was a concept map. The whole point of a concept map is to find things that relate to your topic so you can narrow down what you will focus on. It is a diagram that shows the relationships between different abstract ideas. The concept map contains a domain, nodes, and links. The domain is the topic. Nodes are the concepts. Links are how the nodes and the topic are all linked together. We started with a paper version and then made the concepts more manageable and made them into vectorized images.
One of the Nodes the teacher wanted us to focus on was Personas. Personas are the next part of the process of making a design brief. Personas are the representation of people who are coming to your site. Personas are usually based on factual evidence gained through interviewing and learning your audience's opinions. User research was not conducted for this assignment, and we based the personas on our assumptions. The personas took longer because I needed to know my website's premise. The personas changed significantly, but the final product fits well with my finalized site plan.
The next step was to create a site map for the website. The site map is a plan for what pages will be included within the finished website, and it is essential for the organization of the website. We started with sticky notes to easily rearrange how each of the pages fit with each other. Mine was color-coordinated to show the ideas that went together. As a round-robin, the class presented each of our site maps so they could either rearrange them or give feedback on what we could fix or improve.
Then, based on the feedback, we created a permanent vector version of the site map.
Wireframing is next in the line of design items to add to the design guide. There are two different versions of wireframes: low fidelity and medium fidelity. Low-fidelity wireframes are for the structure or architecture of your design. Your primary focus is the placement of content, usually created as a sketch. Medium Fidelity is the vectorized version of those lines, making them more permanent. I have two versions of the wireframes because I fixed my layout due to comments about the sites being confusing to a viewer.
After wireframes are surface compositions, which start to include design elements like typography, colors, and images, but before you can put them together, you need to decide how you will brand your website with a simple branding guide. The branding guide includes colors, logos, icons, and typography.
Surface compositions become easy when you already have a plan. We need to create two pages for the class as full surface compositions. The two I chose were the home page and the recommended book page. These two could have conveyed what the website was about to my teacher, which caused me to change most of the items we had already completed, like the project brief, personas, wireframes, and surface comps, near the end of the class.
The next step was prototyping. Prototyping is the digital click-through version your clients can walk through to understand the website's navigation. I used the free web application Invision to create my prototypes, which are a simplified click-through of my site.
Outcome
A finished and finalized version of a design guide.
What I Learned
I understand more about what a web designer does. With the knowledge I have gained through this class, I hope to create a design guide again. Even better would be working in a group to create a design guide. I also learned that no matter how finalized an idea might be, you can still adjust when necessary.
