Q1: Identify problems in five interfaces in overall navigation, look and feel of the interface, relevance of the information. Record all findings. (Design tool) ANSWER: 1. E - commerce website interface Navigation problems include too many categories, unclear menu structure, and poor filtering options, making it difficult for users to find products. In terms of look and feel, inconsistent button colors, cluttered layout, and poor spacing reduce visual clarity. Regarding relevance, excessive promotional banners and unrelated product recommendations distract users from important product information. 2. Mobile banking app interface Navigation issues arise when important features like balance check or money transfer are hidden inside multiple submenus. Lack of clear back navigation also confuses users. The look and feel may suffer from small font sizes and low contrast text, affecting readability. Relevance issues include too many push notifications and unnecessary dashboard widgets that do not support the primary user tasks. 3. Educational portal interface Navigation problems include unclear course hierarchy and poorly organized content, making it hard for students to locate materials. The look and feel may appear outdated with inconsistent typography and design elements. In terms of relevance, important information such as assignment deadlines may be difficult to find, while less important announcements are displayed prominently. 4. Hospital website interface Navigation can be problematic if appointment booking is not clearly visible on the homepage and menus are overly complex. The look and feel may lack responsiveness on mobile devices and may include excessive medical jargon that is hard to understand. Relevance issues include outdated articles and missing information about doctor availability. 5. Social media application interface Navigation problems occur when icons are not clearly labeled and privacy settings are difficult to access. The look and feel may be negatively affected by too many advertisements and inconsistent themes. Relevance issues include algorithm - driven feeds showing unrelated content and excessive suggested posts, reducing meaningful user engagement. Overall, common UI/UX problems include poor information architecture, lack of consistency, weak visual hierarchy, and information overload. A well - designed interface should ensure simplicity, consistency, accessibility, and relevance of content to improve user experience. Q2: Design a responsive webpage layout for an application using HTML and CSS or Figma CODE: ParaIIax Website body { margin: 0; font - family: Arial, Helvetica, sans - serif; /* Parallax Sections */ .paraIIax - 1, .paraIIax - 2, .paraIIax - 3 { min - height: 100vh; display: flex; align - items: center; justify - content: center; background - size: cover; background - position: center; background - attachment: fixed; .paraIIax - 1 { background - image: url(’img1.jpg’); } .paraIIax - 2 { background - image: url(’img2.jpg’); } .paraIIax - 3 { background - image: url(’img3.jpg’); } .parallax - inner { padding: 10% 0; background: rgba(0, 0, 0, 0.6); width: 100%; text - align: center; color: white; /* Content Section */ .content { background: lightblue; padding: 50px 0; h2 ( color: darkblue; p i color: black;

ParaIIax Websites/h1>

Section One

This section explains how parallax scrolling works. The background image stays fixed while the content moves, creating a smooth visual effect.

This design keeps the layout simple while adding depth and a modern feel. •w••

ExpIore Nature

Section Two

Parallax effects improve user experience by adding motion and structure between sections. •›p• When combined with clean typography and subtle colors, the website looks elegant and professional.

Thank You

OUTPUT: Explore Nature SèctÏon One Th1é sgction’expIainS hom. parallàx scroIIing.works. ”fie bacÉground image síays fiXed while 'the' content moves, creaarjg a smòoth visuaI'etiecI. This design keeps - the’Iayout‘àimpïe‘ while adding depth and a modèm feel. Thank You Q3: Design a webpage exploring various UI interaction patterns CODE: GIowing Login body { margin: 0; height: 100vh; display: flex; justify - content: center; align - items: center; background: black; font - family: Arial, sans - serif; /* Login Box */ .login - box ( width: 300px; padding: 40px; background: #111; border - radius: 10px; text - align: center; box - shadow: 0 0 20px cyan; /* Heading “/ .login - box h2 ( color: cyan; margin - bottom: 30px; text - shadow: 0 0 10px cyan; /* Input Fields */ .login - box input { width: 100%; padding: 10px; margin: 15px 0; border: none; border - bottom: 2px solid cyan; background: transparent; color: white; outline: none; /* Glowing Button ’/ .login - box button ( width: 100%; padding: 12px; margin - top: 20px; background: cyan; border: none; border - radius: 25px; font - size: 16px; cursor: pointer; box - shadow: 0 0 15px cyan; transition: 0.3s; .login - box button:hover ( box - shadow: 0 0 30px cyan;

Login

OUTPUT: Q4: Develop an interface with proper UI style guides Q5: Design and develop a wireflow diagram for an application using open - source software To develop \ vireflou' diagram for application using Sigma. Aïgorttbæ: • Go to Ligma menu option and select plugm. o Searcli tlie required libraries for your application, al lost we have selected the two libraries“ sucli as Wireh;imes and Flow kit. o Wirefraine librory having niany options of's'1ii h a mi‹cted Îwo tools such as c - Alors' kit by is graphie Wire flots' niap kit by Audrey KovnÎev » We have drsivn the user flow diagram by using flow' kii too mere l’e iised tluee elenients only, such as start. process and flux' line » Then wc made the flo»' of exeBiiiion ïo our application in step by step process • After that eve hgve converied ihe user flow diagram IUÎO WÎfflfrafïlt5 by using «'ira flow inap kit Result: Tlius the program was executed successfiilly. Q6: Explore various open - source collaborative interface platforms Aim: To explore various open - source collaborative interface platforms. Algorithm / Procedure: The following applications are used in the field for open communication and collaboration: 1. Penpot: Penpot is a free and fully open - source design and prototyping platform built for UI/UX teams. It supports real - time collaboration and works directly in the browser, allowing designers and developers to work together efficiently. 2. OpenProject: OpenProject is an open - source project management software that allows teams to collaborate from project initiation to project closure. 3. OpenPass: OpenPass is a free and open - source collaboration suite that helps teams stay connected and work together easily. 4. Group Office: Group Office is a free and open - source collaboration software that allows sharing of projects, calendars, files, and emails with teammates and clients. 5. Collabtive: Collabtive is a free and open - source web - based project management software written using PHP and JavaScript. 6. Cyn.in: Cyn.in is a free and open - source collaborative software that helps teams communicate faster and share knowledge through different forms of digital content. 7. eXo Platform: eXo Platform is an open - source collaborative tool that offers a free demo but is not completely free collaboration software. Result: Thus, various open - source collaborative interface platforms were explored and studied successfully. Q7: Hands - on design thinking process for a new product (Linking Pages). Steps to Create and Link Page 2 to Page 1 using Start Button • Create Page 1 and Page 2 in your project. • On Page 1, add a Start button. • Open Page 2 and copy its link (URL). • Go back to Page 1. • Select the Start button. • Press Ctrl + Shift + U • Paste the copied Page 2 link. • Apply/Save the changes. • Run the project and click the Start button to navigate to Page 2. •a fig mc com des grill Ee bsL3 evoke e nJ L vs vs r›o/U n t t ed'nod° td — 4 top — fat — 1 erirc /CoMJiFz14 u a M a p s @ £ o n k - n - O Q Menu Card Q8: Suggest and brainstorm features for the proposed product Suggesting the Brainstorming feature for proposed product: 1. Open browser and go to figma.com. 2. Log in with your account. ' 4. Rename the board (e.g., Product Brainstorming). 5. Use sticky notes and shapes to add ideas. 6. Click Share and invite team members (set to Can edit). 7. Team members open the same file on different desktops. 8. All users brainstorm together in real time. 9. Select the best ideas and save the file. Outcome: Multiple users can collaborate on one FigJam board simultaneously.

الإبلاغ عن إساءة

تفاصيل ال-PDF

معلومات الاتصال

UIUX