Contents: 


  1. Unioncloud sections
  2. Fonts
  3. Colours
  4. Content structure
  5. Icons
  6. System Pages
    1. Login Page
    2. Success and failure messages
    3. Groups
    4. Events
    5. The Student Voice & Digital Rep
    6. Volunteering
    7. E-Shop
    8. User profile

UnionCloud sections

  • Homepage
  • Group Homepage
  • Group Promotions
  • Group Details page
  • Events Homepage
  • Events Promotions
  • Events Details Page
  • Buy Ticket page
    • Ticket Questionnaire
  • Join Groups
  • My Tickets
  • My Subscriptions
  • Shopping Cart
    • Event Ticket Questionnaire
  • Verify Ticket
  • Print Ticket
  • Footer Components
  • Sign In
  • Sign Up
  • Registration
  • Forgot Password
  • Confirmation
  • Registration Guest/Students
  • News & Articles
  • News Details page


Website builder components

  • Menu
  • Tab Container
  • Grid
  • Stripe
  • Slider
  • Column
  • List

Other

  • Payment Template
  • Page Search Functionality
  • Breadcrumb
  • Top Advertisement 
  • Groups Search
  • Events Search
  • Email Template Images
  •  - Header
  •  - Footer
  • Calendar Widget

Fonts

Decide what fonts you would like to use across the website for things like headers, paragraph text and buttons. Have a look at Google Fonts to get inspired.

  1. Would you like multiple fonts?
  2. What weight would you like for each (Bold, thin, normal etc)?
  3. What line height for each?  
  4. What size would you like for different text elements? 


NB: We would recommend only using two fonts maximum.  


Text elements:

  • H1 - Heading 1
  • H2 - Heading 2
  • H3 - Heading 3
  • H4 - Heading 4
  • H5 - Heading 5
  • H6 - Heading 6
  • Paragraph text
  • Links

Colours

Let us know the colours that are in your brand guidelines. What colours would you like for: 

  1. Nagivation, dropdown, dropdown shadow, dropdown hover
  2. Body text, headers, text in footer, text in buttons
  3. Buttons, button shadow, button hover 
  4. Tabs, selected, unselected
  5. Sidebar, borders, search boxes
  6. Footer

NB: We require hex values, e.g. #000000

Content structure

Think about how you would like the website layout to be structured. 

  1. What browser width would you like the main body, navigation and header?
  2. Think about how to structure content across devices (Desktop, tablet and mobile)
  3. How wide would you like the sidebar?
  4. Would you like the sidebar on the left or right?
  5. How much padding would you like in text areas


For example, you might want to make the main content 80% of the browser window on desktop. 

Icons

Think about different icons that you could use on the site. You can change the basket icon, or add icons to buttons for example. 


System page: Log In Page

If you are using single sign on, think about how you want the log in page to look for your students and staff. 


Have a look at Salford SU's login page for inspiration:


System page: Success and error messages

These appear at the top of your website after an action has been taken that needs user attention:


System page: Groups

The groups page has filters on the far left and then sub filters for the group categories. You also have a promotions area above which you can add a promoted group. 


Groups are generated dynamically in rows of 8. So you would need to have either a 2x4 or 8x2 grid. 


Think about how you want the titles of each to display, whether you want the description there or just the group logo. 


Default theme: 


Styled theme: 

Group page

In each individual group, you can see the description, the join button, events and articles. 


Once you have joined the group you can also see resources.


You can also build subsites within groups to have different sections. This could list things like pricing for membership types or the curent committee. Look at this example. Once you've created one subsite, you can copy the structure across to all of your groups when creating them. 

System page: Events

On the events page, similar to groups, it has filters on the far left for the event categories. You also have a promotions area above which you can add a promoted event. 



On individual event pages, think about how you want the layout to be, the button styles and colours. 



System page: The Student Voice & Digital Rep 

Think about how you want to style the Student Voice area on your website. This also features digital rep (if you use UnionCloud to manage feedback directly with your course reps). 

  1. Voice categories (the tabs)
  2. Search box
  3. Filters and filter refresh button
  4. Buttons in sidebar
  5. Thumb up and down buttons and counter
  6. More button and comments icon
  7. Petition icon and counter


Filter results and sidebar actions.

System page: Volunteering Module

The volunteering page has filtering on the right hand side and the opportunities displayed on the left in a grid. 

  1. Filter section search, buttons, checkboxes, arrows
  2. Results layout, font, highlight (ie. 'once a week'), More button
  3. In each opportunity:
    1. Content layout
    2. Hide/Show links
    3. Apply button



System page: User profile 

The profile page is where students see all details of every interaction with the website. It is also where nomiation occurs during elections. 

  1. Sidebar width, font, shadow, border
  2. Main content header, font style, padding, margin