From the course: CSS: Design Systems and Architectures

The evolution of web design - CSS Tutorial

From the course: CSS: Design Systems and Architectures

Start my 1-month free trial

The evolution of web design

“

- [Instructor] Websites are often designed as a collection of separate webpages, such as a Home, About, and Contact page. The cost and timeline estimate for building a website is often determined by the expected number of pages. But what exactly makes up a page? Does all of the content in the previous example have to be on separate pages? Well, they can be separate, but they don't have to be. Instead, the content can be grouped into discrete sections and displayed on the same page to create a one-page website. This can be useful for websites that don't have a lot of content. But techniques, such as adding Back to Top links and dynamically adding new content with Load More buttons also became commonly used for navigating one-page websites and for longer pages in general. But whether you're creating a one-page website or a multi-page website, does it take significantly more or less time to build one page of content with three sections versus three separate pages with the same content? Perhaps we shouldn't base time and effort around the number of pages and start focusing on what those pages are made of. In the book Atomic Design by Brad Frost, he says, "Ultimately, a project's level of effort "is much better determined by the functionality "and components contained within those pages, "rather than on the quantity of pages themselves." This is where a design system can help. Rather than building standalone pages one at a time, focus on creating reusable components that can be mixed and matched to create different layouts, whether it's for presenting content on one or many pages. In addition to writing modular code, creating a design system also includes determining the process and workflows, writing documentation, creating style guides, and anything else required to make your product. The process of implementing a design system may vary across projects and organizations, but the basic principles are: use a component-based approach to create reusable patterns, standardize the workflow, create a common toolkit and documentation for the whole team. Throughout this course, I'll be talking about all these different parts to help you decide what you need and how to get there.

Contents