BCS456C- UI/UX Lab Manual Prepared for Semester-IV ISE Students As per VTU 2022 scheme For the Academic Year 2024-2025 (EVEN) Prepared by: Dr.Ciyamala Kushbu S (AP/ISE,CMRIT) Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 1Basics of UI/UX - Fundamental Concepts User Interface (UI) and User Experience (UX) design are foundational to creating digital products that people love to use. UI refers to the visual elements users interact with - buttons, menus, forms, and layouts. UX encompasses the entire journey and feeling users have while using a product, Good UVUX design requires understanding how humans think and behave. For example, when designing a mobile app, Ul designers carefully choose button sizes and placement (like putting important actions within thumb reach), while UX designers consider how easily users can complete tasks (like minimizing the number of steps to check out in a shopping app). Key principles include consistency (using similar design pattems throughout), feedback (visual indicators that an action has occurred), accessibility (designing for all users, including those with disabilities), and simplicity (removing unnecessary complexity) Take a banking app for instance - effective U/UX design ensures users can check their balance at a glance, transfer money in minimal steps, and receive clear confirmation when transactions are completed. This isn't just about making things look pretty - it's about making them work intuitively. A real-world example is the difference between early and modem ATM interfaces. Early machines had complicated menus and technical language, while today's interfaces use clear buttons, familiar patterns, and guide users through transactions step by step, greatly reducing user frustration and errors. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 2UWV/UX Fundamental Concepts User Interface (UI) User Experience (UX) = Dropdown Usability Figure 1:U1/0X Design Thinking Tt is a problem-solving framework focusing on human-centered solutions. 1. Empathize — Understand users’ needs, 2. Define — Articulate the problem 3. Ideate — Brainstorm solutions. 4, Prototype — Develop models. 5. Test — Validate and refine. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 3——— Design Thinking Lndersare tne ralyseyour ‘Thnkofsclucons __—bevalepsoluton Teste product (hers reeds ad chreviranto — weacvaspecrat phe best ‘oben ‘etme prebien theprosier —aeReeteFe problem solos ented Figure 2:Design Thinking Wireframing It is one that creates a structural blueprint of a UI design. ‘Three Types of Fidelity in Wireframing are Lo-Fi, MI-Fi,Hi-Fi Low-Fidelity Wireframes (Lo-Fi): These are basic, simple, and abstract representations of the interface. They focus on the overall layout, content placement, and navigation, without much detail. In simple words, it is Basic sketches with rough layouts Example: A low-fidelity wireframe for a news website that displays the main sections (¢.g., Home, Politics, Sports) with placeholder boxes for headlines and images. It only includes simple lines to indicate the general arrangement of elements. Mid-Fidelity Wireframes(Mi-Fi): Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 4These wireframes have more details and might include some visual elements, such as basic colors and typography, to provide a clearer representation of the design. In simple words, it is a more refined, placeholders for UI elements. Example: A mid-fidelity wireframe for a shopping app that shows the product listing page with actual product images and text content. It uses basic colors to distinguish between different buttons and product categories. igh-Fidelity Wireframes (Hi-Fi): These wireframes are more detailed and closely resemble the final design. They include specific colors, fonts, and other visual elements to give a more realistic preview of the end product Example:A high-fidelity wireframe for a travel website showcasing the homepage. It includes actual images, specific fonts, and branded colors. Buttons and navigation elements are styled as they would appear in the final design. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 5TYPES OF WIREFRAMES LOW-FIDELITY MEDIUM-FIDELITY —— =< = woripemrry eal | sake a_™“N & EE) : = SI a Figure 3: Types of Wireframes Roles and Responsibilities in UX UI Wireframming UX Designer: ‘The UX designer focuses on understanding user needs and creating wireframes that deliver an intuitive and user-friendly experience A UX designer conducts user interviews, creates user personas, and then develops wireframes for a fitness app that emphasises easy navigation, workout tracking, and personalised recommendations. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 6UI Designer: ‘The UI designer works on the visual aspects of the wireframes, incorporating branding elements, selecting colows, typography, and other visual elements to create an aesthetically appealing interface. A Ul designer takes wireframes for an online fashion store and adds specific color palettes, customizes fonts, and designs visually appealing product cards and buttons Interaction Designer ‘This role focuses on the interactive elements and animations within the wireframes, ensuring smooth and intuitive user interactions. An interaction designer works on wireframes for a mobile banking app, specifying how users can navigate between account summary, transaction history, and transfer screens with intuitive gestures. Product Manager/Owner: The product manager or owner collaborates with designers to align wireframes with the product’s overall vision and business goals. The product owner provides feedback on wireframes for a project management tool, ensuring that the interface supports efficient task management and team collaboration. Development Team: Developers work closely with wireframes to understand the functionality and technical requirements needed to implement the design. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page7The development team analyzes wireframes for a food delivery app to determine the backen nd integration required for order processing and payment handling. Information architecture (IA) It is all about organizing and structuring information so that it’s easy for people to find and understand. It’s an important part of designing websites and apps because it helps users quickly get the information they need, In this article, we'll explain what information architecture is, why it’s important, and how it can make your website or app better. Whether you’re creating a website or an app, knowing about [A will help you design more user-friendly experiences. Elements of an Information Architecture: The Information architecture can be divided into three major parts navigation, labels, and search. Navigation: The process by which users move inside the website to interact with the contents of the website by moving, » Labels: The naming of the content material on the site. Search: Information-seeking methods (keywords, categories) is Information Architecture Important in UX Design? It all comes down to organizing and arranging data in a way that is understandable to users. Users can traverse a digital product or website more effectively and more smoothly and enjoyably when the information is well-organized and simple to find. The organization and labeling of identical content or functionality across the entire digital product or website is guaranteed by a consistent JA. Users can create mental models and experience less confusion with consistency. Collaboration between designers, developers, content producers, and stakeholders is necessary for IA. This architecture is used by different team members to ensure there is no confusion. IA aids managers and content producers in determining where and how to position material within a digital product. By doing this, content management is streamlined and the proper content is provided in the appropriate context. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page8> Growth and change can be accommodated by an efficient IA. A digital product or website may readily absorb new material or features as it develops without upsetting users or confusing them. The Information architecture should be designed in such a way that it aligns with the business goals. It also aims at increasing user engagement and helps in directing them in the correct direction. v Steps to Design Initially user data needs to be gathered and all the basic questions should be answered. User stories need to be written Pages, Scenarios and metadata should be added to the Information architecture Map the user flow for different decision flow Gather feedback about the architecture before moving further. 2. 3 4. 5 The Information Architecture of an e-commerce website is given in the below Figure 4. Figure 4:Information Architecture ——— EeEeEeEeEeEeEes Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page9Penpot What is Penpot? Penpot is an open-source design and prototyping platform for UX/UI designers and developers. Unlike proprietary tools like Figma, Adobe XD, or Sketch, Penpot is self-hostable, collaborative, and works entirely in the browser. It supports SVG-based design, making it highly flexible and ensuring compatibility with web technologies. It also integrates well with developer workflows, making it an excellent choice for teams that value open standards and control over their data Benefits of Using Penpot @ Open-Source & Free + No licensing costs—completely free to use. + Community-driven, meaning continuous improvements and transparency, WF Web-Based & Cross-Platform + Runs in the browser—no need to install software. + Works on Windows, Mac, Linux (unlike Sketch, which is Mac-only). Self-Hostable for Privacy & Security + Teams can host Penpot on their own servers for better data security. + Ideal for organizations that require full control over their design assets @ Developer-Friendly (Uses SVG) + Unlike other tools that rely on proprietary formats, Penpot uses SVG, making it easy to integrate into web development workflows. + Developers can inspect and extract clean code effortlessly © Real-Time Collaboration + Works like Figma—amultiple users can edit, comment, and collaborate live + Perfect for remote teams and open-source projects © Powerful Design Features + Flexible layout tools: Auto layout, responsive resizing, and grid systems. + Prototyping tools: Create interactive designs with clickable prototypes + Reusable components: Design once and use it across multiple projects. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 10& Growing Ecosystem & Community + Backed by a passionate community constantly improving the platform. + Frequent updates and new features driven by user feedback. How to start with penpot? ‘You can start using Penpot right in your browser or installing it in a server of your own. To use Penpot online point your browser to design.penpot.app and. start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. Penpot Interface The Penpot interface has three main areas: Dashboard, Workspace and View mode. Lets take a lock at their composition and main features. Dashboard- It is the place where you will be able to organize your files, libraries, projects and teams. Workspace- It is where you actually create your designs View mode- Using this you can present and share your designs, comment on them and play with the interactions set at the workspace. Inspect mode-This is the mode where you can get properties specifications and code snippets. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 11List of Experiments Using Penpot Exp 1. Introduction to Penpot ~ Exploring Basic Tools Exp 2. Creating a Flexible Low- and Mid-Fidelity Wireframe for a Login & Signup Page Exp 3. Enhancing Webpage Design with Alignment, Distribution, Grouping, Grid System, and Guides for a Professional Look Exp 4: Web Page Design with Masking & Gradients Exp 5. Building a Responsive Layouts with Constraints and Flex Layout Exp 6, Designing a Responsive Login Interface with Interactive Navigation in Penpot Exp 7. Building an Interactive E-Commerce Checkout Process in Penpot Using Figma Exp 8. Creating Minimalist Logos Using Booleans in Figma Exp 9. Designing a Course Promotion Banner in Figma Exp 10. Creating a User Flow Diagram for an online shopping app using Figma Exp 11. A. Create Stunning Flipping Card Effects in Figma Exp 11. B.Prototyping a Chat Interface in Figma Application Exp 12. Animate a Moving Car in Figma: Build a Dynamic Ride-Hailing App Like Uber Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 12Experiment 1 Introduction to Penpot — Exploring Basic Tools Aim To understand the Penpot interface and learn how to use basic design tools, including colors, text, shapes, and boards, which are essential for UVUX design. Expected Outcome By the end of this experiment, students will be able to navigate the Penpot interface, create boards, draw shapes, add text, apply colors, and organize elements. Procedure Step 1: Accessing Penpot 1. Open Penpot ~ Visit htips://penpot.app and sign up (if new) or log in. 2. Click on "New Project", give it a name, and open it Step 2: Understanding the Interface 1. Explore the Toolbar (Left Side) — Contains shape tools, text tools, and selection tools, Board tools and Plugins 2. Inspect the Layers Panel (Right Side) — Shows all objects in your design. 3. Properties Panel (Right Side) — Allows customization like colors, stroke width, and alignment. 4, Canvas (Center Area) — The main workspace for designing. Step 3: Creating a Board (Arthoard) 1. Click on “Boards” in the left toolbar. 2. Click and drag to create a new board (similar to a Figma frame or Adobe artboard). 3. Adjust the board size using the Properties Panel on the right. Step 4: Using Shapes 1. Click on the Rectangle, Circle, or Line Tool from the left toolbar 2. Click and drag on the canvas to draw a shape. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 133. Adjust size and position using the Properties Panel. 4. Change border thickness, fill color, or opacity using the right panel. Step 5: Adding Text 1, Select the Text Tool (T) from the left toolbar. 2. Click anywhere on the board and type text. 3. Customize using the right panel (change font, size, alignment, and color). Step 6: Applying Colors 1. Select any shape or text. 2. In the Properties Panel, click on the Fill color box. 3. Choose a color from the color picker or input a hex code. 4. Optionally, adjust opacity or add gradients Step 7: Saving & Exporting Your Work 1. Click File > Save Project (Auto-save is enabled). 2. To export a design, select it and go to File > Export to PNG, SVG, or PDE Output: The output consists of a green canvas as the background, with a white board (artboard) with width 750 and height 600 is placed centrally. On this board, a ellipse is drawn, standing out with its bold red color. Alongside it, a blue rectangle with a black stroke (border with 10px) is positioned, creating contrast against the white background. Additionally, the text "Hello World" is placed within the board in Bolded black color, using a font size of 24px, making it clearly visible and readable. The combination of these elements demonstrates basic shape creation, color application, and text formatting within the Penpot design tool. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 14Result Hence basic tools of Penpot including shapes, text, colors, and boards are explored successfully Viva Questions: 1. What is Penpot primarily used for? A) Video Editing B) UVUX Design C) 3D Modeling D) Programming Answer: B) UI/UX Design 2. What kind of application is Penpot? A) Web-based B) Desktop-only C) Mobile-only D) Command-line Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 15Answer: A) Web-based 3. In Penpot, what is a "Board" used for? A) To create and organize design layouts B) To write programming scripts C) To store project files D) To render 3D models ‘Answer: A) To create and organize design layouts 4. How can you add a shape in Penpot? A) Using the "Shape" tool B) Typing a shape name in a text box C) Importing fiom an external file D) Running a script Answer: A) Using the "Shape" tool 5. Which of the following is NOT a basic shape in Penpot? A) Rectangle B) Circle C) Triangle D) Hexagon Answer: D) Hexagon 6. How can you change the color of an object in Penpot? A) By selecting the object and using the "Fill” option B) By changing the browser theme ) By renaming the object D) By dragging it to a different board Answer: A) By selecting the object and using the "Fill" option 7. Which tool is used to add text in Penpot? A) Shape Tool B) Text Tool C) Pen Tool D) Selection Tool ‘Answer: B) Text Tool Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 168. What is the function of the "Selection Tool" in Penpot? A) To draw freehand shapes B) To select and manipulate objects C) To create color gradients D) To delete objects ‘Answer: B) To select and manipulate objects 9. How can you adjust the transparency of an object in Penpot? A) By changing the "Opacity" settings B) By using the "Text" tool C) By converting it to a different file format D) By resizing the object Answer: A) By changing the "Opacity" settings 10. Which format is co A) mp4 B) pdf ©) psd D) zip Answer: B) .pdf monly used to export Penpot designs? 11. What does the Layers Panel in Penpot help with? A) Managing different elements in a design B) Writing JavaScript code C) Creating sound effects D) Animating objects Answer: A) Managing different elements in a design 12. What happens when you group multiple objects in Penpot? A) They merge into a single shape B) They become easier to move and edit together C) They disappear from the board D) They get locked ‘Answer: B) They become easier to move and edit together 13. What is the purpose of a "Stroke" in Penpot? A) It fills the shape with a pattem B) It adds an outline to an object Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 17C) It resizes the shape automatically D) It converts text into an image Answer: B) It adds an outline to an object 14, How do you duplicate an object in Penpot? A) Right-click and select "Duplicate" B) Press Ctl + D (Cmd + D on Mac) C) Drag while holding the Alt key D) Alll of the above Answer: D) All of the above 15. What is the function of "Grids and Guides” in Penpot? A) To help align elements accurately B) To change the background color C) To add special effects D) To animate designs ‘Answer: A) To help align elements accurately 16. Can Penpot be used for collaboration with team members? A) Yes, it allows real-time collaboration B) No, itis only for individual use C) Only if.a project is downloaded and shared D) Only with a paid subscription Answer: A) Yes, it allows real-time collaboration 17. What does the "Align" tool help with in Penpot? A) Positioning objects precisely B) Changing text color C) Exporting files D) Animating elements Answer: A) Positioning objects precisely 18. What is the difference between Fill and Stroke in Penpot? A) Filll changes the object's inside color, Stroke changes its border color B) Fill adds effects, Stroke removes them C) Fill duplicates objects, Stroke resizes them D) They are the same ‘Answer: A) Fill changes the object's inside color, Stroke changes its border color Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 1819. Which shortcut ke: A) Ctrl +S B)Ctl+Z ©) Ctrl +P D)Ctl+X Answer: B) Ctrl +Z used to undo an action in Penpot? 20. How can you import images into Penpot? A) Drag and drop an image file into the workspace B) Use the "Import" option from the File menu C) Copy and paste the image D) All of the above Answer: D) All of the above Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 19Experiment 2 Creating a Flexible Low- and Mid-Fidelity Wireframe for a Login & Signup Page Aim To design a basic low and Middle fidelity Wireframe for a Login & Signup Page using Penpot’s tools, ensuring proper structure and layout. Expected Outcome: Students will learn to create low- and mid-fidelity wireframes for a login page, incorporating input fields, buttons, and layout structure. Procedure: Step 1: Set Up the Canvas > Open Penpot and create a new project. » Add a board (artboard) with a standard screen size (e.g.. 1440x1024 for desktop or 375x812 for mobile). Step 2; Design the Low-Fidelity Wireframe > Draw a rectangle for the login form coatainer. > Add ovo input fields (Username/Email and Password) using rectangles with labels. > Place a Login button (simple rectangle with "Login" text) > Add a "Forgot Password?” link (a smaller text element below the password field) > Include a "Sign Up" option (text link below the login button). Step 3: Enhance to a Mid-Fidelity Wireframe > Replace basic shapes with refined components (rounded input fields, properly spaced buttons). > Add icons for username/password fields (e.g., user and lock icons). > Apply placeholder text inside input fields for better clarity. Step 4: Final Review & Exporting > Review the layout and Save the project and export it as SVG or PNG for documentation. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 20Output: Logo Sign In Email Address Password Forgot Password? Remember Me Signin Dont have an account?Sign up Sign In Email Address 3G» Password Forgot Password? CiRemember Me Dont have an account? Sign up Result In this experiment, we designed a basic low and mid-fidelity wireframe for a login page using Penpot’s tools. We arranged essential elements like input fields, buitons, and text to ensure proper structure and usability. This helped in understanding wireframing principles and layout design for UI/UX development. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 21Viva Questions: 1. What is a wireframe in UI/UX design? A) A high-resolution final design B) A basic layout that represents a webpage or app screen C) A type of programming code D)A color scheme for a website Answer: B) A basic layout that represents a webpage or app screen 2. What is the main purpose of a low-fidelity wireframe? A) To add detailed colors and images B) To provide a rough structure of a design with minimal details C) To write backend code for an application D) To animate UI components ‘Answer: B) To provide a rough structure of a design with minimal details 3. Which Penpot tool is essential for creating wireframes? A) Shape Tool B) Animation Tool C) Audio Tool D) 3D Modeling Tool Answer: A) Shape Tool 4. Which elements are commonly included in a login page wireframe? A) Navigation bar, login form, and submit bution B) Video player and musie controls C) Shopping cart and checkout button D) Animated GIFs and stickers Answer: A) Navigation bar, login form, and submit button 5. What is the difference between low and mid-fidelity wireframes? A) Low-fidelity wirettames are basic sketches, while mid-fidelity wireframes have more details and structure B) Low-fidelity wireframes use images, mid-fidelity wireframes do not C) Mid-fidelity wireframes are only used for mobile apps D) There is no difference Answer: A) Low-fidelity wireframes are basic sketches, while mid-fidelity wireframes have more details and structure Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 226. What tool in Penpot is used to add text labels like “Username” and “Password”? A) Shape Tool B) Text Tool ) Fill Tool D) Export Tool Answer: B) Text Tool 7. Which of the following is the best practice in wireframing a login page? A) Using placeholder text in input fields B) Adding animations in low-fidelity wireframes C) Using detailed colors and images in low--fidelity wireframes D) Writing HTML and CSS before wireframing Answer: A) Using placeholder text in input fields 8. How can a designer indicate an interactive button in a wireframe? A) By using a rectangle with a label like "Login" B) By adding an animation effect C) By embedding a video D) By writing JavaScript code Answer: A) By using a rectangle with a label like "Login" 9. Which shape A) Rectangle B) Circle C) Triangle D) Star Answer: A) Rectangle commonly used to represent buttons in wireframing? 10. How can alignment and spacing be adjusted in Penpot wireframing? A) Using grids and guides B) Using animation tools C) By randomly placing elements D) By manually writing CSS Answer: A) Using grids and guides 11. Why is a mid-fidelity wireframe useful? A) It provides more detail than a low-fidelity wireframe without full design elements Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 23B) Itis the final design C) It replaces coding D) It includes only text elements Answer: A) It provides more detail than a low-fidelity wireframe without full design elements 12. How can a designer show an input field in a wireframe? A) Using a rectangle with a label inside B) By adding a clickable link C) By inserting an image D) By adding a video Answer: A) Using a rectangle with a label inside 13. What is the primary focus of wireframing? A) Visual layout and structure B) Finalized colors and branding C) Animations and transitions D) Background music Answer: A) Visual layout and structure 14. What is the purpose of using grayscale colors in wireframing? A) To keep the design minimal and focused on structure B) To make the design colorful C) To indicate completed sections D) To animate the wireframe ‘Answer: A) To keep the design minimal and focused on structure 15. Which shortcut key is used to copy an element in Penpot? A)Cul+C B) Ctl +X C) Ctrl +P D)Ctl+S Answer: A) Ctrl + C 16, How can a designer indicate a clickable link in a wireframe? A) Underline the text or use a rectangle with a label B) Add animations C) Insert a video tutorial D) Use multiple colors Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 24Answer: A) Underline the text or use a rectangle with a label 17. Which of the following best represents a password field in a wireframe? A) A rectangle with "sss" inside it B) A colorfal icon C) A video tutorial D)A circle ‘Answer: A) A rectangle with "+ 18. What is the best approach for structuring a login wireframe? A) Keeping it simple and user-friendly B) Adding unnecessary elements C) Using multiple fonts and colors D) Skipping input fields Answer: A) Keeping it simple and user-friendly 19. What is the best way to test a wireframe? A) User feedback and usability testing B) Adding animations C) Writing backend code first D) Skipping the testing phase Answer: A) User feedback and usability testing 20. Why should a wireframe be designed before high-fidelity prototyping? A) To plan the structure before adding visual details B) To directly create the final design C) To finalize all colors and images first D) To avoid using Penpot ‘Answer: A) To plan the structure before adding visual details Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 25Experiment 3 Enhancing Webpage Design with Distribution, Grouping, Alignment, Guides and Grid System for a Professional Look Aim To create a well-structured and visually appealing webpage layout by using alignment, distribution, grouping, the grid system, and guides in Penpot (or any design tool), ensuring a professional and organized design Outcome: Understanding alignment to position elements correctly Learning distribution for equal spacing between objects. Using grouping for better design organization, Applying the grid system for a structured and balanced layout. Utilizing guides for precision in UI design. Procedure: Step 1: Open the Design Tool + Launch Penpot or any design software. © Create a new project or open an existing one. Step 2: Set Up the Arthoard * Choose an appropriate canvas size (e.g., Desktop, Tablet, or Mobile). ‘* Enable Guides to define margins and safe areas. Step 3: Apply Alignment for a Neat Layout * Select elements (text, images, buttons). ‘* Use the Align Tool (Left, Center, Right, Top, Bottom) to position elements uniformly. Step 4: Use Distribution for Equal Spacing © Select multiple elements. ‘* Use the Distribute Tool (Horizontally or Vertically) to evenly space objects. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 26Step * Select related elements (e.g., a button and text label). © Press Ctrl + G (Cmd + G for Mac) to group them together. Frouping for Efficient Element Management mplement the G System for Structural Balance * Enable the Grid from the Layout settings © Adjust the number of columns, row spacing, and gutter width for consistency © Snap elements to the grid for better alignment Step 7: Use Guides for Precision ‘© Drag guidelines from the rulers to position elements accurately. ¢ Align key components (logos, navigation bars, content sections) along guides, Step 8: ©. Review the design and make necessary refinements. © Export the final design in PNG, SVG, or PDF format. nal Adjustments and Export Output: After Distribution ‘Elecironiey “TW& Appliances Furnitures Books ig OfferZone After Grouping ‘Electronics TV Appliances Furnitures Books Kids Offer Zone ‘Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 27After Top Allignment of the Grouped Cells Flectronics TV&Appliances Furnitures Books Kids Offer Zone (RREER YEE Rover as Electronics TV&Appliances Furnitures Books _Kids._ Offer Zone Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 28Offer Zone Electronics TV & Appliances _ Furnitures __ Books UI/UX —Kidswear Grid Layout Electronics TV&Appliances Furnitures Books Kids Offer Zone al output for A Shopping Website Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 29Result: Ry using alignment, distribution, grouping, the grid system, and guides, the webpage design became well-organized, visually professional, and structurally balanced, ensuring a seamless user experience. Viva Questions: 1. What is the primary purpose of alignment in web design? A) To randomly position elements on the webpage B) To ensure elements are visually connected and organized C) To reduce the number of elements on a page D) To change the background color Answer: B) To ensure elements are visually connected and organized 2. Which tool helps distribute elements evenly in a design? A) Align Tool B) Distribute Tool C) Color Picker D) Eraser Tool Answer: B) Distribute Tool 3. What does grouping elements in Penpot help with? A) Moving and editing multiple elements together B) Removing elements from the design C) Locking elements permanently D) Changing the color of elements Answer: A) Moving and editing multiple elements together 4, How can you enable the grid system in Penpot? A) By going to layout settings and enabling the grid B) By clicking the "Export" button C) By selecting elements and pressing Delete D) By using the Eraser tool ‘Answer: A) By going to layout settings and enabling the grid 5. What does the grid system improve in web design? A) Proper alignment and structured layout B) Animation effects C) The number of colors in the design D) The overall website speed Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 30Answer: A) Proper alignment and structured layout 6. What is the shortcut to group elements in Penpot? A) Ctl +G B)Ctl+X ©) Ctrl +P D) Ctrl + Shift +U Answer: A) Ctrl +G 7. Why are guides used in web design? A) To position elements precisely on a page B) To add animations to images C) To remove extra spacing between objects D) To replace the grid system Answer: A) To position elements precisely on a page 8. Which type of alignment ensures all text is cent A) Left Alignment B) Right Alignment C) Center Alignment D) Justified Alignment Answer: C) Center Alignment 9. What happens when elements are grouped? A) They can be moved and resized together B) They disappear from the design C) They become uneditable D) They turn into a gradient Answer: A) They can be moved and resized together 10. Which feature ensures equal spacing between multiple elements? A) Distribution B) Erasing C) Exporting D) Masking Answer: A) Distribution Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 3111. What is the main function of guides in design? A) To help designers align elements correctly B) To change font styles C) To reduce the file size of the design D) To increase the number of layers Answer: A) To help designers align elements comectly 12. How does the grid system help in responsive design? A) It ensures proper alignment across different screen sizes B) It makes text bold C) It locks all elements in place D) It changes colors automatically Answer: A) It ensures proper alignment across different screen sizes 13. Which UI elements benefit the n A) Headers, navigation bars, and content sections B) Only background images ©) Only call-to-action buttons D) Only hyperlinks Answer: A) Headers, navigation bars, and content sections ig the grid system? 14, What is a key benefit of using alignment in a webpage d A) It improves readability and user experience B) It makes elements move randomly C) It increases animation speed D) It reduces the color palette ‘Answer: A) It improves readability and user experience 15, What happens if elements are not properly aligned? A) The design looks unprofessional and cluttered B) The design loads faster C) Elements automatically adjust themselves D) The webpage background changes Answer: A) The design looks unprofessional and cluttered 16, What does the term “visual hierarchy” mean in UI design? A) Arranging elements to guide user attention B) Placing all elements randomly Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 32C) Using only one color in the design D) Making all text the same size Answer: A) Arranging elements to guide user attention 17. Which grid type is commonly used in web design? A) 12-column grid B) S-row grid ) Circular grid D) Star-shaped grid Answer: A) 12-column grid 18. Why is distribution important in UI design? A) It ensures elements have equal spacing B) It adds gradients to the design C) It changes text alignment automatically D) It removes unnecessary layers ‘Answer: A) It ensures elements have equal spacing 19. What tool helps align elements along a straight line? A) Guide Tool B) Fill Tool C) Gradient Tool D) Eraser Tool Answer: A) Guide Tool 20. How does grouping elements improve workflow? A) It allows designers to move and edit multiple items at once B) It removes all selected elements C) It locks all objects permanently D) It changes the text color Answer: A) It allows designers to move and edit multiple items at once Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 33Experiment 4 Web Page Design with Masking & Gradients Ai To enhance the visual appeal of a webpage by implementing masking and gradients in the design process, ensuring a professional and creative layout. Expected Outcome: © Lear how to apply gradients for smooth color transitions © Understand masking techniques for creative image and shape effects * Combine both techniques for a professional and polished webpage design. Procedure: Step 1: Open Penpot or a Design Tool * Launch Penpot, Figma, or Adobe XD. ‘* Create a new project or open an existing one. Step 2: Set Up the Artboard * Choose a canvas size (Desktop, Tablet, or Mobile). * Enable Guides and Grids for structured placement. Step 3: Appl ing Gradients * Select an element (background, buttons, text, or shapes). * Open the Fill option and choose Gradient Fill. * Select a Linear, Radial, or Angular Gradient. * Adjust colors, opacity, and direction for the desired effect. Implementing Masking Import or create an image or shape. * Place a masking shape (circle, rectangle, custom shape) over the element. * Apply the Masking Tool to clip the image to the shape ‘* Adjust transparency, layers, and positioning as needed. Combining Masking & Gradients * Apply gradient effects within a masked image or shape. Adjust blending modes for smooth transitions ‘* Use overlays and opacity adjustments for enhanced depth. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 34Step 6: Final Adjustments & Export ‘© Ensure all elements are properly aligned and visually balanced. © Export the final design as PNG, JPG, SVG, or PDF. Output: Overview Atria Institute of Te made Result: By implementing masking and gradients, the webpage design became visually appealing, dynamic, and modern, enhancing user experience and design aesthetics. Viva Questions: 1. What is the primary purpose of using gradients in web design? A) To create smooth color transitions and visual appeal B) To make the webpage load faster C) To increase the contrast of text elements D) To remove background images Answer: A) To create smooth color transitions and visual appeal Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 352. Which of the following is NOT a type of gradient? A) Linear B) Radial C) Angular D) Cubic Answer: D) Cubic 3. What does masking do in web design? ‘A) It hides parts of an image or element based on a shape or layer B) It deletes unwanted elements permanently C) It converts a webpage into text format D) It reduces the file size of an image Answer: A) It hides parts of an image or element based on a shape or layer 4. Which (ool is commonly used to apply # gradient in Penpot? A) Fill Tool B) Stroke Tool ©) Eraser Tool D) Pen Tool Answer: A) Fill Tool 5. What is the effect of applying a radial gradient? A) It creates a circular color transition from the center outward. B) It applies a solid color to an element C) It makes an image transparent D) It arranges elements in a straight line Answer: A) It creates a circular color transition from the center outward 6. What happens when you apply a mask to an image? A) Only the visible part inside the mask shape is shown B) The entize image disappears C) The colors of the image change D) The image moves automatically Answer: A) Only the visible part inside the mask shape is shown 7. Which of these elements can gradients be applied to? A) Backgrounds B) Buttons Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 36C) Text D) All of the above Answer: D) All of the above 8. What is an advantage of using masking in web desig) A) It allows for non-destructive editing B) It increases the file size of the image C) It removes elements permanently D) It changes the font style Answer: A) It allows for non-destructive editing 9. How can you adjust the intensity of a gradient? A) By changing the opacity and color stops B) By deleting the gradient layer C) By applying a mask over the gradient D) By using only grayscale colors ‘Answer: A) By changing the opacity and color stops 10. What is a common use of masking in UI/UX design? A) Creating circular profile pictures B) Removing all background colors C) Making text italic D) Adjusting the size of the browser window Answer: A) Creating circular profile pictures 11. What type of gradient smoothly blends from one color to another in a straight line? A) Linear Gradient B) Radial Gradient C) Angular Gradient D) Diamond Gradient Answer: A) Linear Gradient 12. What does a gradient overlay do? A) Adds a transparent gradient effect over an element B) Increases the brightness of the image C) Removes background color from an element D) Turns an image into grayscale Answer: A) Adds a transparent gradient effect over an element Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 3713. In web design, what is the purpose of adding a gradient background? A) To improve aesthetics and visual depth B) To speed up website performance C) To replace HTML code D) To remove all existing styles ‘Answer: A) To improve aesthetics and visual depth 14. What tool is used to apply masking in design software? A) Clipping Mask Tool B) Gradient Tool C) Selection Tool D) Eyedropper Tool Answer: A) Clipping Mask Tool 15. Which color transition method creates a gradient (hat rotates around a center point? A) Angular Gradient B) Linear Gradient C) Radial Gradient D) Shadow Effect Answer: A) Angular Gradient 16. What is the main difference between masking and cropping? A) Masking hides parts of an element without deleting, while cropping removes them permanently B) Masking deletes the unwanted areas, while cropping only hides them C) Masking reduces image quality, while cropping improves it D) There is no difference between masking and cropping Answer: A) Masking hides parts of an clement without deleting, while cropping removes them permanently 17. How can you make a gradient more dynamic? A) By adding multiple color stops B) By removing all colors C) By applying a solid fill D) By reducing the contrast Answer: A) By adding multiple color stops Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 3818. Which of the following is NOT a common use of masking? A) Creating image overlays B) Making elements transparent C) Reducing website speed D) Hiding unwanted parts of an image ‘Answer: C) Reducing website speed 19, What effect does increasing opacity in a gradient have? A) Makes the colors more solid and less transparent B) Makes the colors disappear C) Blurs the entire design D) Reduces the contrast Answer: A) Makes the colors more solid and less transparent 20. Why are gradients and masking used together in web design? A) To create visually rich and layered designs B) To delete unnecessary content C) To replace CSS styles D) To reduce the brightness of a website Answer: A) To create visually rich and layered designs Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 39Experiment 5 Designing Responsive Layouts with Constraints and Flex Layout Aim: To create a responsive layout using Constraints and Flex Layout in Penpot, ensuring that shapes and text adjust dynamically based on screen size and container resizing. Expected Outcome: © Shapes and text will automatically resize and reposition within their containers. © The design will maintain consistent alignment and spacing across different screen sizes. © The layout will be flexible and adaptable, improving responsiveness in UVUX design Procedure: Step 1: Open Penpot & Set Up the Artboard ‘© Launch Penpot and create a new project. * Select an arthoard size (e.g., Desktop, Tablet, Mobile), Step 2: Create Basic Shapes & Text ‘© Add rectangles, circles, or custom shapes to the canvas ‘© Insert text elements such as headings and descriptions. Step 3: Apply Constraints for Responsiveness Select an element and go to the Constraints Panel. © Set "Left & Right" or "Scale" constraints for shapes to adjust proportionally. © Set "Top & Bottom" constraints to keep elements aligned when resizing. Step 4: Use Flex Layout for Dynamic Adjustments © Group related shapes and text into frames. © Apply Flex Layout to the frame by enabling "Auto Layout” © Adjust padding, spacing, and alignment to distribute elements dynamically. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 40Test the Responsive Behavior Step 5 * Resize the artboard to simulate different screen sizes. © Observe how shapes and text adjust dynamically based on constraints and flex properties. Step 6: Final Adjustments & Export © Fine-tune spacing, alignment, and scaling. * Export the design as PNG, SVG, or share via Penpot’s prototype feature Output: Left Constraint |About Us Department Academies Admission Campusiite MAAC IQAC NBA “Overview set ata Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 41Flex layout ee DrCiyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 42Before Flex deleting object results in the below image After deleting an element in a flex layout, the remaining elements will adjust evenly Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 43Wrap around of Flex layout ee © Result: By using Constraints and Flex Layout, the shapes and text adapted smoothly to different sereen sizes. The layout maintained proper alignment, spacing, wrapping and proportions, making the design more responsive and visually balanced. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 44Viva questions: 1. What is the purpose of using constraints in Penpot? A) To delete elements from the design B) To ensure elements resize and reposition dynamically C) To change the color of elements D) To lock elements in place permanently Answer: B) To ensure elements resize and reposition dynamically 2. Which of the following is NOT a constraint option in Penpot? A) Left & Right B) Top & Bottom C) Center & Rotate D) Seale Answer: C) Center & Rotate 3. What happens when you apply the “Scale” constraint to an element? A) It resizes proportionally when the frame is resized B) It moves the element outside the frame C) It prevents the clement from resizing D) It rotates the element Answer: A) It resizes proportionally when the frame is resized 4. How does the Flex Layout feature help in design? ‘A) It automatically arranges and spaces elements within a frame B) It adds gradients to elements C) Tt locks elements in a fixed position D) It exports the design to a website Answer: A) It automatically arranges and spaces elements within a frame 5. What is a key benefit of using Flex Layout? A) It makes layouts automatically adjust to different screen sizes B) It prevents elements from moving C) It adds animations to elements D) It removes all padding and margins ‘Answer: A) It makes layouts automatically adjust to different screen sizes 6. In Flex Layout, what happens when you increase the padding value? A) The space inside the frame around elements increases B) The elements become smaller Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 45C) The elements disappear D) The elements overlap each other ‘Answer: A) The space inside the frame around elements increases 7. Which constraint setting ensures that an clement remains centered in a frame? A) Left & Right B) Scale C) Center D) Top & Bottom Answer: C) Center 8. When should you use Auto Layout in Penpot? A) When you want elements to resize and reflow automatically B) When you want to delete elements C) When you want to lock elements in place D) When you want to make text bold Answer: A) When you want elements to resize and reflow automatically 9. What does the "Fixed Width" setting do in a Flex L: ‘A) Keeps an element's width constant even if the frame resizes B) Allows the element to shrink when the frame is resized C) Automatically moves elements to a new position D) Changes the background color Answer: A) Keeps an element’s width constant even if the frame resizes yout? 10. What is the main advantage of using Constraints and Flex Layout together? A) It creates a fully responsive design that adjusts to screen size changes B) It locks elements so they cannot be moved C) It makes the design look more colorful D) It automatically exports the design Answer: A) It creates a fully responsive design that adjusts to screen size changes 11. Which of these layout settings is available in Penpot’s Flex Layout? A) Horizontal & Vertical direction B) 3D Rotation C) Background Animation D) Image Filters Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 46Answer: A) Horizontal & Vertical direction 12. Ifyou want text to automatically wrap inside a Flex Layout frame, which setting should you enable? A) Auto Width B) Fixed Height C) Wrap Content D) Lock Position Answer: C) Wrap Content 13. What does setting an element to “Fill Container” do in Flex Layout? A) It makes the element expand to match the size of the container B) It deletes the element C) It locks the element in place D) It makes the element transparent Answer: A) It makes the element expand to match the size of the container 14. Which of the following is a good use case for Flex Layout? A) Creating buttons that expand dynamically B) Designing a responsive navigation bar ©) Aligning text blocks automatically D) All of the above ‘Answer: D) All of the above 15, How do you align elements to the right in a Flex Layout? A) Select "Align Right" in the layout settings B) Move each element manually C) Delete the left-most elements D) Use a mask on the elements Answer: A) Select "Align Right" in the layout settings 16. What happens when you apply "Auto Height" to a text box in Penpot? A) The text box adjusts its height based on the content inside B) The text box size remains fixed C) The text becomes bold D) The text disappears Answer: A) The text box adjusts its height based on the content inside Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 4717. What is the purpose of spacing settings in Flex Layout? A) To control the distance between elements B) To change the font size C) To delete unused elements D) To change the background color Answer: A) To control the distance between elements 18. How can you make an element inside a frame seale proportionally in Penpot? A) Apply "Scale" constraints B) Set a fixed width and height C) Group it with another element D) Change the layer order Answer: A) Apply "Scale" constraints 19. Which of the following is true about constraints? A) They help make designs flexible and responsive B) They prevent elements from resizing C) They only apply to text clements D) They are used only for animations Answer: A) They help make designs flexible and responsive 20. What is the main reason for using Constraints and Flex Layout in web design? A) To create adaptable, responsive designs B) To make images look sharper C) To remove unnecessary elements D) To increase the loading speed of a webpage Answer: A) To create adaptable, responsive designs Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 48Experiment 6 Designing a Responsive Login Interface with Interactive Navigation in Penpot Aim To design a responsive login interface with interactive navigation using Penpot, ensuring an optimal user experience across different screen sizes and devices. Expected Outcome © A fully functional and visually appealing login interface. © A responsive design that adapts to different screen sizes. © Interactive navigation elements for enhanced user experience © Improved understanding of UI/UX principles and prototyping in Penpot. Procedure: Step 1: Understanding Responsive Design & Interactive Navigation © Study UV/UX principles for responsive design. © Learn about interactive navigation and its importance in usability Step 2: Setting Up the Penpot Environment © Log in to Penpot © Create a new project and set up an artboard for multiple screen sizes Step 3: Designing the Login Interface © Add a background, input fields (username & password), and a login button * Apply constraints to make elements responsive. © Use a grid system for alignment. Step 4: Implementing Interactive Navigation * Add navigation buttons (e.g., Sign Up. Forgot Password), © Create navigation links using interactive components ‘© Define hover and click interactions Step 5: Testing Responsiveness & Intera © Preview the design in different screen sizes (mobile, tablet, desktop) © Ensure smooth navigation between login, sign-up, and other screens Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 49Step 6: Refining and Exporting the Prototype * Make necessary design improvements based on feedback. © Export the prototype as PNG or JPEG. Output: Pee eer etd Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 50eter CLL ect Result A responsive and interactive login interface with smooth navigation elements designed in Penpot, ensuring an enhanced user experience across multiple devices ‘iva Questions: 1. What is the primary purpose of responsive design? a) To make a website load faster b) To ensure the interface adapts to different screen sizes c) To add more colors to the UI 4) To create animations Answer: b) To ensure the interface adapts to different screen sizes 2. Which of the following tools is used for desig a) Python b) Penpot ) SQL ayCH+ Answer: b) Penpot ing UV/UX prototypes? Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 513. What is a key feature of interac a) Static text b) Clickable elements that enhance user engagement ©) Invisible menus 4) Unlabeled buttons Answer: b) Clickable elements that enhance user engagement e navigation? 4. What does ‘constraint’ mean in UI design? a) A restriction on font usage b) A mule that controls how elements behave when resizing ©) A fixed background 4) A tool for coding animations Answer: b) A ule that controls how elements behave when resizing 5. What is the benefit of using Penpot for UI/UX desig: a) It allows collaborative and open-source prototyping b) It only works on mobile devices c) Itrequires coding knowledge d) It has a fixed layout Answer: a) It allows collaborative and open-source prototyping 6. Which type of interaction is commonly used in navigation menus? a) Click b) Hover ¢) Swipe d) All of the above Answer: d) All of the above 7. What is the primary purpose of a login interface? a) To allow users to interact with the system securely b) To add more images ¢) To replace navigation menus 4) To create pop-ups Answer: a) To allow users to interact with the system securely 8. What makes a login interface user-friendly? a) Clear input fields and easy-to-read labels b) Hidden buttons Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 52©) No password recovery option ) Complex design Answer: a) Clear input fields and easy-to-read labels 9. What feature ensures a login form works on all devices? a) Static positioning b) Responsive design ©) Fixed layout 4) Hardcoded dimensions Answer: b) Responsive design 10. Which interaction is commonly used for a "Forgot Password" link? a) Click b) Hover ©) Swipe d) None ‘Answer: a) Click 11. Which design principle ensures a layout remains consistent on different screens? a) Scalability b) Accessibility ¢) Constraints 4) Animation Answer: c) Constraints 12. Why is interactive navigation important? a) It improves user engagement and usability b) It makes the website load slower ¢) It removes the need for text d) It hides content Answer: a) It improves user engagement and usability 13. What helps users easily recognize login fields? a) Clear labels and placeholders b) Randomly placed elements ) Hidden input fields d) No text at all Answer: a) Clear labels and placeholders Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 5314. Which component is necessary in a login form? a) A submit button b) Random text ©) A floating animation 4) A video background Answer: a) A submit button 15. What is a key benefit of using grid systems in UI design? a) Improves layout alignment and responsiveness b) Makes text bold ©) Hides elements d) Removes background color Answer: a) Improves layout alignment and responsiveness 16, What does prototyping help designers do? a) Test design interactions before development b) Replace developers c) Reduce file sizes d) Eliminate colors Answer: a) Test design interactions before development 17. What is an example of micro-interaction in UI design? a) Button hover effects b) Background image change ) Page loading d) Font selection Answer: a) Button hover effects 18. How does interactive navigation improve user experience? a) It makes navigation intuitive and engaging b) It hides important content ) It slows down page performance ) It removes animations Answer: a) It makes navigation intuitive and engaging, 19. Why should login buttons be visually distinct? a) To ensure users can easily find and click them b) To blend with the background Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 54©) To confuse users d) To make them hard to use Answer: a) To ensure users can easily find and click them 20. What is the advantage of testing a prototype in multiple screen sizes? a) Ensures a responsive and adaptive user experience b) Reduces the need for UI elements c) Removes animations d) Avoids using constraints Answer: a) Ensures a responsive and adaptive user experience Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 55Experiment-7 Building an Interactive E-Commerce Checkout Process in Penpot Aim To design and prototype an interactive e-commerce checkout process in Penpot, allowing users to browse products, add them to a cart, complete checkout, and submit reviews, ensuring a smooth and engaging user experience. Expected Outcome A well-structured and visually appealing e-commerce checkout prototype. A responsive design that works on various screen sizes Smooth navigation fiom product selection to order completion. Improved user experience with interactive elements. Understanding of U/UX design principles and interaction flow in Penpot. Procedure: Step 1: Setting Up the Penpot Environment + Log in to Penpot and create a new project + Define an artboard with multiple screen sizes (desktop, tablet, mobile) Step 2: Designing the Login Page + Add input fields for email/username and password. Include a login button, "Sign Up" option, and "Forgot Password" link. Apply constraints to make elements responsive. Step 3: Browsing Products + Create a product listing page with: © Multiple product cards (image, name, price). © Filters and search bar for navigation. + Add hover effets for product selection Step 4: Clicking the Product Description «When a product is clicked, open a detailed product page with: Enlarged product image. o Description, price, and specifications. "Add to Cart" button. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 56Step 5: Adding the Product to the Cart + Create a cart page displaying: © Selected product details. co Quantity selection. 2 "Remove Item” option. + Ensure real-time updates when products are added or removed. Step 6: Proceeding to Checkout + Design a checkout page with: © Billing details form. © Shipping address. Payment method selection. © "Place Order" button. Step 7: Writing a Review + Create a review submission page that appears post-purchase + Include o Star rating system. © Text box for customer feedback. o "Submit Review" button. Step 8: Testing & Refining the Prototype + Preview the entire checkout flow in Penpot. + Ensure responsiveness and interactivity. + Make design adjustments for better user experience. General Flow Diagram: Shopping Cart and Checkout Process 2uade Browsing Products AdditemstoCart Billing nfo. Shipping InfoResult A fully functional, interactive e-commerce checkout prototype in Penpot, allowing users to browse, select, purchase, and review products seamlessly Viva questions 1. What is the primary purpose of an interactive checkout process? a) To make the website colorful b) To allow users to complete a purchase seamlessly ¢) To display more advertisements d) To increase page load time Answer: b) To allow users to complete a purchase seamlessly 2. Which UI tool is used to design interactive prototypes? a) MySQL. b) Python Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 58c) Penpot d) Java Answer: c) Penpot 3. What key feature improves user experience in a checkout process? a) Interactive navigation Db) Static elements ¢) Hidden buttons ) Slow page transitions Answer: a) Interactive navigation 4. What is the first step in an e-commerce checkout process? a) Checkout b) Login c) Writing a review 4d) Submitting payment Answer: b) Login 5. Why should a product page be detailed? a) To confuse the users b) To provide clear product information and encourage purchase c) To add unnecessary animations 4) To make the page load slower Answer: b) To provide clear product information and eacourage purchase 6. What makes a shopping cart interactive? a) Ability to add and remove items dynamically b) Displaying only images ) Having a fixed layout 4) No interaction with the user Answer: a) Ability to add and remove items dynamically 7. What UI component is essential for checkout? a) Payment details form b) Background image ©) Social media links ) Random text Answer: a) Payment details form Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 598. What helps users navigate from one page to another smoothly? a) Interactive buttons and links b) Static images ¢) Hidden navigation bar d) Complex transitions Answer: a) Interactive buttons and links 9. What makes a product page engaging? a) High-quality images and descriptions b) Lack of information ) Small fonts and cluttered layout d) No images Answer: a) High-quality images and descriptions 10. What is the purpose of a review section? a) To allow users to share their feedback b) To block customers from commenting c) To increase page load time d) To display random advertisements Answer: a) To allow users to share their feedback 11. Why should checkout pages be minimalistic? a) To reduce distractions and enhance usability b) To confuse the user ¢) To add unnecessary animations d) To increase complexity Answer: a) To reduce distractions and enhance usability 12. What is a "Call-to-Action" (CTA) button? a) A button encouraging users to take an action b) A decorative element c) A link with no function d) A background image Answer: a) A button encouraging users to take an action 13. What does responsiveness in UI mean? a) The design adapts to different screen sizes b) The layout remains fixed Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 60) The website has no interaction d) The content is hidden Answer: a) The design adapts to different screen sizes 14. Which element ensures users can edit their cart? a) "Remove Item" button b) Background color cc) Random text d) Popup ads Answer: a) "Remove Item" button 15. What makes an e-commerce prototype interactive? a) Clickable elements and smooth transitions b) Static images ©) No interactive features 4d) Lack of responsiveness Answer: a) Clickable elements and smooth transitions 16. What is the final step in a checkout process? a) Payment confirmation b) Logging out c) Reloading the page 4) Closing the browser Answer: a) Payment confirmation 17. How should reviews be structured? a) Star rating and user comments b) Just an empty box c) Unverified opinions d) Random text Answer: a) Star rating and user comments 18. What does an interactive "Add to Cart" button do? a) Adds the selected item to the cart dynamically b) Closes the website c) Removes all items ) Makes the cart invisible Answer: a) Adds the selected item to the cart dynamically Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 6119. Why should checkout forms be simple? a) To reduce friction and increase conversions, b) To make checkout confusing ¢) To add unnecessary fields 4) To slow down the process Answer: a) To reduce friction and increase conversions 20. What should a confirmation page include? a) Order details and payment confirmation b) Only background images ) A random survey d) Unclear messages Answer: a) Order details and payment confirmation Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 62Core Differences Between Figma & Penpot PIE Crenet formant) Colerts jaborati Performance ies iwenett nen Integrations Poets ny Dae oad ened apps ies ‘Web-based (seli-hosted option available) Proprietary (owned by Adobe) Open-source Free plan available, paid plans for teams Completely free Real-time collaboration with Real-time collaboration with commenting commenting Slightly heavier on performance Open standard (SVG-based) Extensive plugin ecosystem | Limited plugins but growing Advanced animations, smart | Basic interactions, lacks transitions advanced animations Built-in tools, integrates with | Exports clean SVG & CSS for DevOps developers Unique Features in Figma (Not in Penpot) @ Advanced Prototyping & Smart Animations — Figma offers interactive components, smart animations, and auto-animate transitions, making it easier to create realistic prototypes. Extensive Plugin Ecosystem — Figma has a vast collection of phugins for icons, illustrations, wireframing, accessibility checks, and more, enhancing productivity @ Auto Layout — Figma's auto layout makes responsive design easier by allowing components to dynamically adjust based on content size. Design Tokens & Variables — Figma recently introduced design tokens (color, spacing, typography) that help maintain consistency in large design systems. ©@ Community Resources — Figma has a massive community where you can access free UI kits, templates, and design files Better Developer Handoff — Figma provides code snippets for CSS, iOS, and Android, making it easier for developers to implement designs Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 63Embedded Comments & Version History — Figma allows designers and developers to leave comments directly on designs and track version history Unique Features in Penpot (Not in Figma) Open-Source & Self-Hosting — Penpot is open-source, and you can host it on your own servers for privacy and security, unlike Figma, which is cloud- dependent. Native SVG Support — Penpot uses SVG as its core file format, making it easier for developers working with scalable vector graphics. Flexible Layout Grid — Unlike Figma, Penpot offers flexible and advanced grid settings, making it useful for precise layout control Better Integration with Dev Tools — Since it's based on open standards, Penpot integrates more naturally with web development workflows. No Paywall, Fully Free — While Figma has paid plans for team collaboration, Penpot is entirely free with no restrictions. Works Without an Account — You can start designing in Penpot without creating an account, unlike Figma, which requires sign-up. Which One Is More Useful for a UI/UX Designer? Use Figma If You need a feature-rich, industry-standard tool for U/UX design. You work with a large team that requires seamless collaboration ‘You need advanced prototyping and animations. You rely on third-party plugins and integrations. Use Penpot If. ‘You prefer open-source and free tools. You work with developers who use SVG-based workflows, ‘You need self-hosting for privacy/security reasons ‘You want basic UI design without a steep learning curve. Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 64Final Verdict: + If you're working in a professional UI/UX team, Figma is the better choice due to its rich features and community support + If you're exploring UI/UX for open-source or personal projects, Penpot is a great altemative, FIGMA ‘What is Figma? Figma is a free, collaborative, web-based designing tool that is used by various personalities like designers, product managers, and — developers to create wireframes, prototypes, or aesthetic designs. It provides easy-to-use components for sketching the graphics on its workspace. This tool is available on all types of platforms and one can share their work with others by using the direct feature in the tool without having to export it manually How to Download Figma? You can start with Figma by creating an account at https://www-figma.com/. Once you are done, you can either open the start page on the browser or you can install an executable on the system. How to use Figma Interface? ‘After you log in, you end up on the start page. Here you create a design file and start working on the workspace that is created for you. Now, let's first understand the interface of the start page. Start Page 1. Account Section: This display your user account showing your credentials which you entered during your account creation process. 2. Side Panel: This panel shows design files in draft form or the teams that you are included. 3. Workspace: You can open all the projects on this space 4, Button: Button to create or import new design file Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 65When you create or open a design file you will land a workspace which looks like the following Working Tab It consists of the following: 1. Tools Bar: This consists of tools like shapes, creation tool , text , arrow, hand , message box , main menu. That support the working of the tool. You can use it to create shapes like rectangle circle ete. Creation tool is for drawing irregular shapes, arrow for moving 2. Layers panel: The graphics you create are added in the form of layers and the hierarchy of these layers are shown on this panel. You can all change the hierarchy or group them 3. Canvas: The actual drawing happens here. 4. Properties Panel: This helps you to manipulate the objects selected on the tools bar. For example, after drawing a shape you can modify the size or color of that shape in this panel Dr.Ciyamala Kushbu S (Assistant Professor/ISE,CMRIT) Page 66