Category Archives: WDS

MMDI 202 08: CSS and Box Models 10/20/14

INTRO:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities
Tables – Review

Assignment:
Review 10, 13
Read: Chapter 3, review 13
CSS:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)

MMDI 202 07: Links, Extra Markup

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

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

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Create HTML pages using all the new tags above. Pay close attention to anchors using the “id” attribute, iframes and the Meta tag functionality I introduced in class.
Read: Chapter 10, 13
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

MMDI 202 06: Links, Extra Markup/Into to CSS

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

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

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Read: Chapter 4, 8
Revise Wireframes prototype and Interface based on feedback
CSS:

MMDI 202 05: 02/25/14: Interface Design

Review Homework:
– Review Prototypes

Inventory: you have UX maps, site map, Wireframes, and
PROTOTYPE:
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Read the following articles
Visual Narrative
Layout
Design Method
960 grid

Web Design Studio 05:
Modify Prototypes based on feedback.
Start designing your templates based on the wireframes (create at least a home page and Second level)
We will critique as a group next week

MMDI 202 04: WDS UX and Wireframes

User Experience Maps. Homepage mapping.

User experience/wireframes
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

Sources to Review:
From smashingmagazine
Free wireframing tools

Studio 04: UX and Wire Frames
1. Read the following articles
Beyond Wireframes
UX case study
The Importance of the Wireframe
Wireframe your site
2. Create wireframes for several pages of your website (home+ top level + second level). Start with sketches. Post to your server.
3. Create an HTML prototype with your wireframes

MMDI 202 03: WDS Process & Design

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

The Development Process:
PLANNING:
– Who is the site for, Why would people Visit this site, What are your vistors trying to achieve? What information do your visitors need?
– Research/sketches : – DELIVERABLE: Requirements Doc
FUNCTIONAL SPECIFICATIONS:
– Anticipating end-user scenarios: Example, Example2
– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis. Many examples to consider and all are different.
-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
DEVELOPMENT:
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 03: Web Development Process and UIX
Review work from last class
Read Articles above. We are focusing on Usability and Usability Mapping today.
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.
– Create User experience maps for your site
– Create a Site Map for the site. Start with content inventory.
Upload to your site and send me the URL.

MMDI 202 02: WDS HTML Basics – 09/08/14

INTRO:
Email me: jparada@uarts.edu, please.
If you want to turn your work in using DropBox, make sure you have an account and email me.
Review HW.

READING:
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”

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

MMDI 202 01: WDS Introduction – 08/25/14

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

Software:
Editors – BBEdit, TextWrangler
FTP

Read This:
separate but equal?
The world has changed
We all need a process – but none are set in stone
The importance of layout

Links:
Hosting
Free FTP
Webmonkey
CSS Schools
Stacks

Intro to HTML:
W3

Assignment:
Read Chapter 1, Chapter 2

Studio 01: Set up and Intro to HTML
Read the articles above.
Buy a domain name and server space (hosting)
Create a splash page for your web site (use anything you want) Example?
– Use HTML and images.
– Create links to multiple pages both internal and external (what does this mean?)
– Create a link to your email address for contact