Republic of the Philippines

CAVITE STATE UNIVERSITY

Silang Campus
Biga I, Silang, Cavite
 046 513-5706  046 513-3965
✉ [email protected]

DEPARTMENT OF INFORMATION TECHNOLGY

ITEC50 – Web System Technologies

Module 4 (Week 13-14)

Introduction to WebApp Design

Overview
Web application design is an important stage when building a web application. It focuses on the look
and feel of the web application. The design stage encompasses several different aspects, including
user interface design (UI), usability (UX), content production, and graphic design.

Objectives

After working on this module, you will be able to:

1. Understand how to develop a web by applying functional design.
2. Publish page in a way that enables visitors to view it.

A Brief Look at How Web Applications Work

To better understand what you will need during the development process, it helps to know how web
applications work. A web application is designed to execute a number of functions at the request of
the client and/or browser. The client makes a request through the Hypertext Transfer Protocol (HTTP)
network, the server processes that request, and the application tells it what response to send back to
the browser.

This is called client-server architecture, and is the basic structure of all web applications. Your
challenge in development is to figure out how to process each request and return the proper
response. This is done in three main layers.

1. Front-end layer: Creates the appearance and feel of the application through technologies such
as HTML, CSS, and JavaScript.
2. Application layer: Accountable for delivering responses back to the users.
3. Database storage layer: The location where data is stored.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Web Applications Goals - Graphic User Interface Design:

1. Simplicity
 Content should be informative but to the point and should use a delivery mode (e.g., text,
graphics, video, audio) that is appropriate to the information that is being delivered.
 Architecture should achieve WebApp objectives in the simplest possible manner.
 Navigation should be straightforward and navigation mechanisms should be naturally
obvious to the end user.
 Functions should be easy to use and easier to understand.
2. Consistency
 This design goal applies to virtually every element of the design model.
 Content should be constructed consistently
 e.g., text formatting and font styles should be the same across all text documents;
 Graphic art should have a consistent look, color scheme, and style)
3. Identity
 Establish an “identity” that is appropriate for the business purpose.
4. Robustness (Strength)
 The user expects robust content and functions that are relevant to the user’s needs.
5. Navigability
 Navigation should be simple and consistent.
 It should also be designed in a manner that is predictable.
 The user should understand how to move about the WebApp without having to search for
navigation links or instructions.
6. Visual appeal
 The look and feel of content, interface layout, color coordination, the balance of text,
graphics and other media, navigation mechanisms must appeal to end-users
7. Compatibility
 WebApp will be used in a variety of environments (e.g., different hardware, Internet
connection types, operating systems, browsers)
 It must be designed to be compatible with each.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Web Application Development Process Flow

1. FIRST DISCUSSION
The first step aims to give an overview of the problem we want to be solved and/or our needs.
If the needs aren’t well understood, it will lead to a failure in building a web app that aims to serve
the purposes. The following questions have to be answered once this first step is done:

 What are the underlying needs behind the application to be built?

 What problems should the app solve?
 What needs do the application fill? What will be the impact on our business?
 How will the application be used?
 What could be the consequences of the delay in building the app for our business?

2. REQUIREMENTS ANALYSIS
In the previous step, the goal was to identify the objectives of web app implementation. The
objectives can be complex, the business logic being often quite complex in general. It is then
important at this stage that these complex objectives can be broken down into more
manageable tasks and therefore easier to implement, validate, and test.

At the end of this step, the following tasks should have been completed:

 Reformulate the underlying needs and goals

 Think in terms of steps needed to complete the project
 Identify each different feature and module
 Break down every goal into simple tasks
 Consolidate the different analyses and approaches in a document so that validation
can be carried out.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 3. TIMELINE AND COST ESTIMATION
Experience is a good ally when it comes to making a good estimation. If a similar task has
been done before, it becomes easier to give an accurate estimation and time tracking
becomes our reference. From the previous step, we are able to have all the pieces we are
going to put together from end to end. For each task, we analyze its complexity and do a
classification.

 Perform a complexity analysis on each task

 Classify each task
 List all required development for each task: UI, logic, test.

4. THE DESIGN, CONCEPTION, AND PLANNING

The estimation gives us an idea of the time needed to complete the whole project. During
this step, our goal is to answer the following questions: who is doing what and when? What
is the best technical approach?

 Order each task in order to know which one should/must go before another
 Analyze dependency between all the tasks
 Identify every task that can be done in parallel
 Elaborate a timeline according to available resources or in case it is possible to have
all the resources we need, identify the number of resources needed, and then plan the
project
 Make an architectural choice.

Generally, at this stage, the financial and technical side of the web application creation is
settled down and we have an idea of the budget.

5. THE DEVELOPMENT
This is the most well-known step. Once the product requirements document is established, the
development phase can start. The goal of this phase is to create an application that meets
the needs identified in the previous steps, and as the needs generally evolve and new ideas
of implementation may arise during the implementation phase, it is generally advised to use a
methodology that allows flexibility and proactivity.

6. THE TESTING PHASE

This phase is also called the User Acceptance Test. During that phase, a test group of
users validates the set of features and report bugs if any, if there are changes to be made,
they can be discussed with the project manager who will advise about the best way to take
inputs and feedback into consideration.

7. THE DEPLOYMENT AND POST-PRODUCTION PHASE

Once every feature in a given release was validated and all the bugs reported fixed, the
deployment phase can start, it may be a first launch or deployment of the new release, this is
the moment when the web application will run in its real environment.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 WHO IS INVOLVED IN THE WEB APPLICATION DEVELOPMENT PROCESS FLOW?
From the web application development cycle, we can identify the required participants in order to run this
project smoothly. They are:

 The project manager: manage the project through its completion, mend the gap between the non-
technical and the technical teams
 The product owner: the person who will be responsible to validate that the deliverables meet the
organization’s expectations and needs
 Back-end developer
 Front-end developer (UI/UX)
 Quality Assurance Tester
 System Administrator

Web Application Architecture

The Internet is no longer about static web pages and longer loading times. Over time, the Internet
has made a shift towards active user engagement as well as extended functionality by means of visually
pleasing and powerful web applications.

A web application is just like a normal computer application except that it works over the Internet.
As everyone is on the web these days, most developers are looking to benefit from web apps and attract
as many users as possible via opportune offerings.

 Web application architecture is a framework connecting different elements to enable web

experience. It is the backbone of our daily internet browsing: typing in a URL and viewing and
interacting with the website while the browser communicates with the server is one of the ways to
describe what is web application architecture.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Attributes of a well-built web application architecture:

 Solves business problems

 Supports visual aesthetic
 Enables A/B testing and analytics
 Ensures fast user experience
 Provides security
 Sustainable and self-regulating
 Scales out and logs errors in an easy way
 Guarantees a high level of automation

How Does It Work?

With any typical web application, there are two different codes (sub-programs) running side-by-side.
These are:

 Client-side Code - The code that is in the browser and responds to some user input
 Server-side Code - The code that is on the server and responds to the HTTP requests

A web developer (team) developing the web application decides as to what the code on the server will do
with respect to the code in the browser. For writing server-side code, C#, Java, JavaScript, Python, PHP,
Ruby, etc. are used.

Any code that is able to respond to HTTP requests has the ability to run on a server. The server-
side code is responsible for creating the page that the user requested as well as storing different types of
data, including user profiles and user input. It is never seen by the end-user.

A combination of CSS, HTML, and JavaScript is used for writing the client-side code. This code is
parsed by the web browser. Unlike the server-side code, client-side code can be seen as well as modified
by the user. It reacts to user input.

The client-side code communicates only via HTTP requests and is not able to read files off a server
directly.

Types of Web Application Architecture

A web application architecture is a pattern of interaction between various web application components.
The type of web application architecture depends on how the application logic is distributed among the
client and server sides.

There are three primary types of web application architecture. Each one of them is explained as
follows:

 Single-Page Applications (SPAs) – Instead of loading completely new pages from the server
each time for a user action, single page web applications allow for a dynamic interaction by
means of providing updated content to the current page. SPAs are designed in a way so
that they request for most necessary content and information elements. This leads to the
procurement of an intuitive as well as interactive user experience.
 Microservices – These are small and lightweight services that execute a single functionality.
The Microservices Architecture framework has a number of advantages that allows developers
to not only enhance productivity but also speed up the entire deployment process.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

  Serverless Architectures – In this type of web application architecture, an application developer
consults a third-party cloud infrastructure services provider for outsourcing server as well as
infrastructure management. The benefit of this approach is that it allows applications to execute
the code logic without bothering with the infrastructure-related tasks.

The Serverless Architecture is best when the development company doesn’t want to manage
or support the servers as well as the hardware, they have developed the web application for.

User Interface Design Basics

 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:

1. Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles,
date field
2. Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal
windows
3. 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:

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.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 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.

Functional Design
• Users of modern WebApps expect that robust content will be coupled with sophisticated functionality

• This functionality will allow them to magnify their understanding of content, characterize content in
different ways, personalize their interaction, and provide added value to their website visit.

• Functional design of WebApps is almost always component based and compartmentalized

• The designer must consider the substantial constraints imposed by the Web infrastructure—such as a
distributed model (which complicates aspects like information handling and user responsiveness), security
issues, and the limited interface model inherent in Web browsers.

Functionality Categories Functionality Categories

• Group 1: User‐Level (External) Functionality. These categories include functionality

that directly affects users’ experience of the WebApp
– Category 1A: User Interaction Support (e.g. highlighting a link on a mouse-over)
– Category 1B: User Information Support (e.g. presentation of live sensor readings)
– Category 1C: User Task Support (e.g. dynamic checking and feedback on user‐provided
information)

• Group 2: Application‐Level (Internal) Functionality. These categories relate to

functionality that is necessary to support the WebApp, but which will only be
visible to users as a second‐order effect.
– Category 2A: Application Interaction Support (e.g. logging of user navigation behaviors)
– Category 2B: Application Information Support (e.g. database content maintenance)
– Category 2C: Application Task Support (e.g. payment system)

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Functionality Examples

 Client-side interaction support

– Drop‐down menus

 Client‐side information management

– Image zooming and scrolling

 Server‐side content handling

– Live score updates

 Server‐side management of large data sets

– Searching a product

 Process and/or work flow support

– A workflow

Functionality Levels and Design Tasks

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Activity

Group yourselves with 5 members each respectively. Based from what you’ve learned so far
from our previous lessons, apply and create your own website (Please refer to different
websites that we’ve tackled from the previous lessons) and present it in our next online
virtual class.

WEBSITE DESIGN RUBRIC

Criteria 5 4 3 2 Score
Contents of page Information is correct; three Information is mostly correct; Information is somewhat Information is ambiguous;
pages; hyperlinks to a menu and three pages; hyperlinks to a vague; one or two pages; link only one page; No links; text
additional pages; text is precisely menu and additional pages; s are missing; text somewhat is unorganized;
organized on page; grade level grade level appropriate; organized; email address inappropriate for grade
appropriate, google email email address is present present level; email address missing
address provided on page
Layout and Design The web site has an The web site has an attractive The web site has a usable The web site has a cluttered
exceptionally attractive and and usable layout. It is easy to layout, but may appear busy look and is confusing. It is
usable layout. It is easy to locate locate all important elements. or boring. It is easy to locate often difficult to locate
all important elements. White most of the important important elements.
space, graphic elements and/or elements.
alignment are used effectively to
organize material.
Graphics Graphics are related to the Graphics are related to the Graphics are related Graphics seem randomly
theme/purpose of the site, are theme/purpose of the site, are to the theme/purpose chosen, are of low quality,
thoughtfully cropped, are of high of good quality and enhance of the site, and are of OR distract the reader.
quality and enhance reader reader interest or good quality.
interest or understanding. understanding.
Navigation Links for navigation are clearly Links for navigation are clearly Links for navigation are the Some links do not take the
labeled, consistently placed, labeled, allow the reader to reader where expected, but reader to the sites/pages
allow the reader to easily move easily move from page to page some needed links seem to described. A user typically
from a page to related pages and and internal links take the reader be missing. A user feels lost.
take reader where he expects to where he expects to go. A user sometimes gets lost.
go. A user does not become lost. rarely becomes lost.
Work Ethic Student always uses classroom Student usually uses classroom Student usually uses Student does not use
project time well. Conversations project time well. Most classroom project time well, classroom project time well
are primarily focused on the conversations are focused on the but occasionally distracts OR typically is disruptive to
project and things needed to get project and things needed to get others from their work. the work of others.
the work done and are held in a the work done and are held in a
manner that typically does not manner that typically does not
disrupt others. disrupt others.
Content Accuracy All information provided by the Almost all the information Almost all of the information There are several
student on the Web site is provided by the student on the provided by the student on inaccuracies in the content
accurate and all the Web site is accurate and all the Web site is accurate and provided by the students
requirements of the assignment requirements of the assignment almost all of the OR many of the
have been met have been met. requirements have been requirements were not met.
met.
Learning of Material The student has an exceptional The student has a good The student has a fair Student did not appear to
understanding of the material understanding of the material understanding of the learn much from this
included in the site and where to included in the site. Can easily material included in the site. project. Cannot answer
find additional information. Can answer questions about the Can easily answer most most questions about the
easily answer questions about content and procedures used to questions about the content content and the procedures
the content and procedures used make the web site. and procedures used to used to make the web site.
to make the web site make the web site.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022