From the course: Learning Responsive Web Design in the Browser

Establish a design language for your site - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

Establish a design language for your site

“

- [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.

Contents