Products I: Proximity

Designing with Proximity

In this video, we delve into the process of designing the product section of a website.

We'll go through the thought process behind wireframes, discuss layout options, and explore various design elements like cards for product information and features. In this tutorial, I guide you through designing a product section with floating boxes, integrating stock photography, and ensuring a balanced layout. I show how to create vertical boundaries and center elements using a grid system. We explore designing VR headset product cards with pricing and features, and how to add drop shadows for depth. By the end of this session, you'll have a comprehensive understanding of setting up a visually appealing and functional product section.

Summary

1. Wireframes and Initial Design: I began by revisiting our wireframes to ensure our design aligns with the initial thought process and ideas.
2. Image Placement: Integrated stock photography in the product section, discussing placement and visual impact.
3. Grid System: Highlighted the use of a grid system to align elements, while also allowing flexibility for creative layouts.
4. Floating Product Cards: Designed floating cards for product information and features, detailing their alignment and visual hierarchy.
5. Spacing Adjustments: Made adjustments to element spacing to ensure the layout is visually appealing and sections are distinct.
6. Pricing and Features Layout: Added pricing details and feature lists, discussing their visual hierarchy and importance.
7. Drop Shadows for Depth: Applied drop shadows to cards to create a floating effect, enhancing visual depth.
8. Auto Layout Usage: Showed how to use auto layout for consistent spacing and alignment of elements.
9. Introductory Section: Emphasized the importance of an introductory section to provide context and engage users.
10. Incorporating Buttons and Icons: Demonstrated the placement and visual balance of buttons and icons in the design.