This is an experiment in documenting design courses and a template for rendering Markdown files as one-page websites.
Design is all about process, yet we tend to focus on results when documenting design courses. This is an attempt to shift the focus from the latter to the former.
Scroll along to find out
why, what, how & who.
In the realm of design education and research, there's a common emphasis on outcomes—be it presentations, prototypes, or papers. This focus, while essential, tends to sideline the exploratory and dynamic process leading to these results. The journey to the final projects is marked by twists, turns, and tangents. This is where much of the learning and discovery occurs.
Syllabus Site was conceived as a tool to highlight and document these critical but frequently overlooked aspects of design projects. It serves as a dynamic interface chronicling the voyage through readings, workshops, and discussions.
This approach not only retains but celebrates the meandering nature of design as an intellectual journey, ensuring that the wealth of inspirations—from historical examples and theoretical frameworks to contemporary projects and research studies—is preserved and made accessible.
A Syllabus Site is a one-page website arranging its elements along sections that can be scrolled vertically.
The webpage is designed with the aim to open an evocative information space, where the sources that foster creativity, dialogue, and learning can be gathered, recapitulated, and appreciated. The monolithic structure of conventional documents is broken up, by introducing a relational quality to the connections between sections and items.
There are two main types of elements:
- Sections – Larger blocks gather the material for weekly course sessions.
- Items – Smaller elements feature images, text, and other content.
Each item is connected with its section by a thin line. The navigation (≡) gives access to all sections.
The last section acts as the footer, where the typical array of logos and links belongs.
The template is in use to document the following Interface Design courses offered at FH Potsdam:
- Decolonizing Data Visualization – Visualizing Postcolonies (Summer 2022)
- Organigrams for/from the future (Summer 2023)
Decolonizing Data Visualization – Visualizing Postcolonies
Organigrams for/from the future
The Syllabus Site template can be easily used with minimal technical requirements.
Page content and source side by side
- Download or clone the GitHub repository
- Give your page a title, fill out open graph fields, and adjust theme color in
index.html - Add your content into
README.mdandimg/
The template has the following file structure:
img/
index.html
src/
README.md
The README.md file contains all the textual content of your page and references the images that you need to add to the img/ directory.
The index.html file connects template and your content; here you need to make a few edits to add title, description, and preview of your webpage.
You do not need to change anything within src/, which contains the internal files of the template.
The README.md uses the Markdown format, a markup language used by many platforms including GitHub.
There are two conventions we introduce to distinguish and connect sections and items:
- Sections are delineated by a horizontal rule
--- - Items are separated by two empty consecutive lines
Each section should contain a heading:
# for primary, ## for secondary, and so on.
To exclude a section from the navigation menu, include <!--skipnav--> at the start of the section.
- Include an expressive preview image
img/cover.pngso that your page can be previewed on social media and messaging apps. - Given that your webpage might be accessed from a mobile device with a slow connection make sure to optimize image file sizes.
Syllabus Site was put together by Philipp Proff and Marian Dörk with the helping hands from many people.
Markdown munching: Marked by Christopher Jeffrey
Terrific typeface: HK Grotesk by Alfredo Marco Pradil
Friendly feedback: Myriel Milicevic, Lamin Manneh, Fidel Thomet, Mark-Jan Bludau, Sabine de Günther and Francesca Morini
Yes, you!: Syllabus Site is made available under the liberal MIT license. Feel free to reuse and revise it!
Contact · Imprint · This is a Syllabus Site