👋 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. 🥰
About Snippet
Categories
0
Comment
Interviewing your interviewer is a critical part of your career decision-making process. Think about your long-term plans and make sure the role you accept fits with that vision.
Nati Asher
- What’s the actual risk of telling a little white lie on your résumé?
- How MyHeritage Brought Family Pictures to Life Using D-ID’S Live Portrait
- The Velocity of Skill Development: Quickly Closing the Gap
- Ness Labs
- When Everyone’s a Genius (A Few Thoughts on Speculation)
- Non-fungible token
- Why did I leave Google or, why did I stay so long?
Categories
The first time I’ve been at Avaloq’s office at Philam Life building was during my second interview. I was impressed by the interior design of the pantry. There by the couch were some company brochures in the style of a newspaper. I took one home to familiarize myself with the new company that I was planning to join.
Fast forward to almost a year, I was back to this office to get a Macbook device which was an official issue for UX designers.
While waiting, I hang out by the pantry and had some coffee. There were wine bottles and glasses on the wall but only as decor (they were empty, I checked).
Outside, during lunch, it was a typical workday — only that everyone’s wearing face shields and masks. There were many people lining up at Dunkin’ at Paseo Center. I went to Yellow Cab for a grub.
I was oblivious to the fact that some companies have their employees back on site until I went to the office myself. This was also evident on the road, by the number of vehicles going somewhere. Life goes on, indeed, with the pandemic still as dangerous as it started — we just managed to become familiar of how to stay safe in the outside world. I hope complacency in being careful does not get the best of anyone.
It was a Friday — a celebratory day wherein just last year when my officemates / friends would go out for dinner and some drinks, and sometimes the office turned on its party mode. Now, I had to rush home to avoid the heavy traffic in EDSA.
What permanently changed, we’ll only know as we’re putting old normal things one by one into the new normal.
Become a part of Avaloq
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?
Categories
Previously, we have tackled an introduction to recreating Dorset Cereals. Now, we’ll begin with doing the initial work that will be the basis of the HTML and CSS.
Summary
- Convert content into text
- Group and label texts
- Structure groups via header, main, footer
The first step of RE:Creation is to convert the content (in this case, the visual elements) into text. As you can see in the figure above, we have itemized the elements of the front panel and we have also grouped related elements together. This kind of visualization makes it easier for us to accomplish this stage.
Step 1: Convert content into text
- Let’s go from left to right, top to bottom in converting content into text
- For symbols, if they have a corresponding Unicode character, let’s use them (e.g., use â„® for estimated sign, ® registered sign)
- For illustrations, we could describe the type of style they have
See the Pen
RE:Creation No. 3: Dorset Cereals | Front panel | Text – Convert content into text by Brian Dys Sahagun (@briandys)
on CodePen.
Step 2: Group and label the texts
- There are elements that need to be grouped together and there are elements that are standalone
- “Pioneer Centre” and “326.00” can be grouped into “Store tag”
- “Dorset Cereals®” is standalone and can be labeled as “Product name”
- Label everything, both elements and groups
- Identify and label “main” elements based on the contents’ visual hierarchy (e.g., “Product main description” — “main” is depicted based on the elements position and size in the visuals)
- Labels can describe the content’s literal meaning (e.g., “Product content percentage description” instead of simply, “Product description”)
See the Pen
RE:Creation No. 3: Dorset Cereals | Front panel | Text – Group and label texts by Brian Dys Sahagun (@briandys)
on CodePen.
Step 3: Structure groups via header, main, footer
- “Header” group contains identifying information that help the consumer immediately identify the product
- “Main” group contains the details that help the consumer decide to buy or not buy the product
- “Footer” group contains other information that supplements the details when the consumer wants to learn more
- Distribute the labeled groups into the header-main-footer structure
- Arrange the groups according to the importance of its containing information (e.g., “Main illustration” is placed last because other information are more important in terms of helping the consumer decide)
- At this point, there is no information that fits in the “Footer” group
See the Pen
RE:Creation No. 3: Dorset Cereals | Front panel | Text – Structure groups via header, main, footer by Brian Dys Sahagun (@briandys)
on CodePen.
You might have noticed that we’ve replicated the capitalization of text to simplify the process. For example, the store name could be styled as “Pioneer Centre” but we opted to replicate it as “PIONEER CENTRE”. Capitalization has a nuance in the brand’s style of writing. In any case, CSS can handle modifying the capitalization, and we’ll get to that later in the process.
That’s it for Text stage!
Now, we already have a basis for coding in HTML and CSS. Go to the next stage, which is HTML (markup).
Categories
Commenting is disabled.
Any difficulty in doing the right thing results from (evil, selfish) resistance, not from the fact that one cannot do all the good or valuable things that one is called upon to do.
Irene McMullin
- Get Hired: Building a Solid UX Design Portfolio
- Our industry needs more designers. Most importantly: a different type of designer.
- Teacher to UX designer: A roadmap
- Front-of-the-front-end and back-of-the-front-end web development
- How to Handle Dominating Participants in UX Workshops: 3 Tactics
- Things I wish UX candidates would ask me during interviews
- Greeking Versus Designing with Actual Content
- Citibank just got a $500 million lesson in the importance of UI design
Categories
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.
- Planning
- What is the goal?
- How to approach this thing?
- What are the elements involved?
- Doing
- Converting to Text
- Converting to HTML
- Converting to CSS
- Wrapping up
- Did we achieve the goal?
- What did we learn?
Planning
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.
Goal
The main goal is for us to recreate it using HTML and CSS and learn various concepts of design and coding along the way.
Approach
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).
Elements
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.
Categories
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.