👋 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 the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage.
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individual elements in HTML
Marking up means identifying elements, defining, and labeling them. It is just like in Text stage when we labeled elements and grouped them — but this time, we take it a step further by using HTML tags which has the capability to define where a markup starts and where it ends.
In HTML, we’ll use start and end tags to enclose elements. Once elements are enclosed by these tags, web browsers will be able to interpret and display them accordingly.
Speaking of HTML tags, they have a syntax for us to follow. Syntax is the arrangement of symbols and rules that constitute the correct form of a language just like HTML. As an example for the label “Header”, the HTML tag will be
</header>; for “Main”,
</main>; and for “Footer”,
It is one thing to make our content readable for web browsers (for them to properly interpret and display it) and another thing to make it readable for humans (us and other coders who will be reading or modifying our works).
The fact that we have marked up our content in HTML tags, that makes it readable for web browsers. Indentation, on the other hand, makes it readable for human readers. All content within structures can be indented; the same as content within groups. In this way, we could see how the content is nested by looking at it.
Step 1: Mark up the structure in HTML
- Enclose the structure labels in “less than” (<) and “greater than” (>) signs
- For their delimiters or boundaries, simply add a “slash” after the “less than” (<) sign
- Convert the labels to the “small caps” (e.g., “Header” becomes “header”)
- Indent the nested elements within the structure
At this point in our activity, we can already view the result of our markup in a web browser. In our demo in CodePen, you can see on one side what the browser will display given our markup. It’s not apparent because the text elements are still placed side by side, but the result already shows the structure we made: the “Header”, starting with “Product name”, the “Main”, starting with “Product main description”, and “Footer”, starting with “(none)”.
Step 2: Mark up the groups in HTML
- Similarly with step 1, mark up the groups by converting their labels into HTML start and end tags
- For the syntax, aside from making everything in “small caps”, convert spaces to underscores (“_”)
- Again, indent the nested elements within groups for readability
Step 3: Mark up the individual elements in HTML
Individual elements are the actual textual content inside the structure and groups. We could combine steps 2 and 3 once we’re used to marking up content in HTML.
- Similarly with step 2, mark up the individual elements by converting their labels into HTML start and end tags
- As an added effort for readability, we could remove empty lines between groups and their nested content, to make them visually grouped together
The result of our markup may not visually show much improvement but we’re already paving the path for a solid basis of HTML and CSS.
For our next activity, we will be going into the details of HTML tags. Since HTML is a language, it has a vocabulary — meaning, it already has a set of tags that is equivalent to what we created at this stage.
I saw what you did there. The padding between form fields is 24 pixels. Please remove 8 pixels from that gap. Make sure to use the components provided.Chief of Pixel Police
Well… yeah… it’s your fault. Components are ready-built — why can’t you just use it with all its pre-built goodnes. Why take matters into your own hands and decide 24 pixels here and 32 pixels there. Don’t ever do that next time. If you do, make sure to just move 1 pixel at a time to avoid detection. My brain whispered to me.
Can sarcasm be used for fun? Sure can! Actually, I don’t have any beef in using components, no matter how they scream for adjustments. But, hey, we are designers. We design — that’s what we do. We take, we break, and make it new again, in a different light. Better, I hope.
Riding on CSS
And this post is really about answering the question, “Can I really design in my browser?” Because I was thinking of using Figma in creating the visual design of the warning “Beware the Pixel Police”. But Figma also uses CSS, so I thought I’d just go straight up using CSS.
Get the style
- Background image via Unsplash Source (it changes every page load)
- Fluid typography via CSS clamp() function
- Fonts via Google: Permanent Marker and Montserrat
- 1:1 (square) ratio of the canvas via RatioBuddy
You may check out the HTML and CSS in CodePen:
A target area in a website or app is an area that enables a user to interact with the interface through touch or a pointing device such as a mouse.
Examples are links, buttons, form elements, etc.
According to Fitts’s law, “the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target”.
For a target area to be easily tapped or clicked by the user, its area must be adequate enough to be interacted upon.
Visually, it may appear small (such as an icon), however, it could still have an adequate target area.
It’s good to revisit several concepts in HTML for the purpose of optimally structuring it—for all kinds of usage and accessibility.
Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics. This is a loose grouping (it doesn’t actually create a relationship among elements of these categories), but they help define and describe the categories’ shared behavior and their associated rules, especially when you come upon their intricate details. It’s also possible for elements to not be a member of any of these categories.Source
A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides <body> which is the logical sectioning root of a document, the following elements often introduce external content to the page: <blockquote>, <details>, <fieldset>, and <figure>.Source
Styling in CSS is always dependent on the structure of HTML. If you have control over the structure of HTML, plan to redesign it also.
A good rule of thumb is to first, set up a system.
- Usability and Accessibility (e.g., making a link’s target area large enough for touch or pointing device, making the structure of HTML accessible to screen readers)
- Visual Design
- Nature (style of the element as a standalone)
- Layout (style of the element in relation to other elements)
- Colors (with nature and layout alone, the design should be able to work even in black and white colors)
- Graphics (border, border-radius, box-shadow)
- Typography (style of text)
- Transitions and Animations
You could notice that this system is designed to build on top of the previous one. Meaning usability and accessibility come first before visual design. The same goes for the considerations under visual design.