PROJECT:
APPLICATION DESIGN
AND
WEB DESIGN
The ui/ux designs course details and methods with
there toolkit is detaily explained in coming pages
By : Hariprasad A
2036010105
CERTIFICATE OF INTERNSHIP
This is to certify that
HARIPRASAD A (2036010105)
Student of
Annamalai University Faculty of Engineering
and Technology, Annamalai Nagar.
has been completed his internship program in
“UI AND UX”
at our Concern from 04/06/2023 to 02/07/2023
Abstract
Advances in personal computing and information technologies
have fundamentally transformed how maps are produced and
consumed, as many maps today are highly interactive and
delivered online or through mobile devices. Accordingly, we
need to consider interaction as a fundamental complement to
representation in cartography and visualization. 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. First, a fundamental distinction
is made between the use of an interface as a tool and the
broader experience of an interaction, a distinction that
separates UI design and UX design. Norman’s stages of
interaction framework then is summarized as a guiding model
for understanding the user experience with interactive maps,
noting how different UX design solutions can be applied to
breakdowns at different stages of the interaction. Finally,
three dimensions of UI design are described: the fundamental
interaction operators that form the basic building blocks of an
interface, interface styles that implement these operator
primitives, and recommendations for visual design of an
interface.
INTRODUCTION
LITZ Tech Pvt. Ltd. is an established company based in
Coimbatore, India, that specializes in providing a comprehensive
range of digital services. With a focus on application development,
website design and hosting, SEO, and digital marketing, LITZ Tech
aims to enable businesses to thrive in the digital era and
outperform their competition. The company was founded in 2011
and has since built a strong reputation, serving over 200 active
customers. LITZ Tech holds an ISO 9001:2008 certification,
underscoring its commitment to delivering high-quality services
and ensuring customer satisfaction.
At LITZ Tech, the mission is clear: to provide innovative
solutions that pave the path for their clients' success. By staying at
the forefront of technological development and embracing
cuttingedge ideas, the company strives to make a positive impact
on the world. Their vision is to create a better world through their
innovative ideas and contributions to technological
advancements.
The core values of LITZ Tech are collaboration, passion with
perfection, accountability, and customer satisfaction. These values
are deeply ingrained in the company's culture and serve as guiding
principles in all aspects of their work. By embracing collaboration,
LITZ Tech fosters strong relationships with their clients, working
closely with them to understand their needs and provide tailored
solutions. The company approaches every project with a passion
for perfection, ensuring that each deliverable is of the highest
quality. Accountability is central to their operations, as they take
responsibility for their actions and strive to exceed customer
expectations. Ultimately, customer satisfaction is at the heart of
LITZ Tech's values, as they aim to build long-lasting relationships
and deliver outstanding results.
LITZ Tech offers an extensive range of services to meet the
diverse needs of their clients. Their web design and development
services focus on creating visually appealing and user-friendly
websites that are optimized for performance. From
conceptualization to implementation, their team of experts works
closely with clients to ensure that the final product aligns with
their brand and objectives. Additionally, LITZ Tech provides web
hosting services, ensuring that clients' websites are accessible and
secure.
As e-commerce continues to grow, LITZ Tech offers
comprehensive e-commerce solutions that enable businesses to
establish and manage their online stores effectively. From
designing intuitive user interfaces to integrating secure payment
gateways, their e-commerce services are designed to maximize
conversions and drive revenue growth. In the realm of software
development, LITZ Tech specializes in creating customized
software solutions that streamline business operations and
improve efficiency. By leveraging their expertise in various
programming languages and frameworks, they develop tailored
software applications that meet the unique requirements of their
clients.
LITZ Tech recognizes the importance of search engine
optimization (SEO) in today's digital landscape. Their SEO services
focus on improving clients' online visibility, driving organic traffic,
and boosting search engine rankings. Through a combination of
on-page optimization, keyword research, content strategy, and
link building, they help businesses establish a strong online
presence and increase their reach.
With the exponential growth of mobile usage, LITZ Tech
also provides mobile application development services for both
iOS and Android platforms. Their team of skilled developers
creates
mobile apps that are intuitive, feature-rich, and aligned with
clients' business objectives. By leveraging the latest mobile
technologies and industry best practices, they ensure that their
apps deliver exceptional user experiences and drive engagement.
In addition to their development services, LITZ Tech offers
IT consulting to assist businesses in making informed technology
decisions. Their experienced consultants provide expert advice,
conduct comprehensive assessments of IT infrastructure, and
recommend tailored solutions to optimize productivity and
efficiency. Furthermore, they provide staff augmentation services,
enabling businesses to enhance their existing teams with skilled
professionals who seamlessly integrate into ongoing projects.
In addition to their development services, LITZ Tech offers IT
consulting to assist businesses in making informed technology
decisions. Their experienced consultants provide expert advice,
conduct comprehensive assessments of IT infrastructure, and
recommend tailored solutions to optimize productivity and
efficiency. Furthermore, they provide staff augmentation services,
enabling businesses to enhance their existing teams with skilled
professionals who seamlessly integrate into ongoing projects.
In conclusion, LITZ Tech Pvt. Ltd. is a reputable company
that offers a comprehensive suite of digital services. With their
focus on application development, website design and hosting,
SEO, and digital marketing, they empower businesses to succeed
in the digital landscape. Through their commitment to innovation,
collaboration, perfection, accountability, and customer
satisfaction, LITZ Tech strives to create a better world through
technological advancements. With their range of services and
dedication to excellence, LITZ Tech is poised to be a valuable
partner for businesses seeking to thrive in the digital era
Description
1. Introducing UI/UX
1.1 The User Interface versus the User Experience
Advances in personal computing and information
technologies have fundamentally transformed how maps are
produced and consumed, as many maps today are highly
interactive and delivered online or through mobile devices. 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 (Garrett, 2010),
map or otherwise. UI/UX is a growing profession in the
geospatial industry and broader technology sector (Haklay,
2010), with UI/UX designers needed to engage with
stakeholders and target users throughout large software
engineering and web design projects (see Additional Resources).
This entry reviews the conceptual principles behind UI/UX,
emphasizing visual design following other entries in the
Cartography & Visualization section and complementing the
technologically-oriented User Interfaces entry spanning GI
Science in the Programming & Development section.
UI and UX are not the same, separated in their focus on
interfaces versus interactions. An interface is a tool, and for
digital mapping this tool enables the user to manipulate maps
and their underlying geographic information. An interaction is
broader than the interface, describing the two-way question-
answer or request-result dialogue between a human user and a
digital object mediated through a computing device (Roth,
2012).
1.2 Scholarly Influences on UI/UX Design in
Cartography and Visualization
Within GIScience, interaction most commonly is treated
by the research thrust of geographic visualization (see
Geovisualization). Interactivity supports visual thinking, enabling
users to externalize their reasoning by requesting a wide range
of unique map representations (DiBiase, 1990), thus overcoming
the limitations of any single map design. Geovisualization
encourages this interactive reasoning for the purpose of
exploration rather than communication (see Cartography &
Science), with the goal of generating new hypotheses and
spontaneous insights about unknown geographic phenomena
and processes (MacEachren & Ganter, 1990; MacEachren,
1994). As a result, much of the early research on interaction in
cartography and visualization is specific to scientific discovery,
considering expert specialists as the target user groups. Today,
UI/UX design requires consideration of use cases beyond
exploratory geovisualization and users beyond expert
researchers. Interaction allows users to view multiple
(sometimes all) locations and map scales as well as customize
the representation to their interests and needs. Interaction also
empowers users in the cartographic design process, improving
accessibility to geographic information and dissolving traditional
boundaries between mapmaker and map user (see Cartography
& Power).
Increasingly,interaction enables geographic analysis, linking
computing to cognition in order to scale the human mind to
the complexity of the mapped phenomenon or process (see
Geovisual Analytics). Accordingly,interaction has been
suggested as a fundamental complement to representation in
cartography, together organizing contemporary cartographic
scholarship and practice (Roth, 2013a; Figure 1). For
discussion of additional influences on UI/UX design in
cartography and visualization, see Geocollaboration, Usability
Engineering, and Web Mapping
2. Designing the User Experience
2.1 Stages of Interaction
An interaction requires the user to employ perceptual,
motor, and cognitive abilities as they view, manipulate, and
interpret an interactive map. Norman (1988) offers a useful
framework for conceptualizing a map interaction as a two-
way dialogue or conversation, decomposing a single
interaction exchange into seven discrete and observable
stages:
1. Forming the goal:
The goal is what the user is trying to achieve with the
interface and therefore represents the user’s motivation for
using the interface (a need, interest, curiosity, etc.). Goals are
described as “high-level” tasks, and may include exploration,
analysis, synthesis, and presentation
(see Geovisualization).
2. Forming the intention:
The intention is the specific map reading objective that
the user completes in support of the goal. Accordingly,
intentions are described as “low-level” tasks. Intentions
include identification of a map feature, comparison of two
map features, ranking of a set of map features, etc. Therefore,
an intention yields a specific geographic insight, such as
detection of a difference, change, outlier, anomaly,
correlation, trend, cluster, or spike.
3. Specifying an action:
The user then must translate their intention to the
functions (described below as operators) implemented in the
interface. The interface needs strong affordances―or
signals to the user about how to interact with the interface―for
the user to specify which operator best supports the intention
before executing the action.
4. Executing an action:
The user then must execute the specified action using
input computing devices, such as a pointing device (e.g., mouse,
touchscreen), keying device (e.g., keyboard, keypad), or other
mode (e.g., gesture or speech recognition). Once the action is
executed, the computing device processes the request and, if
successful, returns a new map representation to the user.
5. Perceiving the system state:
Once returned, the user then views the new representation.
Here, strong feedback―or signals to the user about what
happened as a result of the interaction―is needed to clarify how
the map changed after the request. It is through this provision of
feedback that the map participates in the two-way interaction
dialogue.
6. Interpreting the system state:
After perceiving the change to the map representation
through feedback, the user then must make sense of the update.
One way to describe this stage is completion of the intention:
once a new map is returned, it can be used to carry out the user’s
low-level task and, if successful, generate a new geographic
insight.
7. Evaluating the outcome:
The evaluation compares the insight with the expected
result to determine if the goal has been achieved. This includes
critical evaluation of the insight ("does this seem right?") and
meta-evaluation of the overarching goal ("do I have my answer?").
Following this evaluation, the user may revise their goal and
initialize a new interaction exchange, restarting the seven stage
sequence
2.2 Additional UX Frameworks
A number of disciplines, professions, and knowledge
areas contribute to UI/UX design, including ergonomics, graphic
design, human-computer interaction, information visualization,
psychology, usability engineering, and web design. Additional
frameworks for understanding UX design have been offered as
UX becomes formalized conceptually and professionally (see
Roth, 2013a, for a review). For instance, Fitts’ (1954) law
providing an early understanding of pointing interactions was
based on psychology studies about human bodily movement,
Further, Foley et al.’s (1990; 2014) three design levels (the
conceptual, operational, and implementational levels, as
discussed for mapping by Howard & MacEachren, 1996) were
derived from research on human-computer interaction while
Garrett’s (2010) five planes of design (the surface, skeleton,
structure, scope, and strategy planes, as discussed for mapping by
Tsou, 2011) are offered from web design experience. Finally,
most recommendations describe UI/UX as a design process that
includes multiple, user-centered evaluations, making use of
methods and measures established in Usability Engineering (see
Usability Engineering)
3. Designing the User Interface
3.1 Interaction Operators
As with representation design and the visual variables (see
Symbolization & the Visual Variables), an interaction can be
deconstructed into its basic building blocks (Figure 2). Interaction
primitives describe the fundamental components of interaction
that can be combined to form an interaction strategy (Roth,
2012). Scholars in cartography (e.g., Cartwright et al., 2001) and
related fields (e.g., Thomas & Cook, 2005) identify development
of a taxonomy of interaction primitives as the most pressing need
for the understanding of interaction, as such a taxonomy
articulates the complete solution space for UI/UX
design. Accordingly, there are now a range of taxonomies offered
in the UI/UX literature, including taxonomies specific to
cartography and visualization (e.g., Dykes, 1997; MacEachren et
al., 1999; Crampton, 2002; Andrienko et al., 2003; Edsall et al.,
2008)
Interaction primitive taxonomies differ by the stages of
interaction they include. While UX design considers primitives at
all stages, UI design primarily focuses upon interaction operator
primitives , or the generic functions implemented in the
interactive that enable the user to manipulate the display.
Operators include panning, zooming, and detail retrieval—
functions common to “slippy” web maps using tilesets (see Web
Mapping)–as well as reexpression to different visual overviews,
overlay of context information, and filtering across multiple
facets of the mapped dataset– functions essential to
Shneiderman’s (1996) information seeking mantra in big data
visualizations (see Big Data Visualization) synthesizing UI/UX
recommendations (adapted from Roth, 2013).
Not all maps need to be interactive, and not all interactive
maps require the same UI design. Interface scope describes the
baseline number of operators implemented in an interactive
product (e.g., just panning and zooming versus panning and
zooming plus searching, filtering), while interface freedom
describes the precision by which each operator can be executed
(e.g., zooming any map scale versus only ~20 pre-processed
scales).
Together, scope and freedom determine the interface
complexity, or the total number of unique representations that
can be created through the interface. Much like managing
information complexity in cartographic design (see
Generalization), managing interface complexity is essential for
good UI/UX design. The appropriate balance of flexibility versus
constraint in the UI/UX design ultimately should be determined
through user input and evaluation (see Usability Engineering).
3.2 Interface Styles
An operator is implemented in one of several interface
styles, also called modes, or the manner by which user input
submitted to perform the operator (Shneiderman & Plaisant,
2010 as discussed for mapping by Howard & MacEachren, 1996).
The same operator can be implemented multiple times
through different interface styles, allowing users to complete
the same objective with an interface through different interaction
strategies, a design concept described as interface flexibility. In
graphic user interfaces (i.e., GUIs), the interface style is the
widget, menu, or form that triggers an event when input is
received; the operator is the business logic that is executed after
the event is handled.
Interface styles are defined by their level of directness
submitting input. Fully direct manipulation enables probing,
dragging, and other adjustments to graphic elements of the UI.
For cartography and visualization, direct manipulation can be
applied to individual map features (common for detail retrieval),
the entire map (common for panning, zooming, and reprojection),
map elements like a legend (common for filtering and
resymbolizing), a linked information graphic or visualization
(common for reexpression of overviews, filtering, and detail
retrieval in a coordinated visualization), or simply a custom
widget such as buttons or slider bars (common for filtering,
toggling overlays, and sequencing through a map series or
animation) (Roth, 2013)
Less direct interface styles include menus, or the selection of one
or more items from a list (common for filtering), and forms, or the
keying of characters into a blank textbox (common for searching).
The move towards mobile-first or post-WIMP (Windows, Icons,
Menus, and Pointers) design in cartography has substantially
changed how direct interface styles are designed in order to
support imprecise (finger-based) touch interactions (see Mobile
Mapping & Responsive Design). Command language and natural
language styles are indirect and non-graphic styles for
implementing operators. Shneiderman & Plaisant (2010) provide a
comprehensive summary of the relative advantages and
disadvantages of interface styles for UI design.
3.3 Visual Interface Design
As with paper or static cartographic design (see Aesthetics
and Design), the visual look and feel of the UI design is “more
than just icing on the cake”: it sets the tone for the entire user
experience, from setting the mood and evoking an appropriate
emotional response through improving usability and subjective
satisfaction. UI design is a highly creative process, and creation of
a coherent and unique visual brand relies on iterative refinement
of global design decisions (e.g., interface layout and
responsiveness, application navigation, visual affordances and
feedback, color scheme, typefaces) and local design decisions
(e.g., visual metaphors for direct manipulation interface widgets,
specific text phrasing for icons, tooltips, and information
windows). Nielsen (1994) provides a useful set of usability
heuristics for guiding visual interface design.
Together, scope and freedom determine the interface complexity,
or the total number of unique representations that can be created
through the interface. Much like managing information
complexity in cartographic design (see Generalization), managing
interface complexity is essential for good UI/UX design. The
appropriate balance of flexibility versus constraint in the UI/UX
design ultimately should be determined through user input and
evaluation (see Usability Engineering).
Best ToolKit for UI/UX Design
Figma
Adobe XD
Adobe Photoshop
Illustrate
Miro Board
Steps of UI/UX Design in Figma
Creating frames
What are frames? 🌈
Frames are containers for your device that sit in the canvas of a
Figma file - if you’re familiar with the term ‘artboards’ from
having used other programs, they’re pretty similar. They’re
especially useful if you’re designing for a specific device or screen
size.
Frames in Figma are powerful elements that you can do so much
with! They’re not your typical artboards
Here are some basics to get you creating frames 👇
➡️ Use the keyboard shortcuts F or A or select the frame tool in
the toolbar. 〰️ Identify frames by the frame symbol in the Layers
Panel.
➡️ Click in the canvas to create a default frame with 100 x 100
dimensions.
Menu:
Unlike regular desktop design apps, Figma’s menus can be found
by clicking the hamburger button in the top-left of the screen. Take a
minute to browse around these menus and see what’s there! You can
also search for the specific command you need. Start typing in
“rectangle” and you’ll quickly find the Rectangle Tool, complete with
a handy reminder of its keyboard shortcut (it’s R, by the way).
Tools:
Here you can quickly access the tools you’re likely to use most
often: frames, shapes, text, etc. (We’ll cover all these tools in the next
couple of days!)
Options:
This area shows extra options for whichever tool you have
selected. When no object is selected (as shown above), Figma
displays the file name. When an object is selected, contextual options
appear here.
Practise zooming in and out
You’ll probably find yourself wanting to zoom in and out quite a
bit in Figma, particularly once we start working with multiple Frames.
⌘
The standard zoom commands are accessed with + and -. ⌘
Try it now!
Those commands will just focus in on the center of your current
view. But there are some other handy zoom commands available:
⇧
Shift 2 will zoom to the current selection
⇧
Shift 1 will zoom to show the whole canvas
Select the Frame by clicking on its name, then try alternating these
commands to switch between the selection and the whole canvas.
Finally, here’s an *extra* handy zoom tip to move between Frames
without having to zoom in and out the whole time:
N will zoom to the next Frame
⇧
Shift N will zoom to the previous Frame
File Versioning Is Automatic or On-demand
Any uncertainty surrounding live file updating is further
mitigated by Figma’s built-in versioning system. At any time, a
designer can create a named version and description of a Figma
file; this can be done immediately after agreed changes are made
to a design.
Lets start our New APK design:
The file save as the ASHA is named for the Design it basic
design to improve the UI/UX Design.
We want some space, a margin, between the image and the
frame edge. So we'll change the dimensions of the rectangle to
379 by 285, and center the image within the frame. Because our
frame is 411 points wide, this gives us a margin of 16 points on
either side
The file saved as the ASHA is given a linear color in the size
of the file
The given a linear color in the size of the file the has been
drag to select the source
You’ll probably find yourself wanting to zoom in and out
quite a bit in Figma, particularly once we start working with
multiple Frames. The standard zoom commands are accessed
⌘ ⌘
with + and -. The file is been duplicate ctrl+D
You’ll probably find yourself wanting to zoom in and out
quite a bit in Figma, particularly once we start working with
multiple Frames. The standard zoom commands are accessed
⌘ ⌘
with + and -. The file is been duplicate ctrl+D Then add new
color for duplicate.
The file is been duplicate ctrl+D Then add new color for
duplicate. Is the new color for duplicate.
Ellipses and circles
1. Select the Ellipse tool from the shape tools menu, or press the
O key.
2. Select a spot in the canvas and drag in any direction to create
the ellips. The shape's dimensions will be shown in blue
underneath the layer:
3. There will be a blue bounding box around the ellipse, with a
handle in each corner.
Fit the Ellips
The image was fitted to the ellips or circle which is explore
for the animation
Rectangles
1. Select the Rectangle tool from the toolbar, or press R for the
keyboard shortcut.
2. Click on a spot in the canvas and drag to create the rectangle.
3. There will be a handle in each corner of the shape, this allows
you to resize the shape as you see fit.
Fit the Rectangles
1. Select the Rectangle tool from the toolbar, or press R for the
keyboard shortcut.
2. Click on a spot in the canvas and drag to create the rectangle.
3. There will be a handle in each corner of the shape, this allows
you to resize the shape as you see fit.
Edges
Select the Edges tool from the toolbar, or press right top key for
the keyboard shortcut.
1. Click on a spot in the canvas and drag to create the rectangle.
2. There will be a handle in each corner of the shape, this allows
you to resize the shape as you see fit.
1. Create a design file (click +
/ New in the draft tab)
2. Create a frame (click A / #
button from the top left)
3. Adding elements to your
design file from Figma
Community.
Set Guides (drag to create guide directly from the ruler)
Create Text (click T / Text button from the top left)
Figma is an end-to-end, web-based design and prototyping tool
The modern interface design tool. Figma is a free, online UI tool
to create, collaborate, prototype, and handoff..
Use the shortcut ⇧ Shift E to toggle the visibility of any
prototype connections. Figma will show any connections
between frames, as well as the starting points for any flows.
Create interactions and animations
1. Open the Prototype tab in the right sidebar.
2. Add interactions.
3. Set interaction details.
4. Apply an animation.
5. Preview your animation.
You can create mockups just in a few clicks
1. Add the device image, where you want to place the mockup.
2. Create a rectangle using the pen tool on your screen.
3. Select this rectangle as a destination.
4. Select the source. It can be a frame or image in your Figma
document. Or you can upload a new image.
5. Click “Transform”.
Create A Design in Figma. The first step to creating your new
website is designing it in Figma.
Install the Figment Plugin. When your design is complete, it is
time to generate your website.
Launch the Figment Plugin.
Publish your website.
Testing and Iteration
No design is perfect on the first try. That's why testing
and iteration are so important in the UI/UX process. By testing
your product with real users, you can identify areas for
improvement and make iterative changes to create a better user
experience.
For example, let's say you've designed a new website for
an e-commerce company. After conducting usability tests, you
discover that users are having trouble finding the search bar. By
making a small change to the placement and design of the search
bar, you can improve the user experience and increase
conversions
Roadmap for UI/UX Design
To create effective UI/UX designs, it is important to
follow a roadmap that outlines the necessary steps. The first
step is to conduct user research and gather insights about their
needs and preferences. This can be done through surveys,
interviews, and usability testing. Once you have a clear
understanding of your users, you can move on to creating user
personas and defining user journeys. The next step is to start
wireframing and prototyping. This involves creating low-fidelity
sketches and mockups of the interface, and testing them with
users to get feedback and refine the design. Once you have a
solid prototype, you can move on to high-fidelity design and
development. It is important to continuously test and iterate
throughout the entire process to ensure that the final product
meets the user's needs and expectations.
Conclusion
Congratulations!
You've now learned about the UI/UX learning process
and why it's so important. Remember, mastering UI/UX design
takes time and practice, but by following these principles and
incorporating them into your workflow, you can create products
that are both beautiful and functional.
So keep learning, experimenting, and iterating. And who
knows? Maybe one day you'll be the one giving this
presentation!
Thank You!
