4:18

Style Guide for GUSD district and School Website

          1. Branding and Logo Usage:

• Use the official school logo consistently throughout the website.
• Ensure the logo is clear, easily recognizable, and maintains its original proportions.
• Maintain a consistent color scheme that aligns with the school's branding guidelines.

• 2. Typography:

• Choose clear and easily readable fonts for the website content. Use the same font consistently throughout the site.
• Use larger font sizes to enhance readability, especially for younger audiences.
• Differentiate headings and subheadings with appropriate font styles and sizes.
• Ensure proper line spacing to avoid crowding of text.

• 3. Color Palette:

• Select a vibrant attractive, and engaging color palette that reflects the school's identity. Avoid dated jewel tone palettes.
• Use colors that are visually appealing to children while maintaining readability.
• Limit the number of colors used to maintain a cohesive visual experience.
• Campussuite color themes supports a primary, secondary, and tertiary color for each site.

• 4. Layout and Navigation:

• Keep the layout clean, simple, and intuitive for easy navigation.
• Utilize clear and descriptive headings to organize content into logical sections.
• Implement a user-friendly menu system for easy access to different sections of the website.
• Maintain consistency in the placement of key elements like the logo, menu, and search bar across pages.

• 5. Imagery and Graphics:

• Incorporate high-quality images that represent the school environment and activities.
• Use images that showcase diversity and inclusivity.
• Ensure images are properly optimized for fast loading without compromising quality.
• Include alt text for all images to provide accessibility for visually impaired users.

• 6. Content Guidelines:

• Write clear and concise content tailored to the elementary school audience.
• Use simple language and avoid jargon or complex vocabulary.
• Break down text into short paragraphs with descriptive headings for easier reading.
• Incorporate bullet points, numbered lists, or infographics to present information in a visually appealing manner.
• Keep the content engaging and informative, covering important aspects such as curriculum, activities, and events.

• 7. Accessibility:

• Ensure the website is accessible to individuals with disabilities.
• Follow accessibility guidelines such as using alt text for images and providing captioning for videos.
• Implement proper heading structure to assist screen readers.
• Design the website to be compatible with keyboard navigation.

• 8. Responsiveness and Mobile-Friendliness:
•       80 percent of our users are accessing the district and school websites from a mobile device. Please check that pages appear correctly on both mobile and desktop screens.

• Design the website to be responsive, adapting to different screen sizes and devices.
• Optimize images and other media for mobile devices to reduce loading times.
• Test the website's functionality and appearance on various devices and browsers.

• 9. Social Media Integration:

• Integrate social media widgets or buttons to allow easy sharing of content.
• Display links to official social media accounts to encourage engagement.
• Ensure the social media links open in new tabs or windows to retain website visitors.

• 10 . Contact Information:

• Include clear and prominent contact information for the school, including phone numbers, email addresses, and physical addresses.
• Provide a contact form for inquiries or feedback, if applicable.

Remember, the style guide should serve as a reference and maintain consistency throughout the website. Regularly review and update the style guide as needed to accommodate changes or improvements to the website design and functionality.

4:19

also - photos for department staff?

4:20

always include alt text for images for ADA compliance

Linked documents should be html pages or PDFs, not Word, Powerpoint or Google Docs. 4:20

prefer text, to images and attachments for ADA compliance. For example consider placing content inline (staff directory, bell schedules, etc) instead of a PDF that the user has to open or download.

4:21

in general don't do inline translation - let the translate function for the website handle this

4:22

always consider the audience of a page/site

4:22

menus should have less 4-7 items ideally

Broken links should be identified and fixed in a timely manner

Font types should be easy to read and a common style.