Project 3.1 – Design Brief: Interactive Field Guide
DESN 368
Project 3.1 – Design Brief: Interactive Field Guide
Web Design Fundamentals · Spring 2026
Interactive Field Guide --> figma project space
📚 Context
This project is the design phase for your Interactive Field Guide. In Project 3.2 you'll translate this design into code using HTML and CSS. Design every element as if it will be built—structure and hierarchy now will make coding easier later.
💡 Objective
Design an Interactive Field Guide — a visual documentation page about a world, game, or system you love. Your design should feel like an explorer's manual, player's handbook, or traveler's companion.
Examples:
- The Elden Ring Boss Manual
- Animal Crossing Island Guide
- Portland Coffee Shop Explorer
- Beginner's Guide to Film Photography
- The Skyrim Alchemy Handbook
- Pokemon Guide Handbook
Step 1: Find a topic to build your page about. I used Anthropic's Claude to create content about the magical system in Xanth (a series of books by Piers Anthony).
Learning Objectives
By the end of this project, you should be able to:
- Design a documentation-style web layout using visual hierarchy and structure.
- Apply principles of responsive design (desktop vs. mobile).
- Use typography and color to express mood and theme.
- Visualize how layout translates to code (HTML structure + Flexbox logic).
- Use AI tools for ideation and content generation responsibly.
🧱 Requirements
1️⃣ Create Two Artboards in Figma
- Desktop Layout
- Mobile Layout
Desktop Layout (1440 px width)
- Fixed sidebar navigation (~300 px wide)
- Main content area (fills remaining space)
- Hero Section with:
- Guide title
- Subtitle or tagline
- Visual element (pattern, illustration, or background treatment)
- 5+ content sections with clear headers
- Footer containing:
- Copyright line (e.g., © 2025 Your Name | Interactive Field Guide)
- Attribution / creator credit / sources / etc.
- Two Call-to-Action buttons side by side:
- View Portfolio → external link
- Read Case Study → internal link to
case-study.html
- 5+ positioned decorative elements (shapes, patterns, gradients, or graphics that layer behind content)
Mobile Layout (375 px width)
- Navigation moves to top (horizontal or simplified vertical)
- Content stacks in a single column
- Positioned decorative elements hide for mobile / Challenge: adjust them
- Footer buttons stack vertically
- Maintain readability and visual hierarchy
2️⃣ Visual Design Requirements
Typography
- Use 2 fonts maximum (Google Fonts only) — 1 for headings, 1 for body text
- Establish clear type scale and hierarchy
Color Palette
- 3–5 colors that reflect your world's mood
- Tools: Coolors | Adobe Color | Happy Hues
- Ensure readable contrast for text and backgrounds
Decorative Elements
- Design at least two positioned background elements (gradient blob, symbol, texture, etc.)
- They should enhance the atmosphere without overpowering content.
Content Structure
Each section must reserve space for:
- Header text
- 2–3 paragraphs
- Code snippet / highlight block
- List (bulleted or numbered)
- Image or icon
3️⃣ Step-by-Step Process
- Choose Your World
Pick something you genuinely care about or find interesting. Use AI for brainstorming if needed:
Prompt Example
"Generate 5 beginner-friendly section titles for a field guide about [topic]. For each section, write 2–3 sentences that sound like they're from an explorer's manual."
- Create Your Artboards
Start with desktop (ideal experience), then adapt for mobile. Use consistent alignment and spacing.
- Create a Mood Board/Style Tile.
Inside your Figma file list:
- Font names and usage
- Color palette with hex codes
- Any special design decisions
📷 [Sketch / Image Spec Placeholder]
Include a quick wireframe or sketch (hand-drawn or digital) of your layout before finalizing.
4️⃣ Case Study Page Preview
Design a simple mockup of your future case-study.html page within Figma. It should include:
- Page title (e.g., Case Study: [Your Guide Name])
- A "Back to Guide" link
- Five short reflection sections with question headers and space for text
- Optional small visual element to tie it to your main design
💡 Design-to-Code Tip:
As you design, think in HTML. Every section, header, and content block you design will become an HTML tag later.
- Sidebar →
<nav>
- Sections →
<section>
- Hero →
<header> or <section>
- Footer →
<footer>
Designing with this structure in mind will make your coding phase faster and more intentional.
5️⃣ Optional Challenge or Extension
- Create an alternate color theme (light/dark mode mockup).
- Add an extra "About This World" section that introduces your chosen theme visually.
- Experiment with custom icons or subtle animation mockups in Figma.
Resources
Design Inspiration
Type
Flexbox
Positioning
Media Queries
Responsive Images
General Web Development
✅ Deliverable Checklist (Due Monday)
- Desktop artboard (1440 px)
- Mobile artboard (375 px)
- Sidebar nav (desktop) + top nav (mobile)
- Hero section with visual treatment
- 5+ content sections with headers
- Footer with copyright + 2 CTA buttons
- 2+ decorative elements visible
- Font and color documentation
- Sketch or wireframe included
- Case Study page mockup present
- Clean, organized Figma layers
🧩 Evaluation (50 pts)
| Category |
Points |
Criteria |
| Layout Design |
15 |
Desktop + mobile artboards complete |
| Visual Hierarchy |
10 |
Readable structure and flow |
| Color & Typography |
10 |
Palette + fonts fit theme and documented |
| Decorative Elements |
10 |
At least two positioned graphics |
| Organization & Documentation |
5 |
Clean Figma file + case study mockup |
📤 Submission
Submit to Canvas:
- Link to the file in the figma project space
- Screenshot of desktop layout
- Screenshot of mobile layout