Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
- Start with the Basic HTML Document Markup
- Mark up the Structure, Groups, and Individuals in HTML
- Group and Label Content
- Structure the Groups Using HMF
- Convert Content into Plain Text
In this second episode of RE:Creation, we’re going to re-create something that we’re all familiar with—the Nutrition Facts Label. This particular design is specific to U.S. Food and Drug Administration—although most nutrition information from other countries appear similar in terms of their tabular design.
We may ask, isn’t this label a print material (as opposed to digital)? Yes, this label—and others like it—are plastered in every packaging of edible products across the planet. Why would we delve into converting it for web then?
- Code the behavior of Interactivity
- Style for Visual Design: Visual Content
- Style for Visual Design: Typography