Knowledgebase

Design is what pulls together the ideas, contributions, and hard work of many chapter leaders into a single, cohesive, professional resource. StarChapter makes maintaining a consistent design easy with the Design Editor tools and options within the WYSIWYG Editor.

When your StarChapter system was setup or last redesigned, StarChapter's graphic design team applied an approved design to your system. As new content is added over time, keep web best practices in mind to ensure a professional look.

Set a Consistent Design and Use It!

StarChapter's Design Editor tools allows design elements, including font styling and color scheme, to be applied throughout the website. Once those elements are defined, use the built-in Formats options in the WYSIWYG Editor to apply them. Avoid using the font, size, and color options within the WYSIWYG Editor as they will override the default design elements and lead to a patchy look throughout the content.

Colors should be pulled from the chapter's logo and/or parent organization's brand guidelines, when possible. One primary color and one to two contrasting colors are sufficient. More than that will lead to a confusing, rather than a cohesive, design.

Limit fonts to two or less, unless your organization's brand guidelines indicate otherwise. One font could be used for all paragraph text and a different font could be used for all headers. It is also acceptable to use the same font throughout all text, including headers.

Font Size

The base font of all designs should be set to 15 or 16 pixels. The choice between those options will depend upon the font used and personal preference. All other text should should be set to em. This means your font size will be based on a percentage of the base font size. This allows all text to scale proportionately in mobile.

Headers

Headers should always be used in a heirarchical way. Best practice is to have a single H1 on a page that includes targeted keywords that closely relate to the page content. This improves SEO and can drive more targeted traffic to your website.

H2 headers should reference the H1 of that page in some way. These are typically section headers on a page.

H3 and H4 headers should be subheadings to the H2 and H3 headers, respectively. These headers won't be used on every page, but they will help users navigate between sections of content more easily.

Alternate Backgrounds

StarChapter's current designs include both main and alternate background colors. This allows admins to select between these color schemes for each top-level container on a page. Alternate backgrounds can be used to highlight important sections on a page or to separate content on longer pages. Use alternate backgrounds sparingly to ensure that they stand out.

Alternate backgrounds should be avoided when displaying sponsor logos. Many sponsor logos will have white backgrounds or text that is hard to read on your alternate background color. This leads to white blocks scattered on the colored background or illegible text which can create an unprofessional look. Instead, keep sponsor images on the main background for a cleaner look. Other images may have the same issue but this can be evaluated on a case-by-case basis as you add content. 

Home Page Organization

The home page should showcase your chapter's most important information. Content on your home page could include a welcome message, upcoming events, sponsors, or whatever is a priority for your organization. It is tempting to place all new content on the home page but, avoid doing this for all content. Instead use the main navigation and other links on the home page to guide users into your site, all while keeping your home page clean and concise. 

Take advantage of open space on the home page. Having solid text is overwhelming and it's hard for new visitors to know where to look. Open space allows headers, links, and buttons to stand out which will draw users to the content that you want to highlight. 

Slider Images

Slider images provide movement and impact on the Home Page of any website, but they can become noisy and overwhelming if not managed. A single, carefully selected image can be used alone very successfully. If a rotation is desired, no more than three (3) to five (5) images is recommended. Users won't wait for images to cycle back through, so more than five images won't be viewed by most users.

Main Menu Links

Main menu links will vary between organizations, industries, and chapters, but there are general rules to follow. The most important links should be placed at the beginning and end of the navigation menu. Use specific keywords in the navigation links rather than generic terms. StarChapter provides flexibility in how pages and links are labeled, so you can use that opportunity to customize the content of your website.

The number of links that will fit on the navigation menu depends on the length of the linked text. Links such as Join and Contact will leave more room than links like Professional Development and Sponsorship Opportunities. Regardless of space, less than seven (7) primary navigation links are recommended. This makes it easier for users to navigate the system. Additional pages and resources can be added as sublinks on the main navigation.

Images

Images used on a web page will be viewed on many different browsers and mobile devices, so it is important to start with a high quality jpg or png image. The uploaded image should be at least as large as you want it displayed. Images increased in size after upload will have poor resolution.

When images are added within page content, space should be added horizontally and vertically around the image to ensure that text doesn't align right against the edge of the picture. Padding around images ensure that the associated text is legible. 

Additionally, Alt Text should be added for all images. That will benefit SEO as well as web accessibility. Alt Text should be a brief, clear description or purpose of the image. This is the text that is logged by search engines and read to users with e-reader tools.

Links Versus Buttons

In many cases, links and buttons can seem interchangeable. Buttons seem like more prominent links. This is basically true. Buttons should be used for key calls-to-action, such as Join Now or Become a Sponsor. Links should be secondary calls-to-action, such as linking to a related page on the chaper website. Buttons should be used sparingly to ensure that they remain eye-catching to users. To keep consistency with actionable items whether using a link or button, use the same color for your link and your buttons. This indicates to the user that an action is available to click.

Tables

Tables are not recommended. Whenever possible, use built-in content sections within StarChapter to manage content organization. If tables must be used, do not set a width to the table as that will make it unresponsive in mobile views. Tables are best for small amounts of content, rather then large amounts of text.

Redesign Every 2-3 Years

StarChapter offers redesigns starting at $499 and they can often be completed in as little as 3 weeks. A new design is an easy way to refresh the website, stay on trend, and attract new members and sponsors. Submit a Support Ticket for more information regarding your chapter's redesign options.