UIUX Lab Manual

Table of Contents

    UIUX Lab Manual

    Experiment-01

    Aim:

    • Create About Me presentation. Create Fresher Resume

    Steps: About Me Presentation

    1. Login to Canva: Go to Canva and log in or create an account if you don’t have one.
    2. Search for Presentation Templates: Browse through the different templates and select one that suits your style.
    3. Edit the template according to your need and insert slides such as Personal information, education, skills, experience, projects, achievements etc
    4. Finalise the presentation: Adjust colors, fonts, and layouts to match your personal style. Add relevant visuals like icons or images to make it more engaging.

    Fresher Resume

    1. Search for Resume template: Browse through the different templates and select one that suits your style.
    2. Replace placeholder text with your name, contact information, and professional summary.
    3. Replace the template's education section with your details. Include your degree, institution, and graduation year.
    4. In the skills section, list your key skills (technical, languages, or soft skills).
    5. If you have any internships, part-time jobs, or volunteering experience, list them here.
    6. Add a section to showcase any academic or personal projects.
    7. List any awards or notable accomplishments from your academic career or extracurricular activities.
    8. Click Download to save your resume as a PDF or image.

    Conclusion In conclusion, using Canva to create an About Me presentation, fresher resume is an efficient and visually appealing process. By customizing templates with personal and professional details, you can produce polished, professional materials quickly and effectively.

    MCQs

    1. B
    2. D
    3. B
    4. C
    5. D

    Experiment-02

    Aim: Design marketing poster using Canva. Set up a mobile UI template using Canva

    Steps: Marketing Poster

    1. Login to Canva
    2. Search for poster template. Click on the template to start customizing it.
    3. Customize Template
    4. Add brand elements: Like company logo, company colors, fonts etc
    5. Upload images, shapes, line and frames to make more visually appealing
    6. Include essential contact details such as a website URL, phone number, social media handles, or QR codes for digital engagement.
    7. Click Download to download

    Mobile UI Template

    1. Log in to Canva and click Create a design.
    2. Search for Mobile App UI templates or start from scratch.
    3. Customize the header and navigation with icons and text.
    4. Add UI elements like buttons, text fields, and cards from Elements.
    5. Insert icons and relevant graphics to enhance the design.
    6. Set a suitable background and choose colors for your theme.
    7. Organize content areas using grids and frames for balance.
    8. Add readable typography (14-18pt for text, 24-36pt for headers).
    9. Review and adjust the layout for usability and aesthetics.
    10. Download or share the design for digital use or collaboration.

    Conclusion In conclusion, creating a marketing poster and a mobile UI template using Canva allows for effective and visually appealing designs tailored to your specific needs. With its user-friendly interface and customizable templates, Canva empowers you to convey your message and enhance user experience effortlessly.

    MCQs

    1. B
    2. B
    3. A
    4. A
    5. D

    Experiment-03

    Aim: Research and analysis responsive design principles. Setup a responsive layout template in Figma

    Steps:

    1. Log in to Figma and create a New File.
    2. Use the Frame Tool (F) to create frames for different screen sizes (mobile, tablet, desktop).
    3. Design the layout within one frame, utilizing Layout Grid for structure.
    4. Set Constraints on elements to define their behavior during resizing.
    5. Apply Auto Layout to dynamic content areas for automatic adjustments.
    6. Create responsive components and use Variants for different states.
    7. Use the Prototype tab to preview interactivity and responsiveness.
    8. Test the design by resizing the preview window to simulate various devices.
    9. Save your work and use the Share button for collaboration or exporting.

    Conclusion In conclusion, setting up a responsive layout template in Figma enables you to create adaptable designs that function seamlessly across various devices. By utilizing features like constraints, Auto Layout, and Layout Grids, you can ensure a user-friendly experience that meets the needs of different screen sizes. This streamlined approach enhances your design workflow and promotes collaboration.

    MCQs

    1. B
    2. D
    3. B
    4. A
    5. B

    Experiment-04

    Aim: Design a basic layout for the app. Apply UI style guides to the basic layout

    Steps:

    1. Log in to Figma and create a New File.
    2. Use the Frame Tool (F) to create a frame for your app layout, selecting an appropriate size for your target device.
    3. Design the basic layout by blocking out sections such as the header, content area, sidebar, and footer using shapes.
    4. Add UI components like buttons, text fields, and icons, ensuring they are placed according to usability best practices.
    5. Define a color palette that fits your app’s branding and apply colors using the Fill option.
    6. Select typography for headings and body text, adjusting sizes and styles for readability.
    7. Apply the UI style guide by ensuring consistent styles for buttons, input fields, and icons.
    8. Enable a Layout Grid for consistent spacing and alignment, and set constraints for responsive behavior.
    9. Review and iterate on your layout for usability and visual appeal, making adjustments as needed.
    10. Switch to the Prototype tab to create links for simulating user interactions if applicable.
    11. Export or save your design as needed for further development or sharing.

    Conclusion By following these steps, you can effectively design a basic app layout in Figma while applying UI style guides to ensure consistency and usability. This approach will help create a polished and professional user interface for your app.

    MCQs

    1. B
    2. B
    3. B
    4. A
    5. B

    Experiment-05

    Aim: Create wireflow diagrams for key user interactions in figma. Define user journey and flows.

    Steps:

    1. Log in to Figma and create a New File.
    2. Define user journeys by identifying key interactions and outlining user goals and steps.
    3. Use the Frame Tool (F) to set up frames for each key screen in the user journey.
    4. Sketch wireframes for each screen, using basic shapes to represent UI components.
    5. Establish user flows by drawing arrows to connect frames, indicating navigation paths.
    6. Add annotations to describe actions or events that trigger transitions between screens.
    7. Group and organize frames and elements for better clarity and structure.
    8. Use components for common UI elements to ensure consistency.
    9. Review and iterate on the wireflow diagrams, incorporating feedback from team members.
    10. Export or share your wireflow diagram as an image or PDF for documentation.

    Conclusion: By following these steps, you can effectively create wireflow diagrams in Figma that illustrate key user interactions, define user journeys, and visualize flows. This approach enhances understanding of user behavior and helps in designing a more intuitive user experience.

    MCQs

    1. B
    2. B
    3. B
    4. A
    5. A

    Experiment-06

    Aim: Design navigation elements, develop interactive prototypes for navigation

    Steps:

    1. Log in to Figma and create a New File.
    2. Use the Frame Tool (F) to create frames for your app screens.
    3. Design navigation elements:
      1. Create a header with a logo and menu items.
      2. Design a sidebar for additional navigation options.
      3. Add a footer with essential links.
    4. Apply styles to navigation elements according to your app’s style guide.
    5. Create multiple screens representing different sections of your app.
    6. Prototype interactions:
      1. Switch to the Prototype tab.
      2. Link navigation elements to the corresponding frames.
    7. Add transitions to define animations between screens (e.g., Slide In, Fade).
    8. Preview your prototype by entering presentation mode and interacting with it.
    9. Gather feedback by sharing the prototype with team members or stakeholders.
    10. Iterate and refine your design based on feedback.
    11. Export or document your work for future reference.

    Conclusion: By following these steps, you can effectively design navigation elements and develop interactive prototypes in Figma, ensuring a seamless user experience for your application. This process enhances usability and helps validate design choices through interactive testing.

    MCQs

    1. B
    2. D
    3. B
    4. A
    5. A

    Experiment-07

    Aim: Add content and imagery to the layout. Optimize content for different screen size

    Steps:

    1. Log in to Figma and open your project file.
    2. Select the frame where you want to add content and imagery.
    3. Add text content using the Text Tool (T) and ensure readability.
    4. Insert images by dragging and dropping or using the Place Image option.
    5. Use grids and alignment to maintain consistent spacing and organization.
    6. Optimize content for different screen sizes:
      1. Use relative units for responsive text.
      2. Ensure images scale properly within their frames.
      3. Create multiple frames for various screen sizes.
      4. Hide/show elements as needed for smaller screens.
    7. Preview and test responsiveness by entering presentation mode.
    8. Gather feedback from team members or stakeholders.
    9. Final review to ensure well-organized content and imagery.
    10. Export your design as needed (e.g., PNG, JPG, PDF) or save for development handoff.

    Conclusion: By following these steps, you can effectively add content and imagery to your layout while optimizing for different screen sizes. This approach ensures a responsive design that enhances user experience across various devices.

    MCQs

    1. A
    2. A
    3. A
    4. B
    5. D

    Experiment-08

    Aim: Test the layout across multiple devices. Gather Feedback and refine design

    Steps:

    1. Log in to Figma and open your project file.
    2. Set up device frames for different sizes (mobile, tablet, desktop) using the Frame Tool (F).
    3. Preview your design by clicking the Play button to enter presentation mode and navigate through your design.
    4. Use Device Preview or share the prototype link to test on real devices.
    5. Gather feedback by sharing the prototype with team members, stakeholders, or potential users.
    6. Conduct usability testing sessions to observe user interactions with the layout.
    7. Analyze feedback to identify common themes or issues that need addressing.
    8. Refine your design based on feedback, improving navigation, content layout, and fixing issues.
    9. Test again across multiple devices to ensure improvements are effective.
    10. Document changes made and the rationale behind them for future reference.
    11. Finalize the design for development handoff or export once satisfied with refinements.

    Conclusion: By following these steps, you can effectively test your layout across multiple devices, gather valuable feedback, and refine your design to enhance usability and visual appeal. This iterative process ensures that your final design meets user needs and performs well on various platforms.

    MCQs

    1. A
    2. A
    3. A
    4. B
    5. D

    Experiment-09

    Aim: Develop a design system for the app, integrate the design system into the layout

    Steps:

    1. Research and define goals for the design system based on user needs and project requirements.
    2. Analyze existing components to identify strengths and areas for improvement.
    3. Create a style guide that includes:
      1. Color Palette, Typography, Iconography
    4. Develop UI components for reusable elements such as:
      1. Buttons, Input fields, Navigation elements, Cards, modals, and alerts
    5. Establish layout guidelines for spacing, grids, and alignment.
    6. Document usage guidelines for each component and style element, including examples and best practices.
    7. Create a component library in Figma using the Components feature, organizing elements into categories.
    8. Integrate the design system into the layout by replacing existing elements with components from the design system.
    9. Test the integrated design for responsiveness and usability across different screens.
    10. Gather feedback from team members and stakeholders to make necessary adjustments.
    11. Iterate and update the design system based on user feedback and evolving needs.
    12. Publish and maintain the design system in a centralized repository for easy access and collaboration.

    Conclusion: By following these steps, you can develop a comprehensive design system for your app and effectively integrate it into your layout. This process enhances consistency, improves collaboration among team members, and streamlines the design workflow.

    MCQs

    1. A
    2. A
    3. D
    4. D
    5. A

    Experiment-10

    Aim: Prepare a final prototype and design presentation, conduct a usability review and final adjustments

    Steps:

    1. Prepare the Final Prototype:
      • Consolidate all finalized UI components.
      • Create and verify navigation flows.
      • Test interactivity of all elements.
      • Refine visuals for consistency.
      • Export the prototype for sharing.
    2. Design Presentation:
      • Structure the presentation with an outline (introduction, design process, design elements, prototype demo, usability findings).
      • Create visual aids (slides with screenshots, mockups, and animations).
      • Rehearse the presentation for clarity and confidence.
    3. Conduct Usability Review:
      • Select diverse participants representing the target audience.
      • Set specific review goals (e.g., testing navigation, clarity).
      • Prepare tasks for users to complete in the prototype.
      • Observe user interactions and take notes.
      • Collect feedback from participants post-review.
    4. Make Final Adjustments:
      • Analyze usability feedback for common issues.
      • Prioritize adjustments based on impact.
      • Implement necessary changes to the prototype.
      • Conduct a final review to ensure all changes are integrated.
      • Finalize documentation to reflect the updated prototype.

    Conclusion: By following these steps, you can effectively prepare a final prototype, create an engaging design presentation, conduct a thorough usability review, and make necessary final adjustments to enhance your design. This process ensures that your final product is user-centered, functional, and visually appealing.

    MCQs

    1. A
    2. A
    3. A
    4. A
    5. D

    Made By SOU Student for SOU Students