Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
But I know every rock and tree and creature
Has a life, has a spirit, has a name
Colors of the Wind
The Name—Description—Purpose Information Structure or NDP becomes a tool in identifying any UI element within a system. The Designer would have a glimpse of what it is called (Name), what it does (Description), and why it exists (Purpose).
Be a jack of all trades and a master of none or a master of one (and more)? It is an age-old question.
It depends on the environment where you want to focus on:
- in a one-man band freelancing: jack of all trades
- in a company with team members with specializations: specialize
- in a company with “all-around” team members: jack of all trades
In general, be the best at one thing and not so best or at least familiar with other things.
There are many default usability styles designed by the browser.
Sometimes it is best to leave it alone because it covers a lot of area that you might not be able to cover if you nitpick it.
Now if the color of the outline clashes with your branding like “blue is really banned from your UI” then change it.
Or if the outline color is the same as the background color, it won’t be seen, of course, so change it.
It’s important to note that styles whose main purpose is usability must be left alone especially if your purpose is to simply comply with color schemes.
There are initial points to take into consideration in order to make sense of the connection between HTML elements (
<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.
Let’s frame your question in the following:
- You’re applying for a web development company
- Your portfolio currently would not demonstrate your superpowers
- But a Test Project will
- You are applying for a User Interface Designer position
- In the company, they have a UX Researcher and a UX Designer in the team
- You would like to foresee the Test Project that they will give you to be able to prepare for it
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.