Reading paths for theme designers #

This page is for theme designers who want to know what to read, in which order. Pick the path that matches your situation. Each path mixes pages from this section with the designer help, which explains the technical side in depth, and the course Theme design, which has exercises.

Contents #

1. Path A: visual designer, no code
2. Path B: designer who writes CSS and templates
3. Path C: redesigning a running site
4. Path D: a theme for publication
5. Path E: moving to Exponential Platform DXP
6. Short paths by topic

Path A: visual designer, no code #

About two days of reading.

1. How Exponential themes differ
2. Your first day as a theme designer
3. From mockup to theme
4. Mapping a design to content classes
5. Designing with real content, Designing for editors
6. Designing view modes, Designing content listings and cards
7. Foundations: Type scale, Spacing and grid, Color palettes and ramps, From design tool variables to CSS custom properties
8. Component inventory, Designing interactive states
9. The page types: headers and footers, navigation, search, empty and error states, forms, login and user pages
10. Designing layout blocks, Designing the front page
11. Working with developers, Working with clients and reviews
12. Handoff checklist, Design QA checklist

Path B: designer who writes CSS and templates #

Path A, then about a week with the designer help and the course:

1. What a design is, The design cascade
2. TPL syntax basics, Variables and def, Wash and escaping
3. Tutorial: create a theme extension
4. Tutorial: override a full view
5. Loading stylesheets, The packer, No inline CSS
6. Design tokens, Tutorial: add dark mode
7. Tools for theme designers, Debugging a design
8. Building a style guide page
9. The course modules 1 to 5 of Theme design, as exercises.

Path C: redesigning a running site #

1. Your first day as a theme designer
2. Redesigning an existing site
3. Comparing your overrides with the standard templates
4. Previewing a design on a siteaccess
5. The foundations and page-type pages of Path A, as needed
6. Visual regression checks
7. Design QA checklist

Path D: a theme for publication #

Path B, then:

1. Theme extensions: start here
2. Demo content for a theme
3. Distributing a theme: start here
4. The maintenance life cycle: start here
5. Building a portfolio and getting work
6. If you want to sell it: Selling themes and services: start here

Path E: moving to Exponential Platform DXP #

1. Themes for Exponential Platform
2. Twig templates and the design engine
3. The standard design and your theme
4. Building assets with Yarn and Encore
5. Image variations

Short paths by topic #

Related pages #

• Theme designers: start here
• Part 6: Theme developers
• Designer help, every page
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.