Brian Dys

Category: UX Design

  • Designer Who Codes, You’re Special

    —

    by

    Brian Dys
    in

    During the heyday of IE6, frontend design was in murky waters. The frontend designer would need to employ lots of hacks, patches, and workarounds just to achieve the look and feel of a grand mock-up. Remember: when we used table for layout? when we used a 1×1 transparent pixel as spacer image? when we exported…

  • Conducting a UI Review

    —

    by

    Brian Dys
    in

    A UI Review is a testing methodology conducted by a designer (UI/UX/Front-end) on web products prior to Usability Testing. The first aspect to be reviewed is visual design and the second is usability. This is conducted primarily to ensure that the obvious negative findings in a Usability Testing are lessened. Consider this scenario: a working…

  • Layers of Frontend Design

    —

    by

    Brian Dys
    in

    Information (HTML) Information Architecture Semantics Content Structure Interaction Presentation (CSS) Visual Design Interactivity (JS) Interactivity Animation References The Elements of User Experience

  • Elements of Style(sheets)

    —

    by

    Brian Dys
    in

    There’s an update to this entry: Elements of CSS V2 — Nature Inherent characteristics of an element (display) Layout Positioning (float, position) Dimension (padding, width, height) Spacing (margin) Theme Colors (color, background-color) Typography (font-size, font-family)

  • CSS Principles #1

    —

    by

    Brian Dys
    in

    Mobile First Responsive Web Design Device-Agnostic Separation of style elements (nature, layout, theme)

  • Notes on SASS File Structure

    —

    by

    Brian Dys
    in

    Currently, my CSS folder structure is arranged in such a way (based on Group Buddies): css |– sass |– default |– structure |– atoms |– molecules |– organisms Originally, there’s an additional templates folder alongside structure. The common difficulty I encountered was categorizing a rule-set between molecules and organisms. I didn’t bother including templates since…

  • Press Time: Using CSS Transform to Nudge a Button

    —

    by

    Brian Dys
    in

    Two of the ways in which you can show an illusion of a button being pressed are: darkening the background-color and nudging its vertical position. See the Pen Press Time by Brian Dys Sahagun (@briandys) on CodePen. It is important to provide for a hint when a user activates an element in your user interface…

  • The Separation of HTML and CSS

    —

    by

    Brian Dys
    in

    In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup. In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation…

  • Recreating Spotify’s Album Cover

    —

    by

    Brian Dys
    in

    Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis. Circular images everywhere No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take…

  • CSS Regions–we’re waiting for you

    —

    by

    Brian Dys
    in

    Your content will flow through various containers (called regions) which you specify. The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by…