Information Design - Project 1 & 2
- Choose a reference, then redesign it using clear visual hierarchy, minimal text, and engaging graphics.
- Transform the static poster into a 15–30 second looping animation.
Introduction: This project aims to simplify and visually explain the stages of sleep and their importance to our well-being. The infographic poster will break down each stage of the sleep, while the animated version will bring the sleep stages to life with smooth transitions representing sleep patterns.
1. Choose a Reference & Research:
- Study an existing sleep stages infographic (e.g., the one you provided).
- Identify areas to improve in terms of clarity, layout, and visual design.
2. Redesign the Poster Layout (A4 size):
- Use a stair flow to show sleep progression.
- Clearly label each sleep stage (N1, N2, N3, REM) with simple explanations.
- Utilize icons and minimal text instead of dense paragraphs.
3. Enhance Visual Hierarchy:
- Use typography styles to differentiate headings, key points, and descriptions.
- Arrange content so that it naturally guides the viewer’s eye.
4. Apply Design Principles:
- Color Palette: Calming tones (blue, purple, soft gradients) to represent sleep.
- Shapes & Patterns: Ladder to symbolize the sleep stages.
- Illustrations: A person sleeping and add subtle elements like stars, moon, or brainwaves.
5. Finalize & Submit:
- Ensure readability and a balanced composition.
- Export the final A4-sized poster in high-resolution (JPEG or PNG).
- Upload minimal animated infographic video to YouTube.
Visual References:
Firstly, I found 3 visual references from Pinterest. After observing, I chose the third reference infographic about sleep stages because it has the potential for improvement and I also like the ladder concept in the middle. Then, I analyzed its strengths and weaknesses, focusing on visual hierarchy, typography, color use, and overall clarity. Identify ways to simplify and improve the design while making it more visually engaging.
-
Clear Structure & Flow:
- The ladder design is an effective visual metaphor for the progression of sleep stages. It helps convey that sleep is a step-by-step process, making it easier to understand.
-
Simple and Minimalist Layout:
- The infographic avoids unnecessary clutter, ensuring readability. Each stage is labeled separately, making it easy to follow.
Clear Structure & Flow:
- The ladder design is an effective visual metaphor for the progression of sleep stages. It helps convey that sleep is a step-by-step process, making it easier to understand.
Simple and Minimalist Layout:
- The infographic avoids unnecessary clutter, ensuring readability. Each stage is labeled separately, making it easy to follow.
-
Lack of Detailed Information:
- The descriptions of each stage are too short and vague, missing key physiological aspects of sleep.
- For example, Stage 3 simply says “Body heals by itself”, but it could mention tissue repair, deep relaxation, and immune system strengthening.
-
Inconsistent Sleep Stage Classification:
- The infographic lists five stages (1, 2, 3, 4, and REM), whereas modern sleep science typically categorizes sleep into four stages (N1, N2, N3, and REM).
- Stages 3 and 4 should be combined into “NREM Stage 3 (Deep Sleep)”, aligning with updated research.
-
Typography Hierarchy Issues:
- The font size for the stage descriptions is too small, making it hard to read against the dark background.
- The title “Understanding Sleep Cycle” is bold, but it doesn’t stand out much because it lacks a strong contrast with the background.
-
Lack of Engaging Visual Representations:
- While the ladder visually represents progression, there are no icons or symbols for each sleep stage.
- Adding simple icons (heartbeat for Stage 2, brain activity for REM, a sleeping body for deep sleep, etc.) would enhance visual comprehension.
Final Evaluation & Improvements
Lack of Detailed Information:
- The descriptions of each stage are too short and vague, missing key physiological aspects of sleep.
- For example, Stage 3 simply says “Body heals by itself”, but it could mention tissue repair, deep relaxation, and immune system strengthening.
Inconsistent Sleep Stage Classification:
- The infographic lists five stages (1, 2, 3, 4, and REM), whereas modern sleep science typically categorizes sleep into four stages (N1, N2, N3, and REM).
- Stages 3 and 4 should be combined into “NREM Stage 3 (Deep Sleep)”, aligning with updated research.
Typography Hierarchy Issues:
- The font size for the stage descriptions is too small, making it hard to read against the dark background.
- The title “Understanding Sleep Cycle” is bold, but it doesn’t stand out much because it lacks a strong contrast with the background.
Lack of Engaging Visual Representations:
- While the ladder visually represents progression, there are no icons or symbols for each sleep stage.
- Adding simple icons (heartbeat for Stage 2, brain activity for REM, a sleeping body for deep sleep, etc.) would enhance visual comprehension.
✔ What Works Well: The ladder structure, calming color scheme, and minimalistic approach make the infographic visually appealing and easy to follow.
❌ What Needs Improvement: The infographic needs more detailed and accurate descriptions, better typography for readability, and visual elements (icons or graphs) to enhance understanding.
Improvements:
- Replace the five-stage classification with the updated four-stage sleep model (N1, N2, N3, REM).
- Add icons or symbols to represent body processes at each sleep stage.
- Improve typography contrast and text alignment for better readability.
- Include information about how sleep cycles repeat throughout the night.
When designing, I used a clear and modern typography style to prioritise visual hierarchy. Headings should be bold and easily readable, while descriptions should be in a lighter and smaller font to maintain balance. Additionally, apply a calming color palette with soft blues, purples, and gradients to create a visually appealing and soothing effect. Use ladder to represent the natural sleep stages progression, making the design feel fluid and structured.
Work Progress #1 (Initial Design)
- Text Alignment & Hierarchy: The text follows a center-aligned structure with a bottom-to-top hierarchy, guiding the viewer from the sleeping position to the moon.
- Illustration: Sketch elements with minimal details.
Work Progress #2 (Adding Depth & Texture)
- Shadows & Depth: Added shadows and highlights to create a sense of layering and depth, making elements feel more engaging.
- Refinement of Vectors: The rough sketchy elements are replaced with clean, simple vector graphics, improving clarity and consistency.
Work Progress #3 (Color Experimentation)
- Palette Variations: Different colour combinations were tested to find the most visually appealing and soothing scheme for the sleep theme.
- Contrast Adjustments: Experimented with different levels of contrast to enhance readability while maintaining a dreamy and relaxing aesthetic.
Work Progress #4 (Refined & Polished)
- Gradient Enhancements: Applied soft gradients to make key elements more eye-catching and visually smooth, especially on the background and icons.
- Minor Refinements: Small tweaks were made to icon positions, typography balance, and spacing to improve overall composition and readability.
%20(1).jpg)
Begin by breaking down each sleep stage into an animation sequence. The animation should start with a person falling asleep, with elements like fading eyelids, sleeping icons, and stars shining, smooth transitions should show in every stage.
Each stage should have a unique animation effect to represent its characteristics:
- Stage N1 (Falling Asleep): A heart beating slowly, represent the slowing heart rate during sleep stages.
- Stage N2 (Light Sleep): Brainwave pulses and body temperature drop icons.
- Stage N3 (Deep Sleep): Slow-moving secure icon, symbolizing full relaxation and body recovery.
- REM Sleep (Dreaming): Floating dream bubbles, represent dreaming.
I ensured that all animations are smooth and fluid, without abrupt jumps. The animation should loop seamlessly to reflect the repeated cycles of sleep throughout the night.
I created he final animation in a 1080 x 1920 px format and exported it as an MP4 and GIF file. Then, I uploaded the completed animation to YouTube: link.
Conclusion:
This project deepened my understanding of how motion design enhances information delivery. By using timing, movement, and transitions, I was able to transform a static concept into an interactive and engaging visual experience. The insights gained from this project will help me apply animation principles more effectively in future work, ensuring that my designs are not only visually appealing but also informative and user-friendly.
Working on this animated infographic was a transformative experience for me. Initially, I focused on designing a static poster that clearly outlined the four sleep stages. However, when transitioning to animation, I realized that motion adds an entirely new layer of engagement. Instead of just organizing information visually, I had to think about timing, pacing, and transitions to ensure that the animation effectively conveyed the changes that occur during sleep.
One of the most challenging aspects was animating the slowing heartbeat to accurately represent the body's physiological changes throughout the sleep cycle. I had to experiment with different pulsing speeds to ensure the heart rate decreased gradually rather than abruptly. Additionally, animating secure icons with a soft floating motion required careful adjustment to make the movement feel smooth and natural, reinforcing the sense of relaxation and recovery.
This project also tested my patience and attention to detail. Small tweaks, such as adjusting the timing of a transition or the opacity of an icon, significantly impacted the overall flow of the animation. Although the process was time-consuming, it was rewarding to see how these refinements contributed to a more polished and visually engaging result.
As I worked through the design and animation process, I observed how motion enhances comprehension compared to static infographics. The static poster provided a clear overview, but the animated version made the information feel more immersive. For example, seeing the heartbeat gradually slow down helped to emphasize the body’s relaxation process, making the physiological changes more intuitive.
I also noticed how smooth transitions played a crucial role in maintaining engagement. Initially, some animations felt too sudden or disconnected, which made the sequence feel unnatural. By gradually fading elements in and out and using easing effects, I was able to create a seamless flow that guided the viewer’s attention from one sleep stage to the next.
Another key observation was the impact of color psychology. Using deep blues, purples, and gradients helped to create a calm and restful atmosphere, reinforcing the theme of sleep. Additionally, adding a subtle glow effect around icons made them stand out without overwhelming the viewer, striking the right balance between emphasis and simplicity.
Finally, I realized that too much movement can be distracting. Initially, I experimented with more dynamic effects, such as rapid transitions and bolder animations. However, I found that a minimalist approach—with gentle floating icons and smooth heartbeat rhythms—was more effective in conveying relaxation and deep sleep.
Through this project, I gained a deeper understanding of how animation enhances storytelling in information design. Unlike a static infographic, which presents all the information at once, animation allows for a step-by-step reveal, guiding the viewer through the sleep cycle in a more digestible and engaging way.
I also found that motion can direct focus just like visual hierarchy in a static design. The slowing heart animation naturally led the viewer’s eye to the deep sleep stage, while the floating secure icons reinforced the idea of restoration and recovery. By controlling how elements appeared and moved, I was able to make sure that key information stood out clearly.
Additionally, I learned that subtle animations are often more effective than complex ones. At first, I thought that highly detailed animations would make the infographic more engaging, but I found that simplified motion, such as slow breathing effects or soft pulsing glows, created a more calming and immersive experience. This taught me that animation doesn’t have to be complicated to be impactful.
Comments
Post a Comment