Del Norte Computer Science Portfolio – Frontend Development Ideation and Storyboarding

A. Ideation & Context

The Frontend Development Module is designed to develop both creative and technical confidence among students in the Computer Science Software Engineering pathway at Del Norte High School.
It emphasizes the process of transforming wireframes and user experience concepts into functional, responsive, and accessible interfaces using HTML, CSS, and JavaScript.

Figure 1: Frontend development wireframe and color palette concept from student ideation.

Students are guided through the design-thinking process — empathize, define, ideate, prototype, and test — to produce frontend projects that demonstrate a clear understanding of visual hierarchy, layout rhythm, and responsive behavior.

A2. Exploring User Flow and Visual Hierarchy

The module helps learners visualize how users navigate through their projects. They start by mapping wireframes in Figma, then convert them into responsive HTML/CSS structures.
Color contrast, spacing, and content hierarchy form the foundation of this phase.

Each student develops a “flow-first” mindset, understanding how design rhythm guides the eye and improves usability. Students prototype pages like Homepage, About, and Project Gallery, ensuring each section supports intuitive user movement.

B. Storyboarding & Implementation Design

The storyboard represents the translation of conceptual ideas into sequential development tasks.
Each frame captures a learning milestone, illustrating how design evolves from idea to deployment.

**Storyboard Sequence Overview:**

**Scene 1 – Ideation:** Students brainstorm UI/UX principles and sketch wireframes.
**Scene 2 – Translation:** They convert sketches into HTML/CSS layouts, ensuring structure and semantics.
**Scene 3 – Styling:** Learners apply responsive CSS and define design tokens like color and typography.
**Scene 4 – Interactivity:** JavaScript enhances user flow with modals, animations, and dark/light mode toggles.
**Scene 5 – Reflection:** Teams review peer feedback and iterate on accessibility fixes.

B2. Technology Integration and Workflow

Students integrate GitHub for collaboration and version control.
The workflow combines the use of VS Code, Git, and GitHub Pages for deployment.
Figma supports visual prototyping, while Chrome DevTools assists in debugging responsive behavior.

This combination of design and development tools reflects an industry-standard frontend pipeline — from wireframe to live webpage.

C. Evaluation, Accessibility & Reflection

Student success is measured not only by technical functionality but also by visual and experiential quality.
Rubrics evaluate usability, design harmony, accessibility compliance, and collaboration.

**Evaluation Criteria:**

Visual Consistency: Proper use of typography, color, and white space.
Accessibility: Adherence to WCAG 2.1 standards (contrast, alt text, keyboard access).
Responsiveness: Layout adapts smoothly across devices.
Code Quality: Semantic HTML and organized CSS/JS files.
Reflection: Demonstrates understanding of design thinking and iteration.

The reflection process encourages learners to discuss challenges, problem-solving techniques, and design revisions.
This fosters deeper comprehension of frontend architecture, preparing students for real-world development tasks.