Hello! Welcome back to your graphic design course.
In our last few lessons, you've built a strong foundation for working with layouts. You've learned how to source and manipulate images, apply layout patterns like the Rule of Thirds, use whitespace effectively, and, most recently, make your designs responsive using Figma's powerful Auto Layout and Constraints.
Today, we bring all of those skills together. This lesson is a hands-on project where you will achieve this module's final practical outcome: designing a digital poster that combines images and text into a cohesive layout. Posters are a fantastic portfolio piece because they test a designer's ability to communicate a message quickly and compellingly using hierarchy, typography, color, and composition.
By the end of this lesson, you will have planned and created a complete digital poster in Figma, applying the principles and techniques you've learned throughout the course.
1. The Anatomy of an Effective Poster
Before we start designing, let's understand what makes a poster work. A successful poster grabs attention from a distance and delivers a clear message in seconds. This is achieved primarily through strong visual hierarchy. The viewer must instantly know what is most important.
To get a quick overview of the core principles that govern good layout design, let's watch a short video.
Master Layout Design In 8 Minutes! (IMPORTANT)
This video, 'Master Layout Design In 8 Minutes!' from Satori Graphics, provides a fast-paced but clear introduction to key layout concepts that are crucial for poster design.
Please watch the following two clips: Hierarchy and Emphasis (00:47 - 01:21): Pay attention to how size, contrast, and position are used to create a focal point and guide the viewer's eye. Common Mistakes (05:23 - 08:03): This section is very important. It discusses issues like a lack of visual hierarchy and unintuitive flow, which are common pitfalls in poster design. Notice the solutions provided.
Now that you have a high-level understanding, let's dive deeper into the specific principles that create a strong visual hierarchy. The following article provides an excellent, detailed breakdown.
Visual Hierarchy: The Complete Beginner's Guide to Better ...
This article, 'Visual Hierarchy: The Complete Beginner's Guide to Better Design,' explains the psychology behind how we process visual information and breaks down the most effective principles for guiding a user's attention.
Please read the section titled '7 visual hierarchy principles that actually work'. Focus on understanding each of the seven principles: Size and scale, Color and contrast, White space, Typography hierarchy, Alignment, Proximity, and Repetition/consistency. These are the tools you will use to build your poster.
Test your understanding!
Imagine you are designing a poster for a concert. You have the band's name, the date, the venue, and the ticket price. Using the principle of visual hierarchy, how would you rank these four pieces of information in order of importance, and what visual attribute (e.g., size, color, weight) would you use for each to reflect that ranking?
Show answer
There's no single correct answer, as it depends on the goal, but a common and effective hierarchy would be:
- Band's Name (Most Important): Make this the largest and boldest text element on the poster. It's the primary draw.
- Date (Secondary Importance): This could be smaller than the band's name but still prominent, perhaps in a contrasting color or a medium-weight font.
- Venue (Tertiary Importance): This is essential information but can be smaller than the date. Good alignment with the date can group them together.
- Ticket Price (Least Important / Call to Action): This can be the smallest text, often placed near the bottom or alongside a "Buy Tickets" button.
This structure guides the viewer from "What is it?" (the band) to "When is it?" and "Where is it?", and finally "How do I go?".
2. Project Brief: Design a Music Event Poster
Now it's time to apply these principles. Your task is to design a digital poster for a fictional music event.
- Event: "Aura Fest" - An indie electronic music festival.
- Key Information:
- Headline: Aura Fest
- Sub-headline: Live at City Park
- Date & Time: August 24, 6 PM
- Featured Artists: Glass Tides, Ocean Beats, Echo Bloom
- Call to Action: aurafest.com
Feel free to find a suitable, license-free image (from Unsplash, Pexels, etc.) that captures the "indie electronic" vibe.
Here is an example of a minimalist poster created in Figma to give you an idea of the kind of professional look you can achieve.
3. Building Your Poster in Figma: A Step-by-Step Guide
We'll use techniques from the comprehensive "Figma Tutorial for Beginners" video to build our poster. While you've gone beyond the basics, this video demonstrates the exact workflow for combining images and text for this kind of project.
Let's build your poster piece by piece.
Step 1: Set Up Your Canvas
First, you need a frame for your poster. A standard digital poster might use a portrait aspect ratio like 3:4 or a standard paper size like A4.
- Press
Fto select the Frame tool. - On the right-hand panel, you can choose a preset (like Paper > A4) or draw a custom frame. A good custom size for a vertical poster is
1080pxwide by1350pxtall.
Step 2: Create a Compelling Background
The background sets the entire mood of the poster. You can use a solid color, a gradient, or an image. Let's focus on using an image.
This clip from Kevin Stratvert's 'Figma Tutorial for Beginners' shows you how to set an image as a frame's background, adjust its crop, and apply a colored overlay to darken it, which is essential for text readability.
Watch from 15:17 to 19:20. Follow along to: Set your chosen image as the Fill for your frame. Use the Crop setting to position the image perfectly. Add a new rectangle layer on top, set it to a dark color (like black), and reduce its opacity (e.g., 30-50%) to create an overlay. This makes the background less busy and helps your text stand out.
Step 3: Add and Style Your Typography
This is where visual hierarchy comes to life. Add your text elements and style them according to their importance.
Next, let's add the text. This clip will guide you through using the Text tool and adjusting basic properties.
Watch from 24:22 to 26:09. As you follow along, apply these hierarchy principles to your own poster text: Headline ('Aura Fest'): Make it large and use a distinctive font. Center-align it or place it according to the Rule of Thirds. Sub-headline & Artists: Use a smaller, simpler font. Use alignment and proximity to group these elements logically. Date/Time & Website: This can be the smallest text. Place it at the bottom.
Remember to use the principles of Alignment and Proximity. For example, the date, time, and location should be grouped together. The list of artists should also be grouped. Use Figma's alignment tools to ensure everything is perfectly lined up.
Step 4: Final Touches and Review
Take a step back and look at your poster as a whole.
- Does it have a clear focal point?
- Is the information easy to read and follow?
- Is the spacing (whitespace) effective? Does it feel balanced or cluttered?
You can also try more advanced techniques you've learned, like masking an image into a shape if it fits your concept.
If you want to try a more creative image treatment instead of a full-bleed background, this clip shows how to use a shape (like an ellipse) to mask an image.
Optionally, watch from 57:42 to 59:04. This demonstrates how to place an image and then use a shape layer on top of it as a mask, creating a clean, cropped visual element.
Spend the rest of your time experimenting and refining your design. Try different fonts, color combinations, and layouts until you have a cohesive and impactful poster.
Conclusion
Excellent work today! You have successfully combined your skills in image manipulation, typography, and layout design to create a complete project. This is a significant step toward building a professional portfolio.
Here are the key takeaways from this lesson:
- Hierarchy is King: The success of a poster depends on a clear visual hierarchy that guides the viewer's eye through the information in order of importance.
- Cohesion is Key: All elements—images, text, colors, and shapes—must work together in harmony to communicate a single, unified message. Principles like alignment, proximity, and repetition help create this unity.
- Process Matters: A structured workflow—planning, gathering assets, building step-by-step, and refining—leads to a stronger final product.
In our next and final lesson of this module, we will address the crucial last step of any design project: exporting your work from Figma in the correct formats and sizes for web and print use. See you then