Learn how the author solved the challenge of mapping containers and modularizing a web design sketch in this online video tutorial.
- If you completed the challenge, you should now have…a fairly complex map of containers and modules…in front of you.…Now is my turn to show you how I would solve…the same challenge.…Just to make it easier to follow, I'm using Power Point…to do this here.…In normal circumstances I would use either pen…and semi transparent paper, or Adobe Illustrator.…To make it easier to see what I'm doing,…I'll draw red lines to clearly indicate the boxes.…Alright, let's start with the mobile view.…When I approach a challenge like this…I always start at the very top and move my way down…so that I'm sure I cover everything.…
And at the very top I right away see…I have a module at the top that is the header section.…Now on the mobile view that would only display…the site title, the menu is hidden elsewhere.…And on the desktop view I know that the header…will also contain the menu.…The next module I see is this one here…that has some sort of text at the top…and then some other text, and it's all boxed together…and there'll probably be some background image behind it.…
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