Overview of Directed Study 5990

1. Information Architecture:
• After my research of information architecture, I learned that this information architect plays an important role in the development of the organization development process.
• One of the main functions architecture deals with supporting the development of interfaces that facilitates the flow of useful and relevant information to the user.
• IA deals with the structuring, the relation, the connectivity, the consistency, and logical organization of the website.
• Also, IA process is a sequential process. IA is very similar to waterfall prototype. One step at a time but IA process can be altered after proceeding to a new phase.
2. Site Map
• A site map is the first representation IA uses to define how the website connects. I feel that the sitemap is very helpful with the understanding of the linking between pages. It also simplifies the web designer life. It allows the designer to see which pages are needed and which can be condensed or deleted. Sitemap facilitates the navigation structure of a site
3. Color and Background
• Website colors and layouts are very important to the user perception. Whether the website is too distracting or inviting all depends on the color combination.
• The layout and background designs must be united and congruent within the page.
• Achieving unity in web designing can be done in many ways.
  

Paper Prototyping

Paper Prototyping

• A variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the computer interface
• The interface is manipulated by manipulator (supposedly acting like computer brain)
• Manipulator does not explain how the interface intended to work

Purpose: To get quick feedback from users while design is still on progress.

· Hand-drawn or printed-out screen shots

Benefits:

· Usability Issues: aid in the findings of confusing concepts, poor terminology, layout problems, lack of feedback, etc.

· Missing functional requirements: aid with understanding the user needs that the development team is not aware of è understanding the roots of user’s needs

· Preference for one design alternative : Finding which best alternative function is best fit the user’s expectation

· Priorities: Keep the development team on the same pace what resources are needed and what are not

· Save money: Identify some risks and allow for mitigation

· Improve User experience: most important factors of building a website è building a workable website

Dreamweaver Notes:

What is Dreamweaver?

· Coding and development tool

· Integrated with Adobe Photoshop CS3 applications

· Has built-in file transfer capabilities between a server and local machine, reusable objects

Important step before creating the webpages.

Defining the Site:

· It is important to define where the root folder is located. It recognizes all of the site files that will be used for the webpage so that images or features will be broken or not functioning properly.

· All files must be saved in one folder for accessibility.

Wireframe continue.....

I believe that I have almost come to the end of the wireframe process. Images from these wireframe can be modified later, but for now images from these serve as visual aid purposes. These images will be substituted with well-designed images.



Example: 1st half of the HOME PAGE





2nd half of the HOME PAGE






1 half of the PROGRAM OVERVIEW







2nd half of the PROGRAM OVERVIEW

Wire Frame continue....

I found some of the cool websites that teach me the fundamental of wireframing.
http://totheweb.com/learning_center/website-wire-frame-home-lrg.html
http://images.google.com/imgres?imgurl=http://www.graffletopia.com/images/stencils/91.gif&imgrefurl=http://www.graffletopia.com/stencils/91&h=662&w=550&sz=92&hl=en&start=18&sig2=Vb-QAQK_Zw4Prfa0Ws7vjA&um=1&tbnid=2md_A95qz461gM:&tbnh=138&tbnw=115&ei=HJDoR--COZCSetX6hZQP&prev=/images%3Fq%3Dwebsite%2Bwireframe%2Bpicture%26um%3D1%26hl%3Den%26sa%3DG
http://www.noisebetweenstations.com/ia/examples/FoxSports/Foxsports_wireframe.gif

Some more wireframe

These are all the wireframe pages that I worked on during my spring break. I am not completely done with it.
My perspective about wireframe is that it is very effective yet time consuming. During the creation of wireframe I found it a little confusing because I started out with something similar to a wireframe. Again, I found wireframe is very useful if I used the sitemap that I created.

Wireframe Rough Draft Page 1

This is only the first page. Contents will be added later....Disregard the color .. I am in the progress of making wireframe for each page from the site map.

WIREFRAME

Wireframe

What is wireframe?

• Blue prints that define a Web page’s content and functionality
• Visual basic used for layout and placement of fundamental design elements.
• Allows maintain design consistency throughout the site

Create your wire frame model

Step 1: Create the wire frame

• Create simple HTML page for each block in the site map
• Include the title of page and purpose it serves

Step 2: Add Your Content

• Add main contents to page

Wireframe includes:

1. Key page element and their location (header, footer, navigation, content objects, branding elements)
2. group of elements, such as side bars, navigation bars, contents areas
3. labeling, page title, navigation links, headings to content objects
4. place holders, content text and images

Possible software for wireframe

1. Microsoft visio
2. Omnigraffle
3. Adobe Illustrator

Examples of wireframes

• http://www.gdoss.com/web_info/PRI_wireframes.pdf
• Need to go back to this website for reference of how wireframe works
• http://www.barrettcommunications.com/contentmgr/showdetails.php/id/378

I have downloaded PageBreeze to use for the HTML editor. I will design the wireframe using either PageBreeze or Visio.

Wireframe

wireframe research.

I have been looking through different website and was able to come with the new modified sitemap.

Possible colors for MIT

red red red red red
black black black black white
orange orange

I found some of the examples for different tab options
1. http://www.templatesbox.com/data/premium.templates/images/flash/flash.preview/11791728687ZT/index.html

Sometime like this is also nice and cool
2. http://www.templatesbox.com/data/premium.templates/images/flash/flash.preview/1155047014PaK/index.html

Colors and Background

This website has many sample templates that are well-designed. Look at different samples to see how colors play in webpage.
http://www.templatesbox.com/

This template is a good example of coordinating red and black color.
http://www.templatesbox.com/premium-templates/website-templates/template374.htm

Notes from chapter 4

What is Design?

• Figure-ground, contrast grouping, proximity, similarity, continuation, and unity provide the structure of elements such as point, line, and plane, or shape, color, texture, and space.

Design and Perception

• Gestalt theory: perceiving of an object as s whole is greater than the sum of its parts. èprimary reason that the designer’s primary objective to create unity.

Point, Line, and Plane

• A point is a smallest elements on the page regardless of its size
• A line is a mark whose lengths are greater than its widths.
• A thick line can translate into a plan.

Space

• Referring to both the illusion of depth and physical space in which designer manipulate compositions.
• Overlapping is good example of illusion of depth.
• Transparency and overllpaing two forms can create an illusion of space.
• Good sites to check out:
• www.enspace.com or www.pointinspace.com

Unity and Variety

• Unity is the presentation of a unified image. èCongruent relationship between type, graphics, and shapes.
• Ways to Achieve Unity
• Proximity
• Repetition
• Continuation : planned arrangement of various forms so that their edges are lined up. Grid determines page margins and divides the format into areas used.

Emphasis, Focal Point, and Hierarchy

• Focal point: starting point in the design and it is the prominent place in the hierarchical order. Isolation and value draw attention to design.
• Usually is the company’s name
• Hierarchy is the order in which users see things on the page.
• Determined by the importance of each elementèhow we define it.

Contrast: visual opposition

• Positive and negative space è fundamental components of contrast
• Heighten the overall visual effect.
• Size is the basic and most frequently used form of contrast in design.

First Version of SiteMap

This is the first version. The second version will be updated shortly.

Helpful websites for Layouts

Useful resource for checking out the designing layouts and fonts
http://websitetips.com/layout/

Progess on Site Map

January 31, 2008
Here are possible websites to check out for tabs and backgrounds:

• http://dev.portalzine.de/index?/Horizontal_Accordion
• http://www.stgeorges.edu/Default.asp?bhcp=1
• http://www.silvertipresort.com/
• http://na.blackberry.com/eng/
• http://www.yellowstonepark.com/

February 3, 2008

I looked at different pages and compiled a few tabs for the MIT page. I created one hypothetical layout page in Microsoft Publisher to give me an idea how each tab or page transits. The other one is the site map created by Microsoft Visio. The site map contains only general pages that could possibly be added to the MIT website. The site map does not include hypertext/hyperlink transition within each page. Further modifications are needed!!!!

MIT Website

MIT Website

Dislikes:

• Lack of contact information on first page è lack of shortcuts for users.
• Lack of Statement of Mission. No introductory of what MIT is about on first page
• The seven subheadings are not in alphabetically order.
• I think that the first page should give the Overview of the MIT program
• There is a need for tabs in the first page that will decrease the browsing time users have to do in order to get to one link.
• Although the contents in the Home page are filled, there are lots of spacing in the paragraphs. I feel like we can condense the spacing of each paragraph and work with the positioning of each paragraph to create a more inviting feeling.
• I don't like the two panels.
• The message regarding accepting application does not bring any attention. Users have to look hard at the website in order to see the message.
  The current student link does not take you anywhere.
  
  Likes:
• I like the consistency of the MIT logo on each page.
• No matter what tab users click on, they always have the accessibility to the site links on the right
• I think that we should turn those site links into tab because tabs can trigger attention faster than links.

From Prospective Student's Perspective:

1. Request Information
2. Admission Requirements
3. Tuition and Fee
4. Important Dates
5. Application for Admission
6. Online Application
7. Application checklist
8. Application status
9. About MIT program (class requirements)

*There are some of the things I think i would be intersted in look as a prospective student

NOTES ON INFORMATION ARCHITECTURE

Questions to consider:

• What does it say about the process of designing a Web Site?
• Where does Information Architecture fit in?

Notes:

• During the process of creating a web page layout ==> we must define its information architecture
• Information Architecture: is a blueprint for the site's information delivery, organization, and functionality. Also, IA deals with the structuring, the relation, the connectivity, and logical organization of the website.

Layout task (Sequential Order)

• Brainstorming
• Thumbnails==> draws small images according to brainstorming ideas
• Comprehenseive layout stage==> determining margin, spaces
• Graphic production

To me, Information Architecture process fit in the Thumbnails stage. Here are the 6 steps in IA

1. Define site's goals
2. Define Audience
3. Create and organize content
4. Formulate visual presentation concept
5. Develop site map and navigation
6. Design and produce visual forms

Second Meeting

Thurday, January 17, 2008
Overview of Meeting:

• Look at www.terry.uga.edu/MIT
• Things wanted to see from the perspective of Prospective Students, Current Students, Corporate Recruiters, etc...
• Reading in Information Architect section in Wang's book

INITIAL MEETING

Friday, Jan 11, 2008
Overview of meeting:

Dr. Piercy and I came to a conclusion that I will be working with him on the MIT program website for my independent study course. We decided to start the website from scratch, starting from defining what are the necessary components/contents (tabs, links, subpages, etc..) and organizing the website layout to creating a website with professionalism and usability.