Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
A common problem in apps is when active elements have active areas the size of the content.
For example, a small text at around 12px will be easy to miss when tapped. Apart from this, it presents anxiety to the user that he/she might miss it when it needs to be tapped.
The solution is simply increasing the size of the active area thru Padding.
See the Pen Increasing the Active Area of FB Likes and Comment by Brian Dys Sahagun (@BrianSahagun) on CodePen.
GWT stands for Government Web Template and I applied to be a trainor for its WordPress version of the template.
I still have to attend a week-long training to complete the accreditation.
Wish me luck!
<a> packs a solid punch when it comes to the world of web.
It can contain information and most of all it is a point of interaction.
You tap it, you click it, you do something to it and it responds.
So it is very important that links, buttons and any active area (clickable, draggable, or can be interacted with) on your web product (websites and webapps) is padded or has enough area to be easily interacted with.
How to pad elements? Simple. Add padding and dimensions (width and height).
Here’s an example:
Here’s another usage wherein the visual element is actually small but the active area is large enough for pointing devices. You may imagine this as a toolbar icon the size of an ant but the surrounding area is clickable.
In the example above, you will notice in the CSS tab that I included Framing. Framing is simply wrapping an element in a <span> or <div> for the purpose of styling it independently from the surrounding elements.
Here’s another example of Framing and Padding a link with fixed dimensions:
Real World Example: Main Navigation
Real World Example: Toolbar
And finally… a light at the end of the tunnel!
Implementing rules and regulations of Republic Act No. 10557, an act promoting and strengthening Filipino design, providing for the purpose a national design policy and renaming the Product Development and Design Center of the Philippines into the Design Center of the Philippines and for other purposes.
You want to design and post your daily quotations to Faceboook and don’t know software like Photoshop? But hey, you’re a master of apps like Instagram and Camera360, right?
Here are two simple ways that can help you with boosting the design of those graphics!
- Get some really nice photo from these free stock photo site:
- Layout using any of these apps:
That’s it, don’t forget to share that graphic now!