November 29, 2024 | 10 min read
This blog outlines general guidelines and best practices to ensure your design work effectively delivers a great experience for users of the registration, website, and event app created with Eventact.
General Concept
All modules within a project share design settings set at the project level. The project-level design settings interface was designed to let event organizers control their colors and branding without needing special technical expertise.
The project design interface enables organizers to select colors, fonts, and logos and upload images and banners that will be applied across all Eventact modules.
For those with some knowledge of HTML and CSS, there is also the option to further customize the experience by adding custom HTML and CSS.
For designers: building a brand that fits Eventact
If you are a designer creating an event brand that will live in Eventact, read this first. Eventact applies your brand through a fixed set of color roles, two coordinated schemes, and specific image sizes. Designing to these from the start means your palette and assets drop in cleanly, with no retrofitting later.
Two color schemes, used together. Eventact applies two schemes to every project that should feel like one family: a Main Color Scheme for primary content and an Alternate Color Scheme for secondary areas. Websites alternate between the two from section to section, forms use Main for the form and Alternate for the surrounding area, and the agenda and app draw on both. Design them as a coordinated pair, not two unrelated palettes.
Design to name color roles, not to elements. You are not styling individual buttons or headings. You are filling a fixed list of roles, and Eventact maps them onto every surface. Plan a value for each:
- Background, Background 2, Background 3 (three nesting levels, each needs contrast against body text and clear separation from one another)
- Title, Body Text, Highlighted Text, Subtext
- Button Background, Button Text
- Input Field Background, Input Field Text
Contrast is a hard constraint. Aim for a minimum contrast ratio of 4.5:1 (WCAG 2.2) on every text-on-background pairing. Eventact checks this and flags failures, so building it up front avoids rework.
Fonts. Eventact takes Google Fonts by name, with weight set via a colon (for example, "Raleway:700" for titles, "Roboto:400" for body). Custom or licensed fonts are supported but must be delivered as a hosted URL to an OTF, WOFF, or TrueType file, with a valid license. Pick families and weights that are available this way.
Image specs at a glance. Export to these sizes. All images are PNG or JPG.
| Asset | Dimensions | Notes |
|---|---|---|
| Logo | 450px x 225px max | < 200KB |
| Favicon | 128px x 128px max | < 100KB |
| Website header | 1920px x 420px | ratio 4.8, < 500KB |
| Website header (mobile) | 800px x 400px | ratio 2, < 100KB |
| Footer | 1920px x 250px | < 500KB |
| Background (forms / app) | 1920px x 1280px | < 1MB |
| Registration header | 1200px x 250px | ratio 4.8, < 500KB |
| Registration header (mobile) | 600px x 125px | ratio 4.8, < 100KB |
| App header | > 1920px wide x 75px | content on left; right side crops on narrow screens, < 400KB |
| App button (1 slot) | 300px x 300px | < 400KB |
| App button (double) | 616px x 300px | < 400KB |
| App button (triple) | 938px x 300px | < 400KB |
| Social share background | 1200px x 600px | < 100KB |
| Social share preview | 1200px x 630px | < 100KB |
A fast starting point. If you want a coordinated palette to react to or adjust rather than building all the slots by hand, the AI Palette Generator (covered below) can produce a full two-scheme palette from a primary color or a short brief, which you can then fine-tune.
The rest of this guide covers each of these in full detail, plus how to apply everything inside Eventact.
Colors
Eventact uses two color schemes in each project: the "Main Color Scheme" and the "Alternate Color Scheme."
The "Main Color Scheme" is utilized for the primary content area where information is presented.
The "Alternate Color Scheme" is used in secondary areas or when it is advantageous to differentiate a section of information from one that uses the "Main Color Scheme."
The color scheme includes:
- Background Color - This is the color that fills the area behind the content. You may also use an image as the background. If you choose an image, select a color that matches its dominant color to allow color contrast calculations.
- Title Color - The color used for the title text.
- Text Color - The color used for regular text.
- Highlighted Text Color - This color is used to emphasize important text.
- Subtext Text Color - This color is applied to less important text than the main content, such as side notes or minor details.
- Background Color 2 - This color is for areas of content nested within the main area. It should have sufficient contrast with the regular text color. Choose a color similar to the main background color but still distinguishable.
- Background Color 3 - This is another background color for content nested within the main area, but it differs from Background Color 2. It should also have enough contrast with the regular text color and be notably different from Background Color 2.
- Button Background Color - This color is used for buttons. It should stand out against the background color for better visibility.
- Input Field Background Color - This color applies to input elements, such as text fields. You can choose a color that either harmonizes with the background or stands out from it.
- Input Field Text Color - This color should contrast nicely with the input field's background to ensure visibility.
Color Accessibility: Ensure that text and background colors provide sufficient contrast for readability. The system checks this and will alert you if the contrast is inadequate. Aim for a minimum contrast ratio of 4.5:1, as recommended by WCAG 2.2.
Using the AI Palette Generator
If you prefer not to build a color scheme manually, the AI Palette Generator can create an initial set of coordinated colors and, if desired, matching fonts. It uses a brief event description or your existing brand colors as input.
Where to find it
Navigate to Design, then Colors and Fonts. In the top right corner of the customization card, select the AI Palette Generator (magic wand icon).
Two ways to use it
The generator offers two modes: create a new palette from scratch or refine your existing colors.
Generate a new palette
This mode builds a scheme from what you provide:
- Colors. Add a Primary Color to anchor the palette, such as your brand or venue color. Optionally, include an Accent Color for buttons, highlights, and action items. If omitted, the generator selects an accent based on your description.
- About your event. Provide a brief, specific description of your event. The more detailed you are, the more accurate the results. Include the event type and the desired atmosphere. See examples below.
- Mood. Choose one or more mood tags to guide the palette's lightness, saturation, and contrast.
Examples of good event descriptions
Combine the event type with your desired tone. Here are some examples:
| Event type | Description to try |
|---|---|
| Medical or academic conference | "Annual medical research conference. Should feel credible and modern." |
| Product launch | "Tech startup product launch. Bold, energetic, forward-looking." |
| Gala or awards evening | "Black-tie awards gala. Elegant, warm, premium." |
| Community or nonprofit event | "Community fundraiser. Friendly, approachable, hopeful." |
| Corporate summit | "B2B leadership summit. Professional, confident, understated." |
| Festival or cultural event | "Outdoor arts festival. Playful, vibrant, creative." |
The more concrete the tone words, the better. "Credible and modern" gives the generator more to work with than "nice" or "professional" on their own.
Refine your current colors
Use this mode if your current palette only needs adjustments rather than a complete replacement.
- It reads your current colors automatically. No color inputs are needed. The generator works from the colors already set in your back office.
- Describe what you want to change. For example: "The contrast feels too low, make the text more readable," or "Adjust for a darker, evening-event feel."
- What it does. The generator adjusts the contrast and balance of your existing colors rather than creating a new palette.
Options
- Suggest fonts. Enable this option to receive matching Google Fonts pairings with your color palette.
- Two schemes at once. The generator creates both of Eventact's color schemes simultaneously to ensure coordination:
- Main Color Scheme: backgrounds, buttons, text fields, and primary and secondary text.
- Alternate Color Scheme: alternating website sections, nested content areas, and secondary panels.
Applying the results
Click Apply to update the current event palette.
- Apply is not the same as Save. Clicking Apply to Event only populates the color and font fields on the form. Your selections will not appear on the event website, app, or forms until you click Save at the top of the Colors and Fonts page.
- Check accessibility before saving. After applying, review any contrast warnings on the settings page. As with all Eventact color schemes, aim for a minimum contrast ratio of 4.5:1, as recommended by WCAG 2.2.
What the generator fills in
When you apply a palette, the generator fills in the following fields:
| Scheme | Fields populated |
|---|---|
| Main Color Scheme | Background, Title, Body Text, Highlighted Text, Muted Subtext, Background 2, Background 3, Button Color, Button Text Color, Input Field Background, Input Field Text |
| Alternate Color Scheme | Background, Title, Body Text |
Color Use in Forms
In the forms (registration forms and abstract submission forms), the form itself uses the "Main Color Scheme." The area around the form employs the "Alternate Color Scheme."
Color Use in Websites
In Websites, each website page is composed of sections. These sections alternate between the "Main Color Scheme" and the "Alternate Color Scheme" to differentiate them and create visual interest.
Color Use in the Agenda
The agenda primarily uses the "Main Color Scheme." It is hierarchically structured, with each day containing sessions and each session featuring lectures. These lectures may include additional information, such as lecture abstracts, speaker details, and author details.
To enhance readability and better illustrate the hierarchy, the agenda display uses Background Color 2 and Background Color 3, along with the highlighted and subtext colors from the main color scheme. Using different background colors helps separate lectures and distinguish abstract information from the details of each lecture.
Color Use in the Event App
The visual layout of the event app consists of a top menu, a side menu, and a main content area. In the main content area, information is displayed in "cards."
The main cards use the "Main Color Scheme," while both the "Main Color Scheme" and the "Alternate Color Scheme" are utilized throughout the event app.
Fonts
Eventact allows users to specify the font for displaying text and supports three main types of fonts:
- Standard Web Safe Fonts - These are fonts that come pre-installed on most users' computers and are supported by most web browsers. Due to their limited variety and customization options, they are rarely used in modern websites.
- Google Fonts - This is a vast library of fonts hosted by Google and widely utilized by websites for their quality, free licensing, and ease of implementation.
- Custom Fonts - These are fonts sourced from various providers or specifically created for a brand. They are distributed in file formats such as OTF, WOFF, and TrueType and often require a license for use on websites.
Using Google Fonts
You can choose a Google font by entering the font name in the designated field. For example, you can use "Roboto," "Open Sans," or "Montserrat."
In addition to selecting the font name, you can specify the font-weight by adding a colon (:) followed by the desired weight. The font-weight determines the thickness of the font. Commonly used weights include 300 (light), 400 (regular), and 700 (bold).
For instance, you might use "Raleway:700" for titles and "Roboto:400" for regular text.
Using Custom Fonts
Eventact supports OTF, WOFF, and TrueType fonts.
To use a custom font file, you need to have a URL to the font file.
For example: https://fonts.cdnfonts.com/s/39664/GoodVibrationsRegular-7D6P.woff
Please note that using a font without the appropriate license is usually illegal and may lead to legal action. You must obtain a license from the font owner to use the font.
How to get a URL for the font file
- Open the Website - Navigate to the desired website in your browser.
- Activate Developer Tools - Press F12 or right-click the page and select Inspect.
- Locate the Fonts Tab - Switch to the Fonts tab in the Developer Tools.
- Reload the Page - Refresh the page to update the font information.
- Copy Font URL - Right-click on the desired font in the list. Select Copy Link Address.
- Paste the URL - Paste the copied URL into the designated field in Eventact.
Images
In the project design settings, you can set the main images for your project: logo, favicon, website and app header, footer, and background.
Here are some image size recommendations:
1. Website
Logo
- Maximum dimensions: 450px x 225px
- File Type: PNG or JPG
- File Size: < 200KB
Favicon
A favicon is a small icon that represents a website or web page. It's typically displayed in the browser's address bar, tab, and bookmarks.
- Maximum Dimensions: 128px x 128px
- File Type: PNG or JPG
- File Size: < 100KB
Header Image
- Recommended Dimensions: 1920px x 420px
- Recommended width-to-height ratio: 4.8
- File Type: PNG or JPG
- Recommended File Size: < 500KB
Header Image for Small Screens (mobile)
- Recommended Dimensions: 800px x 400px
- Recommended width-to-height ratio: 2
- File Type: PNG or JPG
- Recommended File Size: < 100KB
Footer Image
The footer image is displayed at the end of form pages and the bottom of every page in the event application.
- Recommended Dimensions: 1920px x 250px
- File Type: PNG or JPG
- Recommended File Size: < 500KB
Background Image
The background image is the page background for forms and the event app.
- Recommended Dimensions: 1920px x 1280px
- File Type: PNG or JPG
- Maximum File Size: 1MB
2. Registration form
Header Image
- Recommended Dimensions: 1200px x 250px
- Recommended width-to-height ratio: 4.8
- File Type: PNG or JPG
- Recommended File Size: < 500KB
Header Image for Small Screens (mobile)
- Recommended Dimensions: 600px x 125px
- Recommended width-to-height ratio: 4.8
- File Type: PNG or JPG
- Recommended File Size: < 100KB
3. Event App
App Header
The app image is used as the background of the event application's top navigation bar. The app image is cropped on the right side on narrow screens. Place important content on the left side.
- Width: > 1920px
- Height: 75px
- File Type: PNG or JPG
- File Size: < 400KB
Event App Buttons
- One-slot App Button: 300px x 300px
- Double App Button: 616px x 300px
- Triple App Button: 938px x 300px
- File Type: PNG or JPG
- File Size: < 400KB
Background Image for Social Networks Card Share
- Dimensions: 1200px x 600px
- File Type: PNG or JPG
- File Size: < 100KB
Preview Image for Social Networks Card Share
- Dimensions: 1200px x 630px
- File Type: PNG or JPG
- File Size: < 100KB
Other Images
In addition to the standard images, you can use images in Eventact website sections and the event app as background images.
When uploading an image, please check the recommended size on the back office page. In general, using smaller image file sizes helps pages load faster, enhancing user experience and reducing bounce rates, while also improving search engine rankings.
For general images on the website, where a specific size is not required, the recommended dimensions are 640px width, 960px height, and a file size of up to 1 MB.
Summary
By following these guidelines and customizing colors, fonts, and images while ensuring accessibility and optimal file sizes, you can create professional, user-friendly designs without requiring advanced technical skills.
For further assistance, consult our support team or visit our blog.