Contriboard design guidelines.

Table of Contents

• Logo
• App Icon
• Colors
• Fonts
• Icons
• Login and Register

Old stuff:

• Sidebar
• Toolbar
• Workspace
• Board

First and second logo-image shows how to maintain a minimum clear space around the logo. Use icons sideline to measure space.

"Contriboard"-font: Lobster Regular

Icon next to product name is separated from each other into the app icon. Icon itself simply captures the essence of the Contriboard.

Icon is designed with 90 percent corners. iOS automatically applies a mask that rounds the corners when icon is displayed on the screen of the device.

1. #724A7F
2. #DCC75B
3. #EB584A
4. #4F819A
5. #5A3866
6. #221A26
7. #190C21
8. #FFFFFF
9. #72BDBB
10. #B2B2B2
11. #EDEDED
12. #619B98
13. #656565
14. #9B3934

Fontsquirrel: Lato

Lato regular, dark texts #221a26, light texts 8. #FFFFFF

Font making appearance at the logo is Lobster Regular. Font has a long body with a hint of muscularity and grooviness! Just perfect!

Fontsquirrel: Lobster

Contriboard is using Font Awesome that supplies scalable vector icons which can be customized easily.

Font Awesome

background #221A26

buttons: font and icon color 8. #FFFFFF,font Lato (regular), background when hover and pushed #72bdbb, Log out icon fa-sign-out, font can be almost same height as the icon beside it.

Collapsing sidebar

Button to hide the sidebar when user needs more space with the tickets on the board.

• Functionality: Slides on and off

button: icon fa-chevron-left/fa-chevron-right, color 8. #FFFFFF, background color 9. #72BDBB, hover and pushed background 12. #619B98

There is little roundness in the left sides of the button. From the right side button is joined in to the sidebar.

When the sidebar is on its minimum width, user can see only the icons. The logo on the top has lost its name (only icon shown as well).

Sidebar is on its full width and there is a button to make sidebar on its minimum width

Sidebar on its minimum width

Future design and development (Sidebar)

Profile picture/ avatar

Users picture to sidebar.

UserVoice-button/ Feedback channel

More coming soon...

Navigation between boards

There could be navigation between boards (raw design shown under header "Board").

background #ededed line/border #b2b2b2

Workspace view: Includes workspace name where the user is (it could include a number of boards there is as well), "Add board"-button and hidden tools (edit board, delete board) which come visible when making selection.

Board view: Includes board name where the user is (it could include info about if the board is private or public as well), "Add ticket"-button, "Snap to grid"-button and hidden tools (edit ticket, delete ticket) which come visible when making selection.

Picture of a boards toolbar. Board is called Testboard and it is private (only visible to user who made the board). "Snap to grid" is on. Edit and delete buttons are visible which means that there is at least one ticket selected on the board.

Picture of a view that opens after registering or signing in. Workspace is empty.

Get started -introduction

After registration user could need guidance how Contriboard works.

Creating board

By pushing "Add board"-button.

Add board-button

Example button

border color #619b98, border-bottom 2px, border-top 0px, border-left 0px, border-right 2px, border-radius 5px, background #72bdbb, hover: background #619b98

font Lato (regular), font-color #ffffff, icon: fa-plus

Picture of creating new board.

Board added

background #ededed (changes when selected #72bdbb), box #ffffff,box border: #b2b2b2, drop shadow Y offset 1px, X offset 1px, blur 1px black 20%,

Private-background #656565, Public-background #221a26

fonts Lato, dark texts #221a26, light texts 8. #FFFFFF

Private and public boards, public is selected.

Pictures lack of small image of a boards tickets, there should be a "miniature" of a board at the white space.

Selecting board

Workspace including multiple boards, board called "Things to remember" is selected.

Selected board has turquoise color background #72bdbb.

Select -button

icon: fa-check-circle #ffffff, background #b2b2b2, hover: background #72bdbb

Delete board

Delete board by selecting board and pushing trash-icon (see picture under header "Selecting board").

Icon

background #b2b2b2, hover: background #72bdbb

Delete icon: fa-trash-o

Edit board

Edit board by selecting board and pushing edit-icon (see picture under header "Selecting board").

Icon

background #b2b2b2, hover: background #72bdbb

Edit icon: fa-edit

Edit board -view

Picture of edit board-view.

Changes can be saved by pushing save changes -button.

People can be hidden by pushing chevron-icon on the right side of the header "People on this board" if pictures take too much space.

By pushing pictures, "more info"-box pops out.

Edit board -view can be closed in three ways; by pushing cancel/save changes, x-button on the right top corner or pushing outside the view. If the "user info"-view is open and user pushes outside the "edit board"-view, the "user info"-view closes first, pushing second time outside the view, the "edit board"-view closes.

Adding users or inviting people to board

Feature can be found inside editing board.

Picture showing how adding people on board works.

People can be invited on the board by writing emails addresses and pushing invite-button.

Future design and development (user control, adding groups)

• Add people and groups to the board and see who have the access to the board.

Future design idea about adding groups.

Picture of an empty board called Testboard.

Sizes

Ticket

Adding ticket

Picture of a Testboard after creating a first ticket. Ticket is selected.

Snap to grid is on in the picture. Grey areas next to new added ticket are just there to show how close the tickets should be to each other. There should be a small space between the tickets.

Selected ticket has a border color 9. #72BDBB.

Moving ticket

When snap to grid is on: When the user is moving a ticket there should be a grey area (same size as the ticket) #ededed that shows where the ticket is snapping next.

User can move the ticket even when the ticket is not selected.

Editing ticket

There are four different color tickets.

Colors(see the colors under header "All colors") are:

1. #724A7F
2. #DCC75B
3. #EB584A
4. #4F819A

Picture of editing ticket. User can change color, title and description and also delete ticket.

Picture of adding a description.

Picture of delete ticket.

Cancel-button color 10. #B2B2B2, hover 13. #656565 Delete-button color 3. #EB584A, hover #9B3934(new color)

Future design and development (tickets)

• Changing tickets colors to different colors

Raw design how changing colors could be done.

• Giving names to colors

Workflows

Workflows are boards background images. "Workflow templates"-view opens when pushing the icon next to snap to grid icon.

Workflow templates icon, fa-picture-o Heart icon, fa-heart

In the picture the plain template is selected. After pushing one of the other templates, the picture goes to the background.

After pushing the fifth workflow template, more info pops out. More info-box works the same way than the "user info"-box. Button in a box should take the user to user voice-pop up where the user could write improvement ideas etc.

See the workflow feature also.

Workflow templates

Picture of a Scrum-template.

Improvements

• add board and add ticket buttons could be at the right corner of the toolbar on top

• landing page (more than just a login/sign in)

• get started-tutorial

• Users own flows (new tools)

Ideas

• plus and minus zoom (and small view to show where the user is on the board)

• zoom spot tool (user can add spots to zoom)