Today’s objectives  Our network  Defining web design  Introduction to design precepts  Markup

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 part, up to 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: ).

Our network: FTP and Z Drives  Student URLS now match DORI login. My old site  would now be  Students will use Dori login with no prefix. Logins DO NOT need the jma\ prefix.

Our network: FTP and Z Drives  Z drives for students who were registered as of 8/20 have been created.  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  Your private folder  It’s a subfolder of users folder   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)  \\jma1\users\username

Our network: How do I access the server? From dorm or home ftp://  Example: ftp://  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

Folder File PUB Folder Your Space User folder

Folder File PUB Folder Your Space All files for the Web must be in PUB User folder

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  Assuming your file name is default.htm, or index.htm in the jma318 folder the address would be:

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 encompass 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- centeredw3SchoolsDuquesne  Task (Kuler |Type Tester) focused, application-centered.Kuler TypeTester  Hybrid sites do a little of both (Amazon)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 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 of relationships…

What do you see?

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.

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 important. 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 AppleApple | Craft Beer | Design WeekCraft BeerDesign WeekLeaders

Color and hierarchy – creating relationships with color and size LeadersThinkers

Contrast and hierarchy – emphasizes how big and how little the objects are.

Contrast and hierarchy Contrast Contrast shows relative important. Subtraction

Contrast and hierarchy Contrast

Contrast and hierarchy Contrast Changing from a light background to dark background can separate the core content of a page from the footer.

Contrast and hierarchy Contrast

Alignment – No alignment Subtraction

Alignment.

Alignment – square emphasis

Alignment – Row emphasis

Alignment – Row emphasis.

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 design/

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