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.

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.)

Specialist Exam - Right Panel, Golden Ratio

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.

We Hate Mondays

Illustrations