Web Development Essentials for Content Designers: Composition

This series offers print designers transitioning from InDesign to HTML an introduction to web development. In the first installment, we’ll focus on composition. 

For print designers transitioning from InDesign to HTML, web development can feel like uncharted territory. And, for the most part, that’s okay. Designers don’t need to become HTML experts to work with web developers, nor should they. Unique perspectives from both teams cultivate healthy tension and, ultimately, better digital content. However, for print designers, a little understanding of web design goes a long way to ensure constructive conversations around aesthetics and functionality. 

To offer insight into the core principles that guide digital content creation, I’ve created an informational series, beginning with composition. By no means are these rules, and not everything is critical for print designers to know in order to work better with web developers. Instead, I hope that this series sparks curiosity and conversation between designers and web developers, leading to a more productive working relationship.  

To learn more about creating successful digital content, watch our webinar on the 5 must-ask questions before starting your next project.

Part 1: Composition

Using shape and color, composition is the visual structure that determines content layout. Print content has a fixed layout and composition, but, when moving from the page to the screen, composition becomes a little tricker. Different devices each have their own interpretation of structure and style, which puts digital composition in constant flux. With that in mind, let’s take a look at the key concepts that govern the structure and style of digital composition. 

Semantic Markup

Before jumping right into visual layout, digital content requires developers to first describe the meaning of content using tagging systems called markup. The markup language of the web, HTML (hypertext markup language), consists of a set of predefined tags for common content types such as paragraphs, headings, lists, and tables. If we were building a clay model, think of the HTML as the metal armature that defines the essential forms. When designing digital content, it’s valuable to consider the different types of content, especially when these types are frequently repeated.

Content Hierarchy

Semantic markup not only allows us to describe the content type, but also its relationship to content around it. When creating a document outline, for example, it’s a common practice to create subtext of a larger topic. In HTML, we can nest content inside of larger groups to indicate that the elements are related to each other. This relationship is referred to as “parent-child” relationship, and is common among many digital content languages. The parent element contains one or more child elements, each of which might be the parent of their own child elements. Many of these relationships exist in traditional print design–the difference is that digital design can harness these relationships for styling and structure.

Separation of Content and Style

For developers, it’s helpful to mentally divide the content from the visual appearance, as the two pieces live separately until the page is rendered by the web browser or reading device. Since many elements are consistent from page-to-page, they look for patterns to apply across multiple pages using a HTML styling counterpart known as CSS, or cascading style sheets. We can apply rules to a specific semantic element, such a level 1 header, or many elements, such as a class to control the width or position of an element. 

Styles also benefit from the content hierarchy. Certain styles defined on larger groups of content can cascade down onto the elements within that group. A particular font defined on a parent element, for example, will cascade down to all of the child elements (unless another CSS rule exists to alter those elements). 

Thinking in Blocks

Due to the structured markup hierarchy and the nature of the style cascade, it is often valuable to approach digital content in a modular fashion. Imagine that a page layout is created by assimilating smaller blocks into a larger composition. Thinking modularly also allows digital content designs to scale efficiently. Developers can write styles to target instances of the same type of content, such as a side note or block quote, and ensure that those elements are consistent across entire projects.

As modularity increases content scalability, it often has an adverse affect on aesthetics. The more we think about design in compartmentalized blocks, the easier it is for content to appear sterile and unrelated to the page around it. Designers have found effective methods for mitigating the repetitiveness of modular content by adding variation to designs.

The bottom line: 

Print designers are by no means web developers, but by understanding some basic components of web design, they can better contribute to the conversation. Digital content composition is a good place to start, since it’s the foundation of how your content will render on all devices. In my next post, I’ll move on to page reflow. Stay tuned!

For more information on how content designers can use Inkling Habitat to create beautiful digital content without a web developer on-hand, request a demo from our sales team.