IDES 322 06: Interface Design 02/24/15

Review HW:
– Revise site map and Wireframes based on feedback
– Build out your Site prototype using your final wire frames.
– We will review in class next week.

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTERFACE ON THE WEB:
The interface
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

Assignment:
Review 4, 5, and 8
Read: Chapter 6, 7, and 10
HTML:
1. Use Metatags (refresh and redirect)
2. Try all the code samples (Ch. 4, 5, 8) and upload to your server
Revise website prototype based on class feedback.
Create Interface Design, Present next week as a JPG.
We will review in class next week.

**MIDTERM: DUE Tuesday March 17
Documentation package – Pull together all of the documentation into a PDF document similar to this example. Must include:
1. Requirements
2. User scenarios
3. Competitive analysis
4. Site map
5. Wireframes
6. Prototype (link to)
7. Interface Design
8. Outstanding issues (development questions or concerns)

CE 2411 04: Interface Design 02/23/15

INTRO:
HTML: Try out all the code samples above
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTERFACE ON THE WEB:
The interface
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

Assignment:
Read: Chapter 6, 7, and 10
Review 6, 7 and 10
HTML:
1. Use Metatags (refresh and redirect)
2. Try a table
Revise website prototype based on class feedback.
Create Interface Design, Present next week as a JPG.
We will review in class next week.

IDES 322 05: Prototype 02/17/15

REVIEW HOMEWORK:
Wireframes

Inventory: you have Examples

Read:
960 grid
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
The Mobile proto
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Assignment:
Read: Chapter 4, 5, and 8
Revise sitemap and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
We will review in class next week.

CE 2411 03: Prototyping – Links, Extra Markup 02/16/15

INTRO:
Review HW: Talk about your Final (proposal emailed to me)
Review Site maps and wireframes.
Add more structural and semantic HTML to your pages

PROTOTYPING:
Examples
Another example
The Mobile proto

READING REVIEW:
Experience mapping comes in many different flavors
Same for site maps
User experience/wireframes
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2
Next Week: Prototyping and Interface Design.

RESOURCES:
From smashingmagazine
Free wireframing tools
Wireframes Mag
Dummy text with a twist

Read the following articles:
Beyond Wireframes
UX case study
The Importance of the Wireframe
Wireframe your site

Assignment:
Read: Chapter 4, 5, and 8
Review 4, 5, and 8
HTML: Try out all the code samples above
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
We will review in class next week.

IDES 322 04: UX and Wireframes

In Class:
Practice UIX and documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios (Either written as user scenarios or a User experience map) .
– Create a Site Map for the site. Start with content inventory.

READING REVIEW:
Experience mapping comes in many different flavors
Same for site maps
User experience/wireframes
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2
Next Week: Prototyping and Interface Design.

RESOURCES:
From smashingmagazine
Free wireframing tools
Wireframes Mag
Dummy text with a twist

Read the following articles:
Beyond Wireframes
UX case study
The Importance of the Wireframe
Wireframe your site

Assignment:
You should have: Requirements, User Scenarios, Usability maps, Site map (Site inventory).
Now, Create wireframes of your web site (home+ top level + second level). Start with sketches.
Post to your server.

CE 2411: 02 Process 02/09/15

INTRO:
Questions? Email me: jparada@uarts.edu
Review HW:
– Buy a domain name and Hosting account
– Create a Basic splash page with images, links, and headings.
– Select topic/project and begin research

READING:
HTML is a hierarchy.
Attributes
Chapter 1 – Summary
Chapter 2, all the tags
Another example
Chapter 2 – Summary

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

– Functional Specifications: Deliverable: 1-2 page proposal.
-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames)
-Designing the visual interface: Deliverables: Template mock-ups in PSD or IA., Web based prototype

Assignment:
Review 1, 2
Read: Chapter 18 – Process and Design
Add more structural and semantic HTML to your pages.
Create Site Maps, wireframes
1-2 page proposal For Final Website. Discuss limitations and example sites (present next week)

IDES 322 03: Development Process

In Class:
Review Homework – Add more structural and semantic HTML to your pages. Try all new HTML introduced in Chapters 1 and 2
Review 1, 2
Make sure domain and hosting is up and running

READING REVIEW:
HTML is a hierarchy.
HTML provides structure
Chapter 1 – Summary
Chapter 2, all the tags
Another example
Chapter 2 – Summary

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

Sources to Review:
Read This
UPA
Experience Maps
Wireframes Mag
UX for gamers
Dummy text with a twist
Example?

Assignment 03: Web Development Process and UIX
Read: Chapter 18 – Process and Design
Practice UIX and documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios (Either written as user scenarios or a User experience map) .
– Create a Site Map for the site. Start with content inventory.
Upload to your site and send me the URL.

CE 2411: 01 Introduction 02/02/15

OPTIONAL Book: HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.

Software:
Editors – BBEdit, TextWrangler
FTP

Wireless Access:
Login ID: csstudent
password: umberY13

Introduction:
Review Syllabus
HW assignments – Examples
1- Sample Student Website
2- Sample
3- Sample
4 – Sample
5 – Sample

Structure:
DNS – What is it?
IP Address

Intro to HTML:
W3

Assignment:
Read Chapter 1,2
Buy a domain name and Hosting account
Create a Basic splash page with images, links, and headings.
Select topic/project and begin research

IDES 322 02: Intro to HTML 01/27/15

In Class:
Review Assignment – Show your Splash page
Review Hosting, Domain, Site Management. How do I get my pages onto my server?

READING REVIEW:
HTML is a hierarchy.
HTML provides structure
Chapter 1 – Summary
Chapter 2, all the tags
Another example
Chapter 2 – Summary

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

Assignment 02: HTML
READING:
Review Chapter 1,2
Review 1, 2
Read: Chapter 18 – Process and Design
HTML:
Add more structural and semantic HTML to your pages. Try all new HTML introduced in Chapters 1 and 2

IDES 322 01: Introduction 01/20/15

Introduction:
Review Syllabus
HW assignments – Examples
1- Sample Student Website
2- Sample
3- Sample using Insta API
4- Sample
5- Sample
6- Sample
7- WP customization

Links to useful resources:
Hosting
Free FTP
Webmonkey
CSS Schools
Editor: BBEdit or TextWrangler

Assignment:
Buy domain name and server space
Try the W3 HTML Tutorial
Read the article above.
Create a splash page for your web site (use anything you want) with an image and a link. Example?