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

1. Convert content into text
2. Group and label texts
3. 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).