Designing for E-commerce

Get ready for a walkthrough of the design process from start to finish. Everything from wireframes to Figma autolayout skills, this is the full workflow needed for designing a successful e-commerce site from scratch. Learn how to become a better designer, no matter what stage you’re at.

Timestamps:

3:27 - UI patterns overview

3:53 - Header navigation patterns

6:18 - Subnavigation patterns

6:59 - Full screen menus

8:12 - Newsletters for design inspiration

9:28 - Client expectations and UX principles

11:41 - Introduction to style tiles

13:14 - Choosing unique brand colors

13:30 - Font resources and recommendations

14:29 - Using theme editor instead of wireframes

15:10 - Building content in theme editor

16:26 - Adding apps during the design phase

17:05 - Designing in unpublished themes

17:24 - Managing complex projects

17:55 - Simplifying the design process

18:51 - Adopting a Squarespace approach

20:15 - Making projects more profitable

20:43 - Creating a style tile in Figma

23:22 - Creating auto layout button

26:50 - Building a header component

27:53 - Applying components across pages

28:44 - Designing a homepage banner

31:11 - Creating a linked product card

33:40 - Creating a featured collection section

36:35 - Q&A: Figma Shortcuts and best practices

38:01 - Adjustments for background colors

40:25 - Using layer blend modes

41:43 - Creating a product card component

42:44 - Making components resizable

43:40 - Linking components across pages

45:35 - Q&A: Liquid and CSS best practices

46:45 - Managing image sizes in Shopify

47:45 - Final thoughts