COMPRESSEDfm

33 | Small Design Tweaks that Make a Big Difference


Listen Later

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.

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, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS 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.com

Show Notes
  • 0:00 Introduction
  • 3:13 Applying Design Principles
    • Episode 5 - How Do you Start a New Design Project?
    • Episode 10 - Design Fundamentals (Part 1)
    • Episode 11 - Design Fundamentals (Part 2)
  • 3:41 Alignment
    • Working from a 12 column grid
  • 4:55 Align Text Left
  • 5:46 Sponsor: Vercel
  • 6:54 Proximity - Items that are closer together, your eye will group together
  • 9:00 Hierarchy
  • 10:37 Drop Shadows
  • 12:34 Typography
    • Il1 Test
  • 17:20 Sponsor: DatoCMS
  • 18:14 x-height should be used to determine line-height
  • 18:41 Long Form Copy - Use 20px
  • 18:50 Line Length - Use 45 - 75 characters in a line, 66 characters is the sweet spot
  • 20:47 Smaller the font size, the more line-height you need
  • 21:27 Fibonacci Sequence - 14, 20, 34, 54, 88
  • 24:02 Copy Style
    • Design For Scanners
    • Start 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" folder
  • 26:01 Consistency
  • 26:29 Spacing
    • White Space
    • 4pt and 8pt
  • 27:46 Color
    • Coolors.co
    • Tint - Color mixed with white
    • Shade - Color mixed with black
    • Tone - Color mixed with Gray
  • 29:48 Sponsor - ZEAL
  • 31:19 Mobile
    • Thumbs need at least a 48 x 48 target area
    • Put things near the bottom of the screen
  • 32:20 Lean into Stereotypes
  • 33:40 Don't rely on color alone to convey messages
    • For example, a red outline around the input — some users are color blind
    • When the page is loading, help the user know what's happening
    • Empty or blank states should be well designed - guide the user to the next action
  • 34:35 Picks and Plugs
  • 35:25 Amy's Pick - FigJam
  • 36:12 Amy's Plug - Advent of CSS
  • 36:40 James's Pick - MagSafe Charger
  • 37:50 James's Plug - Advent to JavaScript
...more
View all episodesView all episodes
Download on the App Store

COMPRESSEDfmBy Amy Dutton, Brad Garropy

  • 4.5
  • 4.5
  • 4.5
  • 4.5
  • 4.5

4.5

20 ratings


More shows like COMPRESSEDfm

View all
Software Engineering Radio - the podcast for professional software developers by se-radio@computer.org

Software Engineering Radio - the podcast for professional software developers

272 Listeners

Planet Money by NPR

Planet Money

30,666 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

284 Listeners

KILL TONY by DEATHSQUAD.TV & Studio71

KILL TONY

5,605 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

987 Listeners

The Diary Of A CEO with Steven Bartlett by DOAC

The Diary Of A CEO with Steven Bartlett

7,070 Listeners

The Indicator from Planet Money by NPR

The Indicator from Planet Money

9,510 Listeners

HTML All The Things - Web Development, Web Design, Small Business by Matt Lawrence and Mike Karan

HTML All The Things - Web Development, Web Design, Small Business

48 Listeners

Front-End Fire by TJ VanToll, Paige Niedringhaus, Jack Herrington

Front-End Fire

9 Listeners

Mostly Technical by Ian Landsman and Aaron Francis

Mostly Technical

27 Listeners