The web browser has become a non-destructive editor.
See the Pen Rachel Yamagata – Happenstance – Album Cover by Brian Dys (@briandys) on CodePen.
Category: Frontend Design
-
The Horse in Motion
Dabbling on RE:Creation No. 3—will publish soon.
See the Pen RE:Creation No. 3: The Horse in Motion | CSS by Brian Dys (@briandys) on CodePen.
Reference
-
A Two-Week Timeframe
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.
-
Timeline Visual Design on Article Dates
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.
-
Using as Placeholder Attribute
How about applying the DRY Principle in a user interface?
One method is by using a single element to have multiple functions. In the case of a <label> and a placeholder attribute in a <form>, we could simply use the <label> to be the only label of a particular field—as opposed to having two.
Besides, their main functions are to tell the user what field it is and what it expects as a user input—so why not optimize it?
Regarding its accessibility, please read an 2010 article from WebAIM and a recent one from Smashing Magazine.
Here’s a quick PoC. Try focusing on a field and see the label move.
<p class="codepen" data-height="300" data-theme-id="1820" data-slug-hash="YjowRP" data-default-tab="result" data-user="BrianSahagun" data-pen-title="Using -
How do I know which CSS attributes work on each HTML tags?
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.).- The nature of the HTML element
- The purpose of the HTML element
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…) -
Why does experimenting with CSS feel so overwhelming?
One might categorize CSS experimentation into two:
- Static experimentation (visual design – layout colors, typography)
- Interactive experimentation (animations, interactivity)
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.
-
What are the most common CSS tricks for media queries?
The most common approach in using media-query, which is also strategic, is abiding by the Mobile First principle.
- Begin your non-media queried style for mobile
- Add a media query for the next viewport size you’re designing for. For example, tablet size then desktop size
I mentioned strategic because it also tackles the concept of Less Is More or in other words, decluttering or prioritizing.
-
What topics (except the HTML, CSS & JS part) should I learn in order to become a skilled front-end web designer and a UI designer?
Since you’ve already mastered the basic languages of web development (HTML, CSS, JS), you are now basically skilled as a Front-end Designer.
Now, how to be a skilled UI Designer?
- Learn how to interpret the Product Requirement Document
- Learn how to translate the Task Flow Diagram into individual Wireframes and eventually into an Interaction Diagram
- Learn how to transition the designs to the Visual Designer and Front-end Designer/Developer
-
What would be the best plan for changing a career path from a UI designer to a UI developer?
Dive deep into front-end web development (HTML, CSS, and JS) and take it from there.
Start by taking on personal projects wherein you will be the one to implement the front-end development aspect.
Practice via personal projects.
