Divergent and Convergent Thinking – Brain storming and Game Storming –

1. Step 1: Design Guidelines in Figma Create a design system file with color styles, text styles, and components.
Step 2: Breakpoint Artboards in Figma Use the "Artboard" tool to create artboards for each breakpoint.
Step 3: Wireframing in Figma Use the "Pen" or "Shape" tools to draw wireframes within each artboard.
Step 4: Content and Elements in Figma Add text, images, buttons, and forms within the wireframes.
Step 5: Responsive Design in Figma Set constraints for each element to determine how they adapt to different
screen sizes. Use "Auto Layout" to maintain flexibility.
Step 6: Components and Styles in Figma Create components by selecting elements and converting them into
components. Apply shared styles for text, colors, and typography.
Step 7: Interactions and Animations in Figma Use the "Prototype" tab to define interactions and animations. Link
frames to create a seamless user flow.
EXP.NO:1 DESIGNINGARESPONSIVELAYOUTFORAN
SOCIETALAPPLICATION
DATE:

3. EXPLORING VARIOUS UI INTERACTION PATTERNS
• AIM:
• To explore various UI interaction patterns
• Theory:
• Understanding different UI interaction patterns is essential for creating engaging and user-friendly digital interfaces. This document
provides a brief overview of ten UI interaction patterns commonly used in design.
• List of Explained UI Interaction Patterns:
• 1.Hover Effects
• 2.Sliders and Carousels
• 3.Pop-up Modals
• 4.Expandable Menus
• 5.Drag-and-Drop Interactions
• 6.Parallax Scrolling
• 7.Toggle Switches
• 8.Progress Bars
• 9.Swipe Gestures
• 10.Tooltips
• Common UI Interaction Patterns:
• 1.Hover Effects
• Hover effects are dynamic changes that occur when a user hovers their mouse pointer over an element. Common examples include color
shifts, button animations, and image enlargements.
• 2.Sliders and Carousels
• Sliders and carousels allow multiple pieces of content to occupy a single screen space, which users can navigate through by swiping or
clicking arrows. They are useful for showcasing multiple images or content pieces without cluttering the interface.