Category: Frontend Design
-
Contrast polarity
I have learned a new term today in terms of light mode – dark mode in user interfaces: contrast polarity. Basically, a positive contrast polarity is a light text on a dark surface (light mode) — just like the physical black ink on white paper. Negative contrast polarity, on the other hand, is the reverse…
-
On Dimensions of CSS in a Style Guide
Absolutes On the concept of “absolutes”: If a color is the same as CSS named colors, name it as is or use the name itself: If you “invented” a color or base it on an existing brand color, “invent” a name for it, but always attach the name of the basic color: Generics On the…
-
Beware the Pixel Police
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…
-
The Design of Target Areas
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…
-
Reading About aria-label
Why is text so central to accessibility? Because text is highly interoperable. That is, systems of letters can be translated into code points and interpreted by all sorts of different software. Oh and humans understand text already, of course. Because different machines can all read and write text, information can be interpreted and conveyed to humans…
-
Revisiting HTML – Content Categories and Sectioning Roots
It’s good to revisit several concepts in HTML for the purpose of optimally structuring it—for all kinds of usage and accessibility. Content Categories 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…
-
What’s a good practice to completely redesign an existent CSS?
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…
-
A Bohemian Rhapsody Movie Poster
See the Pen A Bohemian Rhapsody Movie Poster by Brian Dys (@briandys) on CodePen.