UX/UI: what makes good web design

youtu.be/GJN7TemsZtY

1. Navigation
: It's important to show what you can do on this website in the first 15 sec. By glancing at the navigation, the user can know what features are services on the site.
: Also, users should always know where they are.

 

2. Hierarchy

: The content should have a clear hierarchy, the user eye should be able to follow what we intend to lead them to.

: Navigate the user's attention.

 

3. Color

: Color shows the function of the element, follows the general rules such as link, button, etc.

: Good color combination, contrast, and functionality are import

 

 

 

youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI

Free Web Design Course 2020

Alternative programs

Alternatives to Photoshop

· Pixlr: http://pixlr.com

· Gimp: http://www.gimp.org

Alternatives to Illustrator

· Apache OpenOffice Draw: http://www.openoffice.org/product/dra...

· Inkscape: http://inkscape.org

Alternatives to Adobe Xd

· InVision: http://invisionapp.com

· Figma: http://figma.com

· Sketch: http://sketch.com

An alternative to After Effects

· Principle: http://principleformac.com

 

ep.4 Typography 

& ep20 3 tips

 

Two purposes of a font: Legibility(Deliver info), Aesthetic(Communication values)

Major categories of fonts: Serif / Sans-serif (Sans means "without" in Franch) + Script

Design tips

 

- text length shouldn't be too long; 10-11 words in a line. 

 

- Basic classic 6 typefaces of Massimo Vignelli.

   (Italian designer www.vignelli.com)

   : but it's premium. So search for alternative fonts.

 

Tip1. Not too many typefaces: stick to 1-2 fonts. The logo doesn't count.

Tip2. Line spacing 125-150%,  105-125% for Headline.

Tip3. Avoiding misleading text decoration. Don't do over things.

 

- Font sizes: type-scale.com

- 25 Classic Fonts: https://blog.spoongraphics.co.uk/arti...​ Great place to find

- good fonts: https://youworkforthem.com

ep.5 Image

3 steps using the right images

1. Choose the right style/genre

   : eg. photography - realisitic/serous, illustration - good to show a metaphor

2. Pick the right image

   : Create or Buy (eg. Shutterstock or Pexels)
   : Consider the context where the image is going to be used. (eg. text etc.)

   : High quality, clear subject, spaces, a contrast in the background, simplicity, etc.

3. Using it correctly

   

ep.6 Layout

What makes a good layout?

- Clear, not confusing

- Interesting, not boring

- Helps users consume content

 

2 Important things

1. Every design needs very contrasted sizes; something that really big, medium, and small - Hierarchy

2. Grid system

 

ep.7 Color

1. Pick a color rationally, based on the meaning.

   : www.empower-yourself-with-color-psychology.com/ 

2. Color harmony base on the color of step 1.

   : color.adobe.com/create

3. How to combine the colors of step 2 - 60:30:10 rule

 

ep.8 Hierarchy

Guide the users to look at instead of overwhelming them.

Text is also a block of color.

 

3 ways to create a hierarchy

1. Size differentiation

2. Color 

3. Position

 

ep.11 CONTENT STRUCTURE

1. Understand the goal of the site

   : Primary goal + secondary goals - it's the compass

2. Brainstorming and listing the contents that serve the goals

3. Organize the content - creating a sitemap

4. Start to wireframe

 

ep.9 Wireframe

Structure of the page 

get a general idea and focusing on how to deliver the message before concerning tons of design factors.

 

1. Handwriting first: Low fidelity sketch 

   - Recommend starting with this because it's the fastest way to draw your idea, a good way to brainstorming.

2. Move it to digital - Higher fidelity 

   - Check the structure and content: set it in greyscale to focus on these scopes only. 

   - Use real content instead of Lorem ipsum: the context helps to show the page identity and easier to know it works or not.

 

ep.10 Hero

In 15 sec the site should give the answers to these questions;

1. What is this?

2. What do you do?

3. What's in it for me?

 

Steps

1. Idea of structure.

2. Search for the image matching what you need and edit.

3. Add the logo and company name.

4. Add the Main catch and subtext: Make sure the sub doesn't overflow the title.

5. Add CTA.

6. Add nav menu.

7. Arrange the hierarchy of the elements.

 

ep.12 UX/UI BEST PRACTICES FOR WEB DESIGN

1. Navigation: always show where the user is. Users do not start from Home often.

2. Text: Always show clearly it's clickable or not.

3. Button

: The name should clearly show what the button is for. What the user expects to see when clicking the button.

: Keep the consistency. Color, hover-over, design. Imagine when it's on mobile(no mouse)

4. Good contrast: for readability. to catch the visitors' attention.

 

Step by Step

ep.14 ADOBE XD

1. Document settings: 1920 x 1080

2. Grid: Set the padding to fit the grids as the desired content width.

3. Basic settings for doc: set the default styles for H1, H2, H3, and paragraph.

4. Navigation: it doesn't have to be contained the content container based on the user behavior.

5. Create a component to keep the format for repeated elements such as buttons, navigation.

 

ep.15

6. Think about all the different scenarios of usage: like hover state, focus state

7. Export assets: SVG, JPG, PNG size at least 2 times. 

   :  (JPG is smaller than PNG, PNG is about transparency) 

   : Compress JPG and PNG - tinypng.com / ImageOptim(recommended in a comment)

 

ep16. 5 Website Types & How To Design Them  

Type 1. E-commerce

- Goal: sell products

- Design Challenge:
   1) Product showcase(Art direction)

   2) Checkout process

 

Type2. Marketing/Business website

- Goal: to show who they are

- Design Challenge:

   1) Clear description, value position, benefit = copyrighting is important,

   2) Story: storytelling to connect emotionally.

   3) Social proof

   4) Call To Action: contact, join us, download, etc.

 

Type3. Blog/Media Outlet

- Goal: Get you to read something.

- Design Challenge:

   1) Content

   2) Imagery system

   3) Categorization

   

Type4. Educational

- Goal: Getting people to consume the content

- Design Challenge:

   1) How to keep people engaged.

   2) Orientation

 

Type5. Portfolio

- Goal: Showcase works

- Design Challenge:

   1) Art direction

   2) Show personality

   3) Call to action

 

ep.17 Web Design Inspiration

https://www.awwwards.com/
https://www.lapa.ninja/
http://blog.gaetanpautler.com/

 

Dive deep into the idea; it will help you to make the originality of the design. Study the topic deeply, google it.

 

ep.18 3 Psychology Principles Every Web Designer Must know

1. Mirroring

: Imagery on the app will call people's reaction - mirroring

 

2. Social validation

: Efficiency way to make a decision is by checking what others do. It's how our brain works behind the scene. So put the social proves on the website; famous brands that worked/ing with, Numbers

: en.wikipedia.org/wiki/List_of_cognitive_biases

: commons.wikimedia.org/wiki/File:Cognitive_bias_codex_en.svg#/media/File:Cognitive_bias_codex_en.svg

 

3. Psychology of Color

: www.empower-yourself-with-color-psychology.com/ 

 

ep.19 Tools To Develop Your Website in 2020

 

 Landing pages - Everything you need to know 
10 videos [ Total duration 01:10:40 ]

youtube.com/playlist?list=PLXC_gcsKLD6n-4vThtnPXEFx2wgYVrVl1

 

1. Headline should be very specifically what is benefits.

2. Community building flow

   Cold emails(Gmail) => Landing page(Webflow) => Welcome email(MailChimp) => Survey(Typeform)

3. Given their purpose, special attention needs to be given to five elements:
   1) Value proposition

   2) Call-to-action

   3) Maintain attention

   4) Visuals

   5) Social proof