Design Process by Mr. Kunal Ahire at MET's BKC IOE, Nashik
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Navigation design is the discipline of creating, analyzing and
implementing ways for users to navigate through a website or app.
Navigation plays an integral role in how users interact with and use
your products.
It is how your user can get from point A to point B and even point C in
the least frustrating way possible.
To make these delightful interactions, designers employ a combination
of
including links, labels and other UI elements.UI patterns
These patterns provide relevant information and make interacting
with products easier.
Good navigation design can:
Enhance a user’s understanding
Give them confidence using your product
Provide credibility to a product
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Imagine yourself using a word processor. You will be doing this in some
particular social and physical setting, for a purpose.
But now we are focussing on the computer system itself.
You interact at several levels:
Widgets
The appropriate choice of
widgets and wording in menus and buttons will help you know how to
use them for a particular selection or action.
Screens or windows
You need to find things on the screen, and
understand the logical grouping of buttons.
Navigation
within the application You need to be able to understand
what will happen when a button is pressed, to understand where you
are in the interaction.
Environment
The word processor has to read documents from disk,
perhaps some are on remote networks.
You swap between applications, perhaps cut and paste.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Just in case you haven’t already got the idea, the place to start when
considering the structure of an application is to think about actual use:
who is going to use the application?
how do they think about it?
what will they do with it?
This can then drive the second task – thinking about structure. Individual
screens or the layout of devices will have their own structure, but this is
for the next section.
Here we will consider two main kinds of issue:
local structure
looking from one screen or page out
global structure
structure of site, movement between screens.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Local structure
Much of interaction involves goal-seeking behavior. Users have some
idea of what they are after and a partial model of the system.
In an ideal world if users had perfect knowledge of what they wanted
and how the system worked they could simply take the shortest path
to what they want, pressing all the right buttons and links.
However, in a world of partial knowledge users meander through the
system.
The important thing is not so much that they take the most efficient
route, but that at each point in the interaction they can make some
assessment of whether they are getting closer to their (often partially
formed) goal.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Mr. Kunal Ahire, MET's BKC IOE, Nashik
To do this goal seeking, each state of the system or each screen needs
to give the user enough knowledge of what to do to get closer to their
goal.
To get you started here are four things to look for when looking at a
single web page, screen or state of a device.
knowing where you are
knowing what you can do
knowing where you are going – or what will happen
knowing where you’ve been – or what you’ve done.
The screen, web page or device displays should make clear where you
are in terms of the interaction or state of the system.
Some websites show ‘bread crumbs’ at the top of the screen, the path
of titles showing where the page is in the site
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Global structure – hierarchical organization
One way to organize a system is in some form of hierarchy.
This is typically organized along functional boundaries (that is,
different kinds of things), but may be organized by roles, user type, or
some more esoteric breakdown such as modules in an educational
system.
The hierarchy links screens, pages or states in logical groupings.
For example, the Figure gives a high-level breakdown of some sort of
messaging system.
This
sort of hierarchy can be used purely to help during design, but can
also be used to structure the actual system.
For example, this may reflect the menu structure of a PC application or
the site structure on the web.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Application functional hierarchy
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Any sort of information structuring is difficult, but there is evidence that
people find hierarchies simpler than most.
One of the difficulties with organizing information
or system functionality is that different people have different internal
structures for their knowledge, and may use different vocabulary.
This is one of the places where a detailed knowledge of the intended
users is essential: it is no good creating a hierarchy that the designers
understand, but not the users...and all too commonly this is exactly what
happens.
There is also evidence that deep hierarchies are difficult to navigate, so
it is better to have broad top-level categories, or to present several
levels of menu on one screen or web page.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Donne said ‘No man is an Iland, intire of it selfe’. This is also true of the things
we design.
Each sits amongst other devices and applications and this in turn has to be
reflected within our design.
This has several implications:
Style issues
We should normally conform to platform standards, such as
positions for menus on a PC application, to ensure consistency between
applications.
For
example, on our proposed personal movie player we should make use of
standard fast-forward, play and pause icons.
Functional issues
On a PC application we need to be able to interact with files,
read standard formats and be able to handle cut and paste.
Navigation issues
We may need to support linkages between applications, for
example allowing the embedding of data from one application in another, or, in
a mail system, being able to double click an attachment icon and have the right
application launched for the attachment.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
The basic principles at the screen level reflect those in other areas of
interaction
design:
Ask
What is the user doing?
Think
What information is required? What comparisons may the user
need to make? In what order are things likely to be needed?
Design
Form follows function: let the required interactions drive the
layout.
Tools for layout
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Grouping and structure
Order of groups and items
Decoration
Alignment
White space
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Entering information
Some of the most complicated and difficult screen layouts are found in
forms-based interfaces and dialog boxes. In each case the screen
consists not only of information presented to the user, but also of places
for the user to enter information or select options.
Actually, many of the same layout issues for data presentation also apply
to fields for data entry.
Alignment is still important. It is especially common to see the text
entry boxes aligned in a jagged fashion because the field names are of
different lengths.
This is an occasion where right-justified text for the field labels may be
best or, alternatively, in a graphical interface a smaller font can be used
for field labels and the labels placed just above and to the left of the field
they refer to.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Entering information
For both presenting and entering information a clear logical layout is
important.
The task analysis techniques in Chapter 15 can help in determining how
to group screen items and also the order in which users are likely to
want to read them or fill them in.
Knowing also that users are likely to read from left to right and top to
bottom (depending on their native language!) means that a screen can
be designed so
that
users encounter items in an appropriate order for
the task at hand.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Knowing what to do
Some elements of a screen are passive, simply giving you information; others
are active, expecting you to fill them in, or do something to them.
It is often not even clear which elements are active, let alone what the effect is
likely to be when you interact with them!
This is one of the reasons for platform and company style guides.
If everyone designs buttons to look the same and menus to look the same, then
users will be able to recognize them when they see them.
However, this is not sufficient in itself.
It is important that the labels and icons on menus are also clear.
Again, standards can help for common actions such as save, delete or print.
For more system-specific actions, one needs to follow broader principles.
For example, a button says ‘bold’: does this represent the current state of a
system or the action that will be performed
if the button is pressed?
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Affordances
These are especially difficult problems in multimedia applications
where one may deliberately adopt a non-standard and avant-garde style.
How are users supposed to know where to click?
The psychological idea of affordance says that things may suggest by
their shape and other attributes what you can do to them: a handle
affords pulling or lifting; a button affords pushing.
These affordances can be used when designing novel interaction
elements. One can either mimic real-world objects directly, or try to
emulate the critical aspects of those objects.
What you must not do is depict a real-world object in a context where
its normal affordances do not work!
Mr. Kunal Ahire, MET's BKC IOE, Nashik
A wireframe is a basic, two-dimensional visual representation of a web
page, app interface, or product layout.
You can think of it as a low-fidelity, functional sketch.
Product designers and UX (user experience) professionals draw up
wireframes to communicate how they plan to arrange and prioritize
features, and how they intend for users to interact with its product or
website.
Wireframes typically depict only functionality, not the true style and
visual elements of the final product.
It’s why most wireframes look simple: grayscale instead of colors,
placeholders for images, and Lorem Ipsum for text.
Note:
This tool has become so popular with product teams that many now
use the term as a verb:
“Let’s wireframe that section to see how it will tie in
with the rest of the app.”
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Example wireframes for mobile shopping app / Source
Mr. Kunal Ahire, MET's BKC IOE, Nashik
What Are the Benefits of Wireframes?
Wireframes help product organizations both visually communicate and
document their plans for developing products or sites.
It can help ensure the entire
cross-functional
team is on the same page
in terms of strategic goals before beginning development work.
Here are a few examples of what wireframes can do for an
organization:
Communicate the team’s decisions about which functionality and
content to prioritize in the product or site.
Depict how the team envisions users to interact with the product or site.
Document and communicate how various aspects of the app or website
will connect.
Establish consistent ways of displaying particular content across the
site.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
How Do You Create a Wireframe?
Step 1: Articulate
Make sure your team understands the problem you are trying to solve.
A good place to start is answering questions such as:
Who will be using this?
What are their goals?
How will they likely try to achieve those goals?
Step 2: Generate
It is the brainstorming step. Use this time to generate as many ideas as
possible.
Don’t worry about viability or feasibility at this stage.
You’ll scrutinize these ideas and weigh them against each other later.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Step 3: Iterate
Review the ideas your team came up with within the previous step. Start
critiquing and ordering them.
You can also bring in other stakeholders now to help narrow the list.
As you zero in on the high-priority functionality and a user journey that
makes sense, you can start building the wireframe.
Sketch out the basic layout and the priority order of content and
features your users will encounter.
Step 4: Communicate
Now that you have a working wireframe, Barnard suggests it’s time to
share it with your organization.
This communication should take two forms:
Build a story around the wireframe
Develop instructions for your developers
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Step 5: Validate
At this point, your team has spent time on research, strategic
brainstorming, and drafting the wireframe itself.
But you haven’t yet started writing code or building an actual product.
Before you make that commitment of time and budget, you’ll want to
double-check a couple of things.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Interactive applications are implemented and executed using the user
interface (UI) software layers (collectively the UI layer).
UI layer refers to a set of software that operates above the core
operating system (and underneath the application).
It encapsulates and exposes system functions for
•
Fluid input and output (I/O)
•
Facilitation of development of I/O functionalities (in the form of an
application programming interface/library [API] or toolkit)
•
Run-time management of graphical applications and UI elements often
manifested as windows or graphical user interface (GUI) elements (in
the form of separate application often called the window manager)
.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Since most interfaces are graphical, the UI layer uses a two-or three-
dimensional (2-D or 3-D) graphical system based on which GUI
elements are implemented (lower part of Figure ).
Thus, to summarize, the UI layer is largely composed of
(a)
an API for creating and managing the user interface elements (e.g.,
windows, buttons, menus) and
(b)
a window manager to allow users to operate and manage the
applications through its own user interfaces.
Figure illustrates the UI layer as part of the system software in many
computing platforms.
The user interacts with the window/ GUI-based applications using
various input and output devices.
At the same time, aside from the general applications, the user interacts
with the computer and manages multiple application windows/ tasks
(e.g., resizing, focusing, cutting and pasting, etc.) using the (background
running) window manager.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
User interface software layer for a window-based multitasking UI.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
The window manager is regarded as both an application and API.
User applications are developed using the APIs that represent
abstracted I/O-related functionalities of the UI layer, such as those for
window managing (resizing, iconifying, dragging, copy and paste, etc.),
GUI elements and widgets (windows, menus, buttons, etc.), and basic
windowing (creating/destroying window, deactivating window, etc.).
These APIs are abstracted from the even lower-level APIs for 2-D/3-D
graphics and the operating system.
Note that the architecture described here can be equally applied to non-
window-based systems, such as those for layer-based systems*
(e.g., mobile phones).
Through such an architecture and abstraction, it becomes much easier
to develop and implement interactive applications and their user
interfaces.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Over the last few years, websites have shifted from simple HTML pages
with a bit of CSS to incredibly complex applications with thousands of
developers working on them at the same time.
To work with these complex web applications developers use different
design patterns to lay out their projects, to make the code less complex
and easier to work with.
The most popular of these patterns is MVC also known as Model View
Controller.
The
Model-View-Controller (MVC)
framework is an
architectural/design pattern that separates an application into three
main logical components Model, View, and Controller.
Each architectural component is built to handle specific development
aspects of an application.
It isolates the business logic and presentation layer from each other.
It was traditionally used for desktop graphical user interfaces (GUIs).
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Nowadays, MVC is one of the most frequently used industry-standard
web development frameworks to create scalable and extensible
projects.
It is also used for designing mobile apps.
MVC was created by Trygve Reenskaug.
The main goal of this design pattern was to solve the problem of users
controlling a large and complex data set by splitting a large application
into specific sections that all have their own purpose.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Features of MVC :
It provides a clear separation of business logic, Ul logic, and input logic.
It offers full control over your HTML and URLs which makes it easy to
design web application architecture.
It is a powerful URL-mapping component using which we can build
applications that have comprehensible and searchable URLs.
It supports Test Driven Development (TDD).
Components of MVC :
The MVC framework includes the following 3 components:
Controller
Model
View
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Controller:
The controller is the component that enables the interconnection
between the views and the model so it acts as an intermediary.
The controller doesn’t have to worry about handling data logic, it just
tells the model what to do.
It process all the business logic and incoming requests, manipulate data
using the Model component and interact with the View to render the
final output.
View:
The View component is used for all the UI logic of the application.
It generates a user interface for the user.
Views are created by the data which is collected by the model
component but these data aren’t taken directly but through the
controller.
It only interacts with the controller.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Model:
The Model component corresponds to all the data-related logic that the
user works with.
This can represent either the data that is being transferred between the
View and Controller components or any other business logic-related
data. It can add or retrieve data from the database.
It responds to the controller’s request because the controller can’t
interact with the database by itself.
The model interacts with the database and gives the required data back
to the controller.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Advantages of MVC:
Codes are easy to maintain and they can be extended easily.
The MVC model component can be tested separately.
The components of MVC can be developed simultaneously.
It reduces complexity by dividing an application into three units. Model,
view, and controller.
It supports Test Driven Development (TDD).
It works well for Web apps that are supported by large teams of web
designers and developers.
This architecture helps to test components independently as all classes
and objects are independent of each other
Search Engine Optimization (SEO) Friendly.
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Disadvantages of MVC:
It is difficult to read, change, test, and reuse this model
It is not suitable for building small applications.
The inefficiency of data access in view.
The framework navigation can be complex as it introduces new layers
of abstraction which requires users to adapt to the decomposition
criteria of MVC.
Increased complexity and Inefficiency of data
Mr. Kunal Ahire, MET's BKC IOE, Nashik
Popular MVC Frameworks:
Some of the most popular and extensively used MVC frameworks are listed
below.
Ruby on Rails
Django
CherryPy
Spring MVC
Catalyst
Rails
Zend Framework
Fuel PHP
Laravel
Symphony
MVC
is generally used on applications that run on a single graphical
workstation. The division of logical components enables readability and
modularity as well it makes more comfortable for the testing part.
Navigation design involves creating user-friendly ways for users to navigate through websites or apps. It plays a crucial role in enhancing user understanding and confidence, as well as providing credibility to products. Designers use UI patterns like links and labels to make interactions easier and more delightful. Consideration of local and global structures is essential, guiding users in achieving their goals efficiently within the system.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
UNIT IV DESIGN PROCESS Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Navigation design is the discipline of creating, analyzing and implementing ways for users to navigate through a website or app. Navigation plays an integral role in how users interact with and use your products. It is how your user can get from point A to point B and even point C in the least frustrating way possible. To make these delightful interactions, designers employ a combination of UI patterns including links, labels and other UI elements. These patterns provide relevant information and make interacting with products easier. Good navigation design can: Enhance a user s understanding Give them confidence using your product Provide credibility to a product Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Imagine yourself using a word processor. You will be doing this in some particular social and physical setting, for a purpose. But now we are focussing on the computer system itself. You interact at several levels: Widgets The appropriate choice of widgets and wording in menus and buttons will help you know how to use them for a particular selection or action. Screens or windows You need to find things on the screen, and understand the logical grouping of buttons. Navigation within the application You need to be able to understand what will happen when a button is pressed, to understand where you are in the interaction. Environment The word processor has to read documents from disk, perhaps some are on remote networks. You swap between applications, perhaps cut and paste. Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Just in case you haven t already got the idea, the place to start when considering the structure of an application is to think about actual use: who is going to use the application? how do they think about it? what will they do with it? This can then drive the second task thinking about structure. Individual screens or the layout of devices will have their own structure, but this is for the next section. Here we will consider two main kinds of issue: local structure looking from one screen or page out global structure structure of site, movement between screens. Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Local structure Much of interaction involves goal-seeking behavior. Users have some idea of what they are after and a partial model of the system. In an ideal world if users had perfect knowledge of what they wanted and how the system worked they could simply take the shortest path to what they want, pressing all the right buttons and links. However, in a world of partial knowledge users meander through the system. The important thing is not so much that they take the most efficient route, but that at each point in the interaction they can make some assessment of whether they are getting closer to their (often partially formed) goal. Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN To do this goal seeking, each state of the system or each screen needs to give the user enough knowledge of what to do to get closer to their goal. To get you started here are four things to look for when looking at a single web page, screen or state of a device. knowing where you are knowing what you can do knowing where you are going or what will happen knowing where you ve been or what you ve done. The screen, web page or device displays should make clear where you are in terms of the interaction or state of the system. Some websites show breadcrumbs at the top of the screen, the path of titles showing where the page is in the site Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Global structure hierarchical organization One way to organize a system is in some form of hierarchy. This is typically organized along functional boundaries (that is, different kinds of things), but may be organized by roles, user type, or some more esoteric breakdown such as modules in an educational system. The hierarchy links screens, pages or states in logical groupings. For example, the Figure gives a high-level breakdown of some sort of messaging system. This sort of hierarchy can be used purely to help during design, but can also be used to structure the actual system. For example, this may reflect the menu structure of a PC application or the site structure on the web. Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Application functional hierarchy Mr. Kunal Ahire, MET's BKC IOE, Nashik
NAVIGATION DESIGN Any sort of information structuring is difficult, but there is evidence that people find hierarchies simpler than most. One of the difficulties with organizing information or system functionality is that different people have different internal structures for their knowledge, and may use different vocabulary. This is one of the places where a detailed knowledge of the intended users is essential: it is no good creating a hierarchy that the designers understand, but not the users...and all too commonly this is exactly what happens. There is also evidence that deep hierarchies are difficult to navigate, so it is better to have broad top-level categories, or to present several levels of menu on one screen or web page. Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIDER STILL Donne said No man is an Iland, intire of it selfe . This is also true of the things we design. Each sits amongst other devices and applications and this in turn has to be reflected within our design. This has several implications: Style issues We should normally conform to platform standards, such as positions for menus on a PC application, to ensure consistency between applications. For example, on our proposed personal movie player we should make use of standard fast-forward, play and pause icons. Functional issues On a PC application we need to be able to interact with files, read standard formats and be able to handle cut and paste. Navigation issues We may need to support linkages between applications, for example allowing the embedding of data from one application in another, or, in a mail system, being able to double click an attachment icon and have the right application launched for the attachment. Mr. Kunal Ahire, MET's BKC IOE, Nashik
SCREEN DESIGN AND LAYOUT The basic principles at the screen level reflect those in other areas of interaction design: Ask What is the user doing? Think What information is required? What comparisons may the user need to make? In what order are things likely to be needed? Design Form follows function: let the required interactions drive the layout. Tools for layout Mr. Kunal Ahire, MET's BKC IOE, Nashik
SCREEN DESIGN AND LAYOUT Grouping and structure Order of groups and items Decoration Alignment White space Mr. Kunal Ahire, MET's BKC IOE, Nashik
USER ACTION AND CONTROL Entering information Some of the most complicated and difficult screen layouts are found in forms-based interfaces and dialog boxes. In each case the screen consists not only of information presented to the user, but also of places for the user to enter information or select options. Actually, many of the same layout issues for data presentation also apply to fields for data entry. Alignment is still important. It is especially common to see the text entry boxes aligned in a jagged fashion because the field names are of different lengths. This is an occasion where right-justified text for the field labels may be best or, alternatively, in a graphical interface a smaller font can be used for field labels and the labels placed just above and to the left of the field they refer to. Mr. Kunal Ahire, MET's BKC IOE, Nashik
USER ACTION AND CONTROL Entering information For both presenting and entering information a clear logical layout is important. The task analysis techniques in Chapter 15 can help in determining how to group screen items and also the order in which users are likely to want to read them or fill them in. Knowing also that users are likely to read from left to right and top to bottom (depending on their native language!) means that a screen can be designed so that users encounter items in an appropriate order for the task at hand. Mr. Kunal Ahire, MET's BKC IOE, Nashik
USER ACTION AND CONTROL Knowing what to do Some elements of a screen are passive, simply giving you information; others are active, expecting you to fill them in, or do something to them. It is often not even clear which elements are active, let alone what the effect is likely to be when you interact with them! This is one of the reasons for platform and company style guides. If everyone designs buttons to look the same and menus to look the same, then users will be able to recognize them when they see them. However, this is not sufficient in itself. It is important that the labels and icons on menus are also clear. Again, standards can help for common actions such as save, delete or print. For more system-specific actions, one needs to follow broader principles. For example, a button says bold : does this represent the current state of a system or the action that will be performed if the button is pressed? Mr. Kunal Ahire, MET's BKC IOE, Nashik
USER ACTION AND CONTROL Affordances These are especially difficult problems in multimedia applications where one may deliberately adopt a non-standard and avant-garde style. How are users supposed to know where to click? The psychological idea of affordance says that things may suggest by their shape and other attributes what you can do to them: a handle affords pulling or lifting; a button affords pushing. These affordances can be used when designing novel interaction elements. One can either mimic real-world objects directly, or try to emulate the critical aspects of those objects. What you must not do is depict a real-world object in a context where its normal affordances do not work! Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch. Product designers and UX (user experience) professionals draw up wireframes to communicate how they plan to arrange and prioritize features, and how they intend for users to interact with its product or website. Wireframes typically depict only functionality, not the true style and visual elements of the final product. It s why most wireframes look simple: grayscale instead of colors, placeholders for images, and Lorem Ipsum for text. Note: This tool has become so popular with product teams that many now use the term as a verb: Let s wireframe that section to see how it will tie in with the rest of the app. Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME Example wireframes for mobile shopping app / Source Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME What Are the Benefits of Wireframes? Wireframes help product organizations both visually communicate and document their plans for developing products or sites. It can help ensure the entire cross-functional team is on the same page in terms of strategic goals before beginning development work. Here are a few examples of what wireframes can do for an organization: Communicate the team s decisions about which functionality and content to prioritize in the product or site. Depict how the team envisions users to interact with the product or site. Document and communicate how various aspects of the app or website will connect. Establish consistent ways of displaying particular content across the site. Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME How Do You Create a Wireframe? Step 1: Articulate Make sure your team understands the problem you are trying to solve. A good place to start is answering questions such as: Who will be using this? What are their goals? How will they likely try to achieve those goals? Step 2: Generate It is the brainstorming step. Use this time to generate as many ideas as possible. Don t worry about viability or feasibility at this stage. You ll scrutinize these ideas and weigh them against each other later. Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME Step 3: Iterate Review the ideas your team came up with within the previous step. Start critiquing and ordering them. You can also bring in other stakeholders now to help narrow the list. As you zero in on the high-priority functionality and a user journey that makes sense, you can start building the wireframe. Sketch out the basic layout and the priority order of content and features your users will encounter. Step 4: Communicate Now that you have a working wireframe, Barnard suggests it s time to share it with your organization. This communication should take two forms: Build a story around the wireframe Develop instructions for your developers Mr. Kunal Ahire, MET's BKC IOE, Nashik
WIREFRAME Step 5: Validate At this point, your team has spent time on research, strategic brainstorming, and drafting the wireframe itself. But you haven t yet started writing code or building an actual product. Before you make that commitment of time and budget, you ll want to double-check a couple of things. Mr. Kunal Ahire, MET's BKC IOE, Nashik
UNDERSTANDING THE UI LAYER AND ITS EXECUTION FRAMEWORK Interactive applications are implemented and executed using the user interface (UI) software layers (collectively the UI layer). UI layer refers to a set of software that operates above the core operating system (and underneath the application). It encapsulates and exposes system functions for Fluid input and output (I/O) Facilitation of development of I/O functionalities (in the form of an application programming interface/library [API] or toolkit) Run-time management of graphical applications and UI elements often manifested as windows or graphical user interface (GUI) elements (in the form of separate application often called the window manager). Mr. Kunal Ahire, MET's BKC IOE, Nashik
UNDERSTANDING THE UI LAYER AND ITS EXECUTION FRAMEWORK Since most interfaces are graphical, the UI layer uses a two-or three- dimensional (2-D or 3-D) graphical system based on which GUI elements are implemented (lower part of Figure ). Thus, to summarize, the UI layer is largely composed of (a) an API for creating and managing the user interface elements (e.g., windows, buttons, menus) and (b) a window manager to allow users to operate and manage the applications through its own user interfaces. Figure illustrates the UI layer as part of the system software in many computing platforms. The user interacts with the window/ GUI-based applications using various input and output devices. At the same time, aside from the general applications, the user interacts with the computer and manages multiple application windows/ tasks (e.g., resizing, focusing, cutting and pasting, etc.) using the (background running) window manager. Mr. Kunal Ahire, MET's BKC IOE, Nashik
UNDERSTANDING THE UI LAYER AND ITS EXECUTION FRAMEWORK User interface software layer for a window-based multitasking UI. Mr. Kunal Ahire, MET's BKC IOE, Nashik
UNDERSTANDING THE UI LAYER AND ITS EXECUTION FRAMEWORK The window manager is regarded as both an application and API. User applications are developed using the APIs that represent abstracted I/O-related functionalities of the UI layer, such as those for window managing (resizing, iconifying, dragging, copy and paste, etc.), GUI elements and widgets (windows, menus, buttons, etc.), and basic windowing (creating/destroying window, deactivating window, etc.). These APIs are abstracted from the even lower-level APIs for 2-D/3-D graphics and the operating system. Note that the architecture described here can be equally applied to non- window-based systems, such as those for layer-based systems* (e.g., mobile phones). Through such an architecture and abstraction, it becomes much easier to develop and implement interactive applications and their user interfaces. Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Over the last few years, websites have shifted from simple HTML pages with a bit of CSS to incredibly complex applications with thousands of developers working on them at the same time. To work with these complex web applications developers use different design patterns to lay out their projects, to make the code less complex and easier to work with. The most popular of these patterns is MVC also known as Model View Controller. The Model-View-Controller architectural/design pattern that separates an application into three main logical components Model, View, and Controller. Each architectural component is built to handle specific development aspects of an application. It isolates the business logic and presentation layer from each other. It was traditionally used for desktop graphical user interfaces (GUIs). (MVC) framework is an Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Nowadays, MVC is one of the most frequently used industry-standard web development frameworks to create scalable and extensible projects. It is also used for designing mobile apps. MVC was created by Trygve Reenskaug. The main goal of this design pattern was to solve the problem of users controlling a large and complex data set by splitting a large application into specific sections that all have their own purpose. Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Features of MVC : It provides a clear separation of business logic, Ul logic, and input logic. It offers full control over your HTML and URLs which makes it easy to design web application architecture. It is a powerful URL-mapping component using which we can build applications that have comprehensible and searchable URLs. It supports Test Driven Development (TDD). Components of MVC : The MVC framework includes the following 3 components: Controller Model View Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Controller: The controller is the component that enables the interconnection between the views and the model so it acts as an intermediary. The controller doesn t have to worry about handling data logic, it just tells the model what to do. It process all the business logic and incoming requests, manipulate data using the Model component and interact with the View to render the final output. View: The View component is used for all the UI logic of the application. It generates a user interface for the user. Views are created by the data which is collected by the model component but these data aren t taken directly but through the controller. It only interacts with the controller. Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Model: The Model component corresponds to all the data-related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic-related data. It can add or retrieve data from the database. It responds to the controller s request because the controller can t interact with the database by itself. The model interacts with the database and gives the required data back to the controller. Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Advantages of MVC: Codes are easy to maintain and they can be extended easily. The MVC model component can be tested separately. The components of MVC can be developed simultaneously. It reduces complexity by dividing an application into three units. Model, view, and controller. It supports Test Driven Development (TDD). It works well for Web apps that are supported by large teams of web designers and developers. This architecture helps to test components independently as all classes and objects are independent of each other Search Engine Optimization (SEO) Friendly. Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Disadvantages of MVC: It is difficult to read, change, test, and reuse this model It is not suitable for building small applications. The inefficiency of data access in view. The framework navigation can be complex as it introduces new layers of abstraction which requires users to adapt to the decomposition criteria of MVC. Increased complexity and Inefficiency of data Mr. Kunal Ahire, MET's BKC IOE, Nashik
MVC FRAMEWORK INTRODUCTION Popular MVC Frameworks: Some of the most popular and extensively used MVC frameworks are listed below. Ruby on Rails Django CherryPy Spring MVC Catalyst Rails Zend Framework Fuel PHP Laravel Symphony MVC is generally used on applications that run on a single graphical workstation. The division of logical components enables readability and modularity as well it makes more comfortable for the testing part. Mr. Kunal Ahire, MET's BKC IOE, Nashik
![❤[PDF]⚡ Zee Zee Does It Anyway!: A Story about down Syndrome and Determination](/thumb/20462/pdf-zee-zee-does-it-anyway-a-story-about-down-syndrome-and-determination.jpg)
