Project 1: Portfolio Website Design

Web Portfolio Design

Course Competencies from GWDA202 Syllabus addressed by this project:

Define the principles of Interface Design

  • Describe the principles of design in the context of visual interfaces
  • Describe the relationship between user needs and interface design

Apply the principles of design to interfaces

  • Create hierarchies with layout, color, type, and image
  • Combine design elements to communicate the tone and message

Apply principles of usability to the design of interfaces

  • Address user needs
  • Create visual hierarchies to guide users through page content
  • Develop wayfinding strategies

Solve user-centered design problems with interface design 

  • Combine the principles of usability and design to create effective interface systems

Creative brief:

Client: You. A newly graduated designer needing an entry level position in the design field.

Challenge: You need an online vehicle which delivers to possible employers the images of and narratives for your design projects.

Purpose: to communicate the research, process and final product of your projects. Art directors and team leads want to see the quality of your thought and the process you underwent to create your projects. Human resources, art directors and team leads want to see your resume, access your linkedin page and to contact you via email.

Solution: A website designed to be on brand with your business cabinet (business card, printed resume) which uses a responsive approach (mobile, desktop breakpoints) and is easily navigated and follows the user interface heuristics.

Deliverable: A case study which details your research and process. Your case study will culminate in a link to an XD prototype of your portfolio website.

Let’s look at the Portfolio Requirements first

Your business cabinet: resume, business card and website. These will all be of one composition.
This is a first draft/preplanning stage of your web portfolio, and as such you are developing a Portfolio Piece. The project you are submitting is a case study, detailing the steps taken to arrive at this solution, culminating in a hi fidelity prototype in XD.


  • a thorough case study which documents all process and research steps of project development
  • a design that captures something essential about your work and personality
  • a design that has a contemporary feel and contemporary functions.
  • demonstrates via mockup the key features of your website: resume page, gallery of projects,
  • a well designed category structure
  • a design that has a powerful, well considered visual hierarchy.
  • Prototype of the key pages of your site which demonstrates your design program. Prototyped on two devices: mobile, desktop. 

Web site design feature checklist:

  1. Landing page- Gridded thumbnails of at least six projects.
  2. Navigation: An organized method of navigating to content: projects, resume, contact.
  3. Demonstration of the user path to one of your projects. In your prototype you will demonstrate the path from the landing page and many options (most of which are dead) and the navigation to one of your projects. Pick your most complete or advanced work to land on.
  4. That one project page must show process and final and be accompanied by a written narrative formatted for the page: Tell the story of your project. All projects shown on your portfolio site when graduating will have to show a narrative. Practice this now, and create your projects accordingly.
  5. A resume page containing your resume formatted for the website page. If you do not have a working resume currently, mock up one for the purposes of communicating your design. Review example resume available from example and inspiring sites.
  6. Your resume will be made available as a pdf for download- include an acrobat icon to indicate this on your resume page.
  7. A linkedin page is necessary for today’s professional. Include a linkedin icon on your resume page or other suitable location. As with all of the above items- analyze successful portfolio websites for best practices and then employ them on your site. Document this research in your case study.
  8. A means of contacting you.
  9. Worth exploring: ‘pinning’ (absolute positioning) items which remain static (navigation) while user scrolls a page horizontally or vertically.
  10. If your website will involve animated transitions between pages or anchor points, mock that up to the extent that your prototype communicates the transitions. See past examples.
  11. In general, focus on design: layout, color, texture, consistent navigation. Overall tone, vibe
  12. Don’t create a site to show the work you have now. That may be very little at this point, and is not abnormal. Instead, create a site to demonstrate the work you will have at the end of your student career.  
  13. Research the Portfolio Requirements for your program.

Specifications for Preliminary Critique Due Week 4.

Project case study will be submitted as a 8.5” x 11” .pdf print quality (though not printed) case study in landscape format, under 10 mb in size. It will include, in this order:

  1. Adapted Creative BriefAdapted from above.
    Use this document as a springboard to express your intent.
  2. Inspiration. Analyze design portfolio websitess that inspire you. What are you looking at? Explain which methods and functions are effective and worth adopting in your project. Screen grabs from at least three influential sites. Include URL, preferably hotlinked. Each must be accompanied by a coherent written analysis and explanation for its inclusion.
  3. A site map. Use or Illustrator.
  4. thumbnail process sketches, scanned and included in a legible form. Adjust your images in Photoshop for legibility and clarity. Every element communicates your level of care.
  5. Wireframes, low fidelity of key pages with division dimensions in pixels or percentages.
  6. High fidelity prototype of landing page/home page.
    Dimensions: Desktop: 1280px 800px, Mobile:    414px x 735px

Size Specifications:

Case Study: 8.5” x 11” .pdf print quality (though not printed) case study in landscape format, under 10 mb in size.

Prototype dimensions, available as XD presets:

Desktop: 1280px 800px
Mobile:    414px x 735px

Specifications for Portfolio Project Due Week 5

Project will be submitted as a it will include, in this order:

  1. Adapted Creative BriefAdapted from above.
  2. Inspiration. A page of websites you draw inspiration from and written analysis. What elements and practices will you adopt from these inspiring sites?
    Screen grabs from at least three influential sites. Include URL, preferably hotlinked.
  3. A site map. Use or Illustrator.
  4. Hand drawn wireframe sketches, scanned and included in a legible form.
  5. Wireframes, low fidelity (also called redlines) of key pages with division dimensions in pixels or percentages. You can export png files from XD (file/export) and place them into your case study. Preserve an earlier file containing a version of your prototype in Wireframe. Develop your High fidelity version in a copy of that .xd file for #8, below. 
  6. A brief style guide which defines typeface, size and color choices in hex values.
  7. A page with a the heading “Preliminary Critique Notes“. Format the following:
    Topic, Problem/observation, Solution. List of student names who provided feedback. (And the instructor if you received feedback)
  8. Sources for the key graphics and textures that are borrowed must be cited in the pdf submitted. Cite yourself for work images used.
  9. High fidelity prototype(s) created in Adobe XD.  The case study will include hotlinks to the desktop and mobile prototypes hosted by Adobe.
  10. Native file(s) submitted with project: An InDesign package, native XD file(s). You may have separate files for desktop and mobile.