http://fmundergrad.hunter.cuny.edu/~perkowskab/basiaportfolio/frontpage.html

FINAL PROJECT POLISH CLUB

http://fmundergrad.hunter.cuny.edu/~perkowskab/polishclub/PCwelcome.html

Free Flash Templates - Get Inspired!

http://www.flashvillage.com/

http://www.freenicetemplates.com/

http://www.massivetemplates.com/

http://www.flash-templates-today.com/free-flash-templates3.php

http://www.flashmo.com/

Logo Making Process....

http://max.designwalker.com/graphicdesign/17-designers-logo-making-processes/

50 Inspirational E-Commerce Website Designs

http://vandelaydesign.com/blog/galleries/ecommerce-websites/

E-Commerce website

ECommerce Resources

E- tailers,
site for a proffesionals people to shop

clue points:
clear design,
ability to make choices
maybe special offers
walue components on the top of the site
holiday area of proposals, event adjusted proposals,
gift items

Visual importance
How we access it
how many ways we get to the point , one two or three smart ways
search engines.
quantity, relevance, relation to the target audience,
and most important
quality- evaluation scale, LACK OF CRETABILITY
valuable informations which are tested REAL but actually
ewerything is about that site contains many things, almost everything you need

www.amazon.com
delivering good items
price must be good
customers reviews-re shortcut for creatibility
!. compalling value
2. select sth - better to have many ways to make selection
transactions by credit cart and pay pal
CONFIRMATION

PROJECT 2

FLASH GALLERIES for free :)

http://flash-gallery.com/




http://download.cnet.com/Art-Flash-Gallery-SWF-Object/3000-10247_4-10849164.html





http://flashsources.net/free/free_flash_photo_gallery/


http://www.developerfox.com/37-free-flash-photo-gallery/364



http://flash-gallery.com/




http://download.cnet.com/Art-Flash-Gallery-SWF-Object/3000-10247_4-10849164.html


http://www.flashgallery.org/


http://flashsources.net/free/free_flash_photo_gallery/


http://www.developerfox.com/37-free-flash-photo-gallery/364

LIGHTBOX links

working on LightBOX in dreamveaver :)

Found really helpful video and the website,where I download it .

VIDEO TUTORIAL :

http://www.youtube.com/watch?v=iQyZ3MutAR4&feature=fvw


DOWNLOAD LIGHTBOX

http://www.huddletogether.com/projects/lightbox2/

How to make customized video player in flash

http://www.layersmagazine.com/flash-custom-videoplayer.html

PROJECT1

Flash Component Resources


http://www.flashcomponents.net/index.html


Examining the ActionScript 3.0 Flash video gallery source files
http://www.adobe.com/devnet/flash/articles/video_gallery.html

Deconstructing the ActionScript 3.0 Flash video gallery application

http://www.adobe.com/devnet/flash/articles/vidgal_structure.html

http://www.adobe.com/devnet/flash/articles/vidgal_structure_07.html

Arts-Entertainment Sites Notes

http://www.artnet.com/

http://www.deviantart.com/


http://www.exhibit-e.com/

http://arkartworks.com

http://www.metacafe.com/

http://www.pbs.org

http://www.blip.tv/

http://www.witness.org/

Arts-Entertainment Sites Notes

http://www.artnet.com/

http://www.deviantart.com/

http://designarchives.aiga.org/?s1=2|s2=1|eid=8343

http://www.exhibit-e.com/

http://arkartworks.com

http://www.metacafe.com/

http://www.pbs.org

http://www.blip.tv/

http://www.witness.org/

ARTs Entertainment Site

PATTERN DEFINITION/OUTLINE

Pattern type:
Site

Pattern name:
Arts-Entertainment Site

Also known as:


Description:
Arts-Entertainment Site is the exemplar for sites delivering online digital media and media programs. This pattern forms the core of all sites specializing in engaging, experience-driven content. Other site genres can be integrated such as valuable company sites, personal e-commerce, educational forums.
Is a website for which an individual normally associated with an educational institution periodically generates text, photographs, video, audio files, and/or links. It may include or be associated with a blog, wiki, or other patterns, but it is essentially defined by the presence of one or more course syllabi
Examples: archiva.net,

Patterns that it plays a part of (to which it is related):
VALUABLE COMPANY SITES, PERSONAL E-COMMERCE, EDUCATIONAL FORUMS

Other Patterns to consider:
HOMEPAGE PORTAL, MULTIPLE NAVIGATION METHODS, CONTENT MODULES; CONSISTENT SIDEBARS OF RELATED CONTENT

Patterns that make up an Arts-Entertainment site:
Features menu, Header, Footer, Content, Nav, Web applications, Rich Media, Galleries, etc.


Problems:
• Principal challenge of arts-Entertainment sites is to overcome the challenge of overly complex and hard-to-use interfaces.
• People do not want to watch programs or view animated slideshows that they did not request/select themselves.
• Sites that require or utilize complex navigation schemes tend to lose visitors quickly.
• Visitors are prepared to be challenged with media and entertainment, but want CHOICES.
• Must anticipate and respond to user needs.
• Because online arts, entertainment, exhibit, gallery sites come in so many different forms, there needs to be clarity of purpose and focus of experience from the first “hit”.
• Set site expectations before breaking design “rules”. Setting user expectations is a key condition of site design.
• Navigational interactions must be well-structured and not overwhelming (quantity).

Flash Website

.fla -(publishing both)-> .swf --> .html
vector shapes/graphics can be scaled to any size.
bitmaps wont scale

again: who is the target audience?
extras : 20=15(margins)
980 width or 970 for safety

so for flash : 800 / 600 plus reducing 10% for extras

one target per level. levels are acting like layers. O level is main webpage.
if levels are not specified, the target will replace interface.

if you want to replace sth on level 1 , call it level 1.

pulblish settings:
saving html, as index.html
setting up version of flash: (usually one version back)
hidden layer discard or not
compression not less than 80%
HTML: Quality change to Best

Adobe FLASH cs3

very helpful TIPS :)

TIPS

Entertainment site

echoecho.com > statistics 58% 1024 768
23% 800 600
10% 1200 1024


H/W DESCRIPTION
ARTS & ENTAIAMENT SITE


PATTERNS:
-we are responsible, for generating our own pattern
-text, photos, video & all digital media
-associations as blog, wiki


problems:
-interface (not hard to use)
-survey links
-online arts, galleries focused on the first hit

Samples of entertainment sites

popular visual site. made for all kinds of people, many and really long categories

www.deviantart.com

promotional website. portfolio, targets : upscale urban people, companies,galleries owners, sophisticated, very animated, maximum controlled website ( navigation), made in flash

www.exhibit-e.com


fast, dynamic graphics,main channels( boxes), popularity driven choices inside

www.metacafe.com



arkartworks.com

flashed based.

Developing process:

1. CONCEPT

2. PROPOSAL

3.USER SCENARIO

4.TASK ANALYSIS (SITEMAP)

5. SCHEMATICS

6.COMPS

7. HTML

Actual size of WEB-SITE

Homework for week3 Tasks Analysis

Task ANALYSIS- notes

Task Analysis Notes

Focus on HOW people do things.
Not just what people WANT to do but what they NEED to do.


Keywords/Concepts:

People

Tasks

Technology

Social Issues

-------------
General Task Analysis

http://www.hhs.gov/usability/analyze/analysis.html


Procedural Task Analysis

http://classweb.gmu.edu/ndabbagh/Resources/IDKB/procedural_analysis.htm

--------------------

Follow TA with Scenarios

WHAT people do more than HOW

Representative Tasks

Common/Important Tasks

Complete Tasks

Add:

Observation and Interview

Ethnographies


---------------

Storyboards come out of Scenarios.

Schematics come out of Storyboards.

Summarize your findings.

Develop Information Architecture

Develop Interaction Design (based on Procedural Task Analysis)

Information Architecture

Based on Home page www. CHARITYWATER.org


-----------------Navigation Menu


donate

why water

projects

get involed

photos media

events

about us

contact

member area

-----------------Side boxes

merchandise ( a store)

water for school

video feature



Can not model on existing site , just have general idea.



everyting we can connect by lines and make a SITE MAP including little boxes with site elements inside.

(kind of look like a sample map site above)




TOP Level Architecture is one click menu

USERS CHARACTERISTICS

Extremly Important Process : Who your target is and who is not ?

Users categories:
-sponsors
-founders ( institutions)
-donors ( individuals)
-volunteers
-press media journalism
-partners, other organizations involved

PROCESS :

Next, we are giving scenarios to our users, be more specific ( examples : caucasians, demographics, youth, individuals volunteers etc
Task analysis : What need to be done ? ( Clicking, searching etc)

How to analyzing web-sites?

Characteristics of WEBSITE ;] GRASSROOTs-non profit

Information Site
---static or dynamic
---text
---info design (charts, graphs etc)
---visual evidence
---user involvement (uploading, supporting)
---donations
---E-commerce


Specific Examples !


http://www.charitywater.org/ visually better design that cleanwateractions; information design; better organizing and presented information ( Probably the site costs one million dollars :P )
http://cleanwateractions.org/ comparing to one above has better search engine , donations, volunteering, memberships, network of people involved.
http://www.cleanwateratlanta.org : related to grassroots site, not global, more public; most is text, more informative , then interactive
http://www.foe.org/-user involvement , donations, E-commerce part- (a store), sign up and most time for free gifts.
http://ran.org/-hight context of communication, reduced framework, donations, subscriptions, dynamic components.

CUT the desktop :P

Command ( Apple button ) plus Shift plus 3 or 4 :P

Homework for WEEK2 PATTERNS

sAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Site
Pattern name:
Educational forum
Also known as:
Basic educational forum, advanced educational forum
Description:
An educational forum is a secure area where students, parents, teachers, and mentors can share concerns, present ideas, and codevelop and share activies , that creates a network and provides discussions; provides news and information, helps coordinate offline activities by supplying class schedules, reading lists, exam schedules etc. Examples:
http://www.cfa.harvard.edu/seuforum/
http://educationforum.ipbhost.com/index.php?showforum=126
Patterns which it plays a part of:
to be added later
Patterns which make up an academic forum : search box, calendar, e-mail subscriptions, contacts, registration, login and user control panel, latest content listing, paged navigation, comments , Class Time/Location Table, Syllabus Schedule Table , online course material, examinations, projects etc
Comments:
Basic educational forums need to support all of the routine and ordinary tasks that students, teachers, alumni , and parents face.
Advanced educational forums need to look even further, seeking new ways of creating a sustainable and inclusive community of learning and scholarship. Educational Forums are typically non commercial and subsume a variety of sections or topics. They may also make use of a blog or wiki. Tags syllabus, class schedule, academic, course site, exercise, exhibits, experiment, communication, teacher, student

SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Site
Pattern name:
Mobile Blog
Also known as:
Cell Blog, Phone Blog , Moblog
Description:
A mobile blog is a type of blog that is written and submitted via a cellular telephone, internet-connected PDA or other connected portable device in most cases. The advantage of a mobile blog is that it gives the writer a chance to record his or her thoughts immediately, instead of waiting until there is access to a computer when things can be forgotten. As cell phones, and especially smart phones, have gotten easier to use, this type of phone blogging has become more popular. The mobile blog is based on the same principle as the short message service SMS, only expanded a little bit to include longer pieces, and additional media, such as photos. The blogs may be readable on other phones or may be available, in some cases, for review on computers. Examples:
http://googlemobile.blogspot.com/
http://www.mobilephoneblog.org/

Patterns which it plays a part of:
blog
Patterns which make up a mobile blog : registration, plugins, video, music , photos boxes ; e-mail/phone numbers subscriptions, reviews opinions
Comments: It should be noted that many mobile phones may not support traditional online blogging software programs. Therefore, a specialized program may be necessary.
Tags cell, blog, post, comment, smart phone, SMS, MMS


SAMPLE PATTERN DEFINITION/OUTLINE
Pattern type:
Navigation Tool
Style:
Browse
Pattern name:
Sidebar
Also known as:
Description: A sidebar is a form of auxiliary menu which can be found at the edge of a web page or application, with many operating systems also using sidebars as a form of menu for desktop navigation. Sidebars can contain a wide variety of information, and they are often designed to be configurable by the user so that he or she can keep commonly used tools and information in an easily accessible site. Sidebars may be located to the left or the right of the main application, depending on the taste of the user and the language he or she works in.
Examples: every web-site has it ;]
Patterns which it plays a part of:
to be added later
Patterns which make up icons, text,
Comments: Sidebar navigation can be easier than going through the drop down menus, saving time for the user by allowing him or her to access tools with one click.
Tags Help, Menu, Search, Gadgets.

SAMPLE PATTERN DEFINITION/OUTLINE

Pattern type: Site
Pattern name:
GuestBook
Also known as: website book, website guest book, guestlist
Description: A website guestbook is an area on a website that allows visitors to leave their names to indicate they have been to the site. In most cases, a website guestbook also allows visitors to post their contact information and leave comments. A website guestbook is a helpful addition to any website for a variety of reasons.
Examples :
http://www.a-free-guestbook.com/
http://www.flash-guestbook.com/

Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: One advantage to having a website guestbook is that it provides visitors with a convenient way of communicating with you about any problems they may have encountered while visiting your website. The more positive feedback customers leave on website guestbook, the better potential customers will feel about purchasing from the business. In essence, a website guestbook provides with a means of creating free and unsolicited advertising.
Tags Friend, Forum, Name, Guest, Registration, Comment

SAMPLE PATTERN DEFINITION/OUTLINE

Pattern type: Site or Anti Site
Pattern name:
Para-Site
Also known as: spyware site, misleading site
Description: A para-site is a Web site that mainly depends on a typographical error, domain name mistake, or misspelling to attract people to its Web site. A para-site accomplishes this by choosing a domain name that is very similar to the intended site.
Examples :
www.whitehouse.gov versus www.whitehouse.gov
Patterns which it plays a part of:
to be added later
Patterns which make up a GuestBook : Contacts, e-mails subscribtions
Comments: While some para-sites can be harmless or even a little entertaining, others can be very harmful ( viruses, spyware, pornographic etc)
Tags : the same as in the “real” website

Pattern type: Site
Pattern name:
Photoblog
Also known as: photolog, phlog
Description: A is a form of photo sharing and publishing in the format of a blog. It differs from a blog through the predominant use of and focus on photographs rather than text.
Examples : Photoblog. Com; Flirc
Patterns which it plays a part of:
blog
Patterns which make up a Photoblog : Photos, Comments, Opinions, Search box, Categories , Rankings, Galleries
Comments: Helps preserve memories by date and category ; sharing with people around the world. To work properly needs to have fitted sizes of pictures to be downloaded in short amount of time.
Tags : Pictures, Photography, photobloggers, gallery, art

first exercise