👋 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. 🥰
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.
- 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
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”)
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
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).
- Group and Label Content
- Structure the Groups Using HMF
- Convert Content into Plain Text
- Structure the groups
- Interact to reveal more content and convert into plain text
- Structure content by grouping and labeling them based on function
Convert Content into Plain Text
The first step of re-creation is to convert content into plain text. The structure isn’t important at this round. However, as a suggestion, we could start from left to right, top to bottom. For example, the first content could be seen at the top–right:
Gmail Images Menu Icon Sign In Button
Interacting with the elements is not yet required (e.g., clicking the menu icon). Convert only those that we could see visually. Later in the next round, we’ll convert the content that would be revealed while interacting with the elements.
This activity of gathering available content of a web page is part of the process called Content Inventory.