MAKE ONE THING WAY TOO BIG. A practical design worksheet by toolandtea https://toolandtea.com/big Updated November 5, 2026 THE PRINCIPLE Choose one dominant visual move. Keep the supporting copy and controls quieter. Scale sets the first read. Contrast makes it visible. Overlap adds depth. Space lets the composition work. Oversized type is a starting point, not a substitute for a clear message or a consistent brand identity. 01 / RED + PORTRAIT + GLASS Build from back to front: Red field > portrait > fluted treatment > oversized wordmark > interface. 1. Choose a deep red field, dark neutrals, and one pale accent. 2. Crop the portrait to give the face presence and the wordmark its own space. 3. Add narrow vertical refraction to the artwork. One approximation: mask a duplicate photo into strips and offset their crops slightly. Keep the original below and reduce the effect until the face is recognizable. 4. Set a short wordmark across roughly 85-95% of the frame width. Refine the spacing. Keep navigation and body copy sharp and readable. Why: the portrait carries emotion, the wordmark carries recognition, and the texture gives the composition a repeatable visual character. Watch for: over-distortion, hidden facial features, copy over busy details. Plain backdrop blur does not produce the reference's fluted refraction. 02 / SKY + PINK HORSE + STRETCHED TYPE Build from back to front: Sky > tall headline > transparent subject > interface. 1. Prepare a clean subject cutout, including hair and gaps between limbs. 2. Set a short phrase in a tall condensed display font. Try a headline cap height around 40-60% of the hero, spanning most of the frame width. 3. Use the font's width controls where available. Keep any deliberate stretching to the graphic headline, never body copy or buttons. 4. Put the subject above the type. Overlap some letters without losing the meaning. Keep the accent color limited and the surrounding copy quiet. Why: unusual proportions turn type into scenery; overlap connects the image and words. A phrase that matches the image gives the visual a concept. Watch for: bad cutout edges, hidden key letters, too many accent colors. 03 / BLACK + PORTRAIT + GIANT LETTERS Build from back to front: Near-black field and glow > white wordmark > portrait cutout > interface. 1. Use a quiet black field with a restrained warm glow. 2. Pick a portrait with a clear silhouette and directional or rim lighting. 3. Place an almost full-width wordmark behind the person. Move the portrait until enough letter shapes remain visible to suggest the name. 4. Put the introduction and CTA in open areas. Repeat the brand name clearly in the header if the large decorative wordmark is partly obscured. Why: white-on-black contrast makes the type visible; the portrait interrupting it creates depth. Negative space keeps the composition coherent. Watch for: a disappearing silhouette, an unreadable name, competing headlines. YOUR OWN COMPOSITION Brand / project: __________________________________________ One sentence explaining the offer: ________________________ The one element I will exaggerate: ________________________ The elements I will keep quiet: ___________________________ Main action I want someone to take: _______________________ FINAL CHECK [ ] There is one obvious focal composition when I squint. [ ] The message and next action are understandable. [ ] The subject and headline work together. [ ] The lettering is recognizable, or has a clear accessible equivalent. [ ] Body copy and controls remain readable and usable. [ ] I tested a narrow screen around 390px and a wide desktop layout. [ ] Mobile is recomposed, not just a shrunken desktop screenshot. [ ] Text contrast meets WCAG: 4.5:1 normal text, 3:1 large text. Large means at least 18pt regular or 14pt bold (about 24px / 18.7px). [ ] Removing an extra effect would not weaken the main idea. Suggested sizes are experiment starting points, not original project specs. COPYABLE STARTER PROMPTS Replace the bracketed fields and supply your own images. RED + GLASS Design a responsive hero for [brand] with a deep red background and my supplied portrait. Make a short, oversized wordmark the dominant graphic element. Apply a subtle vertical fluted-glass treatment to the portrait artwork only; keep the face recognizable and all interface text sharp. Use a restrained pale-cyan accent. Keep navigation, a one-sentence introduction, and one clear CTA readable. First show the composition without the glass, then add the treatment. Preserve real, accessible text and make a separate mobile composition. SKY + STRETCHED TYPE Design a playful responsive hero for [brand] using a blue-sky background and my supplied transparent subject image. Place a very tall, condensed [headline] behind the subject. Let the subject overlap only part of the letters so the phrase remains recognizable. Use pink in the subject and one yellow accent. Keep body copy and controls at normal proportions. Show the layer order: sky, headline, cutout, interface. On mobile, reflow the composition and keep the CTA visible. DARK + LAYERED TYPE Design a cinematic responsive hero for [brand] on a near-black background. Use my supplied portrait cutout with a warm rim light. Place an oversized white [wordmark] behind the portrait, spanning most of the hero width, with enough visible letter shapes to recognize the name. Keep the introduction, navigation, and CTA in quiet, readable areas. Repeat the brand name in accessible text if the decorative wordmark is partly hidden. Check the silhouette, contrast, and mobile layout before adding any motion. REFERENCES The three reference designs are analyzed in the illustrated guide: https://toolandtea.com/big Gravity Off: Victoria Kovtun https://www.behance.net/gallery/249058265/Creative-Course-Landing-Page KONTOUR STUDIOS: Pavel Lozovyi https://www.behance.net/gallery/252611015/KONTOUR-STUDIOS-Website-Brand-Identity GRID: reference supplied for the reel; original creator not verified. Technical references: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html Explanations are toolandtea's analysis, not the creators' documented process. Use your own words, photography, and brand assets in your finished project.