Design theory: creating dynamic content

It has always been a stumbling block for designers when clients give us loads of content for their websites or apps. And usually, the big pain in the a** is when clients throw huge chunks of contents without having any sitemap. All you can do is to figure out for yourself which one falls under what category / menu.

Thus, I’ll be sharing with you my strategy of how I deal with contents and in creating them dynamic (I’ll just be using a small scale content for this article).

Every time I’m given with an interface, feature, or page section to design, the very first requirement I need is content — without content, you are like an engineer / architect building a house without anything on it. So, once I have the content, I now do four (simple) steps to make it usable and dynamic.

User Interface: Product Card for E-commerce website.

Create a list. List down all the contents given, and sort out which information is needed by the users.

Content Hierarchy. Arrange your information from most important to least important. The information’s importance depends on which is the most useful or needed by the users.

Block Diagram. Block diagram is just a representation of how I want to layout the given information. Sometimes, block diagrams can be used as low fidelity wireframes and serve as guide in creating your mockups.

After creating a block diagram for my contents, I move on to applying font and visual hierarchy.

For the past few weeks, I’ve discovered a tool which helped me in creating a more meaningful typography — Modular Scale. Modular Scale is a tool where it gives you list of font sizes, which is dependent on your given base font size and ratio.

For this user interface, I used 16px as base font size and ratio of 1.618 (golden ratio).

I opted to play around with font sizes, 16px and 42 px for our product card user interface

Final mockup output for product card.

Below is how I used font and visual hierarchy:

Font Hierarchy. For information which are ranked high (Product Name and Price) I used a 42 px to show its importance, while information which are least (Collection, Tabs, Description), I used 16px, our base font size.

Visual Hierarchy. Instead of adding font hierarchy to our most important information, I added colors and shapes to make them more visually appealing and prominent (star ratings and call to action buttons).

The main ingredient in creating font and visual hierarchy is great contrast. Contrast is not just about colors, but it is also about weight, size, and value. To summarize it all:

1. List down all the information needed. It doesn’t have to be well-organized, just map out every content.
2. Rank from most important to least.
3. Create a block diagram to layout the contents.
4. Apply font and visual hierarchy for mockups.

Hope this simple tip will help you in creating dynamic content for your interfaces. For any questions feel free to message me at mhariellmosqueriola@gmail.com, my portfolio at www.behance.net/mhariellriel and my design process and resources at https://github.com/rielm/design-resources/