VISVESVARAYA TECHNOLOGICAL UNIVERSITY

"Jnana Sangama", Belgaum 590018, Karnataka

Department of Computer Science & Engineering

A Report on
LANDING PAGE STUDIO
In partial fulfillment of Internship of Academic Year 2022-2023

SUBMITTED BY:
CHITHRA Y S (1SK19CS009)

Under the Guidance of:

Prof .Somesha, M
Assistant Professor Department of CSE

GOVT. S.K.S.J TECHNOLOGICAL INSTITUTE

KR circle, Bangalore – 560001
(Affiliated to Visvesvaraya Technological University, Belgaum)
 GOVT. S.K.S.J TECHNOLOGICAL INSTITUTE
KR circle, Bangalore – 560001
(Affiliated to Visvesvaraya Technological University, Belgaum)

Department of Computer Science & Engineering

CERTIFICATE

This is to certify that CHITHRA Y S bearing USN No. 1SK19CS009 has satisfactorily
completed the Internship on “LANDING PAGE STUDIO” bonafide student of Govt .S.K.S.J.
Technological Institute, Bangalore in partial fulfilment for the award of Bachelor of
Engineering in Computer Science & Engineering of Visvesvaraya Technological University,
Belagavi for the year 2022-2023.

Name &Signature of the guide Signature of the HOD

Prof Somesha M Dr. PRADEEP KUMAR K

Assistant Professor Head of the department
Dept of CSE Dept of CSE
 ACKNOWLEDGEMENT

Before I turn towards the Internship, we would like to add a few heartfelt words for the people
who have been part of this Seminar by supporting and encouraging us.

In particular, I would like to take this opportunity to express my honour, respect, deep gratitude
and genuine regards to our Guide, Prof Somesha M, Assistant Professor, Department of
Computer science for giving us all guidance required for our Seminar apart from being a
constant source of inspiration and motivation.

I am grateful to Dr.Pradeep Kumar, Head of Department, Computer science Department, for

providing us the necessary help and encouragement whenever needed which has resulted in the
success of this Seminar.

I wish to express our sincere thanks to principal Dr. M B Patil, Principal G.S.K.S.J.T.I for
providing a healthy environment in our college, which helped us in concentrating on task. I
owe special thanks to our Parents for their moral support and warm wishes, and finally we
would express our appreciation to all our friends for their support which helped us to complete
this project successful.
 TABLE OF CONTENTS

Sl No. CONTENT Page Number

1 Company profile 5-7

2 Introduction 8-10

3 Overview of work 11-14

4 Project 15-16

5 Tools Used 17-18

6 Results 19

7 Snapshots of Results 20-21

8 Conclusion 22
 Landing Page Simulator

COMPANY PROFILE

COMPANY SERVICES
CIPHERCODE is a technology company specializing in blockchain-powered Product
Authentication and Digitization solutions. Owns the Brandwise SaaS platform,which
offers:

1. Unit-level product authentication at scale

2. Public authentication of digital assets
3. End-consumer engagement and intelligence
4. Deep traceability and platform tracking
5. AIPs for enterprise platform integration
6. App-less consumer smartphone engagement

Where the enterprise gains revenue opportunities, consumer insights while delivering the
digital experience, in the DTC era.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 6

 Landing Page Simulator

PROFILE OF THE ORGANIZATION

Organization Structure

CIPHERCODE, was incorporated with a goal to provide high quality and optimal
Technological Solutions to business requirements of clients. Every business is a different
and has a unique business model and so are the technological requirements. They
understand this and hence the solutions provided to these requirements are different as
well. They focus on clients requirements and provide them with tailor made technological
solutions.
Founder and CEO: Terugu Venkat
Board: N chandrashekar and BN Bhaskar

Locations
CIPHERCODE is a software development industry with the company size of 11-50
employees.
The main headquarters is in Banglore, Karnataka.
It’s a privately held company founded in 2018.

Quality

To provide effective, reliable and on time express delivery services through continuous
development of human resources, operational systems, information technology and
infrastructure, while adhering to the best Quality Management System for customer's
delight.

Products
Brandwise - A Cryptography powered enterprise
SaaS platform - having sub products "QSeal, QReach & QReport, NFTs "

Functional & domain expertise

IT - Cloud computing, web-technologies

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 7

 Landing Page Simulator

They are serving in these domains since 2018.Cloud computing on demand availability of
computer system resources, especially data storage and computing power, without direct active
management by the user.
They are also functionally active in the field of web technology, the way the
computer/devices communicate with each other using markup languages.

Partners
The company is actively partnering with some of the top MNC’s like HCL, Infosys, CII and
TechM.

Vision
To be the most preferred Authentication partner for global brands. The envision in reaching
out to each and every individual around the world by providing top-notch consumer
products within the year 2025.Choosing the Information technology as one of the service
areas and provide all thenecessary service related to it.

Mission
To eliminate inefficiencies in the objects authentication solutions.

Innovation
a) Produced two Indian patents
b) World's first Cryptography based object authentication enterprise SaaS platform

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 8

 Landing Page Simulator

INTRODUCTION

Web Application

Web applications use web documents written in a standard format such as HTML and
JavaScript. which are supported by a variety of web browsers. Web applications can be
considered as a specific variant of client-server software where the client software is
downloaded to the client machine when visiting the relevant web page, using standard
procedures such as HTTP Client web software updates may happen each time the web page
is visited. During the session, the web browser interprets and displays the pages,and acts
as the universal client for any application. Writing a web application is often simplified by
open source software such as Ruby on Rails or Symphony called web application frameworks.
These frameworks facilitate rapid application development by allowing a development team
to focus on the parts of their application which are unique to their goals without having to
resolve common development issues such as user management. While many of these
frameworks are open source, this is by no means a requirement.

The use of web application frameworks can often reduce the number of errors in a program,
both by making the code simpler, and by allowing one team to concentrate on the framework
while another focuses on a specified use case. In applications which are exposed to constant
hacking attempts on the Internet, security-related problems can be caused by errors in the
program Frameworks can also promote the use of best practices such as GET after POST. As
a web application company they, where their clients are benefited to have all reciprocal
solutions under a single umbrella. This organization website development company is capable
of providing high quality, cost-effective; mission-critical web designing company. At this
knowledge age, knowledge is the key and our knowledge base in the latest web designing
technologies, search engine algorithm, global web designing practices etc.. makes the
strategic product contemporary and futuristic development. Contriver deliver neat, easy-to-
use and business friendly website designing, a webs web site that drives customers into it. In
the domain of website design India, they have served almost every segment of the trade. Their
website designing experts ensures each Contriver deliver neat, easy-to-use and business
friendly website designing, a web site that drives customers into it. In the domain of website
design India, they have served almost every segment of the trade.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 9

 Landing Page Simulator

Front end development

Front-end web development is the development of the graphical user interface of a
website, through the use of HTML, CSS, and JavaScript, so that users can view and
interact with that website.

HTML - HYPER TEXT MARKUP LANGUAGE

The Hyper Text Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It is often assisted by technologies such as
Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes, and other items.

HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and
<input /> directly introduce content into the page. Other tags such as <p> and </p> surround
and provide information about document text and may include sub-element tags. Browsers do
not display the HTML tags but use them to interpret the content of the page.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language such as HTML or XML (including XML dialects
such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.

CSS is designed to enable the separation of content and presentation, including layout, colors,
and fonts. This separation can improve content accessibility; provide more flexibility and
control in the specification of presentation characteristics; enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and
repetition in the structural content; and enable the .css file to be cached to improve the page
load speed between the pages that share the file and its formatting.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 10

 Landing Page Simulator

Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has
rules for alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.

Java script
JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMA
Script standard. It has dynamic typing, prototype-based object-orientation, and first-class
functions. It is multi-paradigm, supporting event-driven, functional, and imperative
programming styles. It has application programming interfaces (APIs) for working with text,
dates, regular expressions, standard data structures, and the Document Object Model (DOM).
The ECMA Script standard does not include any input/output (I/O), such as networking, storage,
or graphics facilities. In practice, the web browser or other runtime system provides JavaScript
APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core components of
some servers and a variety of applications. The most popular runtime system for this usage is
Node.js.
Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the
two languages are distinct and differ greatly in design.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 11

 Landing Page Simulator

USER INTERFACE AND USER EXPERIENCE

User Interface (UI)

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring
that the interface has elements that are easy to access, understand, and use to facilitate those
actions. UI brings together concepts from interaction design, visual design, and information
architecture.

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes,
toggles, date field

Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal
windows

Containers: accordion

There are times when multiple elements might be appropriate for displaying content. When
this happens, it’s important to consider the trade-offs. For example, sometimes elements that
can help save you space, put more of a burden on the user mentally by forcing them to guess
what is within the dropdown or what the element might be.

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies. Once you know about your user, make sure to consider the
following when designing your interface:

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 12

 Landing Page Simulator

Keep the interface simple. The best interfaces are almost invisible to the user. They avoid
unnecessary elements and are clear in the language they use on labels and in messaging.

Create consistency and use common UI elements. By using common elements in your UI,
users feel more comfortable and are able to get things done more quickly. It is also important
to create patterns in language, layout and design throughout the site to help facilitate efficiency.
Once a user learns how to do something, they should be able to transfer that skill to other parts
of the site.

Be purposeful in page layout. Consider the spatial relationships between items on the page
and structure the page based on importance. Careful placement of items can help draw attention
to the most important pieces of information and can aid scanning and readability.

Strategically use color and texture. You can direct attention toward or redirect attention away
from items using color, light, contrast, and texture to your advantage.

Use typography to create hierarchy and clarity. Carefully consider how you use typeface.
Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and
readability.

Make sure that the system communicates what’s happening. Always inform your users of
location, actions, changes in state, or errors. The use of various UI elements to communicate
status and, if necessary, next steps can reduce frustration for your user.

Think about the defaults. By carefully thinking about and anticipating the goals people bring
to your site, you can create defaults that reduce the burden on the user. This becomes
particularly important when it comes to form design where you might have an opportunity to
have some fields pre-chosen or filled out.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 13

 Landing Page Simulator

User Experience(UX)

User experience (UX) focuses on having a deep understanding of users, what they need, what
they value, their abilities, and also their limitations. It also takes into account the business
goals and objectives of the group managing the project. UX best practices promote improving
the quality of the user’s interaction with and perceptions of your product and any related
services.

Factors that Influence UX

Useful: Your content should be original and fulfill a need

Usable: Site must be easy to use

Desirable: Image, identity, brand, and other design elements are used to evoke emotion and
appreciation

Findable: Content needs to be navigable and locatable onsite and offsite

Accessible: Content needs to be accessible to people with disabilities

Credible: Users must trust and believe what you tell them

Areas Related to Building the User Experience

UX is a growing field that is very much still being defined. Creating a successful user-centered
design encompasses the principles of human-computer interaction (HCI) and goes further to
include the following disciplines:

Project Management focuses on planning and organizing a project and its resources. This
includes identifying and managing the lifecycle to be used, applying it to the user-centered
design process, formulating the project team, and efficiently guiding the team through all
phases until project completion.

User Research focuses on understanding user behaviors, needs, and motivations through
observation techniques, task analysis, and other feedback methodologies.

Usability Evaluation focuses on how well users can learn and use a product to achieve their
goals. It also refers to how satisfied users are with that process.

Information Architecture (IA) focuses on how information is organized, structured, and

presented to users.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 14

 Landing Page Simulator

User Interface Design focuses on anticipating what users might need to do and ensuring that
the interface has elements that are easy to access, understand, and use to facilitate those actions.

Interaction Design (IxD) focuses on creating engaging interactive systems with well thought
out behaviors.

Visual Design focuses on ensuring an aesthetically pleasing interface that is in line with
brand goals.

Content Strategy focuses on writing and curating useful content by planning the creation,
delivery and governance behind it.

Accessibility focuses on how a disabled individual accesses or benefits from a site, system or
application.

Web Analytics focuses on the collection, reporting, and analysis of website data.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 15

 Landing Page Simulator

LANDING PAGE STUDIO

Landing Page Studio is a web design platform that is focused on creating landing pages for
businesses and individuals. Their goal is to make it easy for anyone to create high-converting
landing pages without needing any coding skills.

One of the key features of Landing Page Studio is its drag-and-drop editor, which allows users
to create their own landing page designs from scratch or choose from a library of pre-built
templates. The editor is user-friendly and intuitive, making it easy for users to customize every
aspect of their landing page.

In addition to its design capabilities, Landing Page Studio also provides tools for A/B testing
and analytics tracking. This allows users to test different versions of their landing page and
track the performance of each variation to see which one performs best.

Overall, Landing Page Studio is a great option for businesses or individuals who are looking
to create effective landing pages that convert visitors into customers or leads. With its user-
friendly design tools and analytics capabilities, it's a powerful platform for optimizing landing
page performance.

Landing Page Studio is a landing page builder that offers a range of features and tools to help
businesses and individuals create effective landing pages. The platform is designed to be user-
friendly and accessible, even for those with no coding experience.

One of the key benefits of Landing Page Studio is its extensive library of pre-built templates.
These templates are designed to be customizable, allowing users to create unique landing pages
that match their branding and marketing goals. Additionally, the platform offers a drag-and-
drop editor that makes it easy to create custom landing pages from scratch.

Landing Page Studio also provides features for A/B testing, which allows users to test different
versions of their landing page to see which one performs better. The platform includes analytics
tracking, which provides insights into visitor behavior and can help users optimize their landing
pages for better performance.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 16

 Landing Page Simulator

Finally, Landing Page Studio integrates with a range of popular marketing tools, including
Mailchimp, HubSpot, and Google Analytics. This makes it easy for businesses to integrate their
landing pages with their marketing campaigns and track the performance of their landing pages
in real-time.

Overall, Landing Page Studio is a powerful tool for businesses and individuals looking to create
effective landing pages. With its intuitive design tools, A/B testing features, and analytics
tracking capabilities, it's a great choice for optimizing landing page performance and driving
conversions.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 17

 Landing Page Simulator

TOOLS USED

FIGMA
Figma is a web-based design platform that allows users to create, collaborate on, and share
designs in real-time. The platform is popular among designers and design teams due to its
intuitive interface, collaborative features, and flexibility.

One of the key benefits of Figma is its browser-based interface, which allows users to access
their designs from anywhere with an internet connection. This makes it easy for teams to
collaborate on designs in real-time, even if they are located in different parts of the world.

Figma also offers a range of design tools and features, including vector editing tools,
prototyping capabilities, and design libraries. Users can create custom designs from scratch or
choose from a library of pre-built templates and UI components.

Another benefit of Figma is its collaboration features, which allow multiple users to work on a
design at the same time. Users can leave comments, give feedback, and collaborate on designs
in real-time, making it easy to iterate and refine designs quickly.

Finally, Figma offers a range of integrations with other popular design and collaboration tools,
including Slack, Trello, and Jira. This makes it easy for teams to incorporate Figma into their
existing workflows and collaborate seamlessly across different platforms.

Overall, Figma is a powerful and flexible design platform that is well-suited for teams and
individuals who are looking to collaborate on designs in real-time. With its browser-based
interface, intuitive design tools, and collaboration features, it's a great choice for designers who
are looking to streamline their workflows and work more efficiently.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 18

 Landing Page Simulator

VISUAL STUDIO CODE

Visual Studio Code (also known as VS Code) is a free and open-source source code editor that
is developed by Microsoft. It is available for Windows, Linux, and macOS operating systems
and is widely used by developers around the world.

One of the key features of Visual Studio Code is its versatility. It supports a wide range of
programming languages and frameworks, including JavaScript, TypeScript, Python, C++, and
more. This makes it a popular choice for developers who work on multiple projects and need a
versatile code editor that can handle a variety of languages.

Another key feature of Visual Studio Code is its extensibility. The editor supports a range of
extensions that can be used to customize the editor's functionality and add new features. There
are thousands of extensions available, covering everything from syntax highlighting to
debugging and testing tools.

Visual Studio Code also includes a range of built-in features that make it a powerful code
editor. These include debugging and testing tools, code navigation and search capabilities, and
support for version control systems like Git. It also offers an integrated terminal, which allows
developers to run commands and scripts directly from the editor.

One of the other benefits of Visual Studio Code is its user-friendly interface. It has a clean and
intuitive design that makes it easy to navigate and use, even for beginners. The editor also
includes features like code snippets, auto-completion, and syntax highlighting, which can help
speed up development and reduce errors.

Overall, Visual Studio Code is a powerful and versatile code editor that is well-suited for
developers of all skill levels. With its extensive library of extensions, built-in features, and
user-friendly interface, it's a popular choice for developers around the world.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 19

 Landing Page Simulator

RESULTS

The results of using Landing Page Studio can vary depending on a variety of factors, including
the quality of the landing page design, the effectiveness of the marketing campaign, and the
target audience. However, when used correctly, Landing Page Studio can help businesses
achieve higher conversion rates and better ROI (Return on Investment) from their marketing
efforts.
Some of the benefits and potential results of using Landing Page Studio include:

Higher Conversion Rates: By creating custom landing pages that are optimized for specific
campaigns, businesses can increase their conversion rates and turn more visitors into customers
or leads.

Improved Brand Awareness: Landing Page Studio allows businesses to create landing pages
that match their brand and messaging, which can help improve brand awareness and
recognition.

Increased Engagement: With features like A/B testing and analytics tracking, Landing Page
Studio can help businesses optimize their landing pages for better engagement and more clicks.

Better ROI: By improving conversion rates and reducing bounce rates, businesses can achieve
better ROI from their marketing campaigns and get more value from their advertising spend.

Improved User Experience: With a user-friendly drag-and-drop editor, Landing Page Studio
allows businesses to create landing pages that are easy to use and navigate, which can help
improve the overall user experience and lead to better results.

Overall, Landing Page Studio can be a valuable tool for businesses looking to improve their
landing page performance and drive better results from their marketing campaigns. However,
success ultimately depends on the quality of the landing page design, the effectiveness of the
marketing campaign, and the ability to analyze and optimize performance over time.

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 20

 Landing Page Simulator

SCREENSHOTS OF RESULTS

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 21

 Landing Page Simulator

Figure: Landing page simulator

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 22

 Landing Page Simulator

CONCLUSION
➢ According the designed landing page we can see the changes in the preview page
instantly.
➢ This designed page works dynamically.
➢ The purpose is to get people to take single action on the page

Landing Page Studio is a powerful tool for businesses and marketers looking to create
custom landing pages that are optimized for specific campaigns. By providing a user-
friendly drag-and-drop editor, A/B testing and analytics tracking, and a range of
customizable templates and features, Landing Page Studio can help businesses achieve
higher conversion rates, improved engagement, and better ROI from their marketing
efforts.

However, it is important to note that success with Landing Page Studio ultimately depends
on the quality of the landing page design, the effectiveness of the marketing campaign, and
the ability to analyse and optimize performance over time. By continuously refining and
improving landing pages, businesses can achieve even better results and continue to drive
better ROI from their advertising spend

GOVT.S.K.S.J. T. I | Dept. Of CSE 2022-2023 23