1.

ABSTRACT

This report presents the outcomes and experiences gained during my internship in UI/UX
design with a focus on frontend development. The internship involved working closely with
design and development teams to create user-centered digital interfaces that enhance user
experience and satisfaction. Throughout the internship, I was involved in various stages of
the design process, including user research, wireframing, prototyping, and usability testing,
ensuring that the designs were not only visually appealing but also functional and accessible.

In addition to design tasks, I was actively engaged in frontend development, where I

translated design mockups into responsive, interactive web pages using HTML, CSS, and
JavaScript. I learned how to bridge the gap between design and development, ensuring a
seamless integration of visual elements with backend functionalities. The internship provided
hands-on experience with tools and frameworks such as Figma & Adobe XD which are
essential for modern web development.

This report highlights the key projects I worked on, the methodologies employed, and the
challenges encountered during the internship. It also reflects on the skills acquired, the
importance of collaboration in a multidisciplinary team, and the overall contribution of this
experience to my professional growth in the field of UI/UX design and frontend
development.

Organization Information:

Stark Institutions is a startup dedicated to providing project-based training in various

programming languages and technologies. As a subsidiary of Torquenstark, a Technology
company, Stark Institution specializes in offering practical training on computer technologies.
Our mission is to empower students and professionals by equipping them with the skills and
knowledge needed to excel in the tech industry. We offer a range of courses in programming
languages including C, C++, Java, Python, and C#, covering both fundamental concepts and
advanced topics. Our web development training includes UI UX, front-end and back-end
technologies such as HTML, CSS, JavaScript, React, Node.js, and various databases.
Emphasizing hands-on experience through real-world projects, our programs ensure that
students gain practical skills that are directly applicable in the industry. Additionally, we
provide internship opportunities and specialized placement training programs to bridge the
gap between academic learning and professional employment. Our expert trainers are
available around the clock to provide guidance and support, and upon successful completion
of our courses, students receive certificates to enhance their career prospects. We also host
events, webinars, and workshops featuring industry experts to keep our students updated with
the latest trends and technologies.

Key Parts of the Report:

1. UI (User Interface):
• User Interface (UI) refers to the visual elements and interactive components of
a digital product, such as buttons, icons, and menus, that users interact with. It
focuses on the design's aesthetic appeal, ensuring the interface is visually
engaging, intuitive, and easy to navigate, enhancing overall user experience.

2. UX (User Experience):

• User Experience (UX) focuses on creating products that provide meaningful

and relevant experiences to users. It involves understanding user needs,
behaviors, and pain points to design intuitive and effective solutions.
• Prototyping in Figma plays a crucial role in UX design. Figma allows
designers to create interactive prototypes that simulate the real user experience
without writing any code.

3. Front-End Development:
• We learned to create responsive and user-friendly interfaces using HTML,
CSS, and JavaScript. The design principles aimed at ensuring a seamless user
experience, with particular emphasis on the aesthetics and functionality of the
website.
 2. SYSTEM ANALYSIS

Existing System:

The current Netflix homepage is a well-known and widely used interface that offers users
easy access to a vast selection of movies and TV shows. Designed with a sleek and modern
look, the homepage is user-friendly and intuitive, allowing users to navigate the site with
ease. The interface predominantly features a dark theme with striking red accents, which
aligns perfectly with Netflix's brand. Content is arranged in horizontal carousels, making it
simple for users to browse through different categories. Essential elements like the search bar,
user profile, and navigation menu are placed in easy-to-reach areas, contributing to the
overall smooth experience. However, despite these strengths, there are a few areas where the
current system could be improved. For instance, users on slower networks might experience
delays in content loading, and there’s room for better accessibility features to accommodate
users with disabilities. Technologically, the existing system is built using a combination of
HTML, CSS, and modern JavaScript frameworks like React.js, which help in maintaining a
responsive design. Yet, this design can face challenges on older devices or outdated browsers,
sometimes leading to a less than optimal user experience.

Proposed System:

The proposed system is a full recreation of the Netflix homepage, with a focus on making
both visual and functional improvements. First, the color scheme and typography have been
slightly updated to give the homepage a fresher, more vibrant look, while still maintaining the
essence of the Netflix brand. The layout has been reorganized to create a smoother flow of
content, making it easier for users to find what they’re looking for. Categories are now more
clearly defined, and the spacing between elements has been optimized for better readability.
Accessibility has been a major consideration in this redesign, with improvements like higher
contrast for better visibility, larger fonts, and full keyboard navigation support to make the
site more user-friendly for everyone. On the technical side, the front-end development uses
the latest web technologies, including HTML5, CSS3, and JavaScript ES6. These updates
ensure that the site looks great and functions smoothly across all devices, from smartphones
to desktops. Performance has also been significantly improved; by implementing techniques
like lazy loading for images and optimizing JavaScript, the homepage now loads faster, even
on slower connections. In addition to these enhancements, subtle animations have been added
to make the user experience more engaging, without overwhelming the user. The proposed
design is based on user feedback, ensuring that it meets the needs of a wide range of users.
Overall, this recreation of the Netflix homepage aims to deliver a more responsive,
accessible, and visually appealing experience that better serves the needs of today’s users.
 3. TECHNOLOGY

4.1 HTML (Hypertext Markup Language)

HTML, or Hypertext Markup Language, is the standard markup language used to create and
structure web pages. It defines the content of a web page by using a set of tags and attributes
that describes how the content should be displayed. HTML5, the latest version, introduced
several new features that enhance the functionality and improve user experience. Semantic
elements such as <header>, <footer>, <nav>, and <article> provide clearer structure and meaning
to web content, making it more accessible to assistive technologies and search engines.
Additionally, HTML5 supports native multimedia elements (<audio> and <video>) and canvas
for rendering graphics, enabling richer and more interactive web applications.

4.2 CSS (Cascading Style Sheet)

CSS, or Cascading Style Sheets, complements HTML by defining the presentation and layout
of web pages. It allows developers to control the appearance of HTML elements, including
fonts, colors, spacing, and positioning. CSS3, the latest version, introduced powerful features
like Flexbox and Grid Layout, which simplify the creation of responsive and flexible layouts.
Flexbox enables efficient alignment and distribution of elements within a container, while
Grid Layout allows for complex grid structures, making it easier to design complex web
interfaces. CSS also supports animations, transitions, and transformations, enhancing the
interactivity and visual appeal of web pages without relying on JavaScript.

4.3 JS (Javascript)

JavaScript is a versatile programming language primarily used for adding dynamic behavior
to web pages. As a client-side scripting language, it runs in the browser and allows
developers to manipulate the Document Object Model (DOM) dynamically. JavaScript
enables interactive features such as form validation, sliders, carousels, and interactive maps.
Modern JavaScript frameworks and libraries like React.js, Vue.js, and AngularJS simplify
complex UI development by offering reusable components and efficient state management.
These frameworks facilitate the creation of single-page applications (SPAs) that provide a
seamless user experience by updating content dynamically without reloading the entire page.
 4. SOFTWARE REQUIREMENTS

• Figma: A web-based design tool that can run on any modern web browser like
Google Chrome, Mozilla Firefox, or Safari. It offers collaborative features and
powerful design tools for creating wireframes, prototypes, and high-fidelity designs.
• Design Plugins: Figma supports various plugins for tasks like icon management,
color palettes, and prototyping enhancements. Examples include “Unsplash” for free
images and “Stark” for accessibility checks.
• Communication Tools: Slack or Microsoft Teams for team communication, and
project management tools like Jira or Trello for tracking design tasks.
• Cloud Storage: Google Drive, Dropbox, or Figma’s cloud storage for storing and
sharing design files.

Front-End Development:

• Code Editor: Visual Studio Code, Sublime Text, or Atom are popular choices,
offering syntax highlighting, code snippets, and Git integration.
• Version Control: Git and GitHub or GitLab for source code management and
collaboration.
• Package Managers: npm or Yarn for managing dependencies and packages.
• Frameworks/Libraries: React.js or Angular for building dynamic and responsive
UIs, along with Bootstrap or Tailwind CSS for styling.
• Browser DevTools: Chrome DevTools or Firefox Developer Tools for debugging
and optimizing code performance.
• Testing Tools: Jest, Mocha, or Cypress for unit testing and end-to-end testing of the
front-end code.
• Command Line Interface (CLI): Terminal (on macOS or Linux) or Command
Prompt/PowerShell (on Windows) for running scripts and managing development
tasks.
 5. HARDWARE REQUIREMENTS

UI UX Designing:

• Computer: A modern laptop or desktop with at least 8GB of RAM (16GB

recommended) to handle large design files and multiple layers. A multi-core
processor (Intel i5 or higher, or equivalent) for smooth performance.
• Display: A high-resolution monitor (1080p or higher) for accurate color
representation and detailed design work. A dual-monitor setup can be beneficial for
multitasking.
• Graphics Tablet (Optional): A Wacom tablet or similar device for more precise
control in sketching and detailing designs.
• Reliable Internet Connection: Since Figma is web-based, a stable and fast internet
connection is crucial for real-time collaboration and file syncing

Frontend Development:

• Computer: A development machine with at least 16GB of RAM (32GB

recommended for complex projects) and a multi-core processor (Intel i7 or higher, or
equivalent) to handle multiple processes like running a local server, compiling code,
and testing.
• Storage: SSD with at least 256GB of free space for faster read/write speeds,
especially when handling large codebases and dependencies.
• Graphics Card: While not always necessary, a dedicated GPU can help with
rendering complex animations or working with WebGL.
• Display: A high-resolution monitor, preferably with a wide color gamut, is essential
for accurately rendering the design and ensuring pixel-perfect development.
• Keyboard and Mouse: A comfortable, ergonomic keyboard and mouse are important
for long coding sessions.
• Reliable Internet Connection: Necessary for downloading libraries, collaborating
with teams, and deploying code.
 6. ACTIVITIES DURING INTERNSHIP PERIOD

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

22.07.24 Monday Orientation – Overview of the Internship

23.07.24 Tuesday Design Thinking

Week 1

24.07.24 Wednesday Design Basics & Principles

25.07.24 Thursday Typography & Colour Codes

26.07.24 Friday Introduction to UI & UX

27.07.24 Saturday Practice Session

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

29.07.24 Monday Exploring Figma’s Interface

30.07.24 Tuesday Designing UI for Netflix

Week 2

31.07.24 Wednesday Prototyping

01.08.24 Thursday Responsive Designing

02.08.24 Friday Career as UI UX Designer

03.08.24 Saturday Exercise on Prototyping

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

05.08.24 Monday Introduction to HTML

06.08.24 Tuesday HTML Basic Elements

Week 3

07.08.24 Wednesday HTML Forms and Tables

08.08.24 Thursday Introduction to CSS

09.08.24 Friday CSS Styling and Layout

10.08.24 Saturday Advanced CSS Techniques

 DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

12.08.24 Monday Introduction to JavaScript

13.08.24 Tuesday JavaScript Basics

14.08.24 Wednesday JavaScript Functions and Objects

Week 4

19.08.24 Monday JavaScript DOM Manipulation

20.08.24 Tuesday Introduction to Node.js

21.08.24 Wednesday Node.js Modules and NPM

Building a Server with Node.js

22.08.24 Thursday
 7. ABOUT THE PROJECT

UI UX Project Title: Netflix UI Redesign.

Description: The Netflix UI project aimed to redesign and improve the platform's user
interface, focusing on enhancing user experience, accessibility, and cross-platform
optimization. The objectives included making the interface more intuitive and visually
appealing, improving accessibility features, and optimizing navigation across devices. The
project involved extensive research, including user surveys and focus groups, to identify pain
points in the existing UI. Based on the findings, the team developed wireframes and
prototypes, collaborated with developers for implementation, and conducted usability testing
before launching the new UI in phases.

Key features of the redesign included simplified navigation, personalized content

recommendations, responsive design, and enhanced accessibility options like screen reader
compatibility and customizable font sizes. The project led to a 15% increase in user
engagement and a 10% reduction in user churn, with positive feedback on the improved
accessibility features. Challenges included ensuring cross-platform consistency and balancing
innovation with familiarity. The project's success is evident in the increased user satisfaction
and engagement, and it is recommended to continue updating the UI based on user feedback,
expand accessibility features, and monitor performance for further improvements.
Frontend Project Title: To Do Application.

Description: The To-Do List Application is a front-end project that enables users to
efficiently manage their daily tasks. Built with HTML for structure, CSS for styling, and
JavaScript for functionality, the application offers a clean and intuitive interface where users
can add, remove, and mark tasks as complete. The responsive design ensures that the
application adapts smoothly to different devices, providing a consistent user experience
whether on a desktop, tablet, or smartphone.

This project highlights key front-end development skills, particularly in creating interactive
web applications. JavaScript plays a crucial role in making the interface dynamic, allowing
for real-time updates and user interactions without needing to reload the page. The
application not only demonstrates fundamental concepts of web development but also
showcases the practical use of front-end technologies in building a functional tool for
everyday use.

Key Features:

• Task Management: Users can add new tasks to the list, remove tasks, and mark them
as completed.
• Responsive Design: The application is designed to be fully responsive, ensuring a
seamless experience across different devices and screen sizes.
• Interactive UI: The use of JavaScript enhances the user interface by providing
dynamic interactions, such as real-time task updates and visual feedback for
completed tasks.
 • Storage Capability: The application can be further extended to store tasks using
browser-based storage options like localStorage.

Technologies Used:

• HTML: Used for structuring the application's content, including task lists, buttons,
and input fields.
• CSS: Applied to style the application, ensuring an aesthetically pleasing and
consistent look across different devices.
• JavaScript: Enables the application's functionality, including task creation, deletion,
and completion, making the interface dynamic and interactive.
 8. CODING & TESTING

HOMEPAGE:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo List</title>
<link rel="stylesheet" href="Styles/home.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

</head>
<body>
<header><p>TODO <span>LIST</span></p>
<div class="filter">
<button id="filter-btn"><span>Filter </span><img src="Images/filter.png" alt=""></button>
</div>
</header>
<main>
<div class="tasks-container">
</div>
</main>
<footer>
<a href="newTask.html">
<div class="add-icon">
<img src="Images/plus-solid.svg" alt="" />
</div>
</a>
</footer>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="Scripts/home.js" type="module"></script>
</body>
</html>

NEW TASK:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Task</title>
<link rel="stylesheet" href="Styles/newTask.css" />
</head>
<body>
 <header>TODO <span>LIST</span></header>
<main>
<form>
<div class="new-task-container">
<div class="title-div">
<label for="title">TITLE</label>
<input type="text" placeholder="TODO TITLE" id="title" required/>
</div>
<div class="description-div">
<label for="description">DESCRIPTION</label>
<textarea
name="description"
id="description"
placeholder="TODO DESCRIPTION"
rows="10"
cols="47" required
></textarea>
</div>
<div class="date-div">
<input type="date" id="date">
</div>
<div class="buttons-div">
<button class="add-btn">ADD</button>
<button class="cancel-btn">CANCEL</button>
</div>
</div>
</form>
</main>
<script src="Scripts/newTask.js" type="module"></script>
</body>
</html>

UPDATE TASK:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Update Task</title>
<link rel="stylesheet" href="Styles/updateTask.css" />
</head>
<body>
<header>TODO <span>LIST</span></header>
<main>
<div class="update-task-container">
<div class="left-side">
<p>FINISH</p>
 <div class="tick-box">
<img src="Images/check-solid-black.svg" alt="" />
</div>
</div>
<div class="right-side">
<div class="title-div">
<label for="title">TITLE</label>
<input type="text" placeholder="TODO TITLE" id="title" />
</div>
<div class="description-div">
<label for="description">DESCRIPTION</label>
<textarea
name="description"
id="description"
placeholder="TODO DESCRIPTION" rows="10" cols="37"
></textarea>
</div>
<div class="date-div">
<input type="date" id="date">
</div>
<div class="buttons-div">
<button class="update-btn">Update</button>
<button class="cancel-btn">CANCEL</button>
</div>
</div>
</div>
</main>
<script src="Scripts/updateTask.js" type="module"></script>
</body>
</html>
9. SCREENSHOTS
 10. CONCLUSION

The UI/UX design and front-end development internship at Stark Institution has been an
invaluable journey, blending theoretical knowledge with hands-on practical experience.
Throughout this internship, we immersed ourselves in both design principles and front-end
technologies, gaining proficiency in tools and frameworks such as Figma, Adobe XD,
HTML, CSS, JavaScript, and React.

The projects we undertook not only honed our design and coding skills but also taught us
essential software development practices such as version control with Git, debugging, and
responsive design implementation. Collaborating in a team setting improved our
communication and problem-solving abilities, preparing us for real-world design and
development challenges. This internship has been a transformative experience, offering a
holistic view on leadership, strategic thinking, and organizational skills, setting a strong
foundation for career opportunities in the design and development fields.

This internship has solidified our understanding of UI/UX design and front-end development,
equipping us with the confidence to tackle complex projects. We are now better prepared to
contribute effectively to any design and development team and are eager to continue our
growth in the dynamic fields of UI/UX design and front-end development.

In conclusion, the comprehensive training and support provided by Stark Institution have
been instrumental in our professional development, and we are grateful for the opportunity to
learn from such experienced mentors. This experience has undoubtedly laid a strong
foundation for our future careers in technology and design.
 11. BIBLOGRAPHY

HTML & CSS:

• "Introduction to HTML" - W3Schools. Available at:

https://www.w3schools.com/html/html_intro.asp
• "CSS Basics" - Mozilla Developer Network (MDN). Available at:
https://developer.mozilla.org/en-
US/docs/Learn/Getting_started_with_the_web/CSS_basics

JavaScript:

• "JavaScript Guide" - Mozilla Developer Network (MDN). Available at:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• "JavaScript Tutorial" - W3Schools. Available at: https://www.w3schools.com/js/

UI/UX Design:

• "UI Design Basics" - Nielsen Norman Group. Available at:

https://www.nngroup.com/articles/ui-design-basics/
• "User Experience (UX) Basics" - Mozilla Developer Network (MDN). Available at:
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

Front-End Development:

• "Front-End Web Development: The Big Nerd Ranch Guide" - Amazon.

Available at: https://www.amazon.com/Front-End-Web-Development-Nerd-
Ranch/dp/0134433947
• "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and
Web Graphics" - O'Reilly Media. Available at:
https://www.oreilly.com/library/view/learning-web-design/9781491960196/