Designing x WEB

1. Graphic Design (visuals)

2. User Experience
3. Goal Conversion
4. Platform Development (web , mobile)

Sketching
from idea generation to refinement

1. Ideas
2. Wireframes
3. Components (buttons, etc)

Sketching Process

1. be prepared beforehand (tools: pencils, etc)

2. what are your goals?
3. who is your audience?
4. time yourself​ (ANYTHING)
5. GO
6. Draw a frame for your device
7. Start with more simple and reduntant elements
8. gon on with more detailed elements and interactions
9. annotate your sketches and keep them safe
10. Keep going: build on the sketches you like more,and build alternatives
11. share your sketches x discussion
12. REFINEMENT:
13. add titles to the sketches
14. annotate (better…)
15. number your sketches
16. use arrows x transitions
17. add gestures (if you want) on certain interactions​ (tab, double tap, drag, flick)
Sketching Software: ​Concepts

Sketching Process
1. what Do I need to draw?
2. define starting point (more difficult first?)
3. decide next step
4. think different scenarios
5. think of multiple user flow
6. NAVIGATION SCHEMES
7. incorporate microactions early on
8. at this stage, don’t insist on details
9. keep sketches SAFE
10. SHARE WITH TEAMS

GET INSPIRATIONS
1. Talk to your peers
2. study others
3. surround yourself with great design
4. stay educated on a variety of topics
5. Design for yourself
6. travel and explore the world
7. just take a walk

FIGMA
Spacing + Layout Grids
1. Base units (base x multiple measures) ​(ie. 8px -> 64px)
2. all elements should be measured in increments of base units
3. spacing (the same)
4. COLUMNS - GUTTERS - MARGINS
5. Responsive Grids in Figma
(FIGMA) GRID RULES
1. ELEMENTS MUST SIT ALWAYS ON THE SAME NUMBER OF COLUMNS
2. elements should NEVER stay on the gutters
3. we can create subgrid (ie a grid inside a card)
4. don’t use columns as some sort of padding
5. a background image of a section can be full bleed

TYPOGRAPHY
Serif Fonts
1. Old Style (Goudy)
2. Transitional ​(Times New Roman)
3. Modern (Didot)
4. Slab (Courier)

Sans Serif
1. Grotesque (Source Sans Pro)
2. Neo-Grotesque (Helvetica)
3. Humanist (Gills Sans)
4. Geometric (Futura)

Display & Mono (typefaces)

5. Grotesque (Source Sans Pro)
6. Neo-Grotesque (Helvetica)
7. Humanist (Gills Sans)
8. Geometric (Futura)

COLORS

Color Schemes
1. Monocromatic
2. Analogous ​(3 colors located next each other in the color wheel - ​easiest?​)
3. Complementary ​(colors on the opposite side of the color wheel)
 4. Split-Complimentary ​(similar to Complimentary, but designs a kind of Y)
5. Triadic ​ (triangle on color wheels [120°]). vibrant

Considerations
1. Color can help reinforce the personality of your brand
2. Who are the users we are targeting?
3. Colors about what these colors means to you
4. Psycology of colors

Creating colors Palettes

1. coolors.co
2. colors should be scalable and additive (multiple shades and co.)
3. Always tint your grays and blacks
4. Color contrast creates ​visual ​hierarchy and ensures accessibility
5. Colorable to check contrast ratio

Forms + UI Elements
1. Un form dev’essere breve (per non scoraggiare)
2. It must be “conversation”, from easy to more sensitive data required
3. NO ​two columns form
4. Adequately ​distinguish ​your buttons, label them in a ​descriptive ​way
5. Use a ​progress bar​ of the form is splitted in multiple steps
6. Inputs are the most difficult UI Elements
7. Use ​Select ​when there are more than 5 options
8. The height of your input should be that of your primary button
9. VISUAL CONSISTENCY
10. Short related inputs on the same ROW
11. Labels short and clean
12. label smaller than inputs
13. Placeholders: ​not ​for substitute labels. If necessary put a hint on the right side
(DD/MM/YYYY)
14. Icons​ can reinforce the labels
15. Some icons reinforce functionality (p.e. hide/show)
16. Icons cab be good for feedbacks (valid/invalid)
17. STATES
18. pe. highlighted border on ​focus
19. disabled i​ s a status
20. put error messages where the error actually is
21. in any case NOT in the input field
 22. autoformat (the input is automatically formatted - credit card numbers splitted in
groups of four)
23. autocomplete reduces risks of errors
24. BUTTONS
25. Use descriptive labels (Create account instead of Submit)
26. Make it personal ​for higher conversion rates : ​Create my account​ rather than ​Sign
up
27. Make p​ rominent ​the button for the desired path
28. On mobile​, buttons have to be​ easily tappable - min 40/48 di distanza
29. consider ​disabled ​button (if required fields have not been submitted)

ACCESSIBILITY
1. Color contrast
2. Contrast recommended​: ​UI Components​ 3:1 / ​Text​: 4.5:1
3. Small text: anything smaller than 18px
4. TEST
5. TOOLS
6. colorsafe.co
7. Chrome extension: Color Contrast Analizer
8. use PROPER LABELS
9. Use labels for icons and menus
10. Colorable
11. Figma Plugin: ​Contrast
12. Figma Plugin: ​Stark
13. FOCUS STATES
14. Keep Focus Element, ​Don’t Remove Outline
15. Focus outline should adhere to contrast standards as well
16. think about off line content (e.g. lide-in menus/ hamburger menus…) : it could be
confusing
17. MODALS​: They can be an Accessibility disaster
18. Hover states: the same as .focus
19. Click targets (e.g. ​Cards): i​ t is important to create​ accessibility-friendly ​cards since
they can get so complex, they should be tabbable/focusable
20. Target areas must be adequately BIG
21. BUILD PRODUCTS THAT EVERYONE CAN ENJOY AND USE
EASILY