I’ve always approached design in a sys­tem­atic way. Think­ing about things in basic pieces that together form other pieces.

I remem­ber assem­bling those plas­tic car mod­els when I was a kid, and always start­ing with the basic parts, that by them­selves didn’t form any­thing, but once assem­bled with other parts, they’d form a vital com­po­nent of the car.

I’d iso­late the rim, tire and bolts, and focused on them indi­vid­u­ally to form the wheels. Then I’d join the wheels with the axles, and sus­pen­sion to form the front-end. And finally, the front-end would be assem­bled to the chas­sis to com­plete the car.

I did this for every sec­tion of the model. I never tried to assem­ble the com­plete car all at once. By doing this, I could ensure that each part was pre­cisely assem­bled and func­tional, which would make for a bet­ter car model at the end.

This has been my approach to prod­uct design. Instead of design­ing a screen or page, my method is a design sys­tem con­sist­ing of Ele­ments, Com­po­nents and Tem­plates. Each a dif­fer­ent stage in the process.

Brad Frost’s atomic design is very sim­i­lar to my approach, but with addi­tional stages. I def­i­nitely rec­om­mend read­ing it.

Here is how my sys­tem works.

Elements

Ele­ments are the core parts of a design. They’re the but­tons, input fields, check­boxes, radio but­tons, drop-down, icons, col­ors, type styles, grids, and so on. These are some of the stan­dard ele­ments, but each design will dic­tate its own set.

I think of ele­ments as the “seeds” of my design. They start off as a sin­gle thing, and then grow into some­thing more use­ful when com­bined with other elements.

First, I design the ele­ments indi­vid­u­ally. I really like to focus on how the ele­ment is formed, and the details asso­ci­ated with it. Then I look at how the ele­ments work together and adjust from there.

Components

A com­po­nent is set of ele­ments that are assem­bled into some­thing func­tional. They’re self-contained and usu­ally focus on doing a sin­gle task. Com­bine a header style, a para­graph style, a close icon, a color, and a but­ton to form a modal. A search form, footer, and a fil­ter selec­tion are all exam­ples of sim­ple components.

Com­po­nents can also be more com­plex, like a per­sis­tent shop­ping cart. These type of com­po­nents still focus on a pri­mary task, but they also allow you to do sec­ondary tasks. For exam­ple, in a per­sis­tent shop­ping cart, its main job is to dis­play cart items and total price, but it can also allow you to delete an item, or change its quantity.

Templates

Tem­plates are where com­po­nents come together to form the inter­face and expe­ri­ence. For exam­ple, a con­tact tem­plate on a web­site will be made up of a nav­i­ga­tion, form, and footer com­po­nents. Tem­plates can rep­re­sent a sin­gle sec­tion of a web­site, and an entire user path, like a reg­is­tra­tion flow.

I cre­ate two kinds of tem­plates: UX tem­plates and UI templates.

A UX tem­plate is a wire­frame where the con­tent struc­ture and user expe­ri­ence are defined. Here I start piec­ing together the com­po­nents, mov­ing them around like puz­zle pieces, slowly form­ing the expe­ri­ence and con­tent structure.

The UI tem­plate is where I shape the lay­out and refine the visual styles, using the UX tem­plate for struc­ture. As I men­tioned above in the Ele­ments sec­tion, I start with design­ing the indi­vid­ual ele­ments. I then design the com­po­nents and full tem­plates, and refine any ele­ments that need it. For exam­ple, a but­ton might look per­fect on its own, but it ends up being too big as part of a com­po­nent or template.

Folders and Libraries

This sys­tem is also great for cre­at­ing a folder struc­ture, and build­ing pat­tern libraries.

My top level folder is always the project, usu­ally based on the plat­form, for exam­ple iOS, Android, Web. Within the project folder lives the sys­tem I’ve out­lined above:

01 Ele­ments
02 Com­po­nents
03 Templates

I assign the num­bers to keep the fold­ers in a spe­cific order.

Within each main folder I break down the cat­e­gory. So for exam­ple, inside the Ele­ments folder you’ll find fold­ers for But­tons, Col­ors, Icons, Input, Typog­ra­phy, etc. In Com­po­nents you’ll find fold­ers for Nav­i­ga­tion, Search, Footer, etc. Inside each of these fold­ers you’ll find a design file for that ele­ment or component.

The Tem­plates folder is a lit­tle dif­fer­ent. Same idea, but within a tem­plate folder I will break it down into two fold­ers: UI and UX. This keeps things more orga­nized. Some­times com­po­nents will have wire­frames asso­ci­ated with them, so the Com­po­nents folder can be divided this way as well if needed.

Files are named using the fol­low­ing convention:

platform-type-version.extension

So, for exam­ple, the first ver­sion of a web­site home­page tem­plate done in Sketch would be named web-homepage-v1.sketch.

Not only is this your fil­ing sys­tem, but it also acts as your pat­tern library. The entire sys­tem is clearly orga­nized, with every file eas­ily accessible.

If you build these files in a smart way, like using Sym­bols and Layer and Text Styles in Sketch, or Smart Objects in Pho­to­shop, you save a ton of time when mak­ing a change because you just do it in one place. Sym­bols in Sketch are a bit lim­ited in this case, since they don’t sync across files, but it’s still a good way of set­ting up your files.

This sys­tem also makes it really easy for peo­ple new or unfa­mil­iar with the project to find and nav­i­gate the files. Great for when adding new mem­bers to the team, or shar­ing files with com­pa­nies or clients.

Benefits of Systems

For me, design­ing this way just makes sense. A sys­tem­atic method pro­vides con­sis­tency for the user inter­face, user expe­ri­ence and func­tion­al­ity. It also offers great flex­i­bil­ity and effi­ciency, because by design­ing at the ele­ments level, instead of focus­ing on a sin­gle screen, you’re cre­at­ing a design that’s mod­u­lar and scalable.

This method works for me, and it might work for you. I’ve opened up the com­ments sec­tion to get a dis­cus­sion going. I would love to hear from you if you’ve imple­mented the sys­tem in your work­flow, or have any ques­tions or comments.

Spe­cial thanks to Stephen Meszaros for his input and always bril­liant insights.