ITST 301 : Presentation 1 part 2

portable and accessible

A successful website must be _________ and ________ across different browsers, devices, and user abilities.

initial planning

Good design requires detailed _________

• Purpose of the website

• Goals of the business or individual

When planning, a developer should first know these things

saves time and improves quality

Proper planning _____ and __________ in development.

• Assumptions

• Excessive communication

• Backtracking

• Scope creep

• Confusion & dissatisfaction

• The Tire Swing Problem

What happens when you fail to plan?

Assumptions

Designer/developer guesses instead of having clear directions.

Excessive communication

Endless back-and-forth on trivial matters.

Backtracking

Delays, rework, and missed deadlines.

Scope creep

Extra work outside the original plan leads to higher costs.

Confusion & dissatisfaction

Frustrated team and unhappy clients.

The Tire Swing Problem

Miscommunication leads to very different results than

expected.

• Fast loading

• Attractive Design

• Clear Navigation

• Responsive Design

• High-Quality Content

User’s expectation when visiting a website

Purpose of a website

Every ____________ demands a different type of website and design.

Business

selling products/services

Informational

news, blogs, resources

Entertainment

videos, games, music

Portfolio/Personal Branding

trademark

Community/Interaction

forums, social media

Target Audience

is the specific group of people the website is designed for

• Age

• Gender

• Demographics (location, interests, culture)

• Computer literacy (tech-savvy vs. beginners)

Factors to consider the target audience

Billboard

Online presence, simple info, “digital brochure.”

Publishing

News/media sites, lots of content, often use CMS.

Portal

Gateway to the web, multiple services (search, email, shopping, news).

Special Interest, Public Interest & Nonprofit Organizations

Provide resources, links, news, downloadable files, and contact information. Nonprofits use them to share their mission, recruit volunteers, and build online communities.

Blog

A personal or thematic site reflecting the author’s ideas, hobbies, or expertise.

Social Networking

Online communities where users connect, share content, and communicate.

Wikis

Collaborative sites where users can edit, add, and link content (e.g., Wikipedia). Useful in academics, projects, and businesses.

RSS (Real Simple Syndication)

Automatically sends website updates (news, blogs,

articles) to subscribers using an special reader.

Virtual Gallery

Showcases art, music, writing, or design online. Digital watermarking helps protect copyright.

E-Commerce / Online Shopping

Sites like Amazon, Shopee, and Lazada. They

include product descriptions, shopping carts, secure checkout, and real-time stock updates.

Technical Support

Helps customers with troubleshooting, upgrades, and downloads.Reduces customer service calls. Especially useful for software companies (patches, updates, trial versions).

Intranet

network inside a company

Extranet

network that supports the shareholders access to the main company’s network

client’s need

The goal in design process is not just for aesthetic, but to meet _______

Technical side

developing, hosting, maintaining

Design side

layout & user experience

Discovery

know goals & users

Exploration

brainstorm & design ideas

Implementation

develop, test, launch

Discovery Phase

The goal of this phase is to understand the client and their business.

Target Audience & Competitors

specific people that the website or application should cater to, and knowing the rival companies

Exploration Phase

In this phase, we analyze the collected client’s information and organize it into a usable website structure.

Implementation Phase

The goal of this phase is to turn ideas into concrete design.

Web Usability

A website is usable if visitors can easily find what they need and choose to return again.

Usability

keeps users engaged and builds trust.

• Information Availability

• Page Layout

• Colors

• Download Speed

• Navigation

• Typography

• Graphics

Parameters of a Usable Website

Information Availability

Site should provide 80–90% of what users seek.

Page Layout

Clean, simple, and easy to scan. Keep only elements that aid usability.

Colors

Use standard link colors & coordinated schemes. Ensure high contrast for readability.

Download Speed

Optimize images & pages; avoid heavy layouts; check server performance.

Navigation

Clear, consistent menus; include a search box for quick access.

Typography

Text must be legible and support the site’s purpose/brand.

Graphics

Use visuals that enhance appeal and represent brand/products effectively.

Web Accessibility

means ensuring that all users, including those with disabilities (visual, hearing, physical, speech, cognitive, neurological, or age-related), can interact with and contribute to the web.

Vision Impairment

Low or no vision. Use screen readers, Braille displays,

magnifiers, or text zoom

Mobility Impairment

Limited/no hand use. Rely on modified mice/keyboards,

foot pedals, joysticks, or voice commands

Auditory Impairment

Limited/no hearing. Need captions, transcripts, or text

alternatives for multimedia

Cognitive Impairment

Memory, comprehension, or attention limitations. Benefit

from simple, clear design

Search Engine Visibility

If your site isn’t found on search engines then, it’s invisible to the world

Visibility

essential for traffic, reach, and relevance

Browser Compatibility

Different browsers interpret HTML tags differently which designs may not look the same.

Multiplatform Display

Before, websites built with fixed width, mainly for desktop browsers But now, we access via desktops, laptops, tablets, smartphones

Responsive Design

One website adapts to any device/screen size

Provides optimal viewing for all users

• Screen Sizes & Color Depth

• Browser Type & Version

• Font Choices

Portability on Web Design Key Considerations

Site Performance

Performance is critical no matter how users access your site.