Brian Dys

Tag: Workshop

  • Introduction to Information Architecture

    Introduction to Information Architecture 1

    How spaces and structures are designed in the information level.

    Purpose

    To empower designers in working in the Interaction Design stage.

    Outline

    • Intro
      • Information Architecture
        • Information, Data, Content
        • Definition
    • Main
      • Ontology
        • Definition
        • Framework
          • Nouns and Verbs
          • Controlled Vocabulary
      • Taxonomy
        • Definition
        • Facets
        • Types of Relationships
        • Diagrams
      • Choreography
        • Definition
        • Placemaking
    Glash Half Empty or Full?

    Content

    • Things that are present

    Data

    • Facts, Observations, Questions

    Information

    • Interpretations
    • Information is not Content

    Information Architecture

    The arrangement of the parts to make sense of the whole.

    Ontology

    The language that we use and the meaning that we intend.

    Nouns and Verbs

    Where to look for Nouns?

    • People – who are involved?
    • Features – what are the distinguishing aspects of the thing?
    • Paths – what do people look to accomplish?

    Controlled Vocabulary

    Parts of a Controlled Vocabulary

    • Approved Terms
    • Definition
    • Approved Synonyms
    • History of Term
    • Words We Don’t Say
    • Relationship Between Terms

    Exercise: Ontology Framework

    Digital Drop Game

    Taxonomy

    Definition

    • Classification, organization of things
    • Structure is a rhetorical tool
    • Taxonomy should depend on intentions (e.g., we want people to call us, we want people to refer other people)

    Facets

    In order to begin organizing, use facets:

    • Personality – what is it about?
    • Matter – what is it made or or not made of?
    • Energy – what are the related activities?
    • Space – where does it exist?
    • Time – when does it exist?

    Types of Relationships

    These are the common taxonomic patterns:

    • Equivalence – is the same as
    • Hierarchy – is a part of; is a type of
    • Sequential – is a predecessor or; is a successor of
    • Associative – is related to; is used with (not necessarily within the same family)

    5 Ways to Organize things:

    • Location
    • Alphabetical
    • Time
    • Category
    • Hierarchy

    Diagrams

    • Block Diagram (wire framing)
    • Association Diagram (mind mapping)
    • Swim Lane (shows different responsibilities within the same process)

    Choreography

    Definition

    • Steps user can or can not take across contexts and channels
    • Setting the rules for realizing intentions
    • Different UX in desktop and mobile
    • User access based on role
    • Different UX for novice user and expert user

    How does the language (ontology) change based on the context and channel?

    How does the structure (taxonomy) change based on the context and channel?

    Placemaking

    • Communicating intentions to users in a holistic manner
    • Considering the ecosystem to objects

    Deciding meaningful differences of taxonomy and ontology across contexts and channels

    The ability to zoom in and out of an experience to ensure you are serving your users

    IA is collaborative.

    IA is not a process, it is a result.

  • HTML & CSS Workshop

    Audience

    Interaction, User Interface, and Visual Designers

    Purpose

    To enable designers in collaborating with front-end developers through discovery (of new methods and tools in design handoffs) and empathy (by experiencing front-end development).

    Goals

    1. To be familiar with Mobile First as a design principle
    2. To be familiar with Separation of Content and Presentation as a design principle
    3. To establish a set of guidelines in handing off designs to front-end developers

    Topics

    • Theoretical
      • History of Internet
      • HTML Markup
      • CSS Syntax
      • Design Process Overview
    • Practical
      • Converting a Mockup

  • From vitruvian to breakdancing: The three frontend layers of a webpage

    This week, I’m conducting a workshop on basic HTML and CSS at Chikka. Participants come from the corporate communication, creatives, and content teams. For a martian to easily digest a complicated topic such as a webpage, I’ve used a human being as a metaphor for the three frontend layers of a webpage.

    Frontend meaning the webpage not needing any database or server — it should launch and run even when all you’ve got are notepad, Internet Explorer 3.0, and zero prepaid load in your EDSA Mail internet dial-up connection account (no internet needed!).

    HTML: the structure layer

    Think about a simple human body; disregard the color of its skin or the length of its hair or whether it is male or female — god simply made it with a head, body, and legs. No complicated hiphop outfit nor nice slick pompadour; it doesn’t have any flavoring not even vanilla. It’s only a naked human being. That’s our HTML markup — purely focused on the very essence of the structure of the content.

    Vitruvian Man

    The HTML markup is what you see when you view the source of a webpage or when you open an HTML document in a text editor.

    That’s the structure of the content of your document. For example, your webpage is an article about cats, then most probably, the structure of your content is arranged according to this:

    • Header
      • Site name
      • Navigation
    • Content
      • Cat article
    • Footer
      • Copyright information

    Of course, each item I enumerated has a corresponding HTML tag like for the header group it is <header>, etc.

    It is best to forget about CSS when we’re laying out the structure layer. What all matters here is the structure of your content — don’t you ever write <header> at the bottom of the document because that’s not the correct structure. Header should be at the top, footer at the bottom.

    Also, what we should give attention to in laying out the structure layer is semantics. Meaning, if you’ve got some important title or heading in your design, make it <h1> or <h2> depending on the hierarchy of your headings. Don’t use the heading tags for their font sizes; use them to show hierarchy in your headings. <h1> being the most important like the title of your site or the heading of your cat article. Likewise, if you have a list of anything, use <ul> or <ol>.

    Open the HTML document in a browser, close your eyes and let someone read your HTML webpage per element from top to bottom, from left to right (or right to left in other cases) and say “next” if you want to proceed to the next element. If it makes sense to you, then most likely you’ve made the right structure.

    To somehow test its semantics, you may want to use a screen reader. Everything should make sense to you while listening and “browsing” the content.

    CSS: the presentation layer

    Now, it’s time to present our naked human being to the world. It needs something to wear. Something like Sailor Moon’s costume.

    Sailor Moon

    That’s CSS, short for Cascading Style Sheets. A set of instructions that our HTML document takes to have a visual design like background color and many more.

    CSS could also make HTML elements be positioned anywhere on the webpage whether at the left, right, top, or bottom.

    JavaScript: the interaction layer

    And lastly, whenever you want your vitruvian man to do some break-dancing, add some script.

    A practical example is the validation of a form. Of course, we’ve got our content which is a form (HTML) and we’ve dressed it up with spanking gold-colored buttons (CSS), now it’s time to make it show messages when a required field is skipped and to never ever activate the button until the user fills up correctly all the required fields (JavaScript).

    Combine all three layers and you’ve got that breakdancing streetdancer.

    Minus the baby-kicking.