From the course: Learning Responsive Web Design in the Browser
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Draft layouts with pen and paper - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
Draft layouts with pen and paper
- You may be surprised to learn that almost all my web designs start as rough layout drafts using pen and paper. And I'm not the only one. A lot of web designers prefer to start their ideation process by sketching out layouts and ideas. It's quicker than using a design application. And the act of using your hands to draw things, rather than a mouse, makes you think about them in a different way. In this drafting ideation stage, I generally map out overall layouts and components to get a rough idea of where I'm heading with my designs. The resulting drafts serve two purposes. First, I can quickly test out different layouts and ideas and see if they actually make sense, or if I'm going the wrong way, I need to start over. And second, the drafts work as a great tool for mapping out the semantic structure of my html document. We'll talk more about this in the next movie. What you see here are some of the original layout drafts I did for the WordPress theme called Popper that was built for…
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
-
-
-
Use the browser as a design canvas1m 53s
-
Establish a design language for your site1m 23s
-
Draft layouts with pen and paper1m 48s
-
Map out containers by drawing boxes54s
-
Modularize the design1m 30s
-
✓ Challenge: Create a container map and modularize the design1m 43s
-
✓ Solution: Create a container map and modularize the design4m 29s
-
-
-
-
-