Web Dev Intensive

Your assignment in class today is to create a set of information architecture diagrams (between 2 and 3 wireframe diagrams, no more) that show how the information on a book e-commerce site should be arranged.

Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references,  you should make sure that all the information on this travel destination site is easy to find and the site itself is interesting and easy to navigate.

• show all areas where copy (i.e. text) should go
• show all areas where images should go

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog.  The title of your blog post should be “Class 1 – Assignment – Book E-Commerce Wireframes”

Your client, the book e-commerce site owner, and you have agreed as part of theRequirements Gathering phase of website development that the site must have the following content and functionality.  In other words, here are the requirements for the site:

 
search
-author
-title
-isbn code

browse
-genre
-popularity
-recently published
-new vs. used
-ebooks

book reviews

recommended books

book preview

site social media tools (facebook/twitter,etc)

author bios

account management (log-in, register)
-wishlist
-shopping cart

deal of the day

events (book signing, readings, etc)

The following are examples of professional wireframe diagrams done as part of the information architecture phase of real projects.  Use them as a guide for how much detail you should go into with your own diagrams.

Your assignment in class today is to create a set of information architecture diagrams (between 2 and 3 wireframe diagrams, no more) that show how the information on a travel destination site’s website should be arranged.

Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references,  you should make sure that all the information on this travel destination site is easy to find and the site itself is interesting and easy to navigate.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog.  The title of your blog post should be “Class 1 – Assignment – Travel Destination Wireframes”

Your client, the travel destination site owner, and you have agreed as part of the Requirements Gathering phase of website development that the site must have the following types of information:

• insurance
• reviews of the site
• contact info
• search
  • by location
  • by price
  • by package
• account
• title of site
• slogan
• logo
• global calendar
  • recommended destinations for certain time of year
• packages
• destinations
  • deals
  • photos
  • time zone info
  • currency calculator
  • reviews
  • maps
  • must-see sights
    • photos
    • reviews
    • accommodations
      • hotels or rentals
        • photos
        • reviews
  • food
  • weather
  • calendar
  • events
    • cultural events
    • activities/sporting events
  • car rentals
  • airlines

Your assignment in class today is to create a set of information architecture diagrams (one sitemap and between 2 and 3 wireframe diagrams, no more) that show how the information on a toy store’s website should be arranged.

Your client, the toy store owner, and you have agreed that the site must have the following types of information:

Toy Store Website

• list of toys
  • facets: age range, price, category, gender, brand
  • add to cart
  • customer reviews
• store info
  • -phone
  • -email
  • -location
• history
• store events
• promotions/features
• blog
• careers
• search
• news & press
• customer service
  • recalls
  • return policy
• account
  • order status

Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references,  you should make sure that all the information on this toy store site is easy to find and the site itself is interesting and easy to navigate.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com.  The title of your blog post should be “Class 1 – Assignment – Toy Store Sitemap & Wireframes”

NYU SCPS offers professional certificates to students of this class for an additional $100 fee.  Benefits to applying for a certificate include:

• access to NYU libraries and the Kimmel Center (the “student union” type building)
• NYU Computer Store discount pricing
• access to SCPS events and career resources
• $100 voucher towards another SCPS course

Details available at the certificate page of the SCPS site.

If you are interested in receiving a Certificate in Web Development from NYU SCPS, you need to fill out this certificate application form and submit it, along with the fee, to the administration before the end of this course.

Your assignment today is to create the information architecture wireframes of a New York cultural magazine’s website.  Your imaginary client and you have agreed upon the following list of requirements for the website.

Each of these requirements does not necessarily have to be on its own page or section of the site.  You should try to organize and group these bits of information in such a way that they are intuitive.  Then start to create wireframes that show how a user would navigate from the home page to find each of these pieces of content.  Refer to these ideas about web site navigation and try to use as many of these navigation concepts as is appropriate for your site.

Refer to these professional samples of wireframe diagrams as your reference point for how detailed to make them.  Also, look around at similar websites to get ideas from how they structured their own sites.

You can also view other students’ blogs from the Saturday class to see how their wireframes look by viewing their blogs in Google Reader.  Their wireframe assignment was to create wireframes for a restaurant website.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com.  The title of your blog post should be “Class 1 – Assignment – Restaurant Wireframes”

New York Cultural Magazine Requirements

Content to include

• Local events
• local businesses (bars, restaurants, movies, hairdresers)
• park listing
• politics
• news
• weather
• sports
• classifieds
• search
• logo
• editorial, opinions
• ads

how do you want to organize the content: (optional)

• by borough

target demographic: (optional)

• young active
• affluent

Here is a presentation which outlines the high level features of the technologies web developers often deal with.

Web Technologies Presentation

//WEB BROWSER

Firefox
http://www.mozilla.com/en-US/firefox/

//FILE TRANSFER PROGRAMS

WinSCP (for PC)
http://winscp.net

Cyberduck (for Mac)
http://cyberduck.ch/

Filezilla (alternative for Mac and PC)

http://filezilla-project.org/

//TEXT EDITORS

Notepad++ (for PC)
http://notepad-plus.sourceforge.net

Smultron (for Mac)
http://smultron.sourceforge.net/

TextWrangler (alternative for Mac)
http://www.barebones.com/products/textwrangler/

// DIAGRAMMING SOFTWARE

Microsoft Visio (for PC)
http://www.webpencil.com/bannersizes.php

OmniGraffle (for Mac)
http://www.omnigroup.com/applications/OmniGraffle/

Microsoft PowerPoint (PC and Mac, poor man’s diagramming tool)
http://office.microsoft.com/en-us/powerpoint/default.aspx

Mockingbird (web-based wireframing tool)

http://gomockingbird.com/

//USEFUL WEBSITES

Guide to Standard Ad Sizes
http://www.webpencil.com/bannersizes.php

Mailinator – disposable email addresses
http://mailinator.com/

BugMeNot – shared usernames/passwords for many sites that require login
http://bugmenot.com
Blogger – blog platform
http://www.blogger.com

Google Reader – blog aggregator
http://google.com/reader

W3Schools – XHTML/CSS code reference
http://w3schools.com/

PHP.net – PHP reference
http://php.net

Tizag.com – PHP tutorials
http://www.tizag.com/phpT/

Lorem Ipsum Dummy Text Generator
http://lipsum.com

//USEFUL FIREFOX ADD-ONS

All Firefox Add-ons
https://addons.mozilla.org/en-US/firefox/

Web Developer Toolbar Add-on
https://addons.mozilla.org/en-US/firefox/search?q=web+developer&cat=all

Firebug Add-on
https://addons.mozilla.org/en-US/firefox/search?q=Firebug&cat=all

MeasureIt Add-on
https://addons.mozilla.org/en-US/firefox/addon/539/

Clear Cache Button Add-on
https://addons.mozilla.org/en-US/firefox/search?q=clear+cache&cat=all

Fireshot Add-on (for PC)
https://addons.mozilla.org/en-US/firefox/addon/5648

ScreenGrab Add-on (for Mac)
https://addons.mozilla.org/en-US/firefox/addon/1146

FlashGot Add-on
https://addons.mozilla.org/en-US/firefox/addon/220

Colorzilla Add-on

https://addons.mozilla.org/en-US/firefox/addon/271

//VERSION CONTROL SOFTWARE

TortoiseSVN (for PC)
http://tortoisesvn.tigris.org/

SvnX (for Mac)
http://www.apple.com/downloads/macosx/development_tools/svnx.html

We will be using Google Reader to read everyone’s blogs through a single unified interface.  Google Reader is what is known as a blog aggregator: it pulls content from lots of blogs into one place.  (In case you’re interested, the technology that makes such a thing possible is RSS, which we will cover towards the end of the course.)

You are going to import a file that contains a list of the class blogs into your Google Reader account.  To get started, follow these steps:

1. Download this file: Google Reader Subscriptions OPML File – this is a list of all of the blogs for everyone in the class.  Save it to your hard drive somewhere.  Remember where you save this file.
2. Go to http://google.com/reader and log in – if you don’t already have a Google account, you will need to create one.  Or if you’d rather not sign up for Google, then use a different blog aggregator – you can Google that term to find other equivalent tools.
3. Assuming you’re using Google Reader, once logged in to Google Reader, click the little “Manage subscriptions” link at the bottom left of the page.
4. On the Settings page that comes up, click the “Import/Export” tab.
5. Where it says “Select an OPML file:” browse for the file you downloaded in Step 1.  Then click “Upload” to finish the import.

Tags:blogs, class 1
Posted in course info | 2 Comments »