Admin Layout

The administrative section of the site will have a different design and layout from the public page. This design is geared towards showing as much information as possible at a time without being cluttered. This section will also be mobile ready through the use of the Foundation framework from Zurb.

Layout Metrics

  • Total screen size is designed at 1600 x 950 pixels
  • Header Bar
    • 1300 px wide (min), 60 px tall
    • 0 px offset top, 300 px offset left
    • background color #EEEEEE
    • no border
    • Font Franklin Gothic, 50 pt, Black
  • Left Side Bar
    • User Section
      • 300 px wide, 60 px tall
      • 0 px offset top, 0 px offset left
      • background color #EEEEEE
      • border color #CCCCCC, size 1px, solid
      • Font Franklin Gothic, 20 pt, Black – User Name / User Id
      • Font Franklin Gothic, 14 pt, Black – Links
    • Messages Section
      • 150 px wide, 40 px tall
      • 60 px offset top, 0 px offset left
      • background color #EEEEEE
      • border color #CCCCCC, size 1px, solid
      • Icon color #2795B6
      • icon size 24 x 24 px
    • Notifications Section
      • 150 px wide, 40 px tall
      • 60 px offset top, 150 px offset left
      • background color #EEEEEE
      • border color #CCCCCC, size 1px, solid
      • Icon color #2795B6
      • icon size 24 x 24 px
    • Main Nav (dark area with icons)
      • 90 px wide, 750 px tall (min)
      • 100 px offset top, 0 px offset left
      • background color #333333
      • Each Nav square
        • 90 px wide, 80 px tall
        • bottom border color #EEEEEE, size 1px, solid
        • Icon color #2795B6
        • icon size 48x48 px
        • Font Franklin Gothic, 16 pt, White, Center
    • Sub Nav (right of Main Nav)
      • 210 px wide, 750 px tall (min)
      • 100 px offset top, 90 px offset left
      • background color #EEEEEE
      • border color #CCCCCC, size 1px, solid
      • Each Link
        • 210 px wide, 40 px tall
        • border color #666666, size 1px, solid
        • active link
          • background color gradient start top #59AAF4 to bottom #338CDF
          • Font Franklin Gothic, 13 pt, White
        • in-active link
          • background color #EEEEEE
          • Font Franklin Gothic, 13 pt, #888888
  • Main Section
    • background color White

User Section

This section will show information about the user that is currently signed into the site.

Avatar

The avatar will be based on the user’s selection which they can change in the user’s profile section. The default avatar is the icon below. The avatar will be sized to 50x50 pixels, offset top and left 10 px.

husky

User Name – User Id

The user name and id will also be a link to the user profile. NOTE: The user profile is not yet defined or created; however the link will be /User/Profile.

Links

The Public Page link will go to the main texashuskyrescue.org public page. The Log Off link will log the user off and navigate them to the main public page.

Messages Section

There will be a message functionality which will allow messages to be sent between users. The number the user has will be displayed here where the <#> is. Clicking on the Messages link will navigate to the user’s message management page.

Until the messaging functionality is developed place the icon and text with a zero hard coded for the number of messages.

Icon source: http://fortawesome.github.io/Font-Awesome/icon/envelope/

Notifications Section

There will be a alert notification section which will provide the user with notifications about various items that need their attention. Clicking on the Notifications link will navigate to the user’s notification management page.

Until the notification functionality is developed place the icon and text with a zero hard coded for the number of notifications.

Icon source: http://fortawesome.github.io/Font-Awesome/icon/info-sign/

Main Nav (dark area with icons) & Sub Nav (right of Main Nav)

Primary function links will be provided in this section. When clicking on the Main Nav link navigate to the first sub nav link

Last edited Jul 24, 2013 at 9:20 PM by jamesbolton, version 1

Comments

No comments yet.