June 2020

Brian Dys

Creative Leadership
Updates Category Archive Index
220
Categories

SodaPop: An Audacious Project

22:15:11
22:15:11
Brian Dys Avatar Brian Dys
0
Comment
Mountain Dew
The aftermath of a Mountain Dew soda can after being milked of its various sounds.

I got FruityLoops 3 to manipulate and produce tracks, good ol’ Winamp 5 to play exported materials and convert files to uncompressed WAV. And now, Audacity to trim and stitch raw materials.

What is this project all about

It’s all about SoundThemes™ wherein sound effects is another layer of the user experience. But that’s not all – it wouldn’t be a theme if the collection of sounds is fragmented. This would be used in all kind of actions and hints in any game or app.

So for this prototype, I used our favorite urine-colored drink – Mountain Dew to collect all sorts of soda can sounds. Using iPhone 4’s Voice Memos app, I recorded all clinks and clanks of the can from full to empty to down the trash can.

Let me hear!

Girls and boys, I present to you the raw recording (but that might probably bore you):

So here’s a trimmed and stitched version:

And an electronic version using only the individual sounds of the can:

Categories

A Dose of Negativity

17:57:54
17:57:54
Brian Dys Avatar Brian Dys
0
Comment

If you have a padded content, everything in it will be bound by the padding around it.

But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.

We use negative left and right margins to offset the spacing brought about by the padding.

Negativity only for margins

The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for margin-left: -1rem, it will allow the content 1rem at the left – couple that with a margin-right: -1rem, it will allow the content 1rem at the right. That will offset the 1rem padding around the container.

[codepen_embed height=”798″ theme_id=”1820″ slug_hash=”FybHu” default_tab=”result”]See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

As tested on the img element, margin-right does not work – so we wrap the image in a div and apply the negative margins on that element.

You can use negative margins to offset/correct unwanted spacings around elements.

Categories

Iterations, Iterations, Iter

18:44:59
18:44:59
Brian Dys Avatar Brian Dys
0
Comment

Update – 10/9/2014

This post has been moved to Design DriveThru.

Iterations
A sketch of component mapping.

It’s like trying to solve a puzzle – you try out different solutions until you either come to a dead end or to face more questions.

That’s how it is trying to establish a foundation, a system in simplifying the process of designing an internet product such as websites, apps, and nowadays, whatnot.

How can we simply turn the abstract ideas of clients into a bunch of playing cards we could easily identify and arrange and ultimately build into a house (not made of cards)? Also at the same time, with only a flick of a switch, upload themselves and make available for usage.

That’s what I’m trying to find out (at least the first part).

I’m lazy. But it’s the lazy people who invented the wheel and the bicycle because they didn’t like walking or carrying things.

~ Lech Walesa

Categories

Lay It on the Table

18:12:13
18:12:13
Brian Dys Avatar Brian Dys
0
Comment

HTML Tables Used for Layout? Pepperidge Farm Remembers

I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block, max-width: 100%, and overflow-x: auto. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.

[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

More
Categories

I Agree to the Terms of Agreement

13:19:39
13:19:39
Brian Dys Avatar Brian Dys
0
Comment

A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.

My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.

I Agree to the Terms of Agreement

But nothing happens because the label is a mere label unconnected from the form element (checkbox).

How do we make it easier for the user?

We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.

More
Categories

Week-links 5: Jun 9 – 13, 2014

11:18:12
11:18:12
Brian Dys Avatar Brian Dys
0
Comment

  1. White-label product

    A white-label product or service is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they made it.

    Source: http://en.wikipedia.org/wiki/White-label_product

    If clients say, “We want this widget white-labeled,” theme it, rebrand it, they mean.