Category: Updates

  • A Comet Is Coming (Adobe Comet, That Is)

    Someone’s lurking in the shadows in the alley – watching Sketch and InVision pass the ball between them back and forth, forth and back.

    Lo and behold! Adobe comes out snatching the ball and slam-dunkin’ it in the ring.

    While it rains shattered fiberglass, it introduces Comet.

    Adobe Comet
    A screenshot of Adobe Comet’s Landing Page.

    A whole new experience in user experience design.

    Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. Coming in early 2016 from Adobe.

  • WordPress Plugins I Can’t Do Without

    Currently, these are my default plugins whenever I would install WordPress:

    • Akismet
    • Jetpack
    • Limit Login Attempts

    Update: 8 April
    As I am looking for ways to concatenate CSS and JS files in the theme that I’m working on (Applicator), I tested several PHP scripts and WP plugins.

    And the only thing simple enough to work is Better WordPress Minify.

  • U.S. Web Design Standards

    This is just what we need for government websites in Philippines – web design standards:

    https://playbook.cio.gov/designstandards/

  • Hey World!

    Once and for all, stop thinking too much when you write. Pages and pages of ideas pass you by as you think too much. Write, just write.

    Let this be a sketchpad wherein raw ideas – instead of getting drawn – get serialized into a whole that might make sense. To you, to me and anyone in between.

    My name is Dys – the lead designer of DYS design studio. Our power is in designing user interfaces for the web.

    In here you might find stuff about the design process, front-end development and WordPress. And some of the tools that I use to make things happen.

    Please bear with me if everything in here is a work in progress, open to debate and unassuming & unapologetic at the same time.

  • While in SF

    24 August 2015
    UX Week, SF

    Being here in SF opens up my mind towards wanting a higher goal for my career. Do I really want to be in a developed country? What’s the higher goal? Well it’s more of for myself really – to worry less about the mundane things that the government fails to take care of like infrastructure and other stuff. I can’t pinpoint exactly. It’s like I know that I’m most needed in my country but it’s true that it’s a long way to go. I want my family not to experience these hardships. I don’t know. I need to talk to my partner about this.

  • Philippines Ranks 9 out of 142 Countries in Global Gender Gap Report 2014

    In time for the celebration of International Women’s Day today – we celebrate women’s achievements, we call for greater equality. #MakeItHappen

    It is good news that Philippines ranks number 9 out of 142 countries in the Global Gender Gap Report 2014. This means that the gap between genders in many aspects of our economy is getting slimmer.

    And what is it to us as a country?

    People and their talents are two of the core drivers of sustainable, long-term economic growth. If half of these talents are underdeveloped or underutilized, the economy will never grow as it could. Multiple studies have shown that healthy and educated women are more likely to have healthier and more educated children, creating a positive, virtuous cycle for the broader population. Research also shows the benefits of gender equality in politics: when women are more involved in decision-making, they make different decisions—not necessarily better or worse—but decisions that reflect the needs of more members of society.

    ~ Klaus Scheab – Founder and Executive Chairman, World Economic Forum
    Global Gender Gap 2014
    Source: Global Gender Gap Report 2014
  • Structural Classes

    Structural Classes are classes that denote hierarchy in HTML tags particularly in div tags.

    Example: Structure of a Component

    [html]
    <div class="comp">
    <div class="cr">
    <h class="accessible-name"></h>
    <div class="ct">
    Content
    </div>
    </div>
    </div>
    [/html]

    Please note that h denotes a heading tag that varies from 1 to 6 depending on the HTML 4 outline.

    The Structural Classes in this example are the following:

    • comp (component)
    • cr (container)
    • accessible-name (heading or official name)
    • ct (content).

    Maximum Number of Classes

    While building the structure, we will put generic and specific class names into each area. The suggested maximum number of classes to add into a single div is two (2).

    The first class to be added is the generic class – which is basically, what the component is. The second class – if available – is the category it belongs to – which will become the specific class – this is usually inherited from its parent.

    Example of Generic Class

    In this example, we’ll use the Author Component.

    The Author Component is part of an article byline wherein the name of the author is indicated (along with the date the article was published).

    Name of component (generic class): Author
    Category of component (specific class): Article Entry

    Using this information, we can plot the classes into the structure.

    [html]
    <div class="comp author_comp article-entry-author_comp">
    <div class="cr author_cr article-entry-author_cr">
    <h class="accessible-name"></h>
    <div class="ct author_ct article-entry-author_ct">
    Content
    </div>
    </div>
    </div><!– article-entry-author_comp –>
    [/html]

    This structure now features the following:

    • a generic class (author_comp) which will be used in any instance of author in the HTML document
    • specific class (article-entry-author_comp) which could be used to directly select the component (e.g., for use in CSS)

    Other Guidelines

    The objects inside ct (content) could simply have their generic classes – just like with the heading tag which only has accessible-name as its class.

  • Introducing UI View and UI Container

    There’s a need for web pages to be defined in which view it is in and in which type of container the whole view is in.

    In this regard I am using ui-view--<view name> and ui-cr--<container name> (cr short for container).

    UI View

    UI View is the representation of the totality of the page or screen the user is in. Common examples of this is the Sign In screen of web apps, Dashboard, or Home views.

    Example: If you are on the Terms & Conditions page or a web site, you could classify it as:

    <div class="ui-view--terms-conditions">

    UI Container

    UI Container, on the other hand, is the type of user interface that contains the components or even the whole view (in this case, it is usually called screen or page).

    Example: Using the example above, the page is contained in some sort of container – it is usually contained in a page or screen. For the sake of being device-agnostic, I would define it as screen – it being displayed thru a screen.

    <div class="ui-cr--screen">

    Other types of UI Containers are:

    • screen
    • dialog box
    • drawer
    • panel
    • pop-over
    • overlay

    Erratum

    In my entry, UI Type and State Class Naming Convention, I used UI Type to define a dialog box – while in this entry, I used dialog box as one of the standard UI Containers.

    I am now using UI Type to define a specific UI – something that one invents and not a standard in the community. For example, you’ve created a three-column panel that slides one by one – you could dub it as “three-col-panel” thus <div class="ui-type--three-col-panel">

    UI Container is a modifier – once you’ve added this class to a component, it modifies its standard structure to take the form of the said container. The same can be said for UI Type, but what it modifies is the whole view, including the containers. Simply put, you may be in Terms & Conditions view, and while it is contained in a screen or page, once you’ve added a three-column-panel UI Type, the layout transforms into a three-column type of layout.

  • Dubbing HopScotch Versions

    It’s very easy to number versions (e.g.,version 1, version 2, version 2.0) – it’s linear and you could place decimal points for smaller versions.

    However, it’s boring. That’s why the likes of Microsoft, Android, WordPress (and a lot more) dub their versions or releases around a theme.

    Let me introduce to you song titles from Gallagher Brothers’ bands (Oasis, Beady Eye, Noel Gallagher’s High Flying Birds).

    Oasis Tapes
    Cassette tapes of Oasis.

    But with a twist – to give it state-of-the-art, 21st century, electronic and digital age treatment (I won’t put an “e” or “i” as prefix nor remove any vowel before “r”), I will capitalize the letter of the second word found in a compound word. In case of two-word song title, I will compound them with the same capitalization (e.g., ChampagneSupernova).

    HopScotch 3 is “WonderWall”.

  • Philippines Is on a Roll

    The 20 Fastest-Growing Economies This Year

    The world is expected to grow 3.2 percent in 2015 and 3.7 percent next year after expanding 3.3 percent in each of the past two years, according to a Bloomberg survey of economists. China, the Philippines, Kenya, India and Indonesia, which together make up about 16 percent of global gross domestic product, are all forecast to grow more than 5 percent in 2015.

    Source: The 20 Fastest-Growing Economies This Year on Bloomberg.com