> For the complete documentation index, see [llms.txt](https://justin-se.gitbook.io/justin-se-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://justin-se.gitbook.io/justin-se-docs/front-end-development/user-experiance-design/create-hifi-prototype.md).

# Create High Fidelity Prototype

lo-fi, hi-fi, typography\
![Hifi.png](https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2Fgit-blob-125d018dbbeefb8862fee491f967c423bd4b2a93%2FHifi.png?alt=media)

## Visual design principles to mockups

* **Typography**\
  Type class

  * Serif - no edge extend
  * Sans Serif - with edge extend

  Type Face

  * style of font

  Font

  * size
  * thickness
  * emphasis of letters
* **Color**

  60-30-10 rule

  * 60% Neutral, like white, grey, used on background.
  * 30% Complementary, primary colour as main theme.
  * 10% Accent, high contrast colour for catching the attention.

  this rule is not strict, but it is good on most case.

  colour will effected by display and environment lightning, we should try it on different devices display, desktop, phone, and different lightning condition like warm and cold light.\
  Accessibility

  * consider color blind![colorBlind.png](https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2Fgit-blob-14ba401c81982ad297e65db5241b0760a3a509e9%2FcolorBlind.png?alt=media)
  * consider contrast![constrast.png](https://2508767388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRookNjwubMJWQgqxL6Q%2Fuploads%2Fgit-blob-08290d64924e8764b8b8fd84a027816a9f554211%2Fcontrast.png?alt=media)[WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/)
  * Iconography
    * use icon that can represent something for most people
    * add text for icon to enhance accessibility (screen reader)
  * Inputs

    **Use visual cues.** Most inputs are open-ended, which means users can type anything into the field. But they also require specific information from users, like a phone number or an email address. To help your users enter the right information (and avoid error messages), give them visual cues.

    ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/28e18ef8-b411-4398-a41d-e1e89ca17c18/image.png)
  * White space

    spacing can use as divider

    ![Screenshot 2024-12-30 at 1.46.18 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/09d0d417-7610-4458-b4f1-ab427ab193ce/Screenshot_2024-12-30_at_1.46.18_PM.png)

    or group elements

    ![Screenshot 2024-12-30 at 1.43.02 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/d8d1463c-827f-480c-aed5-986269d063eb/Screenshot_2024-12-30_at_1.43.02_PM.png)

    all category mixed in sense of visual.

    ![Screenshot 2024-12-30 at 1.42.29 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/71e72c68-e5b1-4b41-b376-d6164c2d2302/Screenshot_2024-12-30_at_1.42.29_PM.png)

    the space in middle tell there is different category.

    spacing also navigate the attention, with wider spacing, element will easier to focus on. for example while looking a logo in newspaper, reader will most likely distracted, but logo on blank background, there is no other things can distract reader.
  * Emphasis (强调)

    Emphasis mean to make an element draw attention, it should based on user flow and user target.

    to make Emphasis, by adjusting :

    * Size
    * Contrast
    * Texture
    * Animation

    Example :

    ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/f96dfbbf-7e50-485a-b436-f4c947226b13/image.png)

    under google about tab, highlighted text tell message “organize useful information, universally accessible”, which is the key point of google search engine.
  * Hierarchy (层次)

    highlight element by importance.

    ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/97ebbb46-81ee-47fa-b1e8-0ad1d7930d46/image.png)
  * Size & Proportions (尺寸与比例)

    keep consistence proportion on similar element.
  * Unity and variety (统一性与多样性)

    ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/b7fd4e35-4a69-482f-a4c3-95cb5dc5617e/image.png)

    **Unity** - united & consistent design.

    **Variety** - stand out & gain attention in united & consistent design.

    what made Unity Design :

    * shape
    * alignment
    * Continuity text design
  * Review the design
    * Detail view
      * check variables are consistent
    * Page level view
      * check elements is visual balanced and unified
    * Function level view
      * check each page include navigation & main action.
    * App Level View
      * the design following user flow, doing what we expected.
      * fixed element are consistent across pages
  *
* **Design Systems**

  * Design system is a set of guideline to keep the look consistent, including typography, color theme, element styles and more.

  **UI Kits / Sticker Sheet**

  A sheet that show all basic elements of design system, it tell the styles of components directly for designer and developer.

  It can be a extended customization sheet based on existing design system.

  ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/12a04418-eb37-4786-8152-4bbdff79b434/1e23b149-3bea-48b0-9dc0-719c92081cde/image.png)

  **Public Design System:**

  * [Material Design](https://material.io/resources)
  * [Fluent](https://www.microsoft.com/design/fluent/)
  * [Ant Design](https://ant.design/)
  * [Polaris](https://polaris.shopify.com/)
  * [Apple Human Interface Guidelines](https://developer.apple.com/design/)

  Figma Design System Guide

  * [Figma Tutorial 1](https://www.youtube.com/watch?v=EK-pHkc5EL4\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV)
  * [Figma Tutorial 2](https://www.youtube.com/watch?v=9xUXTFzDDCo\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=2)
  * [Figma Tutorial 3](https://www.youtube.com/watch?v=XCsVDvvlz4E\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=3)
  * [Figma Tutorial 4](https://www.youtube.com/watch?v=UtXKFaLAbXM\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=4)
  * [Figma Tutorial 5](https://www.youtube.com/watch?v=Yp_qfB1FA0Y\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=5)
* **Testing and iterating on designs**