To simplify the process of design in the browser and get the most out of the native environment of websites, it is smart to modularize your code. That way you Don't Repeat Yourself (DRY) and you can make small changes for big results during the design process. This online video tutorial shows you how to identify modules within your project and how to split up your code so it's easier to manage in the future.
- View Offline
- [Voiceover] There's one more step I like to take…before diving into the actual design in the browser.…Modularizing the design.…What I mean by this is identifying individual modules,…or main areas, within my layouts…and making sure they're treated as individual units.…There are many other names…and approaches for this process.…The most talked about right now…is Brad Frost's Atomic Design…which breaks apart all the elements of a view…into atoms, molecules, organisms,…templates and pages.…In modularizing your design,…you're basically grouping together atoms…and molecules to identify organisms.…
To give you a practical example,…if you look at my website at MOR10.COM,…you can quickly identify some modules.…At the top, we have the header module…which has three sub-modules.…The site icon in the top left-hand corner,…the title and description module,…and the menu.…In the main index area,…we have a post module repeated over and over for each post.…And within that module,…we have the featured image module,…header module,…meta module,…
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