The Open University of Tanzania (OUT)

OIT 111: Introduction to Web Design and

Development
 What is a Website
A Website is set of related
web pages served from a
single web domain. A website
is hosted on one or more web
server, which is accessible
via network such as the
internet or private network as
LAN through an internet
address know as Uniform
Resource Locator (URL)
 Key Points In Website Development
• Domain
• Hosting
• Technology
• Purpose
• Content
• Navigation
• Optimized
• Security
 Domain Name
• A domain name is a unique name
that identifies a website. It is an
identification string that defines a
real, of administrative autonomy,
authority or control on the internet.
Domain names are formed by the
roles Domain Name System (DNS).
Any name register in DNS is a
domain name
• A domain name represents an
Internet Protocol (IP) resources,
such as personal computer used to
access the internet, a server
computer hosting a website
 Web Hosting
• Hosting a website means making a
available to public worldwide. When you
create website, it is composed of web
pages having text, images, videos, and
other content for people to see them.
• However, people can see your website
only when it is available on the internet
• To make your website available on the
internet, you have to store it on a
computer called web server.
• When you buy some space on a web
server and store your WebPages there,
your website becomes hosted can be seen
by anyone
 Technology
• Client-Side Technologies
1. HTML
2. CSS
3. Java Scripts
• Server-Side Technology
1. PHP
2. XML
3. MySQL
4. Linux/Apache
5. Secure Server
 Design Concepts
• In designing most people think how something
looks.
• On web, first matter is how the site works
• There is a need to identify the followings;
• Site’s goals
• How it will be used
• How visitors moves through pages
 Design Concepts…
• The above tasks fall under interaction design
(IxD), user interface (UI) design and user
experience (UX) design
• Interaction Design (IxD) – deals with making
a site easy, efficient and delightful to user
• User Interface (UI) design closely related to
IxU
 Design Concepts…
• User Interface (UI)Design focus on
• Functional organization of the page as well as the
specific tools i.e. buttons, links, menu, etc that
users use to navigate contents or accomplish tasks
• User Experience (UX) Design
• Takes on general overview by ensuring the entire
experience with site is favorable
• UX based on understanding users and their needs
based on observations & interviews
 Web Development
• Traditional
 Web Design and development using languages
 In order to make web pages more dynamic looking, additional
programs and features such as JavaScript, PHP, Cascading
Style Sheets, and other were added to work with HTML pages
• Using CMS(Content Management System)
 An application which lets one create and manage a website
using an admin panel
 A content management system can potentially reduce website
implementation and design costs while greatly facilitating the
ability to manage content within the site
 Traditional Web Development
• HTML elements form the building blocks of all
websites.
• It can take longer to design a website using HTML
• Older versions of HTML can become obsolete and result
in diminished SEO over time as the code is update
• With HTML, one character out of place can mean your
entire website doesn’t load property; it is a much more
tedious process
 Content Management System
Description;
Content – any information published on a web site,
be it text, HTML, images, video…
Management – the workflow and processes in
place to create, share and control information
during its lifecycle
System – an application that enables the creation,
collection, publishing and presentation of content
 Content Management System
A CMS consists of two elements
1. The content management application (CMA) element allows
the content manager or author, who may not know Hypertext
Markup Language (HTML), to manage the creation,
modification, and removal of contents from a web site without
needing the expertise of a webmaster.
2. The content delivery application (CDA), element uses and
compiles that information to update the web site. The features
of a CMS system vary, but most include Web-based publishing,
format management, revision control, and index, search and
retrieval
 Content Management System:
Characteristics
o Content is separate from presentation
o WYSIWYG editors
o Not software-based browser-based
o Robust user management
o Content approval
o Easy installation of new features
 Content Management System:
Benefits
o Lower technical burden
o Streamlined content creation, approval and publishing
processes
o Timely, more accurate content
o Content scheduling and expiration
o Consistent templates and branding
o Facilitation of future site-wide changes
 Web Design and CMS:
• CMS or Content Management are becoming more and more popular with
web design organizations. They have come to realize that CMS is the
future of website development and may be left behind in the industry if
they do not begin offering CMS service
• CMS certainly saves the company’s time spends on web design and allows
them to put more efforts into marketing
• CMS gives the company the freedom it needs by providing them with
ability to update the site when needed, not when convenient
• CMS also saves the company’s costs by not having to run to the web
designer every time an update is needed
 Optimization
• Search Engine Optimization (SEO) – Process of
improving the ranking (visibility) website in
search engines
• The higher or more frequently website displayed
in a search engine list (i.e. google) the more
visitors expected to received
• SEO considers; How search engines works,
what people search for, which search terms
(words) are typed
 Optimization
• Effective search engine optimization require;
• Changes to HTML source code of a site and to
the site content
• SEO tacts should be incorporated into the
website development especially into menu and
navigation structure.
 Web Development Life Cycle
• Phases vary slightly from designer to designer,
however in this study the phases are based on
– Software Development Life Cycle (SDLC)
– Customer satisfaction aspects
• Phases Web Site Development
• Planning
• Analysis
• Design and Development
• Testing
• Implementation and Maintanance
Web Development Phases and Question
 Planning
• Before start need to remember that;
– Attempting to build a website without a
plans is like trying to construct a house
without architectural blueprint

Planning: (Google Images, 2015)

 Planning…
• Initial phase of the life cycle where the needs are
expressed
• The more planning done up front the less time
will be used during the actual building of the site
• What to do?
– Defining Purpose
• The clearer intention the more focused website will be
• Narrow purpose in one sentence
• Specify goals i.e. what will your site do?
• Determine audience
 Planning the Web Site…
• What to do?
– Running a feasibility study
– Consider costs
– Site structure
• Conceptualize your website
• Draw a sketch of your website
– Contents and Designing Planning
• See next slide
– Identify Web technologies you will use
 Contents & Structure Planning
• Organizational schema – describe how information
itself is structured.
– Classification system for content items
– Makes finding of the items easy (e.g. telephone book)
or difficult (e.g. looking for a particular sauce in a
supermarket)
– Used to cluster items in a group
• Organization structure determines the relationships
between the groups (or express how relationship
elements should be implemented)
Types of Organizational Schemes
• Exact organizational schemes
– Alphabetical
– Chronological
– Geographical
• Ambiguous organizational schemes
– Topical (by subject)
– Task-oriented
– Audience-oriented
– Metaphor driven
– Hybrid schemes
Task-oriented
Metaphor driven
Audience-oriented
 Analysis
• Step 1: What content will be on the page?
– What information is useful to the users?
• Step 2: How will the page function?
– What tasks do the users need to perform? i.e.
interactive elements
– What processes will be done on the site will
determine reactionary services that are
needed.
• Order placement, Requests, email response, log
comments
 Design and Development
• Create wire frame for a proposed website
• In this step, all images, icons, and multimedia elements
should begin to be defined
• Contents writing – with web support term the contents are
assembled and write
• Contents should be conformed to the current web stands and best
practice with regard to search engine optimization (SEO)
• Graphic design - creates all visual elements, including imagery,
icons, and multimedia elements..
 Design and Development...
• Colours palette, all font styles, all font sizes,
any image treatments, and other stylized
elements should be explicitly detailed in a
Style Guide.
• Focus on colour palettes and design elements,
which should conform to any existing
branding standards.
• At the completion of this step Design Comps
should be complete
 Design and Development...
• Appropriate layout for content • Links
– Site structure: Linear, – Navigation scheme
hierarchical, webbed, • Organization
broad, deep – File structure
– Site Layout: tables, frames, • Graphics
forms, CSS
– Custom, clip art, online
• Multimedia considerations generator, photographs
– Video, sound, animation • Colors
• Accessibility issues – Color scheme,
– Compliance with laws background
 Testing
 Site content correct
 Site Usability
 Accuracy
 Completeness
 Usability--measure of how well
 Consistency
site allows a user to accomplish
 Spelling
his or her goals
 Functional site
– Easy Navigation  Usability testing method users of
– Load time a site are asked to perform certain
– Working Links tasks in an effort to measure the
 Multi-browser support product’s ease-of-use and the
 Firefox, Internet Explorer, and others user’s perception of the
 Browser Version experience
 Information easily readable
– Font
– Size
– Color
 Web Site Implementations and
Maintenance
• Publish Site
– Who publish
– Where host
• Updates
– Who will update
– Who will send information?
– How will information be sent?
• Monitor
– For accuracy
– For content
 reference

• Robbins. J. N (2007). Learning Web Design,

3rd edition, O’Reilly Media, Canada.
• https://www.racc.edu/faculty/mkelly/WebLife
Cycle.pdf
• http://www.tutorialspoint.com/web_developers
_guide/web_basic_concepts.htm
Thank you

The End

36