Author: Brian Dys

<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:

See the Pen Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.

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.

See the Pen Padding and Framing by Brian Dys Sahagun (@BrianSahagun) on CodePen.

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:

See the Pen Padding with Fixed Dimensions by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Main Navigation

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Toolbar

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.

And finally… a light at the end of the tunnel!

Republic Act No. 10557 – An Act Promoting and Strengthening Filipino Design

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.

I managed to remove the slug “blog” from the main site of my WordPress Multisite.

Now, why would I want that? Simply because my URL is: blog.dys.ph. It it sure looks not ok to have: blog.dys.ph/blog/post-name, right? So I removed it.

Here’s how:

1. In your main site (the one with the “blog” slug), go to Settings > Permalinks (/wp-admin/options-permalink.php)
2. Choose “Default” and Save Changes
3. In your Network Admin Sites (/wp-admin/network/sites.php), edit the main site
4. On the Edit Site page, go to Settings (/wp-admin/network/site-settings.php?id=1)
5. Scroll to Permalinks section and populate the field with this value “/%postname%” (without the quotation marks) and Save Changes
6. Go to the URL of your main site and try it out – the “blog” slug should be gone

Someone’s lurking in the shadows in the alley – watching Sketch and InVision pass the ball between them back and forth, forth and back.

Lo and behold! Adobe comes out snatching the ball and slam-dunkin’ it in the ring.

While it rains shattered fiberglass, it introduces Comet.

A whole new experience in user experience design.

Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. Coming in early 2016 from Adobe.

Currently, these are my default plugins whenever I would install WordPress:

• Akismet
• Jetpack
• Limit Login Attempts

Update: 8 April
As I am looking for ways to concatenate CSS and JS files in the theme that I’m working on (Applicator), I tested several PHP scripts and WP plugins.

And the only thing simple enough to work is Better WordPress Minify.

This is just what we need for government websites in Philippines – web design standards:

https://playbook.cio.gov/designstandards/

Once and for all, stop thinking too much when you write. Pages and pages of ideas pass you by as you think too much. Write, just write.

Let this be a sketchpad wherein raw ideas – instead of getting drawn – get serialized into a whole that might make sense. To you, to me and anyone in between.

—

My name is Dys – the lead designer of DYS design studio. Our power is in designing user interfaces for the web.

In here you might find stuff about the design process, front-end development and WordPress. And some of the tools that I use to make things happen.

Please bear with me if everything in here is a work in progress, open to debate and unassuming & unapologetic at the same time.