Design Your UI — Hacks, Tools, Experts | ScrollValue

UI Design

0/5

Start with a design system
Define your buttons, cards, forms, and spacing once. Page ten takes minutes instead of hours when every element already exists.

Pick one graphic style
Illustrations, photos, or icons — choose one family and stay consistent. Mixing styles makes your product look like three people designed it.

Collect your visual content first
Gather your real images, copy, and icons before opening a design tool. Designing with placeholders is guessing — and it always needs redoing.

Add motion that guides
Good animation tells the user what just happened or what to look at next. If removing it changes nothing, it’s decoration — delete it.

Present your work in context
Drop your screen into a phone or laptop mockup before sharing. Context turns “nice design” into “I’d use this” — presentation shapes perception.

Images

USING THE RIGHT IMAGE FOR YOUR WEB DESIGN: Free Web Design Course

12:45

Optimizing Images

‍

16:22

PHOTO EDITING 101 FOR WEB DESIGNERS: Free Web Design Course |

18:21

Courses

Graphic Design: Communicate Complex Ideas with Simple Images - Domestika

Fundamentals of Digital Image and Video Processing

Aggelos K. Katsaggelos

Decorative line element

Graphic Design: Composition of Commercial Images - Domestika

Composition of Comme...

Guillermo Flores

Decorative line element

Graphic Design: Communicate Complex Ideas with Simple Images - Domestika

Graphic Design: Commu...

Decorative line element

Videos Prep

How To Embed a Video on your Website for FREE

3:16

The Best Video Hosting Options for Businesses and Content Creators

5:56

How to embed a video
on Vimeo

1:33

Courses

Fundamentals of Digital Image and Video Processing - Coursera

Bring Your Story to Life – Video Post-Production

Decorative line element

Fundamentals of Digital Image and Video Processing - Coursera

Fundamentals of Digital Image and Video Processing

Aggelos K. Katsaggelos

Decorative line element

Fundamentals of Digital Image and Video Processing - Coursera

Video Editing in CapCut | Beginner to Pro | Desktop + Mobile

Phil Ebiner & Dan Britain

Decorative line element

Motion Design

How UI designers make those SLICK Animations! (Complete Guide)

8:35

UI Animation, Motion Design & Micro Interaction Basics

33:05

Adding Motion to Your Designs with LottieFiles

13:43

Courses

Lucas Ridley - Design course instructor

Break Into The Animation Industry

Decorative line element

Lucas Ridley - Design course instructor

Principles of Animation: The Art of Appealing Motion

Decorative line element

Hongshu Guo — video tutorial thumbnail

Animation Principles In...

Decorative line element

Mockups

Clips for Context

How to Design Beautiful
Mockups

9:44

BEST Mockup Websites You Probably Don’t Know

5:48

BEST Free Mockup Websites for Designers (Impress Clients!)

11:31

3D Design

Clips for Context

How UI designers make those SLICK Animations! (Complete Guide)

4:23

New 3D UI Design Tools + Figma AR/VR! | Design Essentials

08:21

Build a Stunning 3D Website with HTML, CSS & Spline!

30:35

Courses

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.