Today’s objectives

Our networkDefining web design Introduction to design precepts

Markup

Assignments

1. Labs/homework - design exercises (7)2. Quizzes3. Midterm Exam/project (EX) (Doc EX) (

EX)4. Final Course Project (EX) (EX)5. Final Exam6. 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.

The PUB folder

USER FOLDER

www.jma.duq.edu

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

User folder

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

All files for the

Web must be in PUB

All files for the

Web must be in PUB

User folder

www.jma.duq.edu

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 designDocuments an IxD, UI, or UX designer might produce includeUser research and testing reportsWireframe diagramsSite diagramStoryboards 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) designUser interface and experience designWeb document and style sheet productionScripting and programmingContent strategyMultimedia

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 GroupingsFirst, 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 (E-commerce).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 organizationEducational - 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 GenresPERSONAL E-COMMERCEBLOGSWEB APPS STIMULATING ARTS & ENTERTAINMENTEDUCATIONAL FORUMSGRASSROOTS INFORMATION SITESNONPROFITS AS NETWORKS OF HELPGOVERNMENT

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 of relationships…

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.

You likely see a large red box and a small blue box, not just two boxes.

People try to differentiate between objects, size, color or other differences – to help them distinguish between objects and give them unique meanings.

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.

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 Contrast

Contrast shows relative important.

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 DesignSed 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 DesignSed 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 Designhttp://www.youthedesigner.com/2012/11/12/the-current-state-of-web-design/

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/