Recently, I’ve been drafting a Project Communications Framework that will guide the design team in handling design projects—from alignments to presenting our works. Committing to a timeframe is one important aspect and here’s a visualization of it.
See the Pen A Two-Week Timeframe by Brian Dys (@briandys) on CodePen.
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
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.
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.
There are initial points to take into consideration in order to make sense of the connection between HTML elements (<p>, <a>, <div>, etc.) and CSS properties (display, font-size, background-color, etc.).
You might notice that it is all about HTML elements. This is because HTML elements already have implicit CSS rules in them thru the browser. It is called the User Agent Styles or browser default styles.
Now your question borders around creating your own styles, thus, overriding the default styles.
(more…)One might categorize CSS experimentation into two:
Now, both could be overwhelming especially if you’ve already gotten past the visual design properties.
But yeah, that’s the way it is – whatever you’re building, you just have to take it one block at a time to be able to manage it – and lessen the overwhelmingness.
The most common approach in using media-query, which is also strategic, is abiding by the Mobile First principle.
I mentioned strategic because it also tackles the concept of Less Is More or in other words, decluttering or prioritizing.