Discovering the Process of Designing a Website
Over a year ago I had the opportunity to learn one method of designing a website by creating a design guide and a prototype for a portfolio website. Even though I didn’t end up using this design for my portfolio, I was able to learn one process for designing a website from a basic concept to a working prototype. This experience proved to be absolutely valuable to my career as a designer. My actual design was admittedly pretty hideous. I have learned a lot in the last year and this is a case of the journey being more important than the destination.
The Method
The methodology I learned for designing a website looked like this:
Create a Concept Model → Develop Personas → Organize a Site Map → Generate Wireframes → Produce Surface Comps → Build a Prototype
Concept Models Bring Emphasis
Good designs always start on paper. In this case the first task was to create a concept model to determine the domain and emphasis of the website. By domain I don’t mean the website’s address, but the sphere of information relating to the site’s content.
This is the fourth draft of the concept model for my portfolio website. With each iteration, the scope of my site became clearer. This concept model addresses the target audience for my site, how the site relates to my career goals, and how to showcase my talent. After sketching out a few iterations of the concept model, the next step was to create a vectorized version as seen below.
This was the first concept model I had created. Looking back at it I realize that I could have done a better job at differentiating the desires between each member in my target audience (seen in the top-left of the concept model). This cluster in my concept model lead to the next step in the design process, developing personas.
Personas Bring Focus
Personas are an essential tool for a team to make educated decisions that affect how the target audience engages with a website. Based on the audience scope I defined in my concept model, I narrowed down my target audience to three different types of users. They were professors, creative directors, and potential clients. I created a persona for each of these target audience members. One of those persona pages is featured here as an example.
Having a persona to represent the needs and viewpoints of each type of target audience member is beneficial for your design team in creating a site focused on the needs of the people you want to interact with the site. Personas give a face and a name to your core audience. Instead of saying, “What would creative directors think of this feature?” your team can say, “Would this feature handle Carmen’s needs?” This allows your team to empathize with its target audience and puts designers in the shoes of someone using their site, allowing them to design with the viewer’s needs ahead of their own.
Organizing a Site Map
Now that I had established who I was building my portfolio site for, it was time to start determining the information architecture of the site by organizing a site map. I referred to my concept model and my personas to keep in mind the scope of the site and what my target audience was looking for. I started by writing down page sections and content on Post-It notes that I placed on my white board.
By using Post-Its, I can easily move content around, throw out ineffective ideas, add new ideas, and keep things organized. I divided my portfolio site into three main pages. I color-coded each main page and used the same colors for any content or sub-pages relating to the main page. After I determined the structure for my portfolio site, I created a vectorized site map.
On the site map I also used color to more effectively communicate the content of my site. This time I had the color correspond to the type of content of each element as indicated in the legend. I made one small change to the Profile page. I changed Skills section to Resumé because I felt that if I displayed my resumé, my skills would be listed there. Now that the site structure was established, it was time to create wireframes for each of the pages.
Generating Wireframes
Again I started on paper in developing the wireframes for the site. We were taught the modern design philosophy of the mobile-first approach. I sketched out each page of the site in my sketchbook.
Before transferring my wireframe sketches to digital renderings, I established a grid for mobile, tablet, and desktop. This would ensure the content for each page would be structured in a more orderly way and the presentation would be better.
One improvement I could have made with my grid setup is if I had indicated the total width for each grid in my documentation. If I were working on a team this would be important information to other team members that I will be more mindful of including next time.
Along with creating a grid, I also created a typography guide. This was important to get in place before creating the digital wireframes because the size and shape of type can vary dramatically between typefaces. This is important to keep in mind because it affects the readability of your content. Also, type can have a big affect on the look and feel of a site.
Now that the wireframe sketches were complete, the grids for each platform established, and the typography guide finished; it was time to create digital wireframes.
The tool I used for this endeavor was Photoshop. While Photoshop works for creating wireframes, I have since found that Sketch is a much better application for doing so. When I was tasked with designing this portfolio website I didn’t own a Mac so I was unable to use Sketch. Now that I have a MacBook Pro, Sketch is my go-to tool for creating wireframes.
After I created a digital wireframe for each page I received feedback from my professor and my peers and incorporated that feedback into the next part in the process, producing surface comps.
Surface Comps — More Than Making It Look Pretty
Creating surface comps is perhaps my favorite stage in designing a website. This is the first part of the process where the design starts to feel like a real website. I like how all of the work leading up until this point is reflected in a visual way. The last step before I converted my digital wireframes into surface comps was developing a color palette for the site.
I decided to go with monochromatic shades of blue for my portfolio site. I used a hue of 190 and modified the saturation and brightness to achieve different shades.
I chose blue because in American culture it signifies trust, security, and intelligence. It’s also my favorite color so I feel that it signifies my personality on some level. For the navigation bar, I used black for the background. Also, the body copy and display copy are both black for ease of readability.
Now that my color scheme was figured out, it was time to create the surface comps.
With the surface comps completed it was time to put them into action in a working prototype.
Building Prototypes Reveals Usability Issues
I uploaded all of the surface comps to Invision, a web tool for creating functional prototypes. I built a prototype for each platform the portfolio site was designed to operate on; mobile, tablet, and desktop.
The nice thing about Invision is that it allows you to not only test your prototype out on a desktop computer but it allows you to test on mobile devices as well. Utah Valley University has a lab for Digital Media students to simultaneously test prototypes out on a wall with around twenty mobile devices. During my testing in the lab I discovered that the body copy on my site was too small on most phones. Testing your prototype on actual devices is crucial to spotting errors and reaching solutions before you get too far into the development process, making it easier and quicker to implement changes.
Concluding Thoughts
Throughout my time studying Digital Media at Utah Valley University I have learned a lot about design principles, best practices, and using the technology adopted by the web industry. This project taught me one way of designing a website from a simple concept to a functioning prototype. I now have a much better understanding of the steps it takes to design a website.
Russell Andlauer is a student in the Digital Media program at Utah Valley University in Orem, Utah, studying Interaction & Design. The following article relates to the Portfolio Design Guide in the DGM-2271 course and is representative of the skills learned.
