This chapter is from the book
This chapter is from the book
This chapter is from the book
From Projects to Systems
Combining components into pages drifts toward an increasingly formal enterprise. Sure, defining a page as a collection of components is meaningful in its own right. But as more and more components emerge, and more and more pages are constructed, the many-to-many relationships between the two become quite extensive. Component and page design relationships begin to map to HTML/CSS reuse patterns and strategies as well.
Moving Towards Code
A page can be considered as fully composed from components, even to the extent that a page could be considered just one long component sequence. This is much like a Web page's source code. While a layout is apparent in a viewer, in the source code it is just one continuous stream of markup in between two <body> tags. From a design perspective, one could think of pages in the same way.
For example, the article page (Figure 4.12) is composed of 14 components. From the header's components at the top to the footer on the bottom, the page can be described as 14 distinct chunks. The HTML behind the scenes may not yet be formed. However, from top to bottom, and left to right, the components could be ordered as displayed in the composition, likely mirroring their order within the page's markup.
)
Figure 4.12 A page inventory of components mapped to a layout and to example page markup.
That source code, displayed on the right, is how engineers may see a page in their mind's eye: a series of <div> tags containing each bit of content. Pages can be rendered as a series of components that fit into one container (the <body> tag) or a series of subcontainers (likely, <div>s corresponding to regions of the overall layout). Suddenly, the bridge from design to development seems a little shorter.
A Worthy Investment
The more you create and share page variations under different conditions or show how many pages use the same component, the more literate your audience will become. You—and your audience—will be able to see the pages in your mind's eye without having to render it as an actual visualization. You'll imagine components within pages without seeing the pages, discuss them more efficiently with each other, and save time by reducing the need to create full page designs over and over again. That modular literacy is key for you and your audiences to use components effectively in the long run.
That said, creating mockups of screen designs—whether wireframes or comps—is central to a designer's ability to communicate design. You must be able to do it faster. And better. And consistently. Even in the throes of hectic projects and ridiculous deadlines. That's where increasing your competency to use and build reusable design assets becomes critical.