Category: Updates

  • Technical Document

    Web products need to be supplied with a Technocal Document. Its content are the basic specifications of a mobile app or website in the following aspects:

    Filled-up by developer

    • Programming Language

    Filled-up by product developer

    • Browser Version Support
    • Mobile Version Support

    Filled-up by front-end designer

    • Mobile Response

    This document aids all team members involved in the project by providing with a preview of each team’s specifications. It also puts in context the capabilities and limitations of the product.

    Consider this scenario:

    • the mobile app is in its Behavioral Testing stage
    • the tester is informed that the mobile app is supported under a very old version of Android
    • the tester ensures that the mobile app is tested on all key versions of Android

    The same goes for websites wherein each team member knows that the product will not be supported in IE versions 8 and below.

    See an example of a Technical Document

  • Notes on User Research

    User Research

    • Input – research and requirements; output – design artifacts, actual product
    • How did we come up with the problem and solution?
    • Have one solution and validate with users
    • Set target users; create personas
    • Continuous user research
    • Improve the product for both the business and the users

    UI Review/Usability Testing

    • Refer to Components Masterlist
    • Refer to Usability heuristics
    • Create metrics
    • Create activities and tasks
    • Create directions on how to assume a persona
  • Garage Selling: OLX and Tackthis

    OLX vs Tackthis
    A graphical representation of Tackthis and OLX websites.

    I’m in the process of letting go/disposing of/getting rid of/selling stuff that I no longer need around the house. In line with this activity, I signed up for two online shops, namely: OLX and Tackthis. Both offer free registration so I went on to set up my online shops.

    Just a disclaimer, this blog post does not intend to rigorously compare the two services – I would simply like to document my experience as a user/seller – specifically the noticeable stuff whether positive or negative. Also, this could be an ongoing piece of “review” as I go along with this new adventure of garage selling on the internet.

    (more…)

  • Visual Variables and Animation Diagram Teaser

    Visual Variables and Animation Diagram Teaser

    We’re working on two projects that we’d like to share with you – Visual Variables and Animation Diagram – both of which aim to bridge communication between visual and front-end designers working on web projects.

    Check back on Monday for updates.

    10/8/2014

    Visual Variables and Animation Diagram are available!

    See Visual Variables

    See Animation Diagram

  • Excluding a Content from Getting Styled

    The layout of HTML Patterns contains the following:

    • web view of the HTML markup and CSS
    • source view of the HTML
    • source view of the CSS

    Both the textarea of HTML and CSS are editable to immediately update and reflect the changes on the web view.

    The Problem

    One thing that gets in the way is that the stylesheet of the site gets applied to the content in the web view. The favorable behavior is for it to appear unstyled by default and only the CSS in the source view will affect it.

    Possible Solutions

    1. Contain the web view in div and use style scoped
    2. Reset the style by targeting the parent selector of the web view container
    3. Use iframe srcdoc

    Each of these solutions are not without quirks. I will do a quick follow up as I test for the best solution in this situation.

    Stay tuned!

    10/01/2014

    As far as HTML Patterns is concerned, I settled with #1 – the original solution. Although style scoped is only supported by Firefox, the important thing is that the HTML markup is seen and it is interpreted in the web view. An advantage for Firefox users – they will get to see the style in the web view, too.

    Regarding resetting the style of elements in a specific container, the CSS property all and its value initial, again, is only supported by Firefox. What I did was to manually reset each property that was previously set by the HopScotch stylesheet.

    iframe srcdoc works best in bringing back the style of the content to browser default but it’s hard to control when it comes to live-updating the CSS (aside from the fact that, again, only Firefox supports that attribute).

  • About HopScotch

    HopScotch

    HopScotch is a Free WordPress Theme.

    Principles

    What goes into the creation of HopScotch?

    1. Progressive Enhancement
    2. Responsive Web Design

    History

    The name HopScotch was derived from the children’s game, hopscotch. According to Wikipedia:

    Hopscotch is a children’s game that can be played with several players or alone. Hopscotch is a popular playground game in which players toss a small object into numbered spaces of a pattern of rectangles outlined on the ground and then hop or jump through the spaces to retrieve the object.

    The idea of sequential blocks that form the whole diagram is the basis of the name adaptation. Similarly, the structure of HopScotch’s HTML is arranged based on the importance of the information. This basic idea is inherent in each group of data that form a source of information.

  • Branding for Photographers by Heidi Aquende – Some Notes

    I’ve had the privilege to attend a talk at Camera Cart about branding for photographers.

    Heidi Aquende invited me to their studio’s 6th anniversary. She did not say who were speaking – only the topics. I chose the first one in the morning and it she who’s speaking.

    Please read with discrection since these are simply notes from the actual context of the talk. Nevertheless, the gist is in there.


    Make a brand around your company

    Using your own name as the company – better because of perceived trust that you will protect your name’s reputation.

    Brand Perception

    • functional/technical
    • emotional

    Tip #1 – Offer quality work

    • be confident with your work
    • poor quality can quickly damage your work
    • let clients see you only want quality
    • it’s not just the service but also the products
    • appear quality – be presentable

    Tip #2 – Be clear about what you stand for

    • unique selling proposition
    • what are your values
    • what do you promise your customers
    • what makes you one in a million

    Tip #3 – Stand out, be different

    • differentiate and customize

    Tip #4 – Be consistent

    Tip #5 – Choose your team

    • suppliers, employees
    • choose who represents you

    Tip #6 – Price better

    • don’t show price in the website
    • discounts and low prices attract price-sensitive clients who might not be for long-term
    • price wars ruin industries
    • price drops teache people to wait for the sale which is soemtimes bad

    Pricing – 4 ways

    • big guess
    • competitive pricing
    • cost pricing
    • demand pricing

    Tip #7 – Find the right clients

    • you can’t please everyone
    • it’s not just about demographics anymore
    • rich clients are not necessarily your clients

    Tip #8 – Give over the top customer service

    • under promise, over deliver
    • listen to negative feedback

    Tip #9 – Nurture relationships

    • Pareto principle – 80% of your income comes from 20% loyal customers
    • keep evangelizers happy
    • reward referrals
    • constantly surprise clients

    Tip #10 – Think long term

    • don’t scrimp on your brand
    • prepare for refund
    • plan ahead
  • Front-end Design Principles

    Here are some guiding principles we’ve adapted along the way in the web design and development industry:

  • Accessible Name and Friendly Name

    If a component is significant enough, it must contain a component name in the form of a heading element (e.g., h1).

    But sometimes there’s a big tone discrepancy between the name of the component and what you want to say in the heading. Consider this example:

    [html]
    <div class="registration-component">
    <h1>Welcome! Please register.</h1>
    <form>…</form>
    </div>
    [/html]

    Although, the context of a registration component is mentioned both in the class name and in the heading element, it still fails in providing an official name for the component which can be crawled by search engines and read by screenreaders.

    The Solution

    It would be what we call an accessible name. It is a formal name for the component inside a heading tag. In the existing example, the heading with the brand tone or voice would be a friendly name wherein we can get creative about.

    Here’s a better example of that registration component:

    [html]
    <div class="registration-component">
    <h1 class="accessible-name">Registration Component</h1>
    <p class="friendly-name">Welcome! Please register.</p>
    <form>…</form>
    </div>
    [/html]

    In CSS, we could visually hide the accessible name and always use a friendly name even if they both have the same content (mostly for HTML markup consistency).