MAS - EI - Spring 09 - Final Projects

admin | MAS - Everything Is Interactive | Tuesday, June 16th, 2009

http://www.jacobberendes.com/mas/web/09spring/

Web Site Setup in Dreamweaver - Site Dev Part 1

admin | MAS - Everything Is Interactive, MAS - Web Design | Tuesday, June 2nd, 2009

A couple tips before we begin
always use lowercase characters in your web file names
if you use spaces in your filenames replace them with hyphens

Don’t open Dreamweaver just yet….
To start create a folder where you want to develop your site. (example “mywebsite”)
Create 2 folders inside of this. One called “designs” the other called “docs” (docs will also be known as your “local root folder”)
Create an “images” folder inside of docs

Now open Dreamweaver…
|in the top drop menu|
click site > new site…
|advanced|
enter the information
site name: = (whatever your site name is)
local root folder = docs
default images folder = docs/images
Links Relative To = select Site Root
HTTP Address: = http://localhost/
cache site = not checked

In the left space you will see a category list.
Click on Testing Server
Server Model
[v] <- Means click the drop down menu
Select PHP MySQL

Now click |OK| at the bottom of this window

If you wish to actually host the website on your machine as a true testing server here are a few links that may interest you.
MAMP - Mac, Apache, MySQL, PHP (this is what each one acts as … computer type/program, web server, database type, dynamic language type)
WAMP - Windows, Apache, MySQL, PHP
LAMP - Linux, Apache, MYSQL, PHP
How to Setup a MAMP or WAMP with Dreamweaver

MAS - EI - Week 7

admin | general | Tuesday, May 19th, 2009

We are going to cover as much of this as you can handle in one class.
It’s a lot of information and Dreamweaver handles about half of the portions for you.

-The web design process
-What is HTML?
-Should You Learn HTML
-HTML & WYSIWYG Editors
-Linking Basics
-Creating Links
-What is CSS
-Why use CSS
-Using DIV and SPAN
-setting a class or id attribute
-Turning Off Borders using CSS
-setting WIDTH & HEIGHT
-setting the ALT attribute
-using Thumbnails
-linking to Other Media,
-CSS Background Studies (Tiles & Tiling Backgrounds,
-Pattern Sizes, Full
-Screen Backgrounds,Background Code, Seamless Tiles)
-Web File Formats: Bitmap(raster) or Vector?
-File Size and Downloading Speed,
-Making Small JPEGs, GIFs, PNGs
-Hybrid Images (Using HTML to fill Image space)
-What size do we make our layouts?
-Screen Resolution
-Using Kuler to select colors.
-BODY Colors, link Colors, font Color
-Embedding Flash, Movies

MAS - EI - Week 6

admin | MAS - Everything Is Interactive | Thursday, May 14th, 2009

Presentations: Students present their interactive videos.

Lesson: Understanding simplicity. Think about what is easy for your clients or your customers’ clients.
Make it “Zen” by design.

Garr Reynolds - Synergy Keynote Day 1 Part 1

Professor Brian Sturm - UNC Chapel Hill (presents storytelling as a way of organizing information, conveying emotions, and building community.)

David Seah - (blog) David takes a journey into the discovery of using storytelling drive design.

Duarte - (Blog) Duarte covers many aspects of design and presentation. Focusing on the story .

Dave Werner - (Engaging Interactive Portfolio Site) Each segment Dave is able to open himself up and be really vulnerable in all of his stories and work.  The products that a part of and that come out of his stories are some of the most impressive examples of storytelling in website design.

Assignment: Students will develop a website using the story approach. The website can be produced as concept pages.  It does not have to be fully functional.  It might be best to use TileStack to complete this assignment.

MAS - EI - Week 5

admin | MAS - Everything Is Interactive | Thursday, May 7th, 2009

Presentations: Students present their interface-free navigation.

Lesson: Navigation and video -  Breaking the linear timeline. Interactive video experiences and how they influence the user and engage them for a longer time with a brand. A look at VEILS(Video Encoded Invisible Light Systems).

Batwave Batmobile by Mattel - video case study -
Related - Serafina
by Mattel - InteracTV by Fisher-Price

Boony by Fosters - video case study

Lion Red - YouTube Skit based on the Boony concept.
Related - Lion Red Website

Dancing ELMO - Video demos on Gizmodo

BombayTV - Subtitle your own clips

Subtitler by Jaman - Subtitle foreign films

Choose Your Own Path/Adventure - SMP Films example on youtube


Assignment:
You will create a YouTube video with a unique form of navigation and branching paths, while engaging user with the brand.

MAS - EI - Week 4

admin | MAS - Everything Is Interactive | Thursday, April 30th, 2009

Presentations: Students present mock-up of interface design.

Lesson: Transparent Interfaces - Touch & motion is the medium. From the iPhone (touch) to the Wii (motion and balance) to camera tracking (PS Eye/webcams), see how interaction can be done beyond the mouse. Applying user’s knowledge with real world, tactical experiences (turning, pulling, pushing, etc.).

Clips of various Touch & Motion Interfaces –

More fun to get your minds rolling –

Assignment: You will develop an interface-free navigation for an application for the iPhone, Wii, or camera enabled computer.

MAS - EI - Week 3

admin | MAS - Everything Is Interactive | Tuesday, April 21st, 2009

Presentations: Students present an updated navigation concept from assignment 2

Lesson: Usability and Functionality -  A look at different media devices and menu systems. Including websites, mobile devices (iPhone/DSi), PS3 XMB, Xbox 360 NXE (DiRT menu), Blu-ray and DVD menus. Students are welcome to bring any of these systems to class. Since we will have a few systems on hand we may also cover game interefaces and menu systems if there is enough time.  So if you bring a system please bring a game or two.

Terminology:

-Usability - The ease by which someone can make use of a tool to complete a particular task or reach a goal. (usability on Wikipedia)

-Functionality - capable of operating functions…. capable of completing tasks or a set of tasks. (Dictionary.com)

-User Interface - the means by which a person can interact with or manipulate a system and the way a system indicates the effects of users’ actions on the system.

Assignment: You will create an interface (PSD mock-up) for a new media entertainment device.  This will not be a video game interface but it can be an interface mock-up for a video game console.

MAS - EI - Week 2

admin | MAS - Everything Is Interactive | Tuesday, April 14th, 2009

Presentations: All students will present websites and site maps from assignment 1.

Lesson: Navigation Design - A look at how, when and where to use it. The use of text, rollovers, sound, images, icons in navigation (GUI). Art of simplicity and intuitive forms of interaction using navigation.

Use of Text: Craigslist, on my wordpress site just rollover any links

Rollovers: Michael Battle (simple and clean), Phong (animated with flash), Don’t Click (clickless navigation)

Sounds: Praystation (onclick)

Breadcrumbing: Craigslist, IMDB

Combinations: GettyImages (Drop-down), CSSplay (Fly-out)

Experimental: VaryWell (scrolling, tool tips, window/tile based)

Terminology:

-Paradigm
“a philosophical or theoretical framework of any kind.”
… Clarke, Thomas and Clegg, Stewart (eds). Changing Paradigms. London: HarperCollins, 2000.ISBN 0-00-638731-4

-Navigation - The process of reading or controlling movement from one place to another.

-Breadcrumbs or breadcrumbing - leaving a trail that can be followed back to a starting point.

Assignment: You will create a new form of navigation for an existing website. Use the same site from assignment 1 but it would be more beneficial to try another.

MAS - EI - Week 1

admin | MAS - Everything Is Interactive | Monday, April 6th, 2009

The attendance policy: If you miss 2 classes you will get a warning letter from the Registrar, 3 missed classes means an ‘F’ in that class & means retaking the class next quarter & paying an additional $950; if you don’t retake the class you will not be able to graduate (you’ll be short on credits).

Contacting Me: jacob@miamiadschool.com

-or through facebook.

An Introduction to interfaces and information architecture?

-Minimal
…GOOGLE (best example)
…iPod

-Complex

February 2, 2007 lecture by Bill Moggridge for the Stanford University Human Computer Interaction Seminar

Terminology

-Taxonomy
…”A taxonomy is a collection of Controlled Vocabulary terms organized into a hierarchical structure. Each term in a taxonomy is in one or more parent/child (broader/narrower) relationships to other terms in the taxonomy.” - http://et.afsnet.org/glossary.html

-Sitemap

…A a simplified textual/graphical layout of the taxonomy often represented in a tile or card format.
-Glen Doss - ORC Macro Sitemap PDF (further examples can be found at GDOSS.com)

Important Reads:  Ao.Univ.-Prof. Dr. Keith Andrews - Dec. 2, 2008 Lecture Notes

Assignment:

-Research websites and bring 3 examples of some of your preferred website interfaces/interaction.
-Construct a full site map based on one of the sites showing the taxonomy.

Week 7 - Web Design

admin | MAS - Web Design | Thursday, February 19th, 2009

We will not be covering SEO as all of you students need more time to build your sites.  We will go into a little bit of JQuery and lightbox tonight.  The goal will be to have your sites 75% completed by next class.

Here are the links to the pages covering both JQuery and Lightbox

Here are the download links to JQuery and Lightbox.  Lightbox is stored in a zip file and will need to be extracted.

The concepts of JQuery are not to difficult to understand and I will go over them in as much detail as I can tonight.  Lightbox, while somewhat easy to use, has a bunch of files.  Some javascript(js files) and some css.  I will try to cover them but you may need to do a little research on your own to work them into your site.

Copy and paste from Photoshop to Dreamweaver

Assignment: Complete at least 75% of your site by next class.

Next Page »

Powered by WordPress