Category: Updates

  • Crazy Times: Connected Devices Everywhere

    Update – 10/9/2014

    This post has been moved to Design DriveThru.


    When you thought that internet was going to obliterate all sorts of existing media, you were mistaken. It is silently, slowly killing them one by one by being the second screen – by being there in support of what’s showing on the TV.

    One day, it will be the only TV.

    I don’t know but it’s creeping in unimaginable ways. First, browsing while taking a crap. Now, 9GAG while in the shower!

    The "latest" mobile phone usage in context.

  • A D-Tour at Smart

    Update – 10/9/2014

    This post has been moved to Design DriveThru.


    Four of us from Chikka visited Smart by invitation from Edmond Gozo – the Experience Engineer of Smart. He told us he’ll show us something on the works related to the Design Thinking workshop we recently held under him.

    The D-Room

    The term, D, was inspired by the d.school (Institute of Design at Stanford). With school supplies and cardboard-styrofoam construction materials abound, it seemed more like a playroom at a pre-school wherein you get to do something from scratch the whole day.  It was a teleport from the traditional meeting room wherein there’s a table, chairs, and an intercom at the middle.

    Sticky notes were flaking the walls with drawings and ideas of existing and conceptual products. This is where ideas get churned and grinded, I thought.

    Although still at the prototype stage, it is not the physicality of the room that will get to be replicated at various locations in the building – it is the mindset, the distinct experience of people using the room. The room becomes a means to cultivate the change in the culture of people.

    In simple experiments like this we enable ourselves to progress and accept changes that are inevitable.

  • Week-links 4: Apr 21 – 25, 2014

    1. Timeline JS

      Beautifully crafted timelines that are easy and intuitive to use.

    2. Pngyu

      Pngyu is simple PNG image file compression tool.
      Pngyu use pngquant as a compression engine.

  • Week-links 3: Mar 24 – 28, 2014

    1. Gzip Compression

      Turbo-charge your website’s loading speed by gzip compression.

      gzip is a software application used for file compression and decompression.

      How gzip compression works by Google Developers

  • Jumping to Chapters Using IDs in Anchor Tags

    Chapters - Anchor Links - Time
    A screenshot of a Time article showing the Chapters in anchor links.

    Here’s what I particularly like about Time articles – the Chapters are neatly lined up on top in anchor links. In case you want to jump from one part of an article to another.

    TearSheet

    The simplest way to implement this is to use the id of the element and put that into the href attribute of your a element.

    For example:

    [code lang=”html” title=”HTML”]
    <!– Activating this link will jump to Chapter Title 1 –>
    <a href="#chapter-title-1">Chapter Title 1</a>

    <!– Chapter Title 1 –>
    <h2 id="chapter-title-1">Chapter Title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    [/code]

    You can see a demo here:

    [codepen_embed height=”424″ theme_id=”1820″ slug_hash=”heoAl” default_tab=”result”]See the Pen heoAl by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

  • C Versus V

    Right now in my career, it seems like C is complacent enough because of the fact that it is being sustained to existence by S. Even with the fact that there is a struggle to stay relevant against a sister competitor, V, innovation and quality in the products that we deliver is so-so. We are departmentalized in the sense that there is no perceived changes and development company-wise. Each team can be very innovative on its own – but on the context of working on actual projects – the old ways, which the product development people are stuck in, tramples it.

    We are stuck in the ways and popularity of CTM during its heydays. Until now, it’s still the old CTM with an increment in number which is 6. It’s like Pilita Corales trying to stay relevant in the 21st century by being simply Pilita.

    But here’s the clincher – C A and PA. Both are innovative products that already hit the market. For the latter, the money put on advertisement is grand – if only they allotted that money to get the PA team in a private beach resort to develop that product – away from S’s Marketing team – the product wouldn’t be as “meh” as it is now.

    I am happy and content with the fact that C, as a company, sets its eye on the long term; is being-business driven – that on the long haul all other companies and products will tire themselves up and become irrelevant while C, in its careful planning and superb strategy manages to live on. Slowly but surely.

    But the key to almost anything is balance. If one has been on the long-term planning for so long, one has to delve into the short-term, too. People – employees to be exact, don’t want to be stuck inside gray walls, gray cubes while waiting for the glory days to come. They must see a leader or a mentor telling them where we are and where we’re going. It might be through a long and winding road – but the leader makes it sure that there are stopovers along the way.

  • In Designing and Creating

    Messenger Pad
    A Messenger Pad 2100 with an iOS 7.1 home screen. Remix by BS

    I dabble in creating a framework in HTML and CSS because I connect how sleek a design is on the outside to its inside and to how good it works.

    Here’s Jony Ive in an interview with Time to ’nuff said it:

    Objects and their manufacture are inseparable. You understand a product if you understand how it’s made.

    ~ Jony Ive, Senior VP of Design at Apple Inc.

  • Project Folder

    Project Folder
    A picture of a computer monitor displaying the project folders in Windows Explorer.

    Upon archiving stuff in my old hard drive, I encountered my equally old (circa 2004) template of Project Folder. Over those years in designing websites, I’ve personally developed a system for organizing project files.

    Project Folder v1.0

    This particular Project Folder was structured as such:

    • Project Folder: renamed to the [Project Name]
      • Archive: screenshots, document files, research resources, miscellany
      • HTML: the front-end stuff like HTML, CSS, media assets
      • Source: the source files like Photoshop, Illustrator files
      • Templates: image mock-ups in JPEG, PNG

    Fast forward to 2008 – I was at the Chikka office for a Senior UI Designer interview. One of the questions I was asked was how I organized my design and development files or if I did. I proudly discussed Project Folder v1.0 since I developed it myself.

    Project Folder v2.0

    When I joined the team at Chikka, I learned to use a similar system (which was used by developers) and from what I remember, it was patterned after repositories.

    • Project Folder: renamed to the [Project Name]
      • comps: contains wireframes, studies, mock-ups, design artifacts, and any file ready to be sent out for approval
      • docs: contains documents from product developers such as Business Rules, Use Cases, screenshots, pegs, font files
      • dev: contains HTML/CSS/JS files
        • branches: contains the temporary/experimental development files
        • trunk: contains the latest version of the development files
      • raw: contains the source files of artworks, graphics (PSD, AI, PNG)

    This approach was way better and more appropriate in a web development setting so I also adapted it to my freelance work.

    Shortly after, mobile became a “thing”. Suddenly, from a couple of platforms, Pandora’s box was wide open. Our team needed to adapt – first, in the file management level.

    Project Folder v3.0

    The significant change I made was simply an addition of another folder to categorize the platform type the project fell under. For example:

    • Project Folder
      • Android
        • comps
        • docs
        • dev
        • raw
      • iPhone
      • Web

    For you designers and developers out there, do you have a similar approach? How does your file management system vary from project to project?

  • Trying Out Getty Image’s Embed Feature

    Here’s Beady Eye lead, Liam Gallagher:

    You see the “</>” icon below the image? That’s the embed action which you will see along with all (I assume) images in Getty’s website.

    Getty Images is leading the way in creating a more visual world. Our new embed feature makes it easy, legal, and free for anybody to share our images on websites, blogs, and social media platforms.

    It’s OK to have additional information (at the bottom) as long as Flickr keeps it neat where most of the images are my own.

    Days of erasing out watermarks are so long ago.

  • Week-links 2: Feb 24 – 28, 2014

    1. Dirty Markup

      http://www.dirtymarkup.com/

      DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code.

    2. Pencil Project

      http://pencil.evolus.vn/

      Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.

      Pencil Project

      Platform:

      • Mac
      • Windows

      For wireframe-creation. It can also create prototypes by linking different pages of your project. So you can do something like “activate this and that will happen.”