73% Complete

Light
-

Chapter 6
Deconstructing
Designs

T
he goal of this chapter is to deconstruct various designs into their individual visual components and then provide an approach for reconstructing them in code (HTML, CSS, and JavaScript).

Below are a few ideas I'm considering as I'm in the early brainstorming stage for this chapter. Let me know on Twitter @derekknox what you'd most like to see deconstructed and why. Here are my current considerations:

  • Specific UI components of:
    • Adobe Illustrator or XD or Sketch
    • Twitter
    • Airbnb
    • Gmail
    • Other?
  • TV hockey score overlay
    • two distinct teams/scores
    • clock timer
    • penalty UI
    • etc.
  • ESPN-like scores/news ticker
  • Custom music player
    • repeat
    • shuffle
    • play/pause toggle
    • prev/next
  • Other?
#

Progressive additions approach

Some HTML elements already exist that simplify the creation and use of the custom elements we'll create. The purpose of this chapter is to showcase how to achieve the same functionality with your custom look and feel. We'll progressively build components and then connect them together to create more powerful components. Again, simple ideas and concepts stacked atop each other.

  • Rectangles in rectangles
  • none, one, or any

    • none
      • null or undefined
        • lacks existence
    • one

      • boolean

        • switch
        • checkbox
        • radio

        • selected/deselected

        • expanded/contracted
        • visible/invisible
        • color/grayscale
    • any
      • number
        • discreet
        • range
      • string
        • ordered characters
      • array (ordered)
        • list
      • object (unordered)
        • group

After creating the components for the above, showcase how we can use them to reconstruct various UI designs. Basic concepts stacked atop each other. Use layout style to showcase how we can display the structure in different ways (value of structure, style, and behavior being distinct).