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!
Discussing more about Git. Personally I use GitHub Desktop when working mostly with WordPress.
Imagine a 16 x 16 px home icon that also has a 16 x 16 px active area. This little thing is prone to be missed upon activating (clicking or tapping) especially when laid out side by side with other active elements with similar dimensions.
See the Pen A Small Icon with a Small Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.
Providing ample space around it away from other elements might lessen the chance of mistakenly activating something else but it won’t make it easier to hit. This is where Padding comes in.
Padding refers to increasing, at least to a minimum of 38 x 38 px the dimensions of the active area of an element. This technique prioritizes the usability of that active element in such a way that it is easily clicked by a pointing device or tapped by touch because of it’s big-enough area.
See the Pen A Small Icon with a 38 x 38 px Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.
A type of Padding wherein the active area, apart from having minimum dimensions, its size is being determined by its content. The active area at 38 px is wrapped around a content but if the content is bigger than the minimum of 38 px, the container will respond.
[html]
<div class="axn_cr">
<a href="#">
<span class="label">Label</span>
</a>
</div>
[/html]
[css]
a
{
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
height: 48px;
min-width: 48px;
box-sizing: border-box;
}
[/css]
As front-end designers, we are using patterns over and over again – we are employing specific techniques to answer specific needs. But what we lack is a term, a name tag for those methods.
It’s simply like the Flying V of The Mighty Ducks!
So far, I’ve added Padding and Framing to my vocabulary.
Let’s try another one. Say for example, I need the following for my website’s header:
What kind of solution does this need and what can we name the technique?
Here at Phivolcs Building at Diliman, QC attending the Training of Trainers (ToT) for GWT.
Discussing about the WordPress basics.
The success of a product’s interface was dependent upon how well the designer understood 2 parties: the human using it, and the capabilities of the machine on which the software ran.
Here’s my fashionista grandma with my grandpa’s 1974 Benz.
Related:
