👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
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?
The purpose of making a print material suitable for web is to “open–source” its information. Making it suitable for web means marking up the content in HTML and in the process it becomes accessible to people surfing the internet (among other things such as web browsers, screen readers, and search engines).
But for the benefit of RE:Creation, the purpose of choosing a print material to re-create is to discover more about:
- Separation of concerns of structure and style
- The capability of CSS in terms of graphic design