Scribd Logo
Upload

Welcome to Scribd!

  • 40 views

    Style Guide: Screen Layout

    Uploaded by

    Winifredo Balsalubre
    The style guide specifies the visual elements that need to be standardized in a course, including screen layout, color palette, typography, readability, visuals, logos, highlights, interface elements, and standard navigation icons. Key aspects that should be defined are main and accent colors, font styles and sizes for titles, subtitles, body text and captions, image sizes and borders, logo style, types of highlights to use and their colors, icon styles and sizes, and navigation elements like back buttons. Consistency in visual design is important to provide a coherent user experience.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Style Guide: Screen Layout

    Uploaded by

    Winifredo Balsalubre
    40 views2 pages
    The style guide specifies the visual elements that need to be standardized in a course, including screen layout, color palette, typography, readability, visuals, logos, highlights, interface elements, and standard navigation icons. Key aspects that should be defined are main and accent colors, font styles and sizes for titles, subtitles, body text and captions, image sizes and borders, logo style, types of highlights to use and their colors, icon styles and sizes, and navigation elements like back buttons. Consistency in visual design is important to provide a coherent user experience.

    Original Description:

    sample

    Original Title

    style-guide

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The style guide specifies the visual elements that need to be standardized in a course, including screen layout, color palette, typography, readability, visuals, logos, highlights, interface elements, and standard navigation icons. Key aspects that should be defined are main and accent colors, font styles and sizes for titles, subtitles, body text and captions, image sizes and borders, logo style, types of highlights to use and their colors, icon styles and sizes, and navigation elements like back buttons. Consistency in visual design is important to provide a coherent user experience.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    40 views2 pages

    Style Guide: Screen Layout

    Uploaded by

    Winifredo Balsalubre
    The style guide specifies the visual elements that need to be standardized in a course, including screen layout, color palette, typography, readability, visuals, logos, highlights, interface elements, and standard navigation icons. Key aspects that should be defined are main and accent colors, font styles and sizes for titles, subtitles, body text and captions, image sizes and borders, logo style, types of highlights to use and their colors, icon styles and sizes, and navigation elements like back buttons. Consistency in visual design is important to provide a coherent user experience.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 2

    Style Guide

    VISUAL ELEMENT WHAT TO SPECIFY

    SCREEN LAYOUT Identify the types of templates in the course, describe their organization, show
    screen shots and include as separate files when appropriate

    *COLOR PALETTE Main Colors: identify two or three for the overall interface and background (often
    related to branding)

    Accent Colors: select one or two accent colors

    Hyperlinks: specify the color of hyperlinks

    TYPOGRAPHY **Titles or large text: specify typeface, style, color, size and alignment

    Subtitles or second largest text: specify typeface, style, color, size and alignment

    Body Text: typeface, style, color and size (will always be left-justified)

    Captions; typeface, style, color and size (will typically be left-justified)

    Labels: typeface, style, color and size (this may need to vary)

    READABILITY Leading: identify how much space to allow between lines of text within a
    paragraph

    Paragraph Spacing: identify how much space to allow before and after
    paragraphs

    VISUALS Image Style: identify types of images to use, such as color photos, black and
    white photos, illustrations or clip art

    Image Sizes: specify standard sizes of images for each type of screen (example:

    You may customize this template


    Style Guide
    VISUAL ELEMENT WHAT TO SPECIFY

    split screen photos will be 512x768)

    Image Borders: identify whether images will have borders and the color and line
    thickness of the border

    LOGO Note which style of logo to use on the title screen (you won't be using it on other
    screens, right?)

    HIGHLIGHTS(for Type of highlight: arrows (show example of head and stem), hand-drawn circles,
    emphasis) light band of color, etc. If using multiple highlights, specify when each type will
    be used.

    Color of each type of highlight

    INTERFACE Identify the color and style of any user interface elements you control
    ELEMENTS

    Icons: style and size of icons for navigation or other UI purposes

    STANDARD The navigation bar may have these navigation icons but there are times when
    NAVIGATION you need to specify navigation tools such as symbol-based or text-based
    ICONS navigation guides. Standard image or symbol as well as text size and color and
    position on the slide should be set in the style guide.

    Back arrow: color: green, txt: red font color: red font size 8,

    You may customize this template

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy