RobotnixAcademy

Week 01 · lesson

Lesson 1: Build the Portfolio Skeleton

A digital portfolio is a website with a job to do. It has to help another person find your work, understand what the work is, and move between sections without guessing.

That means we should not start by choosing colors or adding animations. We start with structure.

The four pieces of a simple site

For this course, think about a site as four connected ideas:

  • Page: one document or view, such as Home, Projects, or About.
  • Site: the collection of connected pages.
  • Link: the connection that moves a visitor from one location to another.
  • Navigation: the organized set of links that helps a visitor understand where they can go.

A page can look polished and still fail as part of a site. If the visitor cannot tell where they are, where to go next, or how to return, the design is incomplete.

Information hierarchy

Before building anything, decide what matters most.

A portfolio home page usually needs:

  1. a clear title;
  2. a short explanation of the portfolio;
  3. a path to the major sections;
  4. one or two representative pieces of content; and
  5. enough visual structure that the visitor can scan the page.

The phrase information hierarchy means the order and visual importance of information. A visitor should not have to read every word before understanding the page.

A good hierarchy might look like this:

  • Course Portfolio
    • About this portfolio
    • Projects
    • Media
    • Data Work
    • Programming

The exact labels can change later. The important thing is that the site has a planned structure before you fill it with artifacts.

Lab 1: Draw the site before building it

Create a quick site map on paper or in an approved document.

Your Week 1 version needs at least these pages or sections:

  • Home
  • Projects
  • About or Profile

Add two future sections that will make sense later in the semester, such as Data Work, Media, Research, Hardware and Networks, or Programming.

Draw arrows showing how a visitor can move between the sections.

Check your plan

Your site map is ready when:

  • every section has a clear name;
  • Home connects to the other major sections;
  • the names describe content instead of using vague labels such as “Stuff”; and
  • a visitor could predict what belongs in each section.

Build the first version

Use the school-approved website tool, local site template, or approved publishing surface.

Create the Home page first.

Include:

  • the title of the portfolio;
  • a two- or three-sentence introduction;
  • navigation to at least two other sections; and
  • one placeholder area for a future image or project artifact.

Do not worry about making it beautiful yet. The first goal is to make the structure understandable.

Why naming matters

Compare these two navigation bars:

Version A

  • Home
  • Stuff
  • More
  • Other

Version B

  • Home
  • Projects
  • Data Work
  • Programming

Version B tells the visitor what each destination contains. Version A forces the visitor to guess.

Good navigation labels are short, specific, and written from the visitor's point of view.

Lab 2: Run a five-second test

Show the home page to a classmate for five seconds, then hide it.

Ask:

  1. What is this site for?
  2. What sections do you remember?
  3. Where would you click to see student work?

If the classmate cannot answer, do not blame the classmate. Treat that as design evidence.

Revise the page title, navigation labels, or visual hierarchy.

Common failure: building for yourself

When you create a site, you already know where everything is. That makes you a poor test user.

You may think a tiny icon is obvious because you placed it there. A visitor does not have that memory. You may think a label such as “Lab 3” is clear because you completed the lab. A visitor may not know what the lab was about.

A portfolio is communication. If the visitor has to guess, the design is making them do extra work.

Evidence to keep

Save or capture:

  • your first site map;
  • the first version of the home page;
  • the result of the five-second test; and
  • one revision you made because of the test.

Exit check

Before leaving this lesson, you should be able to answer:

  • What is the difference between a page and a site?
  • Why is navigation more than a row of links?
  • What evidence would show that your home page is understandable to another person?

Next lesson, we will test navigation directly and repair broken or confusing links.