Brian Dys

Tag: FeD Up

A Journey on Front-end Web Development.

  • Week 2, 2018

    You know what happens in Week 1, right? Yes, planning. In other words, nothing… yet. All on pencil and paper.

    The action begins in Week 2. Now, here are some of the things that are new to me:

  • Web Typographic Hierarchy

    Designers must establish a typographic hierarchy in their web designs.

    This is not random; this is written in a style sheet; this is designed.

    The typographic hierarchy aids in making reading web texts easier.

    (more…)

  • Blank Post Title in WordPress

    When posting in Status format, you may only post in the content area and leave the title blank.

    In case you do not want the WordPress generated ID of the post, you may choose to have a ISO 8601 Timestamp.

    Edit the slug of your post and paste the timestamp.

  • CSS Jot Down 1: Prioritize Objects

    CSS Objects are selectors.

    CSS Buckets are rules.

    Prioritize defining objects over defining rules.

    [codepen_embed height=”265″ theme_id=”dark” slug_hash=”LjjVWE” default_tab=”css” user=”BrianSahagun”]See the Pen CSS Jot Down 1: Prioritize Objects by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

    The purpose is to make each object independent.

    Use CSS variables for shared styles when possible.

    Someday soon, there will be a CSS function that would apply a rule to a selector.

    Combine objects:

    • when applying hacks
    • when applying resets
    • when applying visual design modifiers
    • when applying usability enhancements

    Prioritize objects:

    • when applying visual design modifiers
    • when in doubt

  • Intentions Oriented Programming

    HTML could accommodate Intentions Oriented Programming (IOP).

    IOP is based on intentions rather than constructs.

    Code could be validated but a deeper level and meaning depends on the intentions of the programmer.

  • Links and Actions

    I categorize <a> into two: Links and Actions.

    Links will take you to another location, mostly for information while Actions could also do the same but with a more targeted purpose.

    Examples

    Links

    Actions

    Links can be left alone in CSS – because they are buried in paragraphs or sitting beside other texts. Actions require styles that will enhance their usability – like padding to increase its active area (easier to click).

  • The Outline: That Thing Before the Wire Frame

    As UI designers, it’s easy to jump into sketching UIs through wire frames. Afterall, UIs are commonly visual. But taking a careful step of planning before sketching is a rewarding way of ensuring that the information embedded into the UI is well-thought of.

    The Outline
    An example of the Outline used in PinoyHoops App

    Just like it making speeches or writing articles, the writer may create an outline. For UI designers, the Outline may be accomplished by these simple steps:

    • Step 1: What do you want to show the users
      Or what do the users want to see? Based on personas, list down the things that will help them achieve their goals or accomplish tasks.
    • Step 2: Content / component inventory
      Using the list in Step 1, break down each piece of content that will be put into the UI. You may also start with bigger groups thru components.
    • Step 3: Information architecture
      Now, rank the content and components based on the user’s task flows and based on importance
    • Step 4: Interaction
      Plot down connections between content and components. Ask yourself “what will happen if the user interacts with a component?”

    Each step, in general, is a task of prioritization – which is appears first? Which comes first? Which is not important enough to be the last?

    After having a list bearing the interaction of content and components, it will now be easier to sketch its corresponding user interface or the Wire Frame.

  • I Passed the Post Exam of GWT Training of Trainers!

    Awhile ago, I received a surprise in my email – that I passed the ToT post exam.

    The little sacrifice of waking up early in the mornin, driving 46km to the venue, simultaneously participating in the discussion and working remotely – paid off.

    I am now qualified as a lab assistant during the Web Development Training. (more…)