Download ppt - pantherFILE

SPRING 2016
CourseIntro
Course Description
An introduction to the principles of visual and graphic design as they
relate to electronic media with an emphasis on web page construction
and design, creating electronic documents, and production and
dissemination of electronic information. Students will be introduced to
various graphics programs, web authoring tools and other technologies
used to produce electronic documents and images. Assignments will
allow hands-on experience and experimentation.
Prereq: none
Course Objectives
Upon completion of this class students will:
1.
Understand the process of web design
2.
Understand the principles of design in electronic media
3.
Demonstrate the skills needed to create web graphics
4.
Become familiar with the creation of PDF files
5.
Demonstrate the ability to construct web sites with effective and
aesthetically pleasing designs
6.
Understand the limitations of electronic publishing as they relate to the
World Wide Web
Instructor
Rebecca Hall
Email: [email protected]
Ph: 414.229.2855
Skype: rebeccahall
Office Hours: By Appointment
This is me 
What I do 
Course Requirements
HIGHLY RECOMMENDED TEXT
Jennifer Niederst Robbins. (2012). Learning Web Design: A Beginner’s Guide to
HTML,CSS, JavaScript and Web Graphics. O’Reilly Media, Incorporated.
4th Edition
RECOMMENDED
Jason Beaird & James George. (2014). The Principles of Beautiful Web Design
SitePoint Pty. Ltd.
Patrick J. Lynch & Sarah Horton. (2009) Web Style Guide 3rd Edition
Available: http://webstyleguide.com/wsg3/index.html
OPTIONAL
Robin Williams, John Tollett. (2006). Robin Williams Design Workshop
PeachPit Press. 2nd Edition
ARTICLES & ADDITIONAL READINGS AS ASSIGNED
ADDITIONAL BOOKS AND RESOURCES - listed on the course website
Course Requirements
PROJECTS & ASSIGNMENTS
Attendance & Participation (5%)
5 Exercises (15pts each – 15%)
5 Assignments (25pts each – 25%)
Mid-Term Exam (75pts – 15%))
Graduate Research Project (50pts – 10%)
Final Web Site Development Project (40% | 30%)
Part 1: Project Profile
Part 2: Information Architecture
Part 3: Interface Design
Part 4: Final Site Production
Part 5: User Testing
See course syllabus for details and deadlines
*Graduate Students: Expectations will vary slightly on assignments and additional
requirements will be distributed and discussed in class.
Content Delivery
D2L – UWM’S COURSE MANAGEMENT SYSTEM
http://d2l.uwm.edu/
Weekly course content will consist of lectures, demonstrations and
hands-on activities. Readings, notes and assignments will be loaded to
the D2L course site immediately prior to the start of the class
Course Website: https://pantherfile.uwm.edu/rjhall/685/onsite
File Storage
PantherFile
https://pantherfile.uwm.edu/
Google Drive, Dropbox, SugarSync, others…
Software Access
In this course, students will use the following software programs: Adobe Illustrator, Adobe
Photoshop, Adobe Dreamweaver and Adobe Acrobat. All SOIS labs and most campus labs
have this software available. Students can also access this software using the SOIS
Virtual Lab.
SOIS Virtual Lab
The SOIS Virtual Lab allows off-site students remote access to a SOIS computer from any
location.
Written/video documentation for access to and instructions on using the virtual lab environment
http://www4.uwm.edu/sois/resources/it/virtuallab/
http://www4.uwm.edu/sois/resources/it/virtuallab/howto.cfm
To access to the virtual lab, please use the following
ePanther ID: [ex: “rjhall”]
ePanther Password: ePanther password
Purchase (student Discount) | Free Trial Software
A free trial of this software is available from Adobe Systems:
http://www.adobe.com/downloads/
Students may choose to use these trail versions for this course; however no technical support will be provided for the
installation/maintenance of this software on your system. It is the student responsibility to read and follow all system requirements and
guidelines for its use.
Value of Digital Communication Skills
DIGITAL AGE
Digital Communication is a foundation skill
In most careers, individuals will be required to:

use technology to communicate effectively

think critically to design a communication that meets the needs of a
specific audience

Select the best media for their message (web, video, audio, print, or
multimedia)

have the technical expertise to design, implement and deliver their
message

http://www.adobe.com/education/presentation/digital_communication/
Aho, K (2005) Digital communications for All Students Macromedia White Paper available:
http://www.adobe.com/education/resources/hed/whitepapers/
enGauge 21st Century Skills: Literacy in the Digital Age
http://www.ncrel.org/engauge/skills/skills.htm
Course Description
Basic Design Principles
Computer Graphics for digital communication
Graphics Programs (Illustrator | Photoshop)
Interface Design Concepts
Web Development Process
Web Team: Client | Project Manager | Content Manager | Information Architect | Interface Designer | Graphic Designer |
HTML Developer | Programmer | Other
Website design
HTML & CSS | Web Authoring Tools (Dreamweaver)
Electronic Publishing & Digital Communication (Adobe Acrobat)
Web Development Process
Site Construction is
one of the last steps
The Site Development Process
http://webstyleguide.com
Course Description
Final Course Project
Web Development Process
Web Team:
Client | Project Manager | Content Manager | Information
Architect | Interface Designer | Graphic Designer | HTML
Developer | Programmer | Other
Interaction Designers | User Interface Designers
User Experience Designers
Visual (Graphic) Designers
Scripting and Programming
CONTENT
HTML, style sheets, and graphic production
Content Strategist
Information Architect
Information Designer
MULTIMEDIA
DEVELOPMENT
DESIGN
“Web Design” – COMBINES A NUMBER OF DISCIPLINES
Web Development Process
Content strategy and creation
Goal: Create and maintain content
• the organization of content and how you get to it
• supports the process of getting content , message,
or functionality to the users
Content Strategist
-ensures all content (buttons, labels, long text) supports the brand identity
and marketing goals of company
Information Architect /Information Designer
- organization of content (frontend and backend)
Interface Design
Interaction Designers (IxD) | User Interface Designers (UI) | User Experience
Designers (UX)| Visual Designers | Information Architects
Web Development Process
Interface Design
Goal: make the site easy, efficient and delightful to use
How the page works (buttons, links, navigation, etc.)
How visitors move through the content/site
Usability - how easily visitors can accomplish their goals and the overall user
experience
Interaction Designers (IxD) | User Interface Designers (UI) | User Experience
Designers (UX)| Visual Designers | Information Architects
Interface Design, Information Architecture, and visual design are tightly entwined.
Design: (IxD, UI, UX)
Understands the needs, desires, and limitations of the user
Understands how the site will be used, how it will solve problems
User research and testing reports (interviews/observations)
- understand the user (audience)
- understands all aspects of the users interaction
with the product (how it’s perceived, learned, used)
Wireframe diagrams
- Diagram indicating how the screen real estate is divided and used (shows
functionality and content… navigation, search boxes, form elements)
Site diagram
- Diagram of the structure of the site – how individual pages relate to one another
Storyboards and user flow charts
- Demonstrates the steps it takes to accomplish tasks, possible options
(traces the path of a typical user (persona).
Design: Graphic (visual) design
Graphic (visual) design
Goal: to design the look & feel
Presentation & Design
- web is a visual medium
- everything you see screen
- graphics
- type
- colors
- layout
- consistent with the brand and message of the organization
Document Development / Production
Web Development Process
Document Development/Production
Goal: create the documents, style sheets, scripts,
images that make up a site
Authoring/markup
- process of preparing content for delivery online (HTML)
Styling
- Arranging the appearance of the page (CSS)
Web Development Process
Scripting and Programming
Advanced web functionality (forms, dynamic content, interactivity)
Add behaviors and functionality to elements in the page/browser window.
(client-side programming (javascript))
- php, ruby, python and ASP.NET (server-side)
-
Multimedia
Dynamic content (sound, video, animation, Flash)
Web Development Process
Technologies associated with web development
HTML (markup language)
CSS (Cascading Style Sheets) (presentation & formatting)
JavaScript/DOM scripting (interactivity & browser behaviors)
Server-side Programming (CGI Script; JSP; PHP; VB.NET; ASP.NET; Ruby on
Rails; ColdFusion) (form handling, dynamically generated pages, shopping carts, content
management systems, databases) Back-end development
XML (robust set of rules for creating other markup languages)
Java (web applets | mostly enterprise-scale applications)
Web Development Process
Frontend – appears in or relates directly to the browser
Graphic design and image production
Interface design
Information design – related to user’s experience
HTML document and style sheet development
JavaScript
Backend – programs and scripts that work on the server – makes
pages dynamic and interactive
Information design – how information is organized on the server
Forms processing
Database programming
Content management systems
PHP, JSP, Ruby, ASP.NET, Java, etc.
Retrieving Static Data
How the Web Works
•Client: requests & renders content (browsers,
mobile devices, screen readers)
•Web Servers: Applications that deliver web
content (IIS – Internet Information Service
(windows) Apache (all OS, free, open source)
HTTP Client
HTTP Server
Dynamic Content
How Dynamic Web Content Work
•Client: requests & renders content (browsers, mobile
devices, screen readers)
•Web Servers: Configured to dispatch request to
application server (triggered by extension- .cfm, .aspx, .php)
•Application Servers: talks to DB, generates response
and returns info to web server. (compiles all elements and
nodes needed from DB)
•Application Servers: Adobe Coldfusion (Java Based web application);
Microsoft Active Server Pages & ASP.Net; PHP (free, open source); Ruby On Rails
•Example - ColdFusion based CMS Website
Written in ColdFusion Markup Language (CFML)- running on
server & HTML, CSS, JavaScript or JQuery – executed in the browser
Web Development Process
Software
Web page authoring (Dreamweaver, Kompozer, Nvu)
HTML editors (NotePad++, TextEdit, BBEdit, jEdit)
Graphics software (Adobe Photoshop (elements); Adobe Fireworks; Adobe
Illustrator; Corel Paint Shop Pro, GIMP)
Multimedia tools (Adobe Flash; QuickTime and iMovie; Apple Final Cut Pro;
Windows Movie Maker; Adobe After Effects; Sony Sound Forge; Audacity)
Internet tools
(browsers, mobile browsers, ftp programs)
Course Description
Final Course Project
Part 1: Project Profile
Part 2: Information Architecture
Part 3: Interface Design
Part 4: Development
Part 5: User-testing
Project Examples
GameCat
https://pantherfile.uwm.edu/kyleswi2/www/GameCat/index.html
Pinoy Book Drive
https://pantherfile.uwm.edu/yturria2/pinoybookdrive/index.html
James Schultz
http://jamesschultz.com/
Park’s Fly Shop
http://www.parksflyshop.com/
LTC Library
https://pantherfile.uwm.edu/kleinh24/www/index.html
Samantha’s Sweets
https://pantherfile.uwm.edu/sbdenzer/Samantha's Sweets
Bike Works
http://mgkoller.uwmsois.com/bikeworks/
Metropalis
http://schmi532.uwmsois.com/metropalis/
Classical Myths in Pre-Raphaelite Art
https://pantherfile.uwm.edu/shermock/www/