today’s objectives our network defining web design introduction to design precepts markup
TRANSCRIPT
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.
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
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
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
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
Web Design
Do people read web sites?
People are fickle.
Given large block of information, chances are they won’t read it.
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.
What objects are related? How are they related?•Shape•Color•Size•Position
Greater complexity, greater need to “distinguish” objects in terms of relationships.
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
Contrast and hierarchy
Contrast
Contrast
Changing from a light background to dark background can separate the core content of a page from the footer.
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/
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/