Today: Learning about the 8 point grid system and components in Figma.
Thoughts: I am now exactly half way through the 100 days challenge.
Key concepts:
- Good to have a minimum of 16 points between elements and the sides.
- Minimum of 8 points between elements.
- Every element's dimensions should be divisible by 8 points.
- In Figma you turn on a layout grid for every frame.
- Rulers are enabled by
⇧ r - You can create components from frames.
- Each copy of a component is called an instance.
- Changes to the component affect all instances.
- Instances can have customisation applied that only affect that instance. Known as overrides.
- You can reset an instance (thus removing the overides).
- Components can be located from the Assets tab.
Links:
Today: Continuing with UI Design for Developers course.
Thoughts: n/a
Key concepts:
- Drop shadows help to make certain elements feel more important on the screen.
- Good values for a Drop shadow is to have the Y be 50% of the Blur value. Using Black and opacity between 10% - 25% is also good.
- iOS uses quite a bit of background blurring. In Figma using a background fill of white with 50% opacity and a background blur of 40 gives a similar result.
⌘ ⇧ vto paste over selection (i.e. at relative 0,0 of the selected items)- I am learning about "containers" in Figma. A lot of repition of doing "Group" and then "Auto Layout".
Links:
n/a
Today: Worked through videos 14 - 17 of UI Design for Developers.
Thoughts: n/a
Key concepts:
- You can change the colour of each character in text.
- The popular size for icons at the moment is 24 x 24 points. iOS seems to be 28 x 28 but Android is 24 x 24.
- Press enter to enter into vector editing mode.
- You can flatten unions, vectors etc. so that transforms like scale can work. You can also Outline Stroke.
- Figma has a Vector network that is unique to Figma and allows for powerful vector editing.
Links:
Today: Finished the UI Design for Developers course with a certificate!
Thoughts: Oh yeah!
Key concepts:
n/a
Links:
n/a
Today: Started with the iOS Design Handbook course.
Thoughts: n/a
Key concepts:
- You can decrease visual hierarchy by assigning the Primary colour and then adjusting the HSB (Hue Saturation Brightness) to have saturation of between 3 - 5 and brightness of between 90 - 100. For example imagine you have 2 buttons, 1 is assigned the Primary colour and the other button is less important.
- Typography - Baseline is the line on which the characters rest upon (does not include the tails of characters like g,p,q etc.)
- X-height the distance/space from the baseline to the "average" character height not including the ascender.
- Descender is the space from the baseline to the bottom of these "tails" i.e. space down to the bottom of the g or p.
- Ascender is the space from the x-height to the top most portions, i.e. the dot from an i etc.
- Kerning determines how two characters should be positioned next to each other.
- Line height should be between 120 - 145% of the font size.
- Lines should not be more than 45 - 90 characters. Depends on device screen size.
Links:
Today: Worked through episodes 8 to 11 of iOS Design Handbook
Thoughts: n/a
Key concepts:
n/a
Links:
Today: Worked through episodes 12 to 14 of iOS Design Handbook
Thoughts: Week 8 complete :-D
Key concepts:
n/a
Links: