Curatech
System Design
Introduction
Cura design system follows rules that establish the entire design environment. Every layout, component, and specification is inheriting from the Golden ratio principle.
Golden Ratio Breakdown
Golden Ratio Breakdown
We defined our base typography unit on the modular. We wanted a pleasing proportion between our running text font size leading and corresponding line-height. We took our modular (56x56) and divided it into thirds. We obtained a leading of 38 px. Within that, our running text size at 36 px.
Base Spacers Breakdown
The Base Spacer to move horizontally is 56px and multiple or fraction of it. All the spacings are based on the Base Spacer.
Baseline Deconstruction
The Baseline is based on the Base Spacer of 56px. The Baseline is divided by thirds to create a 2/3 - 1/3 grid.
Font Scale Breakdown
The font scale is calculate based on the leading of 56 px.
Color Palette
Every color used across Cura’s platform have a purpose and follow the following criteria.
Modern, Organic, Elegant, Approachable, Scalable
The usage of the Application Palette is to display the clickable areas and the different states of feedbacks.
The usage of the Greyscale is for the neutral/Inactive Interface components and the Running texts.
Modern, Organic, Elegant, Approachable, Scalable
The usage of the Application Palette is to display the clickable areas and the different states of feedbacks.
The usage of the Greyscale is for the neutral/Inactive Interface components and the Running texts.
Usable Content Areas
Cura layouts ease consistency across platforms, environments, and screen sizes by using uniform elements and spacing. The interface uses intuitive and predictable layouts, with consistent UI components and spatial organization. Layouts should use a consistent grid, content’s emphasis, and provide negative spaces to punctuate the interface and provide breathing room for thoughts. Cura’s application is supported on various devices with different resolutions (e.g., Ipad 12.9 inch, 11inch, 9.7inch). Even with multiple resolutions, the Usable Content Area carries the same ratio and proportions to keep consistency.
Content Area Basis/Support
The Full-Screen space depends of the support used to display the applications. It will follow the resolution of the hardware used.
Right Panel - Golden Ratio
The Right Panel Ratio follows the Golden Ration division. Here, the division was made on a 12.9 inch Ipad Pro.Questionnaire
The Questionnaire layout contains an expandable left navigation panel. The content in the feedback area readjusts depending on the left navigation panel status. I’ts the same behavior when the right panel is open.
Authentication - 5 Columns
The authentication layout is divided into five columns vertically with a band on top; expended across the width of the screen. This screen displays cards for doctors to log in. The height of the cards varies depending on the content.
4 Columns
The four columns layout is used for the Dashboard screen and the Queue. The Status bar is bigger to receive information and actions like a “Back”, “Logout” and “Search” buttons.
Impression & Treatment
The Impressions and Treatment layout have four different areas. On the left, there is the left navigation panel, which allowed us to navigate through the different sections. Across all the sections, we apply the same main layout.The main part is divided into three parts. The top band is used to display the patient's name and the Impression and Treatment's global actions. The Feedback and editing parts follow the golden ratio principle to divide the rest of the space.
Current Medications - Timeline
Current medications Timeline is horizontally divided into two main parts. The top part is meant to display Labs across time and Latest. In the bottom portion, we present the details of the medications. The left part of the screen shows the Timeline, which we can navigate through time. On the right part, we can visualize details of the latest labs and medications.
Graph - Full Screen
The full-screen graph screen, as its name implies, displays two areas. One with the graph and the rest of the screen used to add actions regarding the screen (closing action, navigations through different charts.)
Interface Components
Each element follows the color palette to create an order of actions in each panel. System icons symbolize navigational elements, common actions, and conditions definers to body parts. With content dense with textual content, visual representations must simplify and bring a more organic aspect to the interface.
Iconography
Every icon is as simple as detailed to recognize organs or medical-related items/procedures easily. The set of icons expand extensively to match the requirements of each medical specialty.
Body Diagrams
The body diagrams are a collection of illustrations to represent every part of the human body (full body, part of body detailed, organs, dermatomes, peripheral nervous system, etc...) They are used to help the user identify and locate any conditions and body parts more naturally. We integrated them into the flow to bring a sense of reality by representing the patient that the doctor has in front of him and simplify the interaction between them.
