Portfolio Website Mockup

Page 1

Mood Board Concept Sketches

PORTFOLIO WEBSITE

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Mood Board

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Concept Statement

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Create a list of all users that may visit your site: List the categories of work you will show: Future Clients (Employers) Fellow Students Teachers Friends

Identity Motion Graphics Advertising Misc.

What will each of those users want to see in order to enjoy their visit to your site?

Concept Statement:

My design ability by viewing my portfolio Understand the kind of designer I am and what type of work I create

Name your intended audience: Clients and Employers

Describe what you need to inform and persuade them of:

Obey Calandar-- Images, PDF, description Voodoo Logo Design-- Images, Concepts, Description, examples Sasquatch Poster: images (front/back), description, concept Self Portrait Metaphor: Image, description, concept Pen Line Drawing: Original scanned image, description Swiss Style Poster: Image, description, concepts Type Portrait: Image, concept, description Editorial Illustration: Image, description, concept

Courtney Staggs | Spring 2012 | IM231

While creating my portfolio website, I want potential clients to recognize who I am as a designer without question. The first thing they will recognize is my best work, which will have hiearchy over everything else on the main page. With my website, I want all of my information to be easy to reach from the home page. I will display 7 examples of my designs which will all be available at a first glance. Each of my portfolio pieces will be available first hand, which they can enlarge to get a better understanding of what each peice represents. My logo and my name will be in the upper left hand corner where I will also have my tagline, “Be Ambitious.� Not only will my future clients recognize the creativity from my work, I also want the entire webpage to have a design element that will give my audience an entire atmosphere of creativity, yet still maintaining simplicity. I want my audience to ease through my webpage, without any difficulty. I want them to feel comfortable, and feel entertained at the same time. Simplicity is important when creating my webpage because I do not want the design of the webpage to draw away from what is important: my portfolio. My navigation will be simple, and to the point with only a few other pages which will include my resume, and contact information.


sketches

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Wireframe

Mood Board Concept

Dimensions: 1024 x 768

Sketches

Low-Fi 1

85 x 87

Low-Fi 2

189 x 47

235 x 155

84 x 18

Low-Fi 3 235 x 330

High-Fi 1 2 3 21 x 768

4

5

Courtney Staggs | Spring 2012 | IM231


Wireframe portfolio

Mood Board Concept Sketches

Low-Fi 1

85 x 87

189 x 47

235 x 155

Low-Fi 2 Low-Fi 3 235 x 330

High-Fi 1 2 3 21 x 768

4

5

Courtney Staggs | Spring 2012 | IM231


Wireframe Portfolio

Mood Board Concept Sketches

Low-Fi 1

85 x 87

189 x 47

235 x 155

Low-Fi 2 Low-Fi 3 235 x 645

High-Fi 1 2 3 21 x 768

4

5

Courtney Staggs | Spring 2012 | IM231


Hi-fi Homepage

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Hi-fi scroll example

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Hi-fi Portfolio 1

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Hi-fi Portfolio 2

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Hi-fi Contact

Mood Board Concept Sketches

Low-Fi 1 Low-Fi 2 Low-Fi 3 High-Fi 1 2 3 4

5

Courtney Staggs | Spring 2012 | IM231


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.