Emotions convert into Clicks


This is a republished article that is originally written for ReFUEL4 Blog. The original content can be viewed from this link. You can see all of my ReFUEL4 Blog articles from here. Permission to republish this content has been granted to me by ReFUEL4 before I decided to put it here in my personal blog.

Designing Effective Ads

We see many things, in our perspective, as we go through our daily lives. With such routinary experience, we almost, as always, filter what we see and we tend to ignore things that look too common, dull and uninteresting. Conversely, things that convey strong emotions, especially those that we can relate to, make us stop for a while and create time to observe it.

Emotions in Ads

When creating an ad, this is a simple guideline to remember, “Emotions convert into clicks”.

An emotion is a reflection of someone’s feelings. When we look at a living thing, particularly ones that can express feelings, we are somehow able to determine the emotions it is conveying. Banner ads are creative pieces of work that should connect to its audience on several levels. One of them is surprisingly uncommon — that is connecting to the user on an emotional level. Being one of the audience, it is the visual stimulus that usually attracts our attention before we actually see or read the rest of the banner’s content.

Please do remember that the first and the hardest goal of every banner ad is to get the attention of its intended audience. Banner ads are too mainstream as we are exposed to tons of them as we live our daily lives. The possibility of an ad being ignored or neglected is very high. Utilizing strong emotions will surely help to make the ad stand out and be more tempting to pay attention into. Displaying strong emotions in the ad draws the eyes to look at it. Once the banner ad gets audience’s attention, the advertisement messaging kicks in.

Human Beings

Your target audience are human beings. We, humans, are naturally attracted to strong emotions. Think about the last images that caught your eyes and attention. You may remember looking into happy faces, crying babies, angry dogs, exhausted workers or even cartoon characters displaying intense emotions that tend to get attention. Those things that show emotions may increase the possibility of someone interacting or giving attention to it.


A banner ad is and should not be just a product of an artist’s imagination and skills. It must deliver a message to its intended audience. It must have an ultimate goal of connecting to every target user. By creating banner ads presented with very strong emotions, it will surely attract an audience, which is a human being, asking to sense it and eventually perceive its message. When that happens, the banner ad should gain a much higher probability of getting clicked compared to banner ads not showing any emotion.

Banner ads designed to communicate by visualizing emotions gain traction. This may seem a theory to some but is sensible to most. If you are a Banner Designer or Rich Media Developer, you definitely need to try this and be amazed of the results. Happy designing effective ads!

Emerging Web Technologies


I will be updating this article indefinitely as I am constantly eyeing for emerging technologies particularly in web development, rich media development, social media development, user interface (UI) and user experience (UX), software and hardware, third-party services, development processes and systems administration. There are too many technologies and iterations available. To prevent conflicts and information overload, I am presenting these ideal rosters based on my personal opinion. If you think yours is more sensible to consider than those included in this list, probably due to environment and situation, then feel free to alter some entries in the list.

Front-End Development

I did summarize the technologies and libraries I would prefer for modern Web Development concerning Front-End:

  • HTML5
  • CSS 3
  • JavaScript
  • Vue.js
  • Twitter Bootstrap
  • LESS

Back-End Development

Here is the complete back-end stack I would recommend for fast and scalable web application:

  • Ubuntu/Linux
  • PHP 7
  • MariaDB
  • Laravel 5.5

Media Editing

Listed below are the tools and softwares you need to utilize in order to create and optimize image assets for web pages:

  • Adobe Photoshop
  • Adobe Premiere
  • Media Encoder
  • TinyPNG and TinyJPG
  • Favicon & App Icon Generator

Rich Media Development

Here are the tools and libraries, both HTML5 and Flash, necessary for modern development of Rich Media creatives:

  • Adobe Flash
  • ActionScript 3.0
  • TweenMax AS
  • Google Web Designer

Social Media Development

Here are the tools, API and SDKs needed to develop Facebook Apps, Twitter-backed apps, SSO, and the like:

  • Facebook API
  • Facebook Developer
  • Facebook Page
  • Twitter API
  • Google API

SEO and SMO Technologies

Below are the most efficient tools and technologies for both Search Engine Optimization (SEO) and Social Media Optimization (SMO):

  • Bing Toolbox
  • Google Search Console
  • Google Analytics
  • Google Maps
  • Facebook Open Graph
  • Twitter Card
  • Pinterest API
  • Sitemap
  • Robots.txt

Data Aggregation

Below are the following terminologies, formats and technologies you need to consider for data passing, aggregation, integration and syndication:

  • JSON (JavaScript Object Notation)
  • AJAX (Asyncrhonous JavaScript and XML)
  • CSV (Comma-Separated Values)
  • XML (eXtensible Markup Language)
  • RDF (Resource Description Framework)
  • RSS (Really Simple Syndication)
  • HTTP Methods
    • GET
    • POST
    • HEAD
    • PUT
    • DELETE
  • CORS (Cross-Origin Resource Sharing)
  • Query String

Coding Environment and Tools

I will list all tools and third-party applications that I often use together with coding, testing, file-transfer and saving:

  • Notepad
  • Sublime Text 3
  • Google Suite
  • Dropbox
  • Github
  • JSFiddle
  • Pastebin
  • Putty
  • FileZilla
  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge
  • Opera

System Administration

Here is a list of third-party providers of System Administration functions such as Domain Name Registration and Management, Web and Cloud Hosting, Dedicated IP and SSL Integration, Dedicated Virtual Servers, Ports and Security Policies and Infrastructure Scaling.

  • GoDaddy
  • Bluehost
  • AWS EC2
  • AWS S3
  • AWS Route 53


I can conclude that if you are knowledgeable of the technologies listed above, you can call yourself a fully fledged web expert which is, in my own opinion, way better than a full-stack developer. You know how internet works, you know how software works with hardware, you can design and animate, you can program and develop applications, you can deploy and troubleshoot, you can analyze and optimize data, and most of all, you simply enjoy the evolution of internet technologies.