
đź‘‹ 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 episode of RE:Creation, we’ll be recreating a cereal box in HTML and CSS. One thing I like about consumer product packaging is that almost everything is written there in that little space. It’s like a website in the palm of your hands at a grocery aisle (or at your breakfast table).
First, let’s lay down all the steps that we will take in order to make this happen.
In order for us to have a clear scope of this exercise, we need to see the all the elements of the packaging through an expanded view.
The main goal is for us to recreate it using HTML and CSS and learn various concepts of design and coding along the way.
First, look at the information and identify which are important compared to others — that will be the arrangement of contents in HTML. For example, the front of the packaging comes first before the sides and back.
Next, look at how the panels are laid out — that will be the visual arrangement in CSS. For example, the back of the packaging is at the leftmost — which means, it comes first before the sides and front (for left to right direction).
We’re breaking down the packaging to its individual elements by panel and flap. We have 4 panels and 9 flaps, for a total of 13 segments — this is also how we are scoping each section of the recreation. For example, we will tackle the front panel first, then back panel, and so on.
It was more than 10 years ago since I bought a Swatch watch called Something New. It was tiny classic black and white watch that had a plastic strap that cost one-third of the watch’s original price (and it breaks every year, the strap). This is what really deterred me from buying from Swatch. Metal and leather straps were me when I was 14 years old but not anymore. Durability and style require delicate balance.
After that, I switched to Casio, with another classic — an F-91W which is a cheap ₱999 watch whose strap also breaks — but this time, every six months. Again, the strap cost a third of the original price. After around 3 strap replacements, it is now again in a brink of breaking. Planned obsolescence for “bottom-of-the-line” products — these watch makers have perfected a ploy.
Just a couple of days ago, I couldn’t leave the mall without taking home this greenish-looking watch called We in the Khaki Now. With it, I partnered another watch for Jaycelle as a surprise — Sunblush (Swatch has a really fun way of naming their watches).
Of course, after eyeing these two awesome watches, my first question for the salesperson was, “What kind of straps do they have?” I was glad not to hear “plastic” or “rubber” — but “silicone“. It’s time to give it another try.
When I got home, I searched for more information regarding the straps and found out that We in the Khaki Now has a “bio-sourced material” strap. I just hope that this time the straps would last for years.
In a perfect world the importance of information wouldn’t rely on its author’s eloquence. But we live in a world where people are bored, impatient, emotional, and need complicated things distilled into easy-to-grasp scenes.
Morgan Housel
One of the things he taught me early on was make reversible decisions quickly and irreversible ones deliberately, and I still return to that on a weekly basis. If it’s a reversible decision we’ll probably learn a lot more by doing it.
Matt Mullenweg
Every week, I publish a reading list. Get it straight to your inbox by subscribing to the newsletter.
Commenting is disabled.
When you’re forced to be simple, you’re forced to face the real problem. When you can’t deliver ornament, you have to deliver substance.
Paul Graham
Last month, I’ve wrapped-up with the 4th part of a talk that I’ve shared with the UX design team: Documenting your work as a designer. This topic tackles the other side of design work (and any work, in general), which is documenting your experiences and learnings from projects.
The talk goes from abstract concepts towards concrete steps in starting a portfolio curation. What each of us actually produced were our top 3 highlights of last year.
This year is brighter at Avaloq as we’re growing within UX design team and others as well. See if there is a good fit?Become a part of Avaloq
Very often, we don’t seek to be right, we seek to be “more right” compared to somebody else, whether an individual or a group of individuals.
Anne-Laure Le Cunff