Brian Dys

Category: Frontend Design

  • Extracting Colors from Netflix Logo Animation

    Netflix Logo Color Band
    Netflix Logo Color Band
    A process of pixelating the color bands using Adobe Photoshop.
    Netflix Logo Color Band - Pixelated
    Netflix Logo Color Band – Pixelated

  • 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 — dark text on a light surface (dark mode).

    Now, where else can you use this term? In CSS class-naming, of course!

    See the Pen Contrast polarity (light – dark mode) by Brian Dys Sahagun (@briandys) on CodePen.

  • 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:

    --color-red: #ff0000;

    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:

    --color-coagulated-red: #c93434;
--color-facebook-blue: #4267b2;

    Generics

    On the concept of “generics”: Use these colors as basis for primaries, secondaries, accents, etc.:

    --primary-color: var(--color-facebook-blue);

    Specifics

    On the concept of “specifics”: Use the “generics” to identify colors of UI elements:

    .submit-button { background-color: var(--primary-color) };

  • 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 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.

    Beware the Pixel Police
    Unsplash Photo

    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

    You may check out the HTML and CSS in CodePen:

  • 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 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.

    See the Pen The Design of Target Areas by Brian Dys (@briandys) on CodePen.

  • 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 in different ways. Primarily visually (in letter forms) but also aurally (as synthesized speech) and even by touch (refreshable Braille displays, for instance).

    UX accessibility with aria-label by Heydon Pickering

    References

  • 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 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

    Sectioning Roots

    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

  • 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.

    1. 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)
    2. Visual Design
      1. Nature (style of the element as a standalone)
      2. Layout (style of the element in relation to other elements)
      3. Colors (with nature and layout alone, the design should be able to work even in black and white colors)
      4. Graphics (border, border-radius, box-shadow)
      5. Typography (style of text)
      6. 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.

    Originally published in Quora

  • A Pull Quote

    See the Pen A Pull Quote by Brian Dys (@briandys) on CodePen.

  • A Bohemian Rhapsody Movie Poster

    See the Pen A Bohemian Rhapsody Movie Poster by Brian Dys (@briandys) on CodePen.