Skip to content

Commit 041ebeb

Browse files
authored
initial commit of new design guide (#74)
* initial commit of new design guide * updating language surrounding widget types in toolbars. * added language about redundant interface controls * Update principles.md
1 parent a40bfca commit 041ebeb

20 files changed

+1019
-416
lines changed

designguide/design-guide.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
![](https://wiki.freecad.org/images/0/06/Freecad.svg)
2+
3+
# Design Guide
4+
5+
**This Design Guide is organized into the following sections**
6+
7+
- [History and Purpose](history-and-purpose.md)
8+
9+
- [Glossary of Terms](glossary.md)
10+
11+
- [Principles](principles.md)
12+
13+
- [Zones](zones.md)
14+
15+
- [Primary Elements](elements.md)
16+
17+
- Interactive Controls
18+
19+
- [Naming Convention](naming.md)
20+
21+
- Colors and Accessibility (Still under development)
22+
23+
- Theme/Styling (Still under development)
24+
25+
- Icons/Art (Still under development)
26+
27+
####
28+
29+
*The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in [RFC 2119](https://www.rfc-editor.org/rfc/rfc2119.txt).*
30+
31+
####
32+
33+
## How to use this guide:
34+
35+
This guide is organized into multiple documents as outlined above, for the purpose of aiding developers in finding relevant content without excess information. Newcomers to FreeCAD, and this Design Guide, should familiarize themselves with the principles and assumptions which were used as the foundation on which these guidelines were built before progressing to more targeted content. The rest of the sections are organized in a manner of logical hierarchy of concepts and guidlines starting with more conceptual matter and moving on towards greater levels of detail.
36+
37+
####
38+
39+
## Assumptions:
40+
41+
The interface is tailored around a 1920 x 1080 standard resolution.
42+
43+
According to the [*Steam monthly hardware survey*](https://store.steampowered.com/hwsurvey/Steam-Hardware-Software-Survey-Welcome-to-Steam), over 90% of all computer displays utilize 1920x1080 or higher resolution. The user interface for FreeCAD shall be optimized for this recommended resolution at 100% scaling. This shall be the "reference resolution" for the remainder of this design guide.
44+
45+
**Note:** For operating system specific elements Windows is considered the standard due to market share (70% in 2023). Every effort should be made to maintain a uniform appearance across platforms.
46+
47+
**Note:** Deviations from the prescriptive guidelines in this design document require justification utilizing sound reasoning and require a design review that such deviation(s) are both warranted and fit within the needs of the user without degrading the overall consistency of the user experience.
48+
49+
####
50+
51+
#

designguide/elements.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Primary Elements
2+
3+
- [Toolbars](#toolbars)
4+
5+
- [Dock Windows](#dock-windows)
6+
7+
- [Task Panels](#task-panels)
8+
9+
###
10+
11+
## Toolbars
12+
13+
Toolbar management in complex technical software such as CAD poses unique challenges as there are often hundreds of potential tools, functions, or features which may require ready access within the GUI. The [Pareto-Principle]((laws-of-ux.md#pareto-principle)) (80/20 rule) should be the basis for how toolbars are populated. The 80/20 rule states that 20% of the input results in 80% of the output. This would imply that 20% of a set of tools get 80% of the use. While this may not be a perfect correlating principle, it should help guide a critical thought process about which tools go onto a toolbar and also how they are organized.
14+
15+
####
16+
17+
**Toolbar Organization Guidelines:**
18+
19+
- Inverse functions (example: functionally similar additive and subtractive operations) should be combined into single tools wherever practicable. Switching between inverse modes should be done with a boolean control such as a toggle/checkbox within the related TaskPanel rather than resulting in separate tools. It minimizes space on toolbars and simplifies icon development.
20+
21+
- In accordance with the [Pareto Principle](laws-of-ux.md#pareto-principle.md), where a group of related functions consist of one which covers a majority of cases, a Menu Button should be formed to group those related functions into a single toolbar slot. The most common or likely to be used function should be presented as the default from that group on the toolbar.
22+
23+
- Toolbars should be broken into logical groupings, both visually(iconography), and functionally. Avoid use of many specialized toolbars in favor of more moderate sized toolbars. ie. one for basic functionality, and one for advanced. (80/20 rule helps here as well. Ideally there would be no more than 3 QToolBars in horizontal orientation or 2 toolbars in a vertical. Those are not hard requirements however.
24+
25+
###
26+
27+
**Toolbar Buttons:**
28+
29+
- Should consist of only QToolButton or QMenuButton widgets. Other widgets may be used in special circumstances. The developer must ensure that the introduced widget is visually consistent and does not stand out above other tools. Features adding custom widget to toolbars shall be reviewed by the design working group.
30+
31+
- Toolbars which toggle/indicate a funtional state can do so via change in icon (color or inclusion of an indicator)
32+
33+
- Deviations in prescribed widget types allocated to a tool bar must only be accepted after consensus is reached between applicable developers and a thorough review by the design team.
34+
35+
###
36+
37+
## Dock Windows
38+
39+
These are the dockable panels that typically reside docked to the left, right or bottom edges of the FreeCAD UI.
40+
41+
####
42+
43+
#### Task Panels:
44+
45+
These panels are a quintessential component of FreeCAD's interface. A task panel is the means by which a user interacts with the current task being performed. Ranging from controlling sketch elements, defining parameters for a feature such as a Chamfer or set up parameters for CNC machining. These critical components <u>*must*</u> be uniform in both layout and sizing. A default width, in accordance with the UI [zones and layout](zones.md) definitions is established at 360 pixels.
46+
47+
######
48+
49+
Here are general guidelines to be followed for a task panel:
50+
51+
- "Ok" and "Cancel" buttons *shall* be located at the top of each panel with a centered alignment. Alternative button configurations are inconsistent and not acceptable.
52+
53+
- Minimize the width of the panel as much as possible through good use of space, arrangement of widgets, and [naming](naming.md).
54+
55+
- Developers should use the approriate [interactive control](interactive.md) widgets to ensure a consistent experience throughout
56+
57+
- Task Panels can potentially include enormous amounts of information and advanced settings/controls. Utilizing FreeCAD's custom [QSInt](https://freecad.github.io/SourceDoc/d9/d11/namespaceQSint.html) widget class, which provides a 'rolling up' of portions of the panel, is encouraged. Follow the [80/20 rule](laws-of-ux.md#pareto-principle), and by default only expose the most commonly needed controls/data to avoid overwhelming users with information/settings when they are not needed. This allows the user to expand more advanced settings, controls or information when the need arises.
58+
59+
##
60+
61+
[Return to Design Guide Main Page](design-guide.md)

designguide/glossary.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Glossary of Terms:
2+
3+
- **Widget:** Widgets are the individual components for creating user interfaces in FreeCAD. Widgets can display data and status information, receive user input, and provide a container for other widgets that should be grouped together. FreeCAD uses the QtWidget toolkit.
4+
5+
- **Element:** A primary component of the FreeCAD User Interface consisting of a combination of widgets to support navigation and feature execution providing a means for user interaction.
6+
7+
- **Panel:** A window element which can be docked to the edge of the screen in a static position.
8+
9+
- **Main View / 3D View:** This is the main view area of the users screen where work is displayed and these two terms are largely interchangeable within FreeCAD.
10+
11+
- **Contrast:** Difference between colors. For accessibility, contrast refers strictly to the difference in tone. A difference of 40 in tone guarantees a [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) contrast ratio ≥ 3.0; a difference of 50 in tone guarantees a contrast ratio ≥ 4.5. FreeCAD makes extensive use of colors and high contrast ratios should be a developers goal.
12+
13+
- **Design guidelines:** Guidelines are descriptive written and illustrated docs that demonstrate usage and behavior mainly through examples. They're the long-form discussion of specs that help designers and developers with problem-solving and decision-making.
14+
15+
##
16+
17+
[Return to Design Guide Main Page](design-guide.md)

designguide/history-and-purpose.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## History and Purpose:
2+
3+
FreeCAD is a highly modular, complex piece of design software which has been developed for over [20 years](https://wiki.freecad.org/History) by volunteer contributors from across the globe. Due to the nature of this organic growth, individuals have injected their own ideas and implementations without following a uniform design language for how the application should present itself to users as well as flow through its many features. As a result user feedback regarding aesthetic and usability were generally poor, despite a robust set of features.
4+
5+
This *Design Guide* is intended to present developers/designers a series of concepts and guidelines through which they may expand, extend and improve FreeCAD through improved user interactions and general consistency of appearance, structure, and behavior. As such, this should be considered a living document which may change to meet the needs of developers, designers, and users. It can potentially also help those who write documentation use consistent terminology.
6+
7+
This guide is the product of a Design Working Group consisting of community members; ensuring decisions made regarding the User Interface and User Experience are consistent with the needs of people who actually use FreeCAD in both professional and hobbyist environments. This working group will also be involved with review of interface/experience related changes to FreeCAD to provide input to developers and maintainers regarding the merits and consistency of features which may impact interaction and/or workflows.
8+
9+
##
10+
11+
[Return to Design Guide Main Page](design-guide.md)

designguide/images/focus.svg

Lines changed: 121 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)