Experimenting with colors in the browser can help you uncover new options and opportunities. In this online video tutorial you'll learn how to use HSLA color codes to simplify color experimentation when designing in the browser.
- View Offline
- [Voiceover] You may have noticed…that when I add colors to my designs in this project,…I keep using this HSLA color value…rather than HEX or RGBA.…And there is a very good reason for this.…It's actually a poorly kept secret in the design industry,…and it's extremely useful for design in the browser.…You see, when we apply colors in CSS,…like this brown-reddish color here,…we typically use HEX values,…which, unless you are a genius,…appear to be total gibberish.…There is a system there,…but knowing how that system works…and figuring out what this color is…can be really tough.…
Computer screens work on the red, green, blue spectrum,…so we can also use RGB and RGBA,…but again, this is really hard to figure out.…For example, how would you know that 132 red,…and 76 green, and 65 blue…would turn into this color?…It's not very clear.…The cool thing is…we don't have to use these two color schemes.…There is a third color format…that makes way more sense for us humans.…It's called HSLA, which is an acronym…that stands for Hue, the color,…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser