|
| 1 | +# Wireframe kit |
| 2 | +The PF Wireframe library for Sketch is the perfect companion to the PatternFly design kit. If you’re familiar with designing mockups with the PF design kit you'll be able to adjust quickly to designing wireframes with the PF Wireframe library. |
| 3 | +Ultimately, the PF Wireframe library will serve as a tool to speed up your ideation process and allow you to design and iterate designs more quickly before upgrading them to high fidelity. |
| 4 | + |
| 5 | +It includes: |
| 6 | +* A Wireframe library that allows you to design and iterate designs more quickly before upgrading them to high fidelity. Hosted on Sketch Cloud [here](https://www.sketch.com/s/97d92966-7ad7-4207-a381-48fda3c080f8). |
| 7 | +* A Wireframe template file that provides examples of low fidelity components in a context. Hosted on Sketch Cloud [here](https://www.sketch.com/s/0af9fc12-7b9e-49c1-8d36-a6a62385a413). |
| 8 | + |
| 9 | +## Low fidelity vs Medium fidelity |
| 10 | +If we take the PF design kit as a reference of a tool used to produce high fidelity artifacts, then the PF Wireframe library will provide resources to produce artifacts at two different lower fidelity levels: |
| 11 | + |
| 12 | +### Low fidelity (LO-FI) |
| 13 | +Used during the very early stages of the design process when only basic product requirements are available, this kind of wireframe allows you to try out layout options and aligning stakeholders on information architecture and design vision. They can also be utilized to help visualize user workflows. |
| 14 | +Specifications: |
| 15 | +* Skeleton-style components |
| 16 | +* Block font placeholder text |
| 17 | +* Eventually mix with mid-fidelity components if a specific focus is needed for the review |
| 18 | + |
| 19 | +<img src="../img/image1-wireframe.png" width="500"/> |
| 20 | + |
| 21 | +### Medium fidelity (MID-FI) |
| 22 | +These kinds of wireframes are the most common and are usually the starting point for most designers. At this stage of the process, product requirements are more mature and include not only information architecture but also user interactions and basic content. These wireframes serve the purpose of getting the closest to the final functional requirements without wasting time on unnecessary details. This is the space where designers would probably iterate the most, in order to get quick feedback on UI composition and content before moving on to the high fidelity mockups. Specifications: |
| 23 | +* Grey scale |
| 24 | +* Only most basic UI component states (eg. default, disabled) |
| 25 | +* Script style font |
| 26 | +* Highlighted call to actions |
| 27 | + |
| 28 | +<img src="../img/image6.png" width="500"/> |
| 29 | + |
| 30 | +## How to start |
| 31 | +### Download Wireframe font |
| 32 | +The PatternFly Wireframe kit uses [Flow](https://fonts.google.com/specimen/Flow+Circular) for LO-FI components and [Comic Neue](https://fonts.google.com/specimen/Comic+Neue#standard-styles) for MID-FI components. |
| 33 | + |
| 34 | +### Download the template file |
| 35 | +* Access the PatternFly Wireframe template file on Sketch cloud [here](https://www.sketch.com/s/0af9fc12-7b9e-49c1-8d36-a6a62385a413). |
| 36 | +* Click Download in the document menu to download the file locally |
| 37 | +* **OPTIONAL:** Open the PatternFly Wireframe template.sketch file. Then click File → Save as template. (This would allow you to create a new file from the “New from Template” menu) |
| 38 | + |
| 39 | +### Add the library |
| 40 | +* Access the PatternFly Wireframe - beta on Sketch cloud [here](https://www.sketch.com/s/97d92966-7ad7-4207-a381-48fda3c080f8). |
| 41 | +* Click Add Library in the document menu to add the library to Sketch. |
| 42 | +* You'll be prompted with a modal that will either redirect you to Sketch or ask you to Launch Sketch. |
| 43 | +Sketch will automatically open up the preferences window pane and display the library installation progress. |
| 44 | + |
| 45 | +## How to use |
| 46 | +### Use the library |
| 47 | +In order to speed up your process, we highly suggest to start creating your wireframes from the [Wireframe template file](https://www.sketch.com/s/0af9fc12-7b9e-49c1-8d36-a6a62385a413). You can then eventually customize your screens to fit your product requirements by using the individual symbols provided with the [Wireframe library](https://www.sketch.com/s/97d92966-7ad7-4207-a381-48fda3c080f8). |
| 48 | + |
| 49 | +### Navigating the symbol library |
| 50 | +* The architecture of the library menu has been implemented to be the most consistent with the menu of the current “hi-fi” PatternFly library and to make it the easiest to |
| 51 | + * Locate components |
| 52 | + * Swap components (for example, when turning a lo-fi screen into a mid-fi screen) |
| 53 | +* The menu follows the structure below |
| 54 | + * Component family |
| 55 | + * Fidelity (LO-FI/MID-FI) |
| 56 | + * Variants |
| 57 | + * State (MID-FI components only) |
| 58 | + |
| 59 | +<img src="../img/image20.png" width="700"/> |
| 60 | + |
| 61 | +### How to switch component fidelity or state |
| 62 | +The main idea behind the library is to offer designers a way to move along the different phases of the design process by prototyping from low to high fidelity using the same Sketch file. |
| 63 | +For this reason, we tried to make it as easy as possible to swap your components, so that for instance, you can: |
| 64 | +* Start with a lo-fi screen, for instance, to get buy-in from stakeholders on the layout and general design direction |
| 65 | +* Upgrade the lo-fi components to mid-fi, where you can start defining some basic interactions, states, and collaborate on microcopy - ideally, this is the level of fidelity where you will iterate the most |
| 66 | +* When stakeholders agree on the designs, upgrade them to the current “hi-fi” PatternFly Sketch library for handover to the engineering team. |
| 67 | + |
| 68 | +### LO-FI to MID-FI |
| 69 | +* Select the component you want to swap |
| 70 | +* Click on the “SYMBOL” dropdown menu located in the right-hand sidebar |
| 71 | +<br /> <img src="../img/image7.png" width="600"/> |
| 72 | +* Hover your cursor over “PatternFly Wireframe - beta” to display the library menu |
| 73 | +<br /> <img src="../img/image9.png" width="600"/> |
| 74 | +* Follow the ticks to identify the component family |
| 75 | +<br /> <img src="../img/image16.png" width="500"/> |
| 76 | +* Select the **MID-FI** version of the component |
| 77 | + |
| 78 | +### MID-FI component state |
| 79 | +* Select the component you want to swap |
| 80 | +* Click on the “SYMBOL” dropdown menu located in the right-hand sidebar |
| 81 | +<br /> <img src="../img/image10.png" width="600"/> |
| 82 | +* If available, select a different state for the component (if the state you are looking for is not available and you feel like it is needed, please report it to us!) |
| 83 | + |
| 84 | +### MID-FI to HI-FI (current PF Sketch library) |
| 85 | +* Select the component you want to swap |
| 86 | +* Click on the “SYMBOL” dropdown menu located in the right-hand sidebar |
| 87 | +* Hover your cursor over “PatternFly” to display the library menu |
| 88 | +<br /> <img src="../img/image19.png" width="400"/> |
| 89 | +* Follow the similar grouping pattern to identify the component family |
| 90 | +<br /> <img src="../img/image13.png" width="400"/> |
| 91 | +* Identify the component you want to upgrade to **HI-FI** |
| 92 | +* Identify and select the component state, if any is available |
| 93 | + |
| 94 | +### Text styles & color variables |
| 95 | +To make the wireframe creation process as quick and seamless as possible, we assigned all component colors and text to variables. |
| 96 | +If you need to create any custom symbols and/or content, you can use the provided styles to have a consistent look and feel. |
| 97 | + |
| 98 | +**Text styles** |
| 99 | +* LO-FI |
| 100 | + * **Flow (Circular) 16** - use these text styles for regular content |
| 101 | + * Dark grey variant - labels, highlights… |
| 102 | + * Light grey variant - body text |
| 103 | + * **Flow (Circular) 24** - use this text style for headings |
| 104 | + |
| 105 | +* MID-FI |
| 106 | + * **Liberation Mono (Regular) 16** - use this text style for everything code related |
| 107 | + * **Comic Neue** - use these text styles for any text content. Please follow each text style name for an indication of when to use it. |
| 108 | + * **Comment** - use these text styles to add any comments for your stakeholders to the designs |
| 109 | + |
| 110 | +**Color variables** |
| 111 | +* Preferably use the provided color variables when assigning colors to custom shapes. |
| 112 | +<img src="../img/image23.png" width="400"/> |
| 113 | + |
| 114 | +## Report issues |
| 115 | +Are you finding any bugs while using the library (eg. symbol not resizing correctly)? Or did you maybe encounter any usability issues (eg. can’t switch fidelity, overrides not working)? Or maybe you would like a new component or design pattern to be added to the library and/or template file? |
| 116 | +Please do the following: |
| 117 | +* Go to Issues · [patternfly/patternfly-design-kit](https://github.com/patternfly/patternfly-design-kit) · GitHub |
| 118 | +* Open/create a new issue |
| 119 | +* Make sure to ping @cntlsn (Alessandro Contini) in the description of the issue |
| 120 | + |
| 121 | +## Share your feedback |
| 122 | +Do you have any feedback about your experience creating wireframes with the PF Wireframe library? For example: |
| 123 | +* Do you create wireframes at both fidelities? If not, which one do you default to the most? |
| 124 | +* When designing wireframes, do you prefer to have ready-made “complex” components with fewer customization options, or would you rather have simple components to manually assemble into complex ones? |
| 125 | +* Do wireframes work better for stakeholder review, and do stakeholders realize it’s a low-fidelity version of mockups? Do stakeholders feel more comfortable sharing feedback? |
| 126 | +If you want to share similar feedback please submit the following [survey](https://forms.gle/dEFxamLHFRxBvZRN8) – It shouldn’t take more than 10-15 minutes to complete the survey. |
| 127 | + |
| 128 | +## Contribute |
| 129 | +Do you also think this project is great and has the potential to change the course of our species?!? Or are you maybe feeling impatient about adding a new component (for instance the one you need right now in order to move forward with your wireframe) to the library?? Great! Join our group of lovely and fun UXDers on the #pf-wireframe-sketch-lib channel of the RHUX Slack space. Or reach out to Alessandro Contini [acontini@redhat ](mailto:[email protected]). |
0 commit comments