Transcript Powell, T. , Web Design - Journalism and Multimedia Arts

Today’s objectives
Our network
 Defining web design
 Introduction to design precepts
 Markup

Assignments
1.
2.
3.
4.
5.
6.
Labs/homework - design exercises (7)
Quizzes
Midterm Exam/project (EX) (Doc EX) (EX)
Final Course Project (EX) (EX)
Final Exam
Graduate project
Our network: User Name and
Password

To connect to our servers from within either of our
two labs (205 or 345):
 Ctrl-Alt-Delete
 Username:
Dori username
 PW: Dori password
Our network: User Name and
Password



Labs (205, 345) - login with your DORI username
and password (i.e. the email part, up to the @
symbol).
If you don't know your password, need to go to the
computer help desk in the union.
OR simply go to the "forgot your password" screen
on DORI from any logged-in computer. (Here's the
link: https://apps.duq.edu/webapps/multipass/ ).
Our network: FTP and Z Drives

Student URLS now match DORI login. My old site
www.jma.duq.edu/users/gibbs/pub/whatever,

would now be
www.jma.duq.edu/users/gibbsw/pub/whatever

Students will use Dori login with no prefix. Logins DO NOT
need the jma\ prefix.
Our network: FTP and Z Drives



Later registrants may not have a z drive.
If you do not have a Z drive, write down your name and Dori
ID so it can be created.
FTP address is your DORI name, not simply your last name.
Our network: Server
www.jma.duq.edu

Your private folder
It’s a subfolder of users folder

www.jma.duq.edu/users/DoriUsername

Save files (drag and drop files) while in either lab (CH205, CH345)

You can also FTP to there from home…

Our network: How do I access the
server?

Access from either CH345 and CH205

Start >> Computer (Z: Drive)
Our network: How do I access the
server?
From dorm or home
ftp://www.jma.duq.edu/users/YourDoriUsername

Example: ftp://www.jma.duq.edu/users/gibbsw/

You will be prompted for your user name and password

Use the same name and password you used to login to Dori
Our network: How do I access the
server? (from dorm or home)
• Folders and files display
• Transfer (put) files from your computer,
• Download (get) files to your computer.
USER FOLDER
The PUB folder
www.jma.duq.edu
Your Space
User folder
Folder
PUB
Folder
File
File
Folder
File
File
www.jma.duq.edu
Your Space
User folder
Folder
All files for
the
Web must
be in PUB
PUB
Folder
File
File
Folder
File
File
User Folder
Your folder on server has a child folder named
pub
 Inside that folder you should create a folder
for each course that requires a web site
 In this course, create a sub folder named
JMA318 or JMA574

The PUB folder
•You might create subfolders, for each
course.
Double-click on pub
Right-click on any
unused white area
Web URL


The URL to your website(s) depend on how you structured your home folder
Using earlier example
http://www.jma.duq.edu/users/gibbsw/pub/JMA318/FileName.htm

Assuming your file name is default.htm, or index.htm in the jma318 folder the
address would be:
http://www.jma.duq.edu/users/gibbsw/pub/JMA318/index.htm
DEFINING WEB DESIGN
Define Web Design


Good web design is much more than creating pretty
pages.
Basic concepts of
 color
theory
 typography
 layout , and
 usability are all part of a good design.
(Hogan, 2009)
Define Web Design
Everyone has some sense of what Web design is... but
what is it really.
 Visual
and graphic design
 Programming
 Information architecture (creation and organization of
content),
 Usability?

All part of any discussion - but their importance in
design and development varies from person to
person and from site to site.
Define Web Design


Web design is a multidisciplinary field.
Influenced by:
 library
science
 graphic design
 programming
 networking
 user interface design
 usability
 human computer interaction
 psychology

and a host of other fields.
Define Web Design
More recent disciplines…
 Where do these fit into Web design?
User Experience design (UXD),
Interaction design (IxD), and
User Interface design (UID)

User Experience, Interaction, and
User Interface design



Often, when we think of design, we think about how
something looks.
On the Web, must also thing about how the site
works.
Before picking colors and fonts, must identify the
 site’s
goals
 how it will be used, and
 how visitors move through it.
User Experience, Interaction, and
User Interface design



Interaction designer makes program as easy,
efficient, and delightful to use as possible.
Interface designer focused on the functionality of the
interface as well as the specific tools (buttons, links,
menus, and so on) that users use to accomplish tasks.
UX designer takes holistic view-ensuring entire
experience with the program is favorable, based
on understanding of users and their needs.
User Experience, Interaction, and
User Interface design
Documents an IxD, UI, or UX designer might produce
include
 User research and testing reports
 Wireframe diagrams
 Site diagram
 Storyboards and user flow charts
Visual design



Web is a visual medium
Web pages require attention to presentation and
design.
Visual designer creates the “look and feel” of
site—logos, graphics, type, colors, layout, etc.
Define Web Design
Web design encompasses a number of disciplines:






Visual (graphic) design
User interface and experience design
Web document and style sheet production
Scripting and programming
Content strategy
Multimedia
Define Web Design
Common frontend tasks:
 Visual design and image production



Interface design
Information design as it pertains to the user’s
experience of the site
HTML document and style sheet development and
JavaScript
Define Web Design
A definition:
…multidisciplinary pursuit pertaining to the
planning and production of Web sites, including,
but not limited to, technical development,
information structure, visual design, and networked
delivery.

Powerll, T.
Define Web Design


At it’s core, design is all about visual communication.
To be an effective designer, you have to be able to
clearly communicate your ideas to users or else lose
their attention. (Jones, 2011)
COMPONENTS OF WEB
DESIGN
Components of Web design





Content - information (text, images, etc.) and how it is
organized and structured.
Visuals - screen layout and graphic used in a site.
Technology - HTML, CSS, interactive elements,
programming techniques, languages.
Delivery - speed and reliability of a site’s delivery
over the Internet.
Purpose - reason for the site. Should drive all
decisions involving site.
Powell, T. , Web Design
Define Web Design

Amount each component influences a site varies
according to the type of site being built.
Web sites are primarily a client-server network
model with three common elements:



Server-side - server hardware and software as well
as other elements (e.g., Java based applications and
databases).
Client-side - browser and supported technologies
(e.g., HTML, CSS, and JavaScript).
Network -Connectivity elements utilized to deliver
Web site to a user (e.g., various networks on the
public Internet or private connections within an
intranet.)
Powell, T. , Web Design
TYPES OF WEB SITES
Types of Web Sites
Abstract Groupings
 First, consider if a site is
 Information
focused (w3Schools | Duquesne), document-
centered
 Task (Kuler |Type Tester) focused, application-centered.

Hybrid sites do a little of both (Amazon)
Powell, T. , Web Design
Types of Web Sites
Broad categories of sites – based on type information:
 Informational - provide information about a particular subject,
very common type of sites.
 Transactional - used to conduct some transaction (Ecommerce).
 Community - provide information and interaction between
likeminded individuals.
 Entertainment - games or forms of entertaining interaction.
 Other - artistic, experimental sites, personal sites, blogs.
Powell, T. , Web Design
Types of Web Sites
Categories of sites - based on type of organization:
 Commercial - site built for commercial gain.
 Government - a government organization
 Educational - educational institution, to support learning or
research.
 Charitable – nonprofit or the charitable organization.
 Personal – individual or some person, outlet of personal
expression.
Powell, T. , Web Design
Types of Web Sites
Site Genres
 PERSONAL E-COMMERCE
 BLOGS
 WEB APPS
 STIMULATING ARTS & ENTERTAINMENT
 EDUCATIONAL FORUMS
 GRASSROOTS INFORMATION SITES
 NONPROFITS AS NETWORKS OF HELP
 GOVERNMENT
Design of Sites, Douglas K. van Duyne, James A. Landay and Jason I. Hong
SOME PRINCIPLES BEHIND
WEB DESIGN
Web Design

Do people read web sites?

People are fickle.

Given large block of information, chances are
they won’t read it.
We think people read our sites like this...
But they probably see this…
Web Design
…people will see our designs in terms
relationships…
of
What do you see?
What do you see?
You likely see a large red box and a small blue box, not
just two boxes – probably didn’t say I see two boxes.
People try to differentiate between objects, size, color or other
differences – to help them distinguish between objects and give them
unique meanings.
You likely see a large red box and a small blue box, not just two boxes.
Greater complexity, greater need to “distinguish” objects in terms of relationships.
Greater complexity, greater need to “distinguish” objects in terms of relationships.
What objects are related? How are they related?
• Shape
• Color
• Size
• Position
Greater complexity, greater need to “distinguish” objects in terms of relationships.
Proximity why are some close to each other – must be related.
Alignment.
Web Design

…understanding that people will see our designs in
terms of relationships is crucial to becoming a more
effective designer.
Web Design

It’s not enough to dish out information, as web
designers, our job is to break down that raw
information into meaningful visually relevant
information. (Jones, 2011)
Common principles to show Relationships






Size
Color
Contrast shows relative importance. Dramatic shifts in
text-size or color will impart a message that
something is different.
Alignment - creates order between elements.
Repetition - assigns relative meaning. If all important
words are Blue, a blue word is important.
Proximity - separates elements from each other and
creates sub-hierarchies.
Size and hierarchy – bigger is important and gets attention
Apple | Craft Beer | Design Week
Leaders
Color and hierarchy – creating relationships with color and size
Leaders
Thinkers
Contrast and hierarchy – emphasizes how big and how little the objects are.
Contrast and hierarchy
Contrast shows relative important.
Contrast
Contrast
Subtraction
Contrast and hierarchy
Contrast
Contrast
Contrast and hierarchy
Contrast
Contrast
Changing from a light
background to dark
background can
separate the core
content of a page from
the footer.
Contrast and hierarchy
Contrast
Contrast
Alignment – No alignment
Subtraction
Alignment.
Alignment – square emphasis
Alignment – Row emphasis
Alignment – Row emphasis.
Repetition
Repetition
Working with structure and Hierarchy in Web Design | Part 1
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
Hierarchy in Web Design
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Repetition- repeated patterns provide people useful information about the text.
Working with structure and Hierarchy in Web Design | Part 1
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
Hierarchy in Web Design
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Proximity
Web users assume that a number of elements
are related if they have been placed close
together.
The Current State of Web Design
http://www.youthedesigner.com/2012/11/12/the-current-state-of-webdesign/
Proximity
Proximity
An additional proximity factor is effective use of white space, spacing elements
utilizing effective margins, gutters between columns, and padding creates balance
between content and space between elements.
Source: Effective design principles for web designers: Proximity
http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-proximity/