Prjct 3:terms

AJAX
AJAX stands for Asynchronous JavaScript And XML. It is not a new programming language, but a new way to use existing JavaScript and HTTP requests. It works by exchanging small amounts of data with the server "behind the scenes" so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page's interactively, speed, functionality and usability.

AJAX is asynchronous, in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page.

Alias, antialias
In digital signal processing, anti-aliasing is the technique of minimizing the distortion artifacts known as aliasing when representing a high-resolution signal at a lower resolution. Anti-aliasing is used in digital photography, computer graphics, digital audio, and many other domains.

In the image domain, aliasing artifacts can appear as wavy lines or bands, or moiré patterns, or popping, strobing, or as unwanted sparkling


Anchor Tag
The anchor tag is used to create links to:

HTML files - internal (on current page or within current website) & external (other websites)

and to other types of file (e.g. video)


Background (in CSS)
CSS background properties define the background effects of a webpage such as a background color, image, repeating image, image position, or a fixed image (that doesn’t move with the scroll).


Bandwidth
Refers to a data rate measured in bits per second.


Baseline Grid
System of guides to insure different elements of type are set on the same baseline across the entire page for more consistent read, and overall better usability.


BMP
A bitmap is a type of memory organization or image file format. Files of this type are ideal for the web and include GIF, PNG, TIFF, and JPEG.


Browser
A software application which enables a user to display and interact with text, images, videos, music and other information typically located on a web page or a local area network.


Browser Compatibility
Web sites should be designed with each browsers unique characteristics in mind. Often, sites are made without considering how browsers may handle their content which sometimes causes certain aspects of appearance or function on of a site not to work the way they were intended.


Button & Interactive states
Buttons on an interface are the visual representation of a set of instructions or tasks to be performed upon the buttons activation by the user. Buttons can have interactive states aside from the task performed on release of the button. it can react in a visual way when a user rolls the cursor over it, before rolling over it, or upon click of the button.

bytes, kilobytes, megabytes
Bytes are a unit of measurement of information storage.

A kilobyte (KB) is made up of 1,024 bytes.

1,024 kilobytes= 1 megabyte(MB)


Card Sort
Card sorting is a way to involve users in grouping information for a Web site. Participants in a card sorting session are asked to organize the content from your Web site in a way that makes sense to them. Participants review items from your Web site and then group these items into categories. Card sorting helps you learn how users think about your content and helps as guide in building your structure.

Chrome
Browser chrome’ is a euphemism for the graphical framework and elements of the web browser window. Chrome includes the browser
title bar, toolbar buttons, Back, Forward, Stop, etc.
horiztontal and vertical scrollbars status bar: the strip at the bottom of the browser window the window frame

CMS (contentent managment system)
A content management system (CMS) is a program used to create a framework for the content of a Web site. CMSs are deployed primarily for interactive use by a potentially large number of contributors

Columns
Vertical and horizontal increments that define the underlying grid of a webpage.

Compression
the process of encoding information using fewer bits (or other information-bearing units) than an unencoded representation would use through use of specific encoding schemes.

CSS (cascading style sheets)
computer language used to describe the presentation of structured web documents. It involves stylistic rules describing colors, fonts and layout used to style documents written in HTML, XHTML, SVG, XUL, and other markup languages.

Project 2 Statment

One of the main goals for this project was to design for a user who was briefly familiar with the chair and very much admired it, but maybe had yet to study the fine details of an authentic Eames Lounge. This approach informed not only my textual content but the illustrations and  subtle visual themes that I wanted to introduce. This told me what visual queues needed to be shown in the first place and then the degree of simplification or detail in the rendering, that this user needed. Some subtle themes to introduce, that this user may have been unfamiliar with, was a reference to the distinct graphics that Charles designed for the Herman Miller ads for his and Ray's Chairs. This was expressed through the color palette, the simplification of the illustrations, and the overall look of the split-screen interface. 

Another overall consideration was to manage a balance between the distinct 50's modernist aesthetic, and a contemporary face. This is apparent, for example, in the gradient introduced on the hompage. 

For the form of the navigation, I traded out more direct formal references to specific Eames design patterns, for a more simplified and accessible system. This seemed more appropriate to match the minimal modernist aesthetic and provided greater ease of use.

How To Spot a Fake: Process Overview

First, I thought we should start this off right and remember what this is all about— this beautiful chair!

My initial inspiration for the subject of this how-to came from the fact that I had recently come across a fake Eames Lounge chair, at an antique mall, and almost took it for the real thing. I was familiar with the real chair, but I had never really studied it in detail. And thats where the how-to comes in .

After the content of the 5 steps was decided, a site map was created.

Then, rough sketches for wireframes.

More detailed wireframes followed. Here, I got a little ahead of myself and started to move into form, as opposed to focusing more on function and navigation.

The first round of comps begins and produces several possible formal directions.

Here, I looked at way to incorporate Ray Eames dot pattern into the navigation

I then began to approach the form with more emphasis on Real vs. Fake

Eventually, I moved to a split screen option to allow for clear comparisons.

The treatment of the illustrations within these pages was inspired by old Herman Miller ads designed by Charles and Ray. These second of these ads is where I drew inspiration on how to render the look of the split-screen.

Of the comps, this was the direction I pursued, refining the composition and simplifying the navigation.

Here, I tried another form for the tidbit back button, but later traded it out for a more simple, less confusing button that was effective without dominating the design.

As for main page headers(armrest) I found a way to change what had been a very separate, very bland labeling, and integrate it with the rest of the composition by allowing forms from the illustration to continue into the header space.

 

I then pursued several rounds of different directions for the homepage, which since the beginning had not undergone any major changes. I explored different directions with the hope of finding a solution that would reflect the inside system while being interesting and inviting for the user.

Here I discovered that the subtle use of the gradient brought the page into a more contemporary realm, while making it very open and inviting.

Further refinements were made to intro and interior pages, adding animation to help clarify partially hidden tidbit buttons and to transition from the home page in a way that helped the user get more easily acquainted with the new space of the first step.

COMING SOON: full interactive version of the web site.

The gradient was a great addition to the intro page so it only made sense to carry this over into the interior pages. The first attempt at this started to look very promising but at the same time it presented the need to re-address and reinvent many other compositional aspects of the site. To meet the project deadline, I had to hold off on exploring this further but expect an updated version in the near future. 

Post Semi-Final Crit Refinements

Here I took lines from the illustration (armrests in this case) as it appears in the tidbit area and allowed it to continue into the title area. 

When a tidbit is launched, the shapes align. I also changed the tidbit's back button to be less dominating and more reflective of the main step navigation. 

HOME PAGE REFINEMENTS

Finalizing Comps

Main steps with one tidbit for each