ART 285 Interface Design Studio

PORTFOLIO SITE:

Portfolio Site Planning

Checklist (Optional)

Identify Precedents (visual and coded)
- Precedent 1
- Precedent 2
- ...
Gather and prepare content
- Project 1
  - Featured Image
  - Thumb Image
  - Title
  - Subtitle
  - Description
  - Meta info (e.g. medium, category)
  - Process evidence/documentation
  - Highlighted challenges/solutions
  - ...
- Project 2
  - ...
  - ...
  - ...
- ...
Code, test, code, test, ... (repeat)
- Test 1 (description goes here)
- Test 2 (description goes here)
- Test 3 (description goes here)
- ...

Portfolio Site Development

Coded Site (Required)

Portfolio Site Draft 1 (Home Page + Minimum of 1 Portfolio Entry)
Portfolio Site Draft 2 (Home + About + Minimum of 2 Portfolio Entries)
Final Portolio Site (All Pages)

General advice:

Be mindful and thorough by making meaningful content, UX, and UI decisions. Be sure to explore multiple different patterns and ways of presenting your work.

MAIN PROJECT (PRODUCT):

Web Project

Definition Phase

Project Brief

Draft Phase

Conceptual Plans
- Site Map
- Lo-Fi UX Wireframes (e.g. Adobe XD Prototype)
- Style Tiles (Color Study, Type Study, etc

Design Phase

Round 1
- R1 Hi-Fi UI Design A
- R1 Hi-Fi UI Design B
- R1 Hi-Fi UI Design C
- ...
Round 2
- R2 Hi-Fi UI Design D, D1, D2, ...
- R2 Hi-Fi UI Design E, E1, E2, ...
- ...
Round 3
- R3 Hi-Fi UI Design F, F1, F2, ...
- ...

Development Phase

Version 1:
- Product First Draft
- Portfolio Entry First Draft
Version 2:
- Product Second Draft
- Portfolio Entry Second Draft

Delivery Phase

Final Product
Final Portfolio Entry

Tests:

Code Test #1
Code Test #2
...

Print Project

Definition Phase

Project Brief

Draft Phase

Conceptual Plans
- Sketches
- Lo-Fi Wireframes/Diagrams
- Style Guide (Color Study, Type Study, etc

Design Phase

Round 1
- R1 Visual Mockup Design A
- R1 Visual Mockup Design B
- R1 Visual Mockup Design C
- ...
Round 2
- R2 Visual Mockup Design D
- R2 Visual Mockup Design E
- ...
Round 3
- R3 Visual Mockup Design F
- ...

Development Phase

Version 1:
- Product First Draft
- Portfolio Entry First Draft
Version 2:
- Product Second Draft
- Portfolio Entry Second Draft

Delivery Phase

Final Product
Final Portfolio Entry

Tests:

Print Test #1
Print Test #2
...

Motion Project

Pre-Production Phase:

Project Brief
Conceptual Plans
- Writing/Planning
  - Synopsis
  - Outline
- Pre-Visualization
  - Storyboards
  - Story Reel

Production Phase

Round 1
- R1 Visual & Audio Assets
- ...
Round 2
- R2 Visual & Audio Assets
- ...
Round 3
- R3 Visual & Audio Assets
- ...

Post-Production Phase:

Version 1:
- First Cut/Rough Draft
- Portfolio Entry First Draft
Version 2:
- Second Draft
- Portfolio Entry First Draft

Final Product
Final Portfolio Entry

Tests:

Animation/Motion Test #1
Animation/Motion Test #2
...