Important Notice:

On July 31st, 2017 the Digital-Tutors library will be retired along with Digital-Tutors concurrent licensing. Effective August 1, 2017 any active group plans will be redirected to www.pluralsight.com. Each group plan will receive one individual user license on Pluralsight for each active Digital-Tutors license. Please contact your account representative for any additional questions.
User Experience Flow Modeling for Portfolio Websites in Photoshop
See Details
Released Feb 28, 2015
Evgeny Onutchin

Guest Tutor

Evgeny Onutchin
In this Photoshop tutorial we'll learn how to build a visitor persona profile and apply the information gained to the website design in context of user-centered and task-centered designs.

We'll look at the steps required to create a low-fidelity website flow using wire framing techniques. We'll start from defining the scenario and information blocks using Photoshop. Along the way, we'll build the visitor behavior profile, expectations and goals.

By the end of this Photoshop training, you'll have a solid understanding of workflows that are required to create the website flow model that's ready for prototyping.
Introduction and project overview
1

Introduction and project overview

 
00:57
Understanding user experience
2

Understanding user experience

 
07:13
Analyzing the scenario
3

Analyzing the scenario

 
06:23
Outlining the persona behaviour
4

Outlining the persona behaviour

 
06:08
Defining anticipation points for the end user
5

Defining anticipation points for the end user

 
07:05
Considering human senses in experiences and emotions
6

Considering human senses in experiences and emotions

 
07:48
Using information blocks to conceptualize content
7

Using information blocks to conceptualize content

 
08:42
Blocking the profile, experience and call to action
8

Blocking the profile, experience and call to action

 
08:21
Creating positive experiences
9

Creating positive experiences

 
06:21
Wireframing the website flow
10

Wireframing the website flow

 
09:23
Extending the wireframing for the hybrid concept
11

Extending the wireframing for the hybrid concept

 
09:28