When starting a new web design project, it can be a good idea to begin by establishing a design language. There are several ways to do this including style tiles, atomic design, mood boards, and so on. In this online video tutorial you'll learn how to create a design language to guide your web design project.
- [Voiceover] Before starting on the actual design of a website, it's a good idea to map out ideas and create a general design language for the site. This allows us to establish a look and feel of the design before starting to worry about things like fonts and exact sizes and positioning and layout and so on. One popular approach to this process is the creation of Style Tiles. Originally developed by Samantha Warren, Style Tiles are akin to mood boards for the web, and serve as a starting point for style guides. Creating Style Tiles for your web design is a relatively straightforward process where you collect stylistic elements such as colors and shapes and images and fonts etc., and place them in tiles on a page.
This gives you a predesign canvas to work with where you can establish a cohesive look and feel for your final design. I like to set up my style tiles in Adobe Illustrator and often make several for a project before landing on a final one to use. What you see here is the Style Tiles I created for this project. You can find it in the exercise files for this course under the materials folder, and you can use it as a template for your own Style Tiles in the future. You can also find a Photoshop template directly at the Style Tiles website if you wanted to start from scratch using Photoshop instead.
Moving forward in the course, I'll be referring to this Style Tiles document anytime I'm looking for design guidance or need to make sure my InBrowser designs match up.
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