Midterm Worksheet_
This is the worksheet for my midterm project, which is my portfolio site. I'm supposed to write down
each design decision across the six steps. What problem I was solving, what I found from research, who the site
is for, and how it went from wireframes to an actual website.
Course — CD Foundations: Interaction (PSAM 1028)
Project — Portfolio Website
Week — 3
Status — 6 / 6 steps done
worksheet.md — design process log
01Develop Your Idea
Develop Your Idea
The problem sounds simple but it took me a while to pin down. I need a portfolio that introduces me, Jason Guo,
an Integrated Design student at Parsons. I work across game design, interaction design, and AI stuff. The thing
is, a portfolio can't just be a grid of pictures. It has to prove I can actually build things, and it has to feel
like mine.
Since I'm my own client here, the idea has to be worth the time. I kept coming back to one thing: make it
look like a terminal. A command line. It shows I can code the second it loads, it's fast on any screen, and it
gives me a style I can grow into later.
- What it is: a single page with an intro, four areas of work, and a list of my coursework.
- What it isn't: a template. The way it works is the design.
02Discovery & Research
Discovery & Research
I started with the first assignment, a deep look at Bruno Simon's portfolio.
That's the one where you drive a little car around a 3D world. It won
Awwwards Site of the Year in 2019.
- The main thing it taught me is that a portfolio should be something you play with, not something you
scroll through. The site itself is the proof of the work.
- Most portfolios I looked at are basically the same. Squarespace or WordPress, a grid of images,
someone's name on top. They all blend together.
- The trade-off I kept noticing is that full 3D looks great but it's heavy and slow and not great for
accessibility.
So my conclusion was: differentiate through the interface and the identity, not through a heavy 3D thing.
A terminal loads fast but you still can't mistake it for a template.
03Target Your Audience
Target Your Audience
I mapped out three kinds of people who would visit, and tried to make the site work for all of them.
- A recruiter or creative director. They need to figure out my skill level fast. So the proof is right
up front, the hand-coded interface, instead of buried in a resume.
- Another developer. They want to see how it's built. The clean hand-coded HTML and CSS is the message
there.
- A professor or classmate. They want a clear record of my process and range. The assignments page and
this worksheet are for them.
One site, three audiences. What they all need is the same thing anyway: clarity, speed, and something
they'll remember.
04Introductory Framing & Call to Action
Introductory Framing & Call to Action
The site opens as a booted-up terminal. The first thing you see is a command line, and the intro line says who I am.
- The intro: hi, I'm Jason Guo, a designer and creative technologist studying Integrated Design at
Parsons. It sits inside a terminal prompt, so the look and the words match.
- Four areas: Design Innovation, Interaction Design, AI Creation, Story Systems. These are the actual
directions my work goes.
- The call to action is basically go look at my assignments and contact info. The terminal invites you
to poke around like you're using a tool.
05Inspiration & Concepts
Inspiration & Concepts
I came up with two concepts, picked one to build now, and kept the other one as where I want to go later.
- Concept A, the terminal. Dark background, neon green monospace, scanlines. It feels like
developer/hacker/craft. This is the one I built for the midterm.
- Concept B, a Three Kingdoms HD-2D world. Pixel characters on 3D-ish scenes, like Wandering Sword, the
game I grew up with. My projects become cities on a map, colored by faction. Shu red,
Wei blue, Wu green,
warlords grey. This is the long term goal.
I shipped Concept A because it's fast and usable and I could finish it on time. Concept B is documented here
so the portfolio has somewhere to go, instead of being a dead end.
06Wireframes & Prototypes
Wireframes & Prototypes
I turned the plan into a wireframe and then rebuilt it in real HTML and CSS. So the prototype is the start of
the actual site, not a throwaway.
- Structure: one page with a header, hero, four cards, and an assignments list. I used semantic HTML5
tags so content and form stay separate.
- I prototyped straight in HTML and CSS instead of a design tool. That was the professor's advice and it
turned out right, nothing gets lost in translation.
- Responsive is handled with media queries that re-flow the grid from phone to desktop.