Lesson 4 | Mapping Web Design

In lesson 4 of Mapping the Modern Web Design Process I’ve moved on to the “Content Strategy Phase” of designing a website, and what I immediately found interesting is the process of building user personas, and having in mind the different people that will find my website interesting.

“… it’s important to create user personas, a set of imaginary people that describe the end user or users of the site. Personas allow us to create user-centric designs and ensure that we focus on and emphasize with the people  we are endeavoring to reach. In practical terms, a user persona is quite similar to a character sheet in a role-playing game.”

Here’s an example below:

screen-shot-2016-12-02-at-12-53-14-pm

Essentially, this process of creating personas will help me investigate who I want to reach with the website.

After identifying the target of my website and creating the content model of my website, I then need to organize all of this information based on priority hierarchies. According to the lynda.com videos, there are two levels of hierarchies: site-wide hierarchies and individual-view hierarchies.

screen-shot-2016-12-02-at-1-17-32-pm

Here is the site-wide hierarchy tiers in order of importance. The first tier is what is usually seen when visiting a site and there for those users that are showing an interest, while the second tier is for those who want to further investigate the site. The third tier, while not less important that the first two, is prioritized least than the others because they are usually for those that are interested enough to learn more about the company.

In an individual-view hierarchy we isolate each page, the homepage, index pages, blog pages, static pages, etc. and identify what priority order the contents on that page should have. To do this, it may be a good idea to use a piece of paper, or other display device, and then stack them in the priority order from top to bottom.

After discover who my target audience (or user) is, creating the content that will go in the website, and prioritizing the most important information, it’s time to start with the layout of the page. This process is called wireframing, but shouldn’t be confused with designing. That was the emphasis when creating the wireframe of the website, it should not have any design elements. Not yet, at least because that will come later.

The wireframe of the site is the bare bones and blueprint that will help with the design elements later, devoid of any color or different font types. Essentially boxes with content devoid of visual elements. But like a blueprint, the wireframe can have annotations: arrows, lines, circles and comments that explain and provide further information about what’s going on.

When approaching how the content should show on devices, it may be more beneficial to use mobile first by using the smaller screen first then scaling up to see how the content should be prioritized and designed.

This process is used to present the client with a clear conceptual idea of the overall picture of the site before applying design elements. The wireframing process is the end of the content strategy phase.

Advertisements