APPENDIX D
Design Notes
Summary paragraph, then a numbered ledger.
- HANDLE
- design-notes
- LIVES IN
- src/components/Editorial.jsx (DesignNotes)
- USED ON
- Chapters without a case study
- PROPS
- project.summary · project.notes
EXAMPLE
LIVEAs it renders.
404 surfaces for two lending brands. Each pair carries a distinct visual metaphor (a rocket lifting through clouds for Blue Trust Loans, a UFO beam-me-home for MaxLend) and ships in both static and animated variants for desktop and mobile.
DESIGN NOTES
- 01BriefMake a moment of failure feel like a small gift
- 02ConstraintsMust work with no JS · animation as progressive enhancement
- 03ReachBoth 404 routes ship as default in production
CODE
COPY AND PASTEHow it is called.
JSX
import { DesignNotes } from '../components/Editorial.jsx'
<DesignNotes summary={project.summary} notes={project.notes} />
{/* notes: [[label, note], …] from projects.js */}RULES
What must stay true.
Summary paragraph, then a numbered ledger.