In this episode, Amy and James talk about small design tweaks that you can make that will make a big difference. These recommendations are helpful if you're looking for basic principles and guidelines to take your site to the next level.SponsorsVercelVercel 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.comZEAL 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, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit softwareresidency.com/careersDatoCMSDatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with real-time updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."For more information, visit datocms.comShow Notes0:00 Introduction3:13 Applying Design PrinciplesEpisode 5 - How Do you Start a New Design Project?Episode 10 - Design Fundamentals (Part 1)Episode 11 - Design Fundamentals (Part 2)3:41 AlignmentWorking from a 12 column grid4:55 Align Text Left5:46 Sponsor: Vercel6:54 Proximity - Items that are closer together, your eye will group together9:00 Hierarchy10:37 Drop Shadows12:34 TypographyIl1 Test17:20 Sponsor: DatoCMS18:14 x-height should be used to determine line-height18:41 Long Form Copy - Use 20px18:50 Line Length - Use 45 - 75 characters in a line, 66 characters is the sweet spot20:47 Smaller the font size, the more line-height you need21:27 Fibonacci Sequence - 14, 20, 34, 54, 8824:02 Copy StyleDesign For ScannersStart your messages with the goal first, not the action:    Example: Drag a song to your "Awesome Tunes" folder to add it to your playlist    Versus: Add a song to your playlist by dragging it to the "Awesome Tunes" folder26:01 Consistency26:29 SpacingWhite Space4pt and 8pt27:46 ColorCoolors.coTint - Color mixed with whiteShade - Color mixed with blackTone - Color mixed with Gray29:48 Sponsor - ZEAL31:19 MobileThumbs need at least a 48 x 48 target areaPut things near the bottom of the screen32:20 Lean into Stereotypes33:40 Don't rely on color alone to convey messagesFor example, a red outline around the input — some users are color blindWhen the page is loading, help the user know what's happeningEmpty or blank states should be well designed - guide the user to the next action34:35 Picks and Plugs35:25 Amy's Pick - FigJam36:12 Amy's Plug - Advent of CSS36:40 James's Pick - MagSafe Charger37:50 James's Plug - Advent to JavaScript