Scribd
Upload
9 views4 pages

Exp-2 HCI

The document outlines a practical assignment for students in the MCA(AIML) program, focusing on designing buttons and a feedback/login page while implementing hover states and enhancing readability through typography. It details tasks such as creating visually appealing buttons, ensuring clear font selection, and maintaining a font hierarchy for better user experience. Additionally, it lists software tools for design and prototyping, learning outcomes related to UI design and typography, and an evaluation grid for assessing performance.

Uploaded by

rajlakshmipriya21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views4 pages

Exp-2 HCI

The document outlines a practical assignment for students in the MCA(AIML) program, focusing on designing buttons and a feedback/login page while implementing hover states and enhancing readability through typography. It details tasks such as creating visually appealing buttons, ensuring clear font selection, and maintaining a font hierarchy for better user experience. Additionally, it lists software tools for design and prototyping, learning outcomes related to UI design and typography, and an evaluation grid for assessing performance.

Uploaded by

rajlakshmipriya21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Worksheet 2

Student Name: Rajlakshmi Priya UID: 23MCI10170


Branch: MCA(AIML) Section/Group: (A)
Semester: 4th Date of Performance: 20/01/2025
Subject Name: Human Computer Interface Subject Code: 23CAH-771

1. Aim/Overview of the practical:


a) Design buttons and create some feedback or login page. Also implement the hovering states using
prototyping.
b) Use clear, legible fonts for headings, body text, and messages. Create a hierarchy with font sizes to
enhance readability.

2. Task to be done:

 Here is a point-wise breakdown of the tasks described in the question:

a) Design Buttons and Feedback/Login Page

 Create Buttons

 Design visually appealing buttons for actions like "Submit," "Cancel," or "Login."
 Use a consistent color scheme and add distinct styles for primary and secondary actions.

 Design a Feedback or Login Page

 Create a feedback form with fields like name, email, and message, or a login page with
username and password fields.
 Include input field labels and placeholders for clarity.
 Add a "Submit" button for feedback or a "Login" button for authentication.

 Hovering States Using Prototyping

 Implement hover states for interactive elements like buttons and input fields.
 Use color changes, shadows, or slight animations to indicate hover states.
 Preview interactions using prototyping tools like Figma, Adobe XD, or Sketch.

b) Enhance Readability with Typography


 Use Clear, Legible Fonts

 Select fonts suitable for headings, body text, and messages (e.g., Sans-serif fonts like Roboto,
Open Sans, or Arial).
 Ensure fonts are easy to read across devices and screen sizes.

 Establish a Font Hierarchy

 Define font sizes for different text types (e.g., headings, subheadings, body text).

 Example:

 Headings: 24–32 px
 Subheadings: 18–22 px
 Body Text: 14–16 px

 Apply Consistent Styling

 Use bold for headings, medium weight for subheadings, and regular for body text.
 Add line spacing and padding for better readability.

 Check Accessibility

 Ensure the text has sufficient contrast against the background for users with visual impairments.
 Use tools to validate accessibility standards (e.g., WCAG guidelines

3. Software/Tools used:
 Design and Prototyping
 Figma (Preferred)
 For designing UI components like buttons and pages.
 Supports prototyping for hover states and interactions.
 Adobe XD
 Similar to Figma, it allows designing and prototyping with ease.
 Sketch
 Ideal for creating UI designs and exporting assets.
 Limited to macOS but very powerful for design tasks.
 InVision
 Useful for prototyping interactions and sharing designs with stakeholders.
 Font Selection and Accessibility
 Google Fonts
 For selecting and importing web-friendly fonts.
 Contrast Checker Tools
 Tools like WebAIM Contrast Checker or Stark Plugin in Figma to ensure readability
and accessibility.
 Animation Tools (Optional)
 Principle or Framer
 For advanced animations and hover effects.
 CSS (For Developers)
 Use CSS to create hover effects when moving to a development phase.

4. Practical implementation and steps to be done (with screenshots):

5. Learning outcomes (What I have learnt):


 Design Buttons and Feedback/Login Page
 UI Design Skills
 Learn how to design visually appealing and functional buttons for web or app interfaces.
 Understand how to align components like input fields, buttons, and links for a clean
layout.
 Prototyping Interaction States
 Gain knowledge of creating interactive prototypes with hover and click states for buttons
and inputs.
 Develop an understanding of transitions and animations for enhanced user experience.
 Consistency in Design
 Learn to maintain consistency in button styles, colors, and typography across the page.
 Understand the importance of aligning design elements for a cohesive look.

 Typography and Readability


 Font Selection and Application
 Understand how to choose fonts that are clear, legible, and suited for various purposes
like headings and body text.
 Font Hierarchy and Readability
 Learn to create a hierarchy of font sizes and weights to guide users' attention effectively.
 Develop skills to adjust line spacing, padding, and text alignment for better readability.
 Accessibility and Usability
 Understand the importance of sufficient color contrast for users with visual impairments.
 Learn to test designs for accessibility and usability compliance (e.g., using WCAG
standards).
 Typography as a Design Element
 Learn how typography enhances the overall design aesthetics and communicates
information effectively.

Evaluation Grid:

Sr. No. Parameters Marks Obtained Maximum Marks


1. Demonstration and Performance 5
(Pre Lab Quiz)
2. Worksheet 10
3. Post Lab Quiz 5

You might also like