In this episode, Amy and James talk about 5 more design principles: alignment, emphasis, proportion, white space, and movement, and how they can be applied to real-life projects.

SPONSORSVercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit codingzeal.com

KwesForms

KwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.

For more information, visit kwes.io

Show Notes

0:00 Introduction

0:50 Sponsor: ZEAL

2:06 This past week...

3:53 Design Principle #1: Alignment

5:41 Power Tip: Using Guides

6:57 Left Aligned is best

8:40 Optical Alignment

10:26 Working with a 12 Column Grid System

11:31 Breaking the Grid

12:04 Sponsor: KwesForms

12:32 Design Principle #2: Emphasis

15:29 Design Principle #3: Proportion

18:05 Units of Measure

20:16 Using srcset

21:50 HTML Picture Element

22:34 8 Point Grid

23:06 Design Principle #4: White Space or Negative Space

25:04 Proximity

26:37 Sponsor: Vercel

27:34 Design Principle #5: Movement

• Clarifying what is happening for the user
• Creating a Mental Modal of how elements are laid out

30:51 Grab Bag Question: Could you recommend any free resources for website colors?

• Coolors
• Tailwind Shades
• Refactoring UI

34:12 Amy's Pick - Instax Mini LiPlay Camera

35:26 Amy's Plug - SelfTeach.me YouTube

36:31 James's Pick - Amplication

37:22 James's Plug - Learn Build Teach Discord Server