portfolio website mockup

Download Portfolio Website Mockup

Post on 04-Mar-2016

219 views

Category:

Documents

1 download

Embed Size (px)

DESCRIPTION

This is an example of what my senior portfolio website may look like.

TRANSCRIPT

  • Courtney Staggs | Spring 2012 | IM231

    PORTFOLIOWEBSITE

  • Courtney Staggs | Spring 2012 | IM231

    Mood Board

  • Courtney Staggs | Spring 2012 | IM231

    Concept StatementCreate a list of all users that may visit your site: List the categories of work you will show:

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

    Name your intended audience:

    Describe what you need to inform and persuade them of:

    Future Clients (Employers)Fellow StudentsTeachersFriends

    IdentityMotion GraphicsAdvertisingMisc.

    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.

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

    Clients and Employers

    Obey Calandar-- Images, PDF, descriptionVoodoo Logo Design-- Images, Concepts, Description, examplesSasquatch Poster: images (front/back), description, conceptSelf Portrait Metaphor: Image, description, conceptPen Line Drawing: Original scanned image, descriptionSwiss Style Poster: Image, description, conceptsType Portrait: Image, concept, descriptionEditorial Illustration: Image, description, concept

  • Courtney Staggs | Spring 2012 | IM231

    sketches

  • Courtney Staggs | Spring 2012 | IM231

    Wireframe

    189 x 47

    Dimensions: 1024 x 768

    235 x 155

    235 x 330

    85 x 87

    84 x 18

    21 x 768

  • Courtney Staggs | Spring 2012 | IM231

    Wireframe portfolio

    189 x 4785 x 87

    21 x 768

    235 x 155

    235 x 330

  • Courtney Staggs | Spring 2012 | IM231

    Wireframe Portfolio

    189 x 4785 x 87

    21 x 768

    235 x 155

    235 x 645

  • Courtney Staggs | Spring 2012 | IM231

    Hi-fi Homepage

  • Courtney Staggs | Spring 2012 | IM231

    Hi-fi scroll example

  • Courtney Staggs | Spring 2012 | IM231

    Hi-fi Portfolio 1

  • Courtney Staggs | Spring 2012 | IM231

    Hi-fi Portfolio 2

  • Courtney Staggs | Spring 2012 | IM231

    Hi-fi Contact

    Mood BoardConceptSketchesWireframe 1Wireframe 2Wireframe 3Hifi 1Hifi 2Hifi 3Hifi 4Hifi 5

    Button 2: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 3: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 4: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 5: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 6: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 7: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 8: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 9: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 10: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 11: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12:

    Button 12: Page 1: Page 2: Page 3: Page 4: Page 5: Page 6: Page 7: Page 8: Page 9: Page 10: Page 11: Page 12: