One of the most powerful design tools a web designer has at their disposal is a pen and paper. Using these tools you can quickly sketch out rough ideas of layouts, components, and other elements and get an overview of what you are aiming for when designing in the browser. This online video tutorial will show you how to plan your responsive web design using pen and paper.
- View Offline
- 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 my course,…Wordpress: Building Themes from Scratch Using Underscores.…
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