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
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.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
(Locked)
Use the browser as a design canvas1m 53s
-
Establish a design language for your site1m 23s
-
(Locked)
Draft layouts with pen and paper1m 48s
-
(Locked)
Map out containers by drawing boxes54s
-
(Locked)
Modularize the design1m 30s
-
(Locked)
✓ Challenge: Create a container map and modularize the design1m 43s
-
(Locked)
✓ Solution: Create a container map and modularize the design4m 29s
-
(Locked)
-
-
-
-