UI DESIGN DOC Requirements - Responsive but favoring larger screens primarily - Smaller screens will be able to do everything but the layout is not the primary one - Service techs have an ipad or notebook - Anticipate a list of things each role needs immediately in front of them and try for that - componentized UI elements so can re-use and mix and even support customizing with user defined layout - So for example a customer list is a self contained subset of a list widget and can be plunked down anywhere required - This will save me time so identify the "types" of ui elements (picklist, filterable data list, entry form etc) - Then can build specific versions of the types identified like a client list is a specialized filterable data list etc. - If a list then it also knows which element is selected or a list of selected elements so other widgets can operate on it - A menu or command widget that can be inserted into another widget, i.e. a part picker for a workorder part list widget or elsewhere a part is required - This way I'm only making a few UI objects, not a new one for every single element. - Kind of making the pallet first of all required objects then I can "paint" with them on to the UI without getting bogged down in minute details every time I make a form - UI elements should be responsive and generic enough to work for many different use cases - they should be rights aware and mode aware (editable, read only) enough to handle all that without recoding again and again - the page or shell or whatever that holds the widgets should be end user customizable from a widget pallet. - The more self contained the widget the more useful - Most people seem to prefer WBI over RI and the reason always seems to be RI is too simple or requires too many clicks - So plan on the bigger screen layout being the main UI and smaller screen secondary - I want things to be simpler and cleaner than it seems many people do so beware of that tendency - People don't want to have to open sub screens any more than absolutely necessary - Make sure a screen contains as much as possible to complete it on one screen - Clean interface with good negative space but not dumbed down too much - Pro-marketing style, stuff that makes it easier to sell - emphasize simple fonts with good contrast - Blue is a good colour, no purple or pastels - DAshboard / customizable UI - Ideally people can see as much detail as they want or remove unused ui widget elements - So, for example on the dashboard they can customize by plunking down a client list widget, adding a "My workorders" widget for a tech - or for a Ops person they can plunk down on their dashboard a current server status widget or active jobs widget etc Graphics and themes for AyaNova - No bitmap graphics, vector only!! - For the manual and docs will use material theme with MKDOCS generator. ICON FONT - Going with Font Awesome 5.x SOLID FREE icons =-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- - I'll choose the replacement fonts as I need them from the FontAwesome5 collection and document them here. - https://fontawesome.com/icons?d=gallery&s=regular,solid&m=free - v7: - v7 icons, all orangey brown in color with bits of highlight in each one of other colors. 3d in general - Service Workorder (wrench and screwdriver) - Workorder items (single wrench alone no screwdriver) - Scheduled users (torso in front of calendar) - Parts (3d cube) - Labor (hammer) - Travel (truck looks like loomis courier truck) - Loans (plug from electrical cord for no apparent reason) - Expenses (riffle of US dollar bills) - Service templates (looks like rubber stamp) - Quote (pen and paper) - all subitems same as for service workorder - PM (alarm clock and paper) - all subitems same as for service workorder - Schedule (looks like the schedule calendar screen but tiny and a bit cluttered) - Inventory (3 shapes, pyramid, ball, cube in 3d effect) - Parts (cube) - PO items and PO receipts (both are kind of just documents, PO receipt is same but with a corner to corner orangey stripe across it that is indechipherable) - Part requests (document like a po with a wrnch and hammer Service icon in front of it weirdly when it should be a cube I think) - Clients (house icon with door and front mat) - Headoffices (larger building, low rise apartment or office tower) - Contracts (two hands shaking) - Projects (some kind of closed book that looks like a dayplanner with colored tabs sticking out) - Dashboard (speedometer / analog meter black dial, silver surround and lettering like from an old time auto dashboard) - Units (cog which I don't like) - Unit models (some kind of mechanical looking pentagram with a circular thing in the center, weird) - Loan items (power plug for no apparent reason) - Vendors (shopping basket handheld kind) - Current user pane (hard hatted torso person) - Memos (inbox looking thing) - Notification subscriptions (loudhorn but not 3d, flat side view instead, looks more like a hatchet, man these old icons are fucked and confusing) - Notification deliveries (loudhorn but smaller and on top of a sheet of paper) - Wiki page (atomic diagram looking thing) - Search (magnifying glass) - Administration (torso with suit and set of keys superimposed) - Global settings (planet right on the nose) - Regions (pie chart with wedge extracted slightly) - Security groups (keys) - Users (hard hatted torso but front on and flat) - Custom field ("Abc", probably the font chooser icon in most apps) - Localized text design (address card) - Notification deliveries (bull horn / hatchet and sheet of paper) - Report templates (sheet of paper and small rubber stamp) - Files in database (filing cabinet) - Schedule markers (post it note with pin and folded up lower right corner) - WIKI (atomic nucleus diagram / weird flower) - GENERAL UI - Delete (red circle with white X through it) - OK / ACCEPT (Green circle with white checkmark through it) - Cancel (orange circle with white "forbidden" bar across it diagonally from top right to lower left) - Save (3.5'' diskette!?) - Document attachments (two hardcover books back to back on an angle in 3d) - Record history (analog clock face) - Follow up (schedule marker post-it note with a chain link overtop of it) - Print / report (inkjet printer) - Duplicate (rabbit) - Plugin (puzzle piece) - Attach file [wiki] (file folder) - Edit [wiki] (pencil) - Reply [memo] (inbox used for memo with left facing green arrow superimposed) - Forward [memo] (inbox used for memo with right facing green arrow superimposed) - Recent [MRU on main menu] (binoculars) LOGO - Need to standardize on a logo and stick to it from now on - Simple and clean (script AyaNova used for RI is maybe out) - Single colour canucks blue with green contrast if absolutely necessary (don't make it necessary) COLOURS - Canucks colours of course, Blue primary and green secondary. RI already uses them, get the hex codes there. - No indigo or pastels =-=-=-=-=- Ref material kept for new icons possibly: