SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
MPSTME
EXECUTIVE SUMMARY REPORT
on
Designing and developing Frontend of our company’s Website
(Frontend Web Development)
By
Jainam Kothari
MBA Tech Computer
70471119056
(N253)
At
DIGIPRO SYSTEMS PVT LTD
Distribution List:
Prof. Sachin Chavan (College Mentor)
Mr. Sachin Mahadik (Industry Mentor)
1.0 Acknowledgements
To begin with I would like to thank Mr. Yatin Patil the Director of Digipro Systems PVT LTD
for giving me the opportunity to do an internship within the organization.
I also would like to thank all the people that worked along with me at Digipro with their patience
and openness. They created an enjoyable digital working environment. It is indeed with a great
sense of pleasure and immense sense of gratitude that I acknowledge the help of these
individuals.
I am highly indebted to my Industry Mentor Mr. Sachin Mahadik, for the facilities provided to
accomplish this internship and his constructive criticism throughout my internship.
I would like to thank Mr. Sachin Chavan, my College Mentor for his support and advices to get
and complete internship in above said organization.
2.0 Abstract
The front end is also commonly referred to as the client side, or more broadly speaking, the user
interface. It can be seen as customer-side development and refers to the component of the
program that customers can view and interact with. This project aims at building an application’s
user experience to effectively and aesthetically deliver information to site visitors and creating
innovative solutions to web design issues to help make the website more visually appealing and
enhance usability. Based on the UI/UX design we shall utilize HTML, CSS and other languages
to develop effective user friendly company website (i.e Digipro Systems).
3.0 Introduction
● DIGIPRO Systems Pvt. Ltd., (DSPL) is an IT solutions company offering complete IT
solutions covering Managed IT Services, IT Security, Data Center build and support,
Cloud Computing, FMS & AMC Support, Surveillance, Enterprise Wireless, Software &
Web Application development. Our goal is to set up the frontend by designing the user
interface of the website and to implement the web design (final one) using various web
development languages to ensure that the company website renders well across multiple
devices.
● We aim at making an attractive website to provide it’s viewers information about what
the company offers i.e. to work with customers closely to satisfy their technology needs
from, strategy consulting to specific technology, planning & Implementation of various
services by providing Integrated Technology Solutions & competitive edge for business
critical solutions, which results into Customer Delight. Also, we would test the site based
on the requirements in collaborations with the manager and make changes accordingly.
4.0 Problem Identified
An attractive website is designed to show the world you’re a serious and professional
business. But, at the same time, it also keeps things simple, allowing your visitor to
become a customer. All you have to do then is ensure they get the product they want and,
with great customer service, you’ll build loyalty for life. Thus it is advisable to design
and implement the website which is informative and attractive at the same time.
5.0 Methodology
5.1 Course of Action
1. Create UI/UX design based on the requirements.
Tool to be used - figma
2. Implement the finalized design, to create a user friendly, responsive and effective front end
web-page
Tools to be used – HTML, CSS, JAVASCRIPT, etc.
3. Review the site and make test cases to be modified in association with the firm.
Tools to be used - HTML, CSS, JAVASCRIPT, etc.
5.2 Tools and Technologies used
FIGMA - Figma is a powerful design tool that helps you to create anything: websites,
applications, logos, and much more.
HTML - HTML is the language for describing the structure of Web pages. HTML gives
authors the means to: Publish online documents with headings, text, tables, lists, photos,
etc. Retrieve online information via hypertext links, at the click of a button.
CSS - Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.
ANGULAR JS - AngularJS offers client-side form validation. AngularJS monitors the
state of the form and input fields (input, textarea, select), and lets you notify the user
about the current state. AngularJS also holds information about whether they have been
touched, or modified, or not.
BOOTSTRAP - Bootstrap is a free and open source front end development framework
for the creation of websites and web apps. The Bootstrap framework is built on HTML,
CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites
and apps.
6.0 Results
6.1 Website Design
Web design refers to the design of websites that are displayed on the internet. It usually
refers to the user experience aspects of website development rather than software
development. Web design used to be focused on designing websites for desktop
browsers; however, since the mid-2010s, design for mobile and tablet browsers has
become ever-increasingly important.
Preserving a layout that is as consistent as possible between devices is crucial to
maintaining user trust and engagement. As responsive design can present difficulties in
this regard, designers must be careful in relinquishing control of how their work will
appear. If they are responsible for the content as well, while they may need to broaden
their skillset, they will enjoy having the advantage of full control of the finished product.
6.2 Original Website
DIGIPRO Systems Pvt. Ltd., (DSPL) is an IT solutions company offering complete IT solutions
covering Managed IT Services, IT Security, Data Center build and support, Cloud Computing,
FMS & AMC Support, Surveillance, Enterprise Wireless, Software & Web Application
development.
It’s a simple website with very little functionality. It has a lack of quality, attractive color
combination and fresh content with unclear calls to action.
6.3 Our Project
Home Page (Implementation) :
The Navbar comprises the Digipro Systems logo, name and 7 options.
Home
Services
Softwares
Partners
About
Contact Us
Search Symbol
By clicking on any button it will take you to the respective page/functionality.
The home page starts with navbar followed by 3 carousel slides with information about what
DIGIPRO has to offer and what is it all about. Then comes 6 cards describing the areas the
company operate in. Finally a option to subscribe to a newsletter and a footer comprising various
options like – Industries, Social Media Accounts you can follow the company, Offerings, etc.
Services Page:
As the name suggest it displays all the services offered by the company.
Software Page:
It shows various applications for which the company has a software for it’s solution and
upgradation.
Partners Page:
The reason to partner with us and the company’s present partner company details are mentioned
here.
About Us Page:
The page shows what is Digipro about and what is it’s vision and mission.
Contact Us Page:
The page lists reasons to contact us and a form with validation done through Angular Js. You can
fill the form by entering the correct name, email, number, company name, a question (i.e. How
did you hear about us?), and your query.
6.4 Responsiveness
Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation.The practice consists of a mix of flexible grids and layouts, images and an intelligent
use of CSS media queries.
As the user switches from their laptop to iPad, the website should automatically switch to
accommodate for resolution, image size and scripting abilities. One may also have to consider
the settings on their devices; if they have a VPN for iOS on their iPad, for example, the website
should not block the user’s access to the page.
In other words, the website should have the technology to automatically respond to the user’s
preferences. This would eliminate the need for a different design and development phase for
each new gadget on the market. The screenshots below depicts our responsive webpage on a
smaller screen.
7.0 CONCLUSION
The “Front End” is the stuff you see on the website in your browser, including the presentation
of content and the user interface elements like the navigation bar. Front End Developers make
use of HTML, CSS, Javascript, and their relevant frameworks to ensure that content is presented
effectively and that users have an excellent experience.
Our website encompasses everything from building a simple page of HTML text to creating
complex, responsive HTML5 websites designed to be accessed via various different browsers,
devices and screen sizes. We have used Figma tool for designing and HTML, CSS, JS,
BOOTSTRAP for implementing the front-end website of our company.
We have covered the part of the project which is visible to the user, i.e., it deals with the client
side. Anything happening on the user side of the connection can be received or manipulated by
the user. It concerns mostly with the user interface and user experience of the website. How the
website is presented to the user is the primary goal of the front-end. Simplicity, accessibility,
proper user experience, clarity of the actions and feedback are some of the basic features which
play a vital role in the best possible front-end. And that is what we believe we have achieved.
8.0 References
Tzortzopoulos, Patricia, Rachel Cooper, Paul Chan, and Mike Kagioglou. "Clients'
activities at the design front-end." Design studies 27, no. 6 (2006): 657-683.
Crocetta, Gianmarco, Simone Piantini, Marco Pierini, and Ciaran Simms. "The influence
of vehicle front-end design on pedestrian ground impact." Accident Analysis &
Prevention 79 (2015): 56-69.
Murphy, Steven A., and Vinod Kumar. "The front end of new product development: a
Canadian survey." R&D Management 27, no. 1 (1997): 5-15.
Kim, Jongbae, and David Wilemon. "Focusing the fuzzy front–end in new product
development." R&d Management 32, no. 4 (2002): 269-279.
Edkins, Andrew, Joana Geraldi, Peter Morris, and Alan Smith. "Exploring the front-end
of project management." Engineering project organization journal 3, no. 2 (2013): 71-85.
Joo, Heonsik. "A study on understanding of UI and UX, and understanding of design
according to user interface change." International Journal of Applied Engineering
Research 12, no. 20 (2017): 9931-9935.
Markham, Stephen K. "The impact of front‐end innovation activities on product
performance." Journal of Product Innovation Management 30 (2013): 77-92.
w3schools – HTML, CSS, JavaScript
https://www.w3schools.com/
Bootstrap
https://getbootstrap.com/
Research Gate – Content on Front End Development
https://www.researchgate.net/
Design Principles
https://www.interaction-design.org/literature/topics/design-principles
HTML Dog - A tutorial site on HTML, CSS and JavaScript. They also offer cheat sheets
to HTML tags and CSS properties.
htmldog.com
