Mood Boards, typography and color planing

Class work Draft 1

Mood Boards, typography and color planing

Introduction

Establishing a consistent and effective visual identity was critical for the Rock in Rio website and companion app. This post details the visual research, mood board development, early layout planning, and how these informed the final UI components. Drawing from core UX/UI design principles, this phase laid the foundation for a design system that would be visually engaging, user-friendly, and adaptable across devices.

Mood Board Creation and Visual Inspiration

To develop a visual tone for Rock in Rio, I created mood boards focusing on:

  • Typography: Bold, modern fonts like Montserrat and Open Sans were chosen to reflect energy and clarity.
  • Color Schemes: A primary palette of vibrant reds (#ff0000), deep navy blues (#1e2b4a), and bright accents (yellow and white) was inspired by Rio’s nightlife and the Brazilian flag.
  • Imagery: Photographs from past Rock in Rio festivals, including stage lighting, audience energy, and artist close-ups, helped shape the emotional tone.

These visuals ensured the brand communicated both excitement and professionalism. Bright overlays on images and consistent icon styles added cohesion between the app and the website.

Sketches and Early Wireframes

Before moving into digital prototypes, I created several hand-drawn sketches and low-fidelity wireframes using FigJam. These included rough layouts for:

  • Website Home Page: Featuring a hero image, festival countdown, navigation menu, and artist highlights.
  • Mobile App Home: Modular cards showing “Next Up”, “Your Schedule”, and interactive features.
  • Artist Page: Grid and list views tested for usability across screen sizes.

These sketches helped quickly test layout ideas and receive peer feedback before committing to digital mockups.

Visual Identity Design Choices

Once sketching and mood boarding were complete, I refined the design system in Figma:

  • Typography:
    • Montserrat (Headers): Strong and modern, used for artist names and section titles.
    • Open Sans (Body): Clean readability for mobile devices, ideal for app content and bios.
  • Colors:
    • Primary Red: #ff0000 (Festival Identity)
    • Navy Blue: #1e2b4a (Contrast and balance)
    • Accent Yellow: #facc15 (Call to action highlights)

These colors were checked for WCAG contrast compliance and applied consistently across all artboards.

Layout Grid and Responsive Planning

The layout planning followed responsive grid systems to ensure adaptability across devices:

  • Website Layout: Based on a 12-column grid with flexible image blocks and typographic scales.
  • App Layout: Used a mobile-first approach (375px width), vertical stacking of components, and adaptive spacing.

I applied the 8pt grid system to ensure visual consistency and maintain spacing harmony between elements (as recommended by Google’s Material Design guidelines).

Key layout features include:

  • Navigation bar placed at the bottom of the mobile screen (thumb-accessible).
  • Sticky headers for key sections like “Your Schedule”.
  • Action buttons with high-contrast backgrounds for quick access.

Design Justification Using UX Principles

Each design decision aligns with foundational UX principles:

  • Visual Hierarchy: Larger, bolder headings guide users to key information first.
  • Consistency: Fonts, colors, and buttons follow a design system for a seamless experience.
  • Affordance and Signifiers: Buttons and CTAs have shadows and contrast that signal interactivity.
  • Responsive Design: Layouts adapt fluidly to mobile, tablet, and desktop formats.

By planning these elements early, I ensured a cohesive experience from wireframe to high-fidelity prototype.

Conclusion

The visual development phase established a consistent and recognizable identity for Rock in Rio’s digital presence. Through mood boards, layout planning, and early wireframes, the foundation was set for creating an intuitive and energetic design system. These creative decisions not only aligned with UX/UI principles but were tested through iterative refinement in Figma.

References

  • Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport.
  • Google (2023). Material Design Guidelines. [Online] Available at: https://m3.material.io
  • W3C (2023). WCAG 2.1 Accessibility Guidelines. [Online] Available at: https://www.w3.org/TR/WCAG21/
  • Krug, S. (2014). Don’t Make Me Think. New Riders.
Website https://daniels-2024.hulldesign.co.uk

Related Posts

Back To Top