Transcript webdesign

Web Design, DreamWeaver,
HTML, etc.
Snyder p89-115
Designing Websites
 Technological
Requirements
 Web Server & Infrastructure
or
 Out-source
Hosting
Technological Requirements
Web Server
 Computer $500-50,000
 Software
 Microsoft $500+/year
 Apache (free, but expertise required)
 High Speed Internet ($50+/month)
 Dedicated/Static IP (extra $50/month)
Out-sourced Hosting
 $5
- $5000
 What are the criteria we should care
about?
 What are our real options?
 What do we still need?
Other Essential Requirements

Still need a computer to develop web pages
 Still need software




Front Page
Dreamweaver
etc
Still need Internet Connect to reach off-site
host
 Still need a lot of expertise and knowledge
Expertise & Knowledge
 What
exactly do you need to know
 Where can you find it
 What about out-sourcing this?
 What kind of personnel do we need?
Web Design People

Programmers/Developers


Database Administrators


Photographers, Artists, Advertisers, Marketers
System Administrators


SQL, Oracle, SQL Server, ColdFusion, Content
Management
Designers


HTML, JavaScript, PHP, ASP, JSP
Servers, Client Setup (FTP, etc)
Who else?
What will you learn in this
class?
 A little
bit about everything.
 But you can concentrate on your
interest area?
 Marketing
 Design & Appearance
 Functionality & Back-end Stuff
 However, Everyone will learn to be
DreamWeaver Experts.
Human-Computer Interfaces

At its very root, an e-commerce website in an
interface between a human and a computer.
 Human-Computer Interfaces (HCI) is a well
studied object field.
 The best practices are highly intuitive, but
easy to forget.
 We are going to learn some of the basics
today.
Other Interfaces
 Is
this door locked?
Operationally Attuned
 Knowing
how a device or system works
is an aid to simplifying its use.
Operationally Attuned
 Knowing
how web sites are designed,
implemented, and deployed...
 helps
you use them more effectively (user
perspective)
 but it also helps you understand how a
business can use them more effectively
(developer perspective)
Human-Computer Interfaces
 Which
a.
one controls volume?
b.
Human-Computer Interfaces
 How
a.
did you know?
b.
Mnemonics
 Mnemonics
are an aid to remembering
something.
 Examples: HOMES – Huron, Ontario,
Michigan, Erie, and Superior.
 Visual Mnemonics are powerful aids
Graphical User Interfaces
 Digital
Metaphor for a real world device
or system
Basic Metaphors
 Buttons
are so intuitive that 1-years
understand their use
What do you think this button does?
How did you know exactly?
Basic Metaphors
– the metaphor is almost
identical to the real world entity
 Calendars
Basic Metaphors
 File
tabs are also intuitive
 But nowadays, who really uses a file
cabinet.
 The real world objects may become
extinct, but the metaphors live on.
Basic Metaphors
 Menus
are one metaphor that have
surpassed their real world counter parts
Web Based GUI’s
 The
Challenge: While its considered a
good practice to design GUI’s that
model real world entities, there are
trade-offs
 Complex
GUI’s can be slow on the Web
 They can be difficult to implement with
HTML, JavaScript, etc.
 They can be difficult to maintain on rapidly
changing websites
Web-based GUI’s
 Websites
themselves have become
everyday, real world objects.
 Example: I read more content on the
web than I read from books.
 Don’t stick with a metaphor unless its
really more intuitive than the digital
version.
What’s more intuitive?

Clicking and
dragging a page

Selecting a page
number
Web-based GUI trends

What are the best practices in designing web
pages?




Web pages for surveys
Web pages for buying a product
Web pages for browsing an online catalog
Great attention is spent on




Simplicity
Functionality
Consistency
Standardization
Designing a good ecommerce web page is much
easier than you think
 Open
Source Web Page Templates
 Stock Images
 WYSIWYG editors
 Database tools