INDUSTRIAL TRAINING REPORT

Complete Figma Megacourse : UI / UX Design Beginner to Expert

By:
Pratham Mir Dutraj (Reg:- 202200521)

In partial fulfilment of requirements

for the award of degree in
Bachelor of Technology
in Information Technology (2024)

DEPARTMENT OF INFORMATION TECHNOLOGY

SIKKIM MANIPAL INSTITUTE OF TECHNOLOGY
(A constituent college of Sikkim Manipal University)
MAJITAR, RANGPO, EAST SIKKIM – 737136

Pg : 1
COURSE INFORMATION SHEET
Complete Figma Megacourse : UI / UX
Title of the Course Design Beginner to Expert

Course Instructors Creativity Unleashed

Course Duration
13 Sections , 103 lecture videos ,41.5 hours

Platform Used for the course Udemy

Softwares and Applications Figma , Canva

Pg : 2
COURSE CERTIFICATE

Pg : 3
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to Sikkim Manipal Institute of Technology and the IT
department for giving us the chance to take this valuable course, which has provided me with deep
insights into the UI/UX field. Your support has been essential in making this learning experience
possible. The resources and infrastructure you made available allowed us to fully immerse ourselves
in the material, and for that, we are truly thankful.

I also want to extend a special thank you to Creativity Unleashed, the professional designers behind
the "Complete Figma Megacourse: UI/UX Design Beginner to Expert" course. Your collective
knowledge and commitment have given us invaluable understanding of the UI/UX domain. The
clear explanations of complex concepts made the learning process both enjoyable and effective. The
hands-on exercises you provided enabled us to apply theoretical knowledge to practical scenarios,
greatly boosting our confidence in using Figma. I am immensely grateful for the extensive
knowledge and practical skills you have shared with us.

Signature

Pratham Mir Dutraj

(REG NO: 202200521)

Pg : 4
 ABSTRACT
User Interface (UI) and User Experience (UX) are key concepts in digital design, shaping how
people interact with digital products. UI involves elements like layouts, colors, and fonts to
define the visual style of an interface. In contrast, UX focuses on the overall experience,
ensuring that a product is intuitive, accessible, and enjoyable to use.

Although UI and UX are closely related, they serve distinct purposes. UI is primarily
concerned with a product’s aesthetic and functional elements, while UX is dedicated to
meeting user needs through seamless and meaningful interactions.

Essential components of UI/UX projects include wireframes, prototypes, and user flows,
which help designers optimize the user's journey. Tools like Figma and Canva are now
essential for developing projects such as landing pages. Figma is popular for its collaboration
capabilities, while Canva is valued for its ease of use.

As more businesses recognize the importance of engaging digital experiences, the demand for
skilled UI/UX designers continues to rise, highlighting the growing significance of creating
seamless and appealing user experiences.

Pg : 5
 CONTENTS
SL. NO. TITLE PAGE NO.

1. About Figma Software 7

UI ( User Interface) and

2. 8
UX ( User Experience )

Difference between UI (
3. 9
User Interface ) and UX (
User Experience ) :

4.
Main Parts of UI / UX 10-13
Design Process

5. Important featuress in 14
UI / UX Design

6.
Project 15-17

7.
Conclusion 18

Pg : 6
About Figma Software :
Figma is a free, browser-based tool designed for web and UI design that facilitates team collaboration on
interactive prototypes. It’s a vector-based program tailored for screen design and is widely used by designers,
product managers, writers, and developers.

As a flexible web design tool, Figma supports real-time collaboration in creating interactive UI prototypes.
Users can manipulate text, adjust colors, modify images, and add features like hovering, scrolling, and
animations to their designs.
Its web-based nature ensures accessibility from any browser, allowing users to work from virtually any
location.

Fig : Figma Software Icon Fig : Figma Software Interface

Other Alternative Platform for UI / UX Design:

CANVA :
Canva is a widely-used graphic design platform that enables users to craft eye-catching visual content for
various needs, including webpage designs, website wireframes, site blueprints, and landing pages. It also
supports the creation of social media graphics, presentations, and UI/UX designs.

Fig : Canva Platform Icon

Pg : 7
 UI ( User Interface) :
Definition: An interactive digital product's visual element that enables user interaction with the system is
called the user interface (UI). It includes every element that users see and interact with, including menus,
screens, buttons, and icons. The goal of user interface (UI) design is to provide a visually appealing and
user-friendly layout that encourages user interaction and productive use of the product.

Key Features :
Components: Consists of graphic components including menus, buttons, icons, and layouts.
Goal : The is to give consumers a way to engage and manage a product.
Style: Colors, font, space, and artwork are all considered elements.
Functionality: Pays attention to how responsive and easy to use the interface's components are.
Appearance: Ensures a consistent appearance and feel throughout the product's many
components.
Accessibility: Made to be used by individuals with different capacities and impairments.

Fig : Key Difference between UI and UX

UX ( User Experience ) :
Definition :The process of developing products that offer customers a satisfying and relevant experience
is known as user experience (UX) design. It covers every facet of product design and development,
including packing, installation, setup, operation, usability, and performance in addition to branding and
installation. Another name for UX design is user-centered design.

Key Features :
Usability: The product should be simple to use, have an obvious function, and be straightforward to
understand.
Consistency: A well-designed user interface should offer a constant experience so that, after consumers
become accustomed to it, they can utilize the product with ease.
Findability: The product and its contents should be simple to locate so that users may effectively complete
their tasks.
Accessibility: The product should be simple to use for both regular users and those with special needs, such
as those who require text-to-speech or colorblind choices.

Pg : 8
Difference between UI ( User Interface ) and
UX ( User Experience ) :

Aspect UX Design UI Design

UX Design focuses on creating a feel and experience that UI Design concentrates on visual aesthetics and elements with the aim of
Look vs. Feel addresses emotions and satisfaction achieving visual appeal.

In UX Design, wireframes and prototypes are created to UI Design Finalizing visual designs for user engagement often involves
Design vs. Prototyping define user flow and functionality working with mockups and graphics.

The focus of UX Design is on ensuring a seamless and

UI Design focuses on individual elements and interactions by perfecting
High Level vs. Details meaningful user journey by emphasizing the holistic
details for aesthetics as well, as functionality.
experience

Research involves conducting user analysis, testing, and Implementation on the hand focuses on putting design choices into action
Research and Implementation developing strategies. such, as selecting fonts, colors, and layouts.

A user-centered approach prioritizes understanding user

User-centered or Interface- On the other hand, an interface-centered approach focuses on creating
needs, behaviors, and emotions throughout the design
centered. visually appealing and user-friendly interfaces.
process.

Problem-Solving vs. Visual Problem-solving aims to address user issues and alleviate
Visual appeal focuses more on creating pleasing designs.
Appeal their pain points

Fig : A brief difference between UI and UX

Pg : 9
MAIN PARTS OF UI/UX DESIGN PROCESS

1.User Research :
Definition : Understanding user needs, behaviors, and motivations using a variety of observational and
analytical techniques is the process of conducting user research in UI/UX (User Interface/User
Experience). It facilitates the creation of goods that offer satisfying user experiences. In order to ensure
that the finished product is user-centered and lives up to user expectations, the objective is to collect
insights that guide the design process.

Key Aspects of User Research in UI/UX:

1. Understanding Users: Determine who the target audience is and learn about their objectives, habits,
and problems.

2. Methods of Research:
Interviews: Speaking with users face-to-face to obtain qualitative data.
Surveys: Questionnaires used to gather information from a wider audience.
Examining consumers' interactions with the product to find problems is known as usability testing.
Comparing two iterations of a product to see which works better is known as A/B testing.
Field studies: Keeping an eye on consumers in their natural settings to learn how they actually
utilize the product.
Persona: creation is the process of creating fictitious characters to represent various user types
using research data.

3. Data Analysis: Combining research results to detect trends and revelations that will direct the design
process.
4. Iterative Design: Prototyping using the study results and refining according to user feedback
5. Validating Designs: Ensuring that designs satisfy user needs and enhance the user experience as a
whole requires ongoing testing and improvement.

Fig : A brief methods of User Research

Pg : 10
2. Wire Framing :
Definition : Designers use a process called wireframing to create overviews of interactive goods in order to
determine the format and flow of potential design solutions.

How to Use Figma for Wireframing:

1. To create a new design file, go to Figma. Start by creating a new file and registering for Figma.
2. Make an artboard.
3. Make headers and navigation bars.
4. Add the Fundamental Design Components.
5. Align and Style.
6. Make Connections and Transitions
7. Complete and run a test.

Fig : Wire Framing Example done in Figma

3. Prototyping :
Definition: A popular method for assessing concepts early in the product development process is
prototyping.
How to Use Figma for Prototyping Steps:

1. Make animations and interactions.

2. Go to the sidebar and select the Prototype tab.
3. Include exchanges.
4. Configure the interaction specifics.
5. Put some animation on it.
6. Check out the animation you made.

Fig : Prototyping Example done in Figma

Pg : 11
 4. Usability Testing :
Definition : In UI/UX, usability testing is a technique used to assess how simple it is for consumers to engage
with a product, like a website or app. It entails seeing actual people utilize the interface to do tasks. Finding
any usability problems—like unclear navigation or hard-to-find features—and enhancing the user experience
as a whole are the objectives.

Usability Testing Methods :

1. Description of Exploratory Usability Testing: This type of testing looks for novel problems or possibilities by
watching people engage with a product in the absence of preset tasks.
Significance: Beneficial in revealing unforeseen issues or acquiring knowledge about users' overall interactions
and experiences with the product.

2. Comparative Usability Testing: This method compares two or more designs or products to see which is more
user-friendly.
Significance: Assists in discerning the advantages and disadvantages of various design options or rivals.

3. Remote Usability Testing: In this method, users evaluate the product remotely, either in the presence or
absence of a facilitator.
Importance: Provides insights into how the product functions in various scenarios by capturing natural user
behavior in real-world settings.

4. Description of Moderated Usability Testing: A facilitator leads users through tasks and observes while
posing questions.
Description: A facilitator watches users' behavior, asks questions, and leads them through tasks. You can
complete it online or in person.
Relevance: Offers in-depth analysis and prompt response on user interactions and problems.

5. Unrestricted Testing of Usability

Description: Without direct supervision, users execute activities on their own, typically via an online platform.
Importance: Cost-effective and scalable, enabling you to get input from a bigger audience.

Pg : 12
5. Ideation:
Definition :To address design challenges and produce creative solutions, ideation in UI/UX design refers to
the process of developing and brainstorming ideas.

Categories:
Creating a wide variety of ideas is known as brainstorming.
Mind mapping: illustrating the relationships between concepts.
Drawing: Producing basic illustrations to enhance concepts.

6. Personas:
Definition: "Personas" in UI/UX design are made-up characters that are designed to represent various user
types based on user research.

Categories:
Primary: The primary audience.
Secondary: Users are not as active.
Users who are not the intended audience are a negative.

7. User Interface (UI) Design:

Definition:This term refers to the process of creating the visual components of a website, such as buttons,
screens, and other visual elements, as well as their overall feel and interactivity.

Categories:
Wireframes: Simple designs for layout.
Mockups are intricate visual concepts.
Prototypes are interactive product models.

Pg : 13
IMPORTANT FEATURES IN UI/ UX DESIGN:
Wireframing: Visualizing the framework of a digital application is known as wireframing, and it is an
essential phase in the interface design process. A wireframe is a layout that indicates which essential
pages' interface elements will be.

Information architecture: This ability enables designers to arrange and arrange data in a way that is more
user-friendly and intuitive.

Design: Realizing concepts from the earlier phases is the goal of the design process. The layout and
instructions should be easy to use and the style should be clean and uncomplicated.

Validation or testing: Usability testing is the process of testing designs on actual users in order to get data
regarding the user experience.

Collaboration: For UI/UX designers to accomplish a shared objective, good teamwork is essential.

Pg : 14
 PROJECT
With an emphasis on UI/UX concepts, I demonstrate in this report the design and development of a product
website made with Figma and Canva. The website was made to be adaptable, aesthetically pleasing, and easy
to use on different devices. Canva was used to generate, animate, and integrate visual assets and effects that
improved the overall look, while Figma was primarily used to craft the user interface, taking advantage of its
prototyping and collaboration features.

Link to the Landing page : https://uiuxprathammirdutraj.my.canva.site/

Website page : 1

1. Visual Hierarchy: The website uses bold, huge font for headings and smaller text for
descriptions to create a clear visual hierarchy.
2. Consistency: Brand identification is strengthened and a seamless user experience is provided
by the website's consistent usage of colors, fonts, and imagery.

Website page : 2
3. Affordance: The buttons and other design components have evident affordances that indicate
where users can click to engage with the website.
4. White Space (Negative Space): By minimizing clutter and providing white space, the website
enhances readability and lets the content breathe.
Pg : 15
 Website page : 3

5. Navigation: Users' cognitive strain is lessened when navigating the site's straightforward,
linear layout from one slide to the next.
6. Responsiveness: The layout is visually adaptable to many screen sizes, a crucial component of
responsive design, even though it was made in Canva, which often concentrates on static design.

Website page : 4

7. Typography: To ensure a seamless reading experience, different content kinds, such as

headers, subheadings, and body text, can be easily distinguished from one another by using
distinctive typefaces.
8. Call to Action (CTA): Positioned strategically and with great visibility, CTAs direct visitors
toward desired behaviors, including purchasing or exploring additional material.

Pg : 16
 Website page : 5

9. User-Centered Design: By using language and design cues that appeal to the intended users, the
material is customized to the target audience and increases engagement.
10. Minimalism: The website follows a minimalist design philosophy, emphasizing only the most
important interactions and content to keep users focused and minimize distractions.

Pg : 17
 CONCLUSION :
In conclusion, in today's tech-driven world, UI/UX design ideas should not only be incorporated into
digital products, but also implemented successfully. By facilitating digital interactions that are easy to
use, efficient, and pleasurable, a well-executed UI/UX design guarantees user pleasure and increases user
engagement and retention. UI/UX design is becoming more and more important in the IT industry as
the need for seamless digital experiences grows, spurring competition and innovation.

Businesses are starting to realize how important UI/UX is, and how it affects customer happiness and
brand loyalty. According to this growth trajectory, UI/UX design will continue to lead digital
innovation and influence how people engage with technology going forward.

Professionals with UI/UX expertise will be in great demand as the industry develops and will have the
chance to impact how goods are created and used around the world. The goal of UI/UX in the future is
to drive trends rather than follow them, making sure that user experience remains a key component of
developing digital products.

Pg : 18