CHAPTER 1

INTRODUCTION

An internship is a professional learning experience that offers meaningful, practical

work related to a student’s field of study or career interest. An internship gives a student the
opportunity for career exploration and development, and to learn new skills. It offers the
opportunity to bring new ideas and energy into the workspace, develop talent and potentially
build a pipeline for future employment. A quality internship:

 Consists of a part-time or full-time work schedule that includes no more than 25%
clerical or administrative duties.
 Provides a clear job/project description for the work experience.
 Orients the student to the organization, its culture and proposed work assignment.
 Helps the student develop and achieve learning goals.

ABOUT ORGANIZATION

Scode Software Solutions is a software development team located in Cuddalore.

Expect top quality work with awesome support. That the organization are committed to
supply robust, cost effective and future services, enabling our customers to urge high returns
on their IT investments including corporate governance designed for greater agility and
market focus during this globally competitive environment. It should provide a different
kinds of methods to develop a web application.

 Web Development
Scode Software Solutions provides the best web development services. The
organization provide the latest and artistic web development tools to develop our
websites, which is user friendly to our customers.
 iOS Application
Scode Software Solutions has an iOS application development team of skilled
professionals. The organization offer custom, offshore iOS application development
services and deliver software for its clients.

1
 Hybrid Development
Scode Software Solutions is a professional web & mobile app development
service provider. The organization committed to offering end to finish hybrid application
development solutions.
 Android Application
Scode Software Solutions design and develop captivating mobile applications that
are compatible with all the existing Android devices.

 UI/UX Design

UI Design is a User Interface (UI) that plays an important role in the overall
experience it offers its users.

UX design remains one of the core services offered by Scode Software Solutions. The
organization leading user experience design agency specializing in web and mobile apps.

2
 CHAPTER 2

SYSTEM SPECIFICATIONS

SYSTEM CONFIGURATIONS

The software requirement specification can produce at the culmination of the analysis
task. The function and performance allocated to software as part of system are refined by
established a complete information description, a detailed functional description, a
representation of system behavior, and indication of performance and design constrain,
appropriate validate criteria, and other information pertinent to requirements.

2.1 SOFTWARE REQUIREMENTS

 Operating system : Windows 10, macOS 10.15(Catalina), or later.

 Browser : Google chrome (recommended)
 Tool : Figma & Canva

2.2 HARDWARE REQUIREMENTS

 System : Intel i3 or i5
 RAM : 4GB
 Hard drive : 100 GB
 Mouse : Logitech.

3
 CHAPTER 3

TECHNOLOGIES

In digital design, user interface (UI) refers to the interactivity, look, and feel of a
product screen or web page, while user experience (UX) covers a user’s overall experience
with the product or website. Read on to find out what it takes to design engaging UI, and
create a memorable UX. An using Figma tool to provide a better UI / UX.

3.1 FIGMA TOOL

Figma is a free web-based design tool that allows you to create and collaborate on
high-fidelity, interactive prototypes. It’s also a vector design tool, meaning you can create
detailed illustrations without losing quality.

Figma allows you to quickly create mockups of web and mobile apps using a simple
drag-and-drop interface. The tool is especially suited for UI designers, because you can go
from low-fidelity wireframes to responsive, clickable prototypes without writing any code.

In Figma, you can also create:

 Icons
 Logos
 Apps
 Websites
 Presentations

Figma boasts many of the same features as other popular design tools like Sketch—such as
icons, grids, and layout guides. But there are a few unique benefits that make Figma stand
out.

 Notably, Figma is the only design tool that works on any platform; including Mac,
Windows, and Chrome books. This makes it highly accessible—particularly among
larger tech teams with different people using different devices.
 Figma is also known for its collaboration features. Designs can seamlessly be shared,
reviewed, and collaborated on (even for non-Figma users), empowering frictionless
workflows among design teams. To learn more, check out our roundup of the best UI
design tools.

4
3.1.1 LEARNING OBJECTIVE

 Find our way around Figma’s interface

 Experiment with some of the key functions
 Learn important keyboard shortcuts
 Figure out how to control the interface (zooming etc.)
 Create Frames, Rectangles, and Text layers
 Use Arrange and Align commands

3.1.2 LOOK AROUND THE FIGMA INTERFACE

Let’s look at the four main areas that make up the Figma interface:.

 Menu bar: At the top of the screen is where all of the basic features live: Main menu,
region tools, shape tools, drawing tools, resources, comments, and sharing.
 Layers: On the left-hand side of the screen are the layers, where all your elements are
listed. You can organize these elements by frame, group them, and rename them.
 Canvas: The canvas is the main space in the middle where you’ll view, create, and
design your interfaces.
 Inspector: The inspector sits on the right-hand side, offering detailed information and
settings for whatever object or element is selected.

5
3.1.3 ADVANTAGES

 Working Together Simultaneously

 Web development teams often consist of multiple individuals collaborating

on the same website project. Working on it separately can be quite
disruptive, as team members need to switch roles, causing distractions and
delays in their respective areas of expertise.

 Figma allows the team to collaborate in real-time, making the process

easier. This feature makes the job more transparent because each team
member can see the modifications done by their teammate. As it is a
cloud-based website creation program, everything is available on the
screen.

 A feature like this is especially relevant with the continuing Covid

pandemic forcing remote work.

 Figma is a Powerful Design Tool for Word Press Blogs

This app is a fantastic addition to the design tools available for constructing
WordPress sites. Of course, expert Word Press development services are required to
transform your design into a fully working website. It was designed to turn the design
into code in the best possible way: web developers can inspect, copy, and export CSS
and design assets straight from design files, reducing uncertainty. Also, it combines
many of the key features of other tools into a single solution to provide a more
efficient and powerful workflow. This makes it an excellent tool for creating
corporate websites, particularly those for large corporations.

 Easy to Share Files

If it is utilised as the online UX designing tool, data sharing will take quite
some time. There is no need to go over every interaction you have had with the client.
Everything can be sorted with just a few clicks. If developers need to quickly transmit
some files to their clients, this might be a huge relief. If they utilize the conventional
method, they would have to waste about an hour, but it can finish it in just 5 minutes.

 A Complete Solution for Creating Design Prototypes Layers

On the left-hand side of the screen are the layers, where all your elements are
listed. You can organize these elements by frame, group them, and rename them.

6
  Cloud-Based Website Designing Tool

UX/UI Designers find this app very appealing because of its functionality,
which allows them to access the necessary data from any internet-connected
computer. It is not necessary to physically copy or download a large file in order to
move it to another machine. Since the entire process is automated, all web designers
consider it to be effective. This program is accessible on all popular operating systems
and web browsers, and it also has an app that runs it without any issues.

 Figma Mirror

While creating a website, web developers need to self-evaluate their work.

They can never have a design that is 100% flawless, thus there will always be room
for improvement in some areas. This feature will aid the designers in doing their best
analysis of their work. They will be able to determine what has to be improved, and
also talk to the client about it.

3.2 CANVA TOOL

 Canva is a graphic design platform that provides tools for creating social
media graphics, presentations, promotional merchandise and websites. Launched in
Australia in 2013, the service offers design tools that are easy-to-use for individuals
and companies. Its offerings include templates for presentations, posters, and social
media content, as well as functionalities for photo and video editing.
 The platform uses a drag-and-drop interface intended to simplify the design process.
Canva operates on a freemium model and has expanded its services over the years to
include features like a print product platform and a video editing tool.
 Canva makes designing beautiful creative assets easy for everyone. From social media
images, videos and gifs to posters, websites, booklets, multimedia presentations, and
heaps more, Canva is an invaluable tool for helping you level up your design skills,
even if you're just getting started.

7
 CHAPTER 4

TASK COMPLETION

Figma, a popular design tool, offers an excellent platform for creating stunning and
user-friendly applications. To develop the web application using the following steps.

Step 1: Research and Ideation

Before diving into the design process, it is crucial to conduct thorough research to
understand the target audience, their needs, and pain points. Analyze existing apps to identify
successful design patterns and areas for improvement. Next, brainstorm and ideate the features
you want to include in your app.

Step 2: Create Wireframes

Once you have a clear idea of the app’s features and user flow, start creating
wireframes. Wireframes are basic, low-fidelity representations of the app’s layout and
structure. Use simple shapes and placeholders to outline the key elements and navigation
paths. Figma offers an intuitive interface for wireframing, allowing you to easily drag and
drop elements to build your initial app layout.

Step 3: Design UI Elements

With the wireframes in place, it’s time to work on the visual design of your app. Begin
by defining a color scheme that aligns with your brand and evokes a user-friendly vibe.
Consider using vibrant colors for accents and ensuring sufficient contrast for readability. Next,
create custom icons and illustrations that add personality and visual appeal to your app.
Figma’s vector editing tools and libraries make it convenient to design and reuse these
elements throughout your project.

Step 4: Create Interactive Prototypes

One of Figma’s powerful features is its ability to create interactive prototypes. Utilize
this functionality to turn your static designs into clickable, interactive mockups. This will help
you visualize the app’s user flow and identify potential usability issues early in the design
process. Link the different screens together, set up tap and drag gestures, and add transitions to
simulate the app’s functionality. Test the prototype to ensure a smooth user experience.

8
Step 5: Collaborate and Gather Feedback

Figma allows for real-time collaboration, making it easy to share your designs with
team members and stakeholders. Gather feedback from them to understand their perspectives
and suggestions for improvement. Collaboration is instrumental in refining your travel app’s
design and making it more user-friendly.

Step 6: Finalize the Design

Based on the feedback and testing results, make necessary revisions to your app’s
design. Pay attention to details such as typography, spacing, and consistency to ensure a
polished and professional look.

Step 7: Handoff to Developers

Once your design is complete and approved, it’s time to hand it off to the development
team. Figma simplifies this process by generating design specs and assets automatically,
making the handoff smooth and efficient.

TASK 1

In our first task to create or design a Mobile web page for login and sign up page
using Figma tool.

Fig. 4.1 Task 1 view

9
TASK 2

To design the Mobile web page for food delivery using Figma tool. To import the
suitable images and logo. We will then add in various UI elements such as text fields,
images,etc., to create a visually appealing design.

Fig. 4.2 Task 2 view

TASK 3

“Creating a Seamless Travel Experience: A Figma Design Journey” In crafting the

user interface for our travel app, every details was meticulously considered to ensure a
smooth and intuitive experience for travelers worldwide. From the sleek layout to the vibrant
color palette, each element was chosen to evoke a sense of adventure and ease of use. One of
the primary focuses was on navigation. We aimed to simplify the process of planning a trip
by implementing intuitive menus and clear pathways to key features such as booking hotels,
finding accommodations, and discovering local attractions. Through user feedback and
interactive design, we refined the navigation to be both comprehensive and user-friendly.
Overall, our goal with the figma design for this travel app was to create a platform
that not only simplifies the journey from planning to exploration but also inspires a sense of
excitement and wonder for travelers around the globe. Connect the page with one to another
by using prototype.

10
Fig. 4.3 Task 3 view

Fig. 4.4 Task 3 view

Fig. 4.5 Task 3 view

11
 Fig. 4.6 Task 3 view

TASK 4

To design the modern and user-friendly food app UI design using Figma. We will
creating the basic layout for our app. We will then add in various UI elements such as text
fields, images,etc., to create a visually appealing design. Using the prototype for connect the
one page to another page.

Fig. 4.7 Task 4 view

12
 Fig. 4.8 Task 4 view
TASK 5

To design the desktop landing page UI design using Figma. We will creating the
basic layout for our app. We will then add in various UI elements such as text fields,
images,etc., to create a visually appealing design.

Fig. 4.9 Task 5 view

13
FINAL TASK

To design the logo image and poster for using canva tool. The tool can be provide a
different types graphic design tool such as posters, logos, presentations, videos, animation
etc.,

LOGO

Canva’s logo maker provides all of the ingredients you need to create a custom logo,
fast-and free. It provide to make a custom logo.We will then add in various UI elements such
as text fields, images, colors, etc., to create a visually appealing design.

Fig. 4.10 Logo design view

POSTER

Canva’s poster maker provides all of the ingredients you need to create a custom
poster, fast-and free.We will then add in various UI elements such as text fields, images,
colors, etc., to create a visually appealing design.
Canva’s tool provide the free templates for designing poster. To create a poster to
identify the goal for the poster. Using suitable images, text and font size, etc.,

14
Fig. 4.11 Poster design view

CHAPTER 5

15
 CONCLUSION

The Internship activity gives me the experiences, skill and knowledge on my job
application for the work activities performed professionally. Because practical attachment
means changing theory to practical work, therefore, this attachment helps to find the job
opportunity practiced in different organization to change better information accessibility in
the public services. . UI (user interface) / UX (user experience) describes a set of concepts,
guidelines, and workflows for critically thinking about the design and use of an interactive
product, map- based or otherwise. This entry introduces core concepts from UI/UX design
important to cartography and visualization, focusing on issues related to visual design. Using
the Figma tool to provide the better UI interface for the custom design.
It was a wonderful learning experience at SCODE SOFTWARE SOLUTIONS
PRIVATE LIMITED for two weeks in Cuddalore. It can be provide a practical knowledge
for designing a web application.
It generally, this practical attachment develops the ability, knowledge, experience and
skill of us to recognize relevant information to the society.

REFERENCES

 https://www.figma.com
 https://en.wikipedia.org
 https://scodesoft.com
 https://www.geeksforgeeks.org
 http://www.tutorialspoint.com
 https://www.toptal.com
 https://www.canva.com
 https://in.indeed.com

16