Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
Product Design Lead at Voyager Innovations and Founder of DysineLab
What has been your most notable rebel accomplishment or experience?
The user interface team at Chikka has managed to incorporate a vital step in the design process. Before, sketches and wire frames were sidestepped in the process of developing web products. Now we have shared the knowledge with product developers that those are important in every project.
Recently, the design team is conceptualizing on a new Chikka Text Messenger branding.
As you very well know, the phone and mouse icons aren’t up with the times already. Mobile phones have shed its antenna and keypad; the mouse, well pretty much some still look the same.
What is Chikka Text Messenger?
Chikka Text Messenger or CTM helps Filipinos abroad communicate thru SMS with their families and friends here in Philippines (PH). Basically, if you’re abroad, you text your mom (in PH) thru CTM app using Wi-Fi or data then she receives it as plain SMS. But if she’s also using CTM app and is online, then she receives the text thru the app like instant messenger.
The Balloon Ear
We started the branding redesign by this square icon:
From here, I simply extracted the message balloon. The resulting icon, also shaped like an ear, embodies communication from end to end – you speak and the recipient listens and vice versa.
The year was 1998. The place, Taft Ave., Manila. Clad in plaid shirt and my khaki slacks were accentuated by a brick in the left side pocket. It was a Nokia pre-5110 model (similar to the one pictured below). I took it out of my pocket, extruded the antenna to gather some signal and called my mom.
“I just finished the exam,” I said with a sigh of relief.
“DLSU Engineering, here I come.” I smugly slid back the cellular phone into my pocket.
No doubt that kids are attracted to pretty graphics. That’s why my grade 3 classmate who owned a personal computer was more popular by owning a Gyromite device with his Nintendo.
The PC screen was black and white and sported a keyboard and a dot-matrix printer. We used it to type and print some school papers. Then we’d trade NES game cartridges and play ping-pong on their dinner table.
The mouse in the house came a little later in ’95. It had a ball that gathered dirt. And yeah, the PC screen was colored already and said Windows 95.
We might feel that technology is leaving us behind especially if we try to keep up with it. But just like the phone and mouse, they simply evolve into more functional tools – the mouse lost its tail – the phone dropped its antenna and dissolved physical buttons – but they are still the phone and mouse we use to communicate with someone and control something, respectively (or soon interchangeably).
Maybe one day they will be totally transformed into something that we won’t recognize anymore (as compared with the pictures) — that’s how evolution goes as far as survival is concerned – you adapt and evolve or you simply perish and be forgotten.
Chikka created the world’s first instant messenger for online chat to integrate mobile features via SMS. In 2000 the very first version of Chikka Text Messenger™ was tested for launch by its very first mobile operator partner Smart Communications. ~ Source
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.
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:
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.
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.
And lastly, whenever you want your vitruvian man to do some break-dancing, add some script.
Combine all three layers and you’ve got that breakdancing streetdancer.