Portfolio Planning Prompts

Subject: #Hashtag Cyberstar — Day 5

Wot this is: A set of questions & prompts to guide your responses to Project 2. Use these to reflect alongside your sketches, notes etc. whatever format works for you.

Project Scope & Goals

Who is this site for?

Describe your target audience. Be specific! Not "everyone" — who specifically will find this site useful or interesting? What do they care about? Where do they hang out online?

"This site is for indie game developers and digital artists who appreciate experimental web design and want to see my work in interactive media."

What is the primary purpose?

What do you want visitors to do or feel? What action should they take? Think about the one thing your site needs to accomplish — the rest is secondary.

"To showcase my interactive design work and make it easy for potential collaborators to contact me."

What will the site include?

List the pages or sections you're planning. Keep it realistic — you have 10 days to build this.

  • Page/Section 1 — e.g., Homepage with featured projects
  • Page/Section 2 — e.g., About page with bio & links
  • Page/Section 3 — e.g., Work page with project case studies
  • Page/Section 4 — e.g., Contact or links page

What will the site NOT include?

Be clear about what's out of scope. This helps you stay focused! Saying "no" to things is a design decision too.

"No blog, no e-commerce, no complex animations (keeping it simple and fast)."

Key Features

What specific features or interactions are you planning? Think about what you covered in Days 1–4 — responsiveness, accessibility, interactivity, meta tags, links pages…

  • Feature 1 — e.g., Dark mode toggle
  • Feature 2 — e.g., Filterable project gallery
  • Feature 3 — e.g., Accessible keyboard navigation

Personal Motivation

Why are you making this specific site? Not a generic answer like "I like design" — the real reason. What personal experience, interest, or goal drives it? Be honest.

"I've been creating digital collages for the past year and posting them on Instagram, but I want a space where I can present them without the algorithm deciding who sees them. I also want to connect with other artists who work with found imagery."

Inspiration & References

💡 Link to sites that inspire you. Explain WHAT you like and WHY. Give credit where it's due! Think back to the sites we explored — PersonalSit.es, Neocities, the artists we looked at. What resonated?

Visual Inspiration (at least 3 sites)

For each site, consider:

  • What do you like? — Be specific: layout, typography, interaction, colour, a particular page or detail
  • Why is it relevant? — How will this influence your site? What will you borrow, adapt, or react against?
  • Include a screenshot — Add an image of the site (or a specific detail) to your planning notes

Aesthetic Movement / Design Philosophy

Are you drawing from a specific aesthetic movement? Brutalism? Vaporwave? Y2K? Corporate minimalism? Dark academia? Something else entirely? Or are you creating your own hybrid? You don't have to pick a label — but thinking about this helps you make consistent choices.

Shibboleths & Signals

What design choices will signal to your intended audience that this site is "for them"? What visual codes or cultural references will you use? And — honestly — who might feel excluded by those choices? Is that intentional?

Ethical Considerations

What dark patterns will you avoid? How will you prioritise accessibility? What values will your design communicate — intentionally or not? Remember: design is never neutral.

Site Structure & Wireframes

💡 Use the ASCII Wireframe Tool to create these, or sketch them by hand. The point is to think about structure before you start coding. Wireframes are ugly on purpose — they're about layout, not looks.

Homepage Wireframe

Sketch or create an ASCII wireframe of your homepage. What goes where? What's the visual hierarchy?

Example:
+----------------------------------+
|  MY NAME                         |
|  [Work] [About] [Contact]        |
+----------------------------------+
|                                   |
|  =============================   |
|  Welcome! I'm a designer.        |
|  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   |
|                                   |
|  Featured Projects:              |
|  +-------------+ +-------------+  |
|  |   (img)     | |   (img)     |  |
|  | Project 1   | | Project 2   |  |
|  +-------------+ +-------------+  |
+----------------------------------+
                    

Work/Projects Page Wireframe

How will you display your work? Grid? List? Single-scroll? Think about how many projects you'll show, and how much detail each one needs on this page vs. on its own page.

About Page Wireframe

What goes on your About page? Remember the "About your About" exercise — your 3 sentences, your image, your links. How will you lay these out?

Navigation Structure

How will users navigate between pages? Traditional nav bar? Side menu? Something experimental? Think about what happens on mobile — will it collapse into a hamburger? Stay visible? Disappear?

Wireframe Evolution

How did your wireframe change from your first sketch to what you have now? What did you try that didn't work? What surprised you? Be honest about your process — this isn't about having the perfect plan from the start.

"I originally wanted a sidebar navigation but realized it would take up too much space on mobile. I also tried putting my projects in a masonry layout but the ASCII wireframe showed me it would be too chaotic, so I went with a simple grid instead."

Paper Prototype

💡 Create a physical paper prototype of your homepage. Draw it by hand, photograph it, and include the image in your planning document. Drawing forces you to think about layout & hierarchy before you touch any code.

Your Paper Prototype

Draw your homepage layout on paper. Include: header/nav, main content areas, footer. Don't worry about making it pretty — focus on where things go and how big they are relative to each other. Photograph it and add it to your planning notes.

About Your Paper Prototype

Describe what you drew. What are the main sections? How did you organise the hierarchy? What did you learn from drawing it by hand that you wouldn't have learned from just thinking about it?

"I drew a simple three-column layout with a large header. Drawing by hand made me realise I was trying to fit too much in the header, so I simplified it to just my name and three nav links. I also realised my project thumbnails needed to be bigger to be impactful."

Differences from ASCII Wireframe

How is the paper version different from your ASCII wireframe? What changed when you drew it by hand? What did you notice about proportions, spacing, or hierarchy that the wireframe didn't capture?

"The ASCII wireframe was more about structure, but drawing it made me think about actual proportions. I realised my sidebar was way too wide in the wireframe, and my images needed more breathing room."

What You'll Change When Coding

Looking at your paper prototype, what will you adjust when you actually build this? What works on paper but might not work on screen?

"I drew really thick borders around everything, but I think that'll be too heavy on screen. I'll probably use subtle borders or just spacing instead. I also drew my nav vertically but I'll make it horizontal for desktop."

Typography Exploration

💡 Test at least 2–3 font combinations. Use real fonts you can actually implement — Google Fonts, system fonts, etc. Consider how your visitors will read your text. Not just how it looks — how it feels.

Option 1

This is a Heading (Georgia)

This is body text. It should be easy to read and comfortable for longer paragraphs. The quick brown fox jumps over the lazy dog. 0123456789.

This is smaller text for captions or metadata.

Option 2

This is a Heading (Courier New)

This is body text. It should be easy to read and comfortable for longer paragraphs. The quick brown fox jumps over the lazy dog. 0123456789.

This is smaller text for captions or metadata.

Option 3

This is a Heading (System Sans-Serif)

This is body text. It should be easy to read and comfortable for longer paragraphs. The quick brown fox jumps over the lazy dog. 0123456789.

This is smaller text for captions or metadata.

For each option, ask yourself:

  • Why this font? What feeling does it convey?
  • Is it readable at body text sizes — on both desktop and mobile?
  • Does it match the tone of your site & your audience?
  • Does it have enough weights (bold, regular, italic) for what you need?

Final Typography Decision

Which option are you going with and why? How does it align with your site's purpose and audience?

Typography Mistakes & Learning

What font combination did you try that looked TERRIBLE? What made it not work? What did you learn from testing different options? Be specific about what failed and why — this is valuable information.

"I tried pairing Comic Sans with Times New Roman because I thought it would be playfully ironic, but it just looked messy and hard to read. I learned that mixing serif and sans-serif fonts needs more thought about weight and scale, not just 'different = interesting.'"

Color Palette

💡 Use the Colour Contrast Checker to test your combinations! Accessibility is not optional — it's justice. Make sure your text passes WCAG AA at minimum.

Your Colours

Choose your primary, secondary, and accent colours. For each one, note:

  • The hex code — e.g., #2c3e50
  • What it's for — Background? Text? Links? Buttons? Highlights?
  • The contrast ratio against its paired colour — does it pass WCAG AA?

Here are some starting palettes to test against — change the background colours in your own version of this file to preview your choices:

Primary: #000000
Use: Background / Text
Contrast: 21:1 ✓
Secondary: #FFFFFF
Use: Background / Text
Contrast: 21:1 ✓
Accent: #CCCCCC
Use: Replace with yours
Contrast: Check yours!

Colour Rationale

Why these colours? What mood or feeling do they create? Are there cultural associations you're drawing on — or avoiding? Do they align with your audience and your aesthetic movement?

Accessibility Check

Test every text/background combination and record the results:

  • Body text on page background → ratio? PASS / FAIL?
  • Link colour on page background → ratio? PASS / FAIL?
  • Button text on button background → ratio? PASS / FAIL?
  • Any light-on-light or dark-on-dark situations → ratio? PASS / FAIL?

Colour Failures & Adjustments

What colour combination FAILED the contrast test? What did you have to change? How did that affect your design? Be honest about what didn't work — it shows you actually tested.

"I wanted to use light gray text (#999) on a white background because it looked 'minimal and clean,' but it only had a 2.8:1 contrast ratio and failed WCAG AA. I had to darken it to #666 which I thought would look too harsh, but actually it's way more readable and I like it better now."

Honest Reflection & Self-Assessment

Annotated Work-in-Progress Screenshot

💡 Take a screenshot of your work-in-progress landing page (or another 'indicative' page) that shows your structure & design choices — colour, font, image treatments — even if it's just HTML with unpolished CSS. Annotate it with arrows, labels, or notes explaining your thinking. This shows your process, not just the result.

Include an annotated screenshot in your planning document. You can annotate it with image editing software, draw on it with Preview/Paint, or print it, scribble on it, and photograph it. Whatever works.

About Your Screenshot

Explain what we're looking at. What stage is this at? What have you built so far? What are the annotations pointing out?

"This is my landing page with just HTML and basic CSS. The red arrows show where I'm planning to add my project grid. The note at the top explains why I chose a centred layout instead of full-width. The question mark is where I'm not sure if the navigation should stay or move to a hamburger menu on mobile."

What the Screenshot Reveals About Your Process

What does this screenshot show about how you work? What decisions have you made? What are you still figuring out? Be honest about where you are in the process — not where you think you should be.

"This shows I'm focusing on structure before styling, which is different from how I usually work (I normally start with colours and fonts). The annotations show I'm thinking about mobile-first design, even though I haven't coded the responsive parts yet."

Peer Review

💡 This section will be completed in class during the peer review session.

After your peer review, note:

  • Reviewed by: Who looked at your work?
  • One thing that works well: What did they respond to positively?
  • One question or concern: What did they flag?
  • Your response: How will you address their feedback? What will you change — or keep?
💡 The rest of this section is about being honest with yourself & your instructor. There are no wrong answers — we want to know what you're actually thinking and feeling about this project.

What I'm Confident About

What part of this plan feels solid to you? What are you excited about? What do you think will work well?

"I'm confident about my colour palette because I tested it thoroughly and I know it's accessible. I'm also excited about the navigation structure because I've seen similar approaches work well on sites I admire."

What I'm Uncertain About

What might not work? What are you still figuring out? What parts of the plan feel shaky? Uncertainty is normal and valuable — name it.

"I'm not sure if my typography will work at smaller sizes. I also don't know if I have enough content for three full project pages, or if I should combine some projects."

What I Need Help With

What specific questions do you have for your tutors? What do you need to learn during the 10-day build? What are you worried you don't know how to do yet? Ask us! That's what we're here for.

"I need help figuring out how to make my image gallery work without JavaScript, or if I should just learn basic JS for this. I also want to know if my wireframe is too ambitious for 10 days."

My Biggest Challenge

What's the hardest part of this project for you specifically? Technical? Creative? Time management? Perfectionism? Be specific about YOUR challenge, not a generic answer.

"My biggest challenge is that I'm a perfectionist and I know I'll want to keep tweaking things instead of finishing. I also work 20 hours a week so I need to be realistic about my time."

My Backup Plan

If your main idea doesn't work or you run out of time, what's your simpler fallback? What can you cut? What's the minimum viable version of your site that still works?

"If I can't get the interactive project gallery working, I'll just do a simple grid of images with links. If I run out of time, I'll launch with 2 project pages instead of 3 and add the third one later."

What Success Looks Like to Me

How will YOU know if this project is successful? Not what you think the instructor wants to hear — what actually matters to you. What would make you proud of this site?

"Success for me is having a site I'm not embarrassed to show to potential employers, that loads fast, and that actually represents my work honestly. I don't need it to be the most innovative site ever, I just want it to be solid and authentic."

One Thing I'm Worried About Admitting

What are you hesitant to say? What do you think you 'should' be doing differently? What judgement are you worried about? This is a safe space to be honest — and it helps us help you.

"I'm worried that my design is too simple and boring compared to other students' plans. I keep seeing people with really experimental ideas and mine feels basic. But honestly, I just want something clean that works."