We've attached a screenshot of each screen and a brief with all the icons currently used and their function. Mostly we are looking for cunning designed icons, with a few backgrounds, and table cell stylings.
ALL views will need to work in both landscape and portrait views
Most if not all the buttons will need three states, Active, Selected and inactive. How this is achieved is up to the designer.
we will need all graphics to be in resolutions for both retina display display ipads and non-retina display ipads.
we will also need the icons available in several sizes for later use with our documentation.
1) Project Selection screen
- this is the start screen for the app
- You have free reign to design something nice - the only options we want are buttons for "New Case" and "Select Case" - these can be icons if you want. The text entry field will only be shown when New Case is selected. Please find a nice background image - we want something sleek and professional.
- a suggested background image could use an expert from the dictionary describing what an advocate is.
2) Mind Map screen
- Background of screen. At least 6 different background textures are needed. The background is configurable. Eg: Parchment, graph paper etc.
- Edit icons on the left hand side. They are need in 3 states: normal selected and disabled. The selection state will flash when they are pushed.
- Menu button on the top bar
need 3 states: active, selected, inactive
- Design of the nodes (selected and unselected). We allow users to change the colour, border, text colour, so the nodes themselves cannot have a textured background. nodes will stretch vertically when filled with more lines of text
- Design of a Node selector icon
3) PDF View/edit Screen
icons for the left hand edit menu
- Pencil tool (for scrawling free hand)
- Bookmark (for bookmarking page)
- Underline (for underlining text)
- Block highlight colour 1 (yellow)
- Block highlight colour 2 (green)
- free hand highlighter (yellow) the free hand highlighter will not - highlight lines of text, it will draw across the page in free hand
- text (for typing text on page)
- Page Number (a field for jumping to a specific page)
(three states, active, inactive, selected)
Menu buttons across the top
- search (button, not a field)
- attach (paper clip)
- nav drop down which includes 4 buttons which are:
(next annotation, previous annotation, forward and back)
- advanced editing options
- add exhibit entry
- email this document
- sync changes to cloud
an annotation is a underlined piece of text, or a highlighted piece of text or a scribble etc.
Forward and back and means of stepping through the navigation history of the documents
Right hand slide out pane
-button tab to cause pane to slide out button. this tab will be part of the slide out nav and will stay attached to the nav as it slides out
- Layout of the search bar and the annotations bar.
- buttons will use words, and they are outline, Bookmarks and Annotations
- A border is needed for the left hand side of the pane
- the close button at the button can also be styled
- slide out pane will not cover teh navigation controls at the bottom of the page
Exhibit entry form. (needs styling)
- clicking the exhibit entry button in the top menu will bring up the Exhibit entry form.
- Exhibit reference (this is a short text code eg: "EX34"
- the name of the document (this is not an editable field)
- page number eg: 33
- number of pages eg: 4
- Tendering party : eg Fred, this becomes a drop down as more entries are made
- comments (text field)
- Date (date this exhibit was tendered)
two buttons: Add Exhibit, and cancel.
Note: there needs to be enough room for the keyboard to come up from the bottom of the screen
4) Files Screen
menu icons for the left hand side:
- Cancel Sync
- Add Favorite (star)
- Remove from favourite (star with cancel slash))
- Attach File to node (paper clip)
- start search button (toggles between start search and search in progress)
- design of search box including border and background
- show/hide search results icon (button causes search results pane to slide down and up)
Directory tree control box
- directory tree button (toggles between directory tree and flat file view)
- design of border and background of control box, including bread crumbs
- up one level button for directory navigation
Flat File Control box
- interchangeable with the directory tree box
- Flat file view button (toggles with the Directory Tree button)
- Favourites button (star) toggles with no favourites (inactive and active)
- Filter button (toggles with no filter active button) (active and inactive)
- design of border, and background of control
Search results pane
the search results pane has two tables. one is a table containing the documents being searched, and the other is the actual search results for the chosen document.
The document table cells contain the document name, and the status of the search in that document. has three possible icons:
- search complete, matches found
- search complete, no matches
- search still underway
The search result table cells contain an excerpt of text and the page number and a button that will take them to that page.
-the design of these table cells is completely up for creativity including background border etc.
5) Exhibits screen
Exhibits are a table of significant pages, that have been tagged for use during the trial.
the table cells need styling.
- requires button to go to page
- requires a button to edit exhibit details
- contains text for:
- exhibit number
- document name
- page from - to
the exhibit form also needs styling
- exhibit number
- name (select dropdown box)
- document name (not editable)
- page from
- number of pages
- Update, cancel, delete buttons
enough room needs to be left beneath the exhibit form for the keyboard. this will be challenging for the landscape view. the portrait view is pictured in the documents, but not how it behaves in landscape view.
The filter buttons on the top menu also need styling, but not the drop down menus that they trigger
Navigation Bar (common to all pages)
- the bottom navigation icons are common to all pages. the central top nav icon causes the row of 6 navigation icons to slide up and down.
- a suggested image for the nav icon is a compass (all suggestions are flexible)
the six navigation icons are:
- Case selection (start or home)
- Favorites (star)
- View/edit documents
- Mind map
- Files viewer
Exhibits are a table of significant pages, that have been tagged for use during the trial. A possible image could be the text "Ex" if nothing else comes to mind.
Favourites is actually a link to the files screen, with favourites filter applied
Advocate screen icon
- We need an icon to launch the app
We want you to focus primarily on icons and buttons, however if you can do anything to improve the layout we'd be very interested to see it!