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!
This is the first round of Cascading Style Sheets—CSS for short. CSS is a Style Language that defines the visual design of an HTML document. This single responsibility of CSS makes the structured content of the document reusable in different contexts.
Interactive Elements (IE) in a web page pertain to elements that can be interacted upon. Common examples of IE are links, textboxes, buttons, and other form elements. A way of improving the usability of IE is by optimizing its Active Area (AA) so that it is big enough for clicks and taps. A good rule of thumb is having a minimum dimensions of 44 x 44.
Linked texts such as navigation items could have an optimized active area by having a padding. Form Elements such as textboxes and buttons, on the other hand, could be styled with a legible font size and a height.
.secondary-navigation a {
display: inline-block;
padding: .75em 0;
}
.text-search input {
height: 36px;
font-size: 1em;
}
.search-actions button {
height: 36px;
font-size: 1em;
}
This part of the activity is where we would style the elements according to the visual design or look of the web page. The colors pertain to background and foreground color—in the case of a button, the background color is the color of the button and the foreground color is the color of the text.
Graphic Elements include borders, shadows, lines, among other things that make up the look of the element.
.account-action a {
background-color: blue;
color: white;
text-decoration: none;
}
See the Pen RE:Creation No. 1: Google | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
<div class="group-name"><div>, mark up the group of form elements in <form><div class="text">One thing to consider when designing the visuals of a timeline is that the highlight (in the form of a bullet point) must be on the date.
See the Pen Timeline Visual Design on Article Dates by Brian Dys (@briandys) on CodePen.
Admittedly in the design industry, there are lots of terms being used to call design artifacts (not to mention their combos)—flowcharts, wireframes, wireflows, comps, FAs, and prototypes.
A prototype is not an artifact per se but what we make of an artifact. It cuts across disciplines and stages in the design process because of its purpose—to foster innovation, collaboration, and creativity by presenting and testing it to a relevant audience.
A set of wireframes designed to communicate a specific functionality is a prototype. Even a flowchart that communicates the flow of tasks is a prototype.
Recently, I’ve come across the term “Click–Through Prototypes” which also is “Interactive Prototypes”—the ones wherein the test participant could click on specific elements and be taken to the next interaction point.
I knew it from decades ago as “image–mapping” or putting “hot spots” in elements we want to be clickable.