Unbounce Events Page

# Design from Reference: Unbounce Events Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Unbounce - **Category:** Events Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbd24cd69dbc5db10189d3_6acbd00b9591def5cb68bbb6_cms-34f2f0d12f003d41df7e02f6.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** A spacious events page uses narrow lightweight display typography, large documentary photographs, blue rectangular actions, and small textured geometric accents. - **Tone:** The layout is editorial and community-oriented, with generous white space and alternating image/text rows. - **Observed scale:** The source measures 1440 × 5698 pixels. Approximate dimensions below refer to image pixels; CSS estimates assume an unverified 1× capture. ### Page composition - **Header:** Unbounce branding sits left, product/navigation links span the center, and search, outlined Log In, and filled trial controls align right. - **Hero:** A centered two-line conference title, short rate-oriented sentence, and blue ticket button occupy a sparse opening area. - **Conference introduction:** A large audience photograph at left pairs with a multiline heading, paragraph, and arrow-led ticket link at right. - **Venue section:** The next row reverses the composition, placing event-space copy left and a room photograph right. - **Speaking schedule:** A pale warm full-width band pairs a speaker photograph with a heading, short introduction, and five-row event/city/date listing. - **Community sequence:** Meetup, community-support, and quarterly-open-house sections alternate large photographs and text blocks. - **Footer:** A white footer contains a small brand mark, five link columns, lower legal text, and circular social icons. ### Information hierarchy - **Conference identity:** The oversized centered hero title introduces the event before detailed content. - **Primary conversion:** The blue ticket button is the strongest opening action; a text ticket link repeats in the conference section. - **Section narrative:** Large narrow headings introduce conference value, venue hire, meetups, community activity, and open-house participation. - **Schedule structure:** Event names are blue links, with cities and dates in separate aligned columns. - **Secondary actions:** Arrow-led links identify booking and open-house destinations; inline underlined contact links appear within community copy. - **Historical scope:** The page visibly references past event years and dates. These are historical screenshot content, not current schedules, availability, or booking recommendations. ### Typography - **Display appearance:** A tall, narrow sans-serif with light strokes is used for major headings. Exact font identity is unverified. - **Hero title:** Approximately 66–72 pixels, light/regular weight, with line-height near 80 pixels and open spacing. - **Section headings:** Around 36–40 pixels, narrow regular weight, often wrapping across two or three lines. - **Body copy:** Approximately 16–18 pixels with 27–29-pixel line-height, in muted gray. - **Actions:** Buttons and arrow links use a stronger medium/semibold sans-serif around 16–18 pixels. - **Schedule:** Event/city/date rows use about 16 pixels with consistent baseline spacing. - **Footer:** Column headings are around 18 pixels; links and legal details are smaller, roughly 12–14 pixels, and light gray. ### Colors & surfaces - **Measured base:** #FFFFFF dominates the page; #FAF8F6 supplies the warm pale speaking-schedule band. - **Measured blue:** #194AFB appears in the primary action family. - **Measured yellow:** #FBCE32 supplies bright decorative blocks and outlines. - **Measured dark:** #303030 and #28272C appear in text/logo detail. - **Other accents:** Coral-pink textured rectangles, purple-blue gradient blocks, and a mint outlined rectangle decorate photograph edges. - **Surface style:** Most content is unboxed. Photographs are rectangular, with geometric accents overlapping or sitting behind their corners. - **Depth:** Grainy textures add visual interest, while the page avoids prominent shadows or elevated cards. ### Components - **Header actions:** Log In uses a blue outline; Start My Free Trial uses a filled blue rectangle with square or minimal-radius corners. - **Hero ticket button:** A broad blue rectangle approximately 250 × 70 pixels contains centered white text. - **Conference photo:** A large nearly square audience image is framed by a coral textured block at upper left and a yellow block at lower right. - **Venue photo:** A wide room image has a purple-blue block near its top-right and a yellow outlined rectangle overlapping the lower-left area. - **Speaking listing:** Five rows align event links, city text, and date ranges without a heavy enclosing table border. - **Meetup photo:** A group portrait pairs with a yellow block and mint outline around opposing corners. - **Community photo:** A group outdoors is accented with a yellow outline above and coral textured rectangle below. - **Open-house photo:** A foosball scene is decorated by a purple gradient bar above and tall yellow outline at left. - **Text links:** Small right arrows precede booking/ticket/open-house actions; contact addresses use underlined inline treatment. - **Footer groups:** Product, Solutions, Company, Learn, and Get in Touch form five evenly spaced columns. - **Social controls:** Four dark circular icons sit beside lower legal links. - **Unshown states:** Ticket purchase, booking forms, open menus, event detail pages, and contact outcomes are not visible. ### Visual rhythm - **Large breathing room:** Broad vertical gaps separate the hero and each editorial row. - **Alternating layout:** Image-left/text-right and text-left/image-right arrangements create a steady long-page rhythm. - **Consistent image scale:** Large photographs anchor each community section, while text stays within moderate-width columns. - **Accent variation:** Filled blocks, outlines, and textured bars change around images without altering the underlying grid. - **Schedule interruption:** The pale speaking band breaks the white sequence and introduces denser structured data. - **Quiet footer:** Small light links and ample spacing provide a subdued ending after the photography-led content. ### Responsive - **Evidence limit:** Only a desktop events page is captured. Mobile arrangement and fixed navigation are unverified. - **Recommended hero:** Reduce the narrow display heading to around 40–48 CSS pixels and allow natural wrapping. - **Recommended rows:** Stack photographs and text in a consistent reading order on small screens. - **Recommended schedule:** Convert event/city/date rows into clearly labeled stacked entries or an accessible horizontally scrollable table. - **Recommended decoration:** Reposition or reduce overlapping blocks so they do not crop important photo subjects or cause overflow. - **Recommended footer:** Wrap columns into smaller groups and retain readable link/touch spacing. ### Adaptation guidance - **Preserve content categories:** Keep conference promotion, venue information, speaking schedule, community activity, and open-house invitation distinct. - **Validate event data:** Replace historical years, dates, locations, pricing language, and contact destinations with approved current content. - **Use approved photography:** Maintain documentary human imagery and consistent crops, with appropriate permissions and alternative text. - **Standardize editorial rows:** Reuse a two-column component with controlled image ratios, text widths, and optional decorative accents. - **Maintain accessibility:** Check the contrast of lightweight gray type, provide visible focus, and use semantic schedule structure. - **Keep actions concrete:** Ensure ticket, booking, and event links lead to real destinations with clear status and availability. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.