Home

Tools:

Figma:
1. released on September 27, 2016.
2. It's 100% web-based and the offline version is also available for MAC and Windows.
3. Free version ✅
Adobe Experience Design:
1. Adobe XD was Released just months before Figma on March 14, 2016
2. XD offers a similar experience to design and prototyping when compared with Figma.
3. A key difference in XD is that you can’t use it in the browser, you have to download a piece of software that works on Mac and Windows.
4. Free version ✅
Sketch:
1. Sketch was released way before Adobe XD and Figma, back on September 7, 2010.
2. Most UI/UX designers switched from using Adobe Photoshop for UI design to Sketch back then.
3. One major drawback of Sketch is that it will only work on Mac.
4. It’s not available for Windows users. Another drawback is that after a 30-days trial of the app, you will have to pay a one-time payment of $99.

Empty Areas in a User Interface. NEGATIVE Space
Should be applied based on four factors:
1. Space Availability:
2. Number of Components
3. Alignments
4. Consistency

Helps separate elements from each other by adjusting color, brightness and/or opacity
should be applied based on two factors:
1. Is it type? If so, is it text they need to read?
2. If it’s not typed, is it an important visual element?
Type based contrast should be applied given the following:
1. How large is the type?
2. Should it be readable?
3. Does it adhere to the WCAG Contrast Guidelines?
  1. Web Content Accessibility Guidelines
    - Small Text (AA) should have a 5.1:1 ratio
    - Small Text (AAA) should have a 7:1 ratio
    - Large Text (AA) should have a 3:1 ratio
    - Large Text (AAA) should have 4.5:1 ratio

Consider the following:
1. Should it be readable?
2. How much space is available?
Scale and Type:
1. Paragraph Tag should be no smaller than 16px
2. Adjust type scale to reinforce visual hierarchy