Revising: project 1

I shot a new photo that I think is working much better than the original, making the graphic feel a bit more tangible. With an all new scene, I am definitely forced to go back and finesse the graphics. Hows the legibility? Is the new photo working? Feedback?

Project 4: Nearly Realized

Through this reinterpretation of my html site, I hoped to integrate flash elements into the existing document to provide better user feedback and an overall richer experience. The intent was that elements of the site that had been crying out "I want to be flash" would finally get the chance to do so.

The links below demonstrate prototypical flash content to be integrated into the html. Whats missing is the integration, which is something I am continuing to learn and pursue. These are, for now, flash comps.

Flash Element 1

Flash Element 2

Project Statement:

Nearly every decision made through the course of this project, whether it be aesthetic or functional, has been informed by the process itself. This fact made for a very a unique experience; instead of struggling to understand our audience from afar, we began on the very same page as them. We had been given a vast and intimidating amount of nearly foreign information, and asked to understand it quickly.

Although there was a sequence to this process, I felt that every step forward informed not only the subsequent but previous steps, so that the process never went in a strait, linear progression. The organization informed the structure, but the final build, which was an experience all it’s own, went back to inform parts of the organization and aesthetic presentation.

I think that the process of designing for this content, gave way to knowing exactly the kind of presentation that would best serve the user initially and over time as they gained knowledge from the site.

Fully Realized Potential: Prject. 3

Objectives: Since the current site seems to exist in an Psuedo-Flash state, I will explore how elements of flash can be incorporated to expand on the current version, and to then be able to deliver both a html and flash version of the site.

If time, I will readdress the current css/html site in order to create a more appropriate (no flash tendencies) strait html/ css site.

I hope to be able to do better justice to current ideas and inspirations, by incorporating flash, and in addition, making a more practical, useable, flash-less site.

WWWoven Online!: Final CSS Site

WWWOVEN

Final Comps

Articles on the homepage can be expanded on another page by hitting more or the title.

articles pull in related terms which are always clickable.

Spinnerets of design, programming, and user pull in terms to "weave" them into a solid strand for the category.

Navigation to jump to terms appears in these sub category pages

Terms that require additional info or pictures, expand to their own page

Finalized Comps

Homepage with short essay previews

Expanded essay page with terms woven through the essay spinneret

Designer's Role page with appropriate fibers woven through it's spinneret

Ideational planning selected showing some full definitions and an option to show more for terms that have more text and image.

Expanded term page

comps

Possible Aesthetic Inspiration

I was trying to decide on a name for my site and I thought of including the word "spinneret" for a somewhat poetic representation of web design. I liked thinking of this process in terms of individual considerations for presenting for the web passing through the spigots of the spinneret of design, joining together to be woven into a concrete system. I started researching some imagery of natural and man-made spinnerets. While I'm not sure about using it as a title, I would like to include some visual reference to it in the site's aesthetic treatment. 

Although this idea came after the mood boards, I think they put me into this mentality to continue drawing appropriate inspiration. This inspiration specifically ties into the anatomic board.

Good

Here is one of a series of  infographic-esque videos from online and print magazine GOOD. The videos are part of Good's Trasparency section, which sums itself up as "A graphical exploration of the data that surrounds us."

Final Wireframes

Site map showing the prototypical pages I am wireframing 

This is the homepage. It doesn't contain all the navigation of the other pages, so I thought I'd use this space as bulletin for news or updates. Below is a general article on web design, this may also be a space for continuously updating, "article of the week" sorts of posts.

Secondary category within "designers role".  This shows the navigation and content that will appear on this type of page. For what each section that is clicked, a header and specific content is generated in the location below, along with an image.

This shows the tertiary level which generates each term's content in the space below and gives navigation to call up all other terms in that section. Also there is a space below the text for additional info, in this case how Chrome relates to the user's experience, taking you to Chrome's location in another category.

Here I'm handling what were sub-tertiary categories sections with multiple terms in each

Here is an example of the first level after the homepage.

In this exapmple, CSS links to a relating article with the option to return to CSS after the article, and still the option in the nav above.

Group Feedback

Moodboards:

For all three boards the group pointed out color schemes, graphics, and conceptual executions that could connote the themes. Some aesthetics of the "active" page were suggested to have potential in that they bring some excitement, liveliness, and overall greater accessibility to this subject for this audience. This was something we looked at in everyone's moodboards; a way to ease the audience (who are new to web design and programing) into a task that could potentially be very arduous. The "active" aesthetics could also be used to give the site a light feel and imply movement throughout to insure that graphics and content never seem heavy or intimidating.

The group suggested that a way to use themes of "anatomic" would be to remove any facade of the page and highlight areas of the website itself to illustrate a term (give the def. for css and describe and show how this website employs it). 

 A few of us seemed to have a mix of practical and persuasive connotations. I suppose my practical word was clean. Practical for the sake of clarity, and to insure the site is perceived as professional and reliable. This could be employed in clean clear displays of textual information, and navigation.

Wire Frames: to be addressed....

I need to look a further refinement of my grid and layout now that I'm getting a better handle on functionality issues.

The group pointed out some spots where the design wasn't doing enough to let the viewer know where they were and where they had been.

Some condensing may be needed, maybe by grouping definitions and giving the user a handful of definitions per page. 

I may need to reconsider the look of the navigation, right now the nav for the terms isn't  consistent with the rest os the site.

Revised Wireframes

Home

Designer's Role

Designer's Role (submenu)

Ideational Planing

Site Map def. Page

Read more (article) from site map def. page

Mood Boards

1. 

2. 

3. 

Brand and connotative words

The Brand I chose is Apple.

Connotative words:

1. Solid

2. Forward-thinking

3. Human

My proposed direction

1. Visceral

2. Anatomic

3. Refreshing

These words were initially chosen to represent aspects of the proposed site's function. Although I still plan to keep these in mind at that stage, I revised two of the words so the three could lean more towards aesthetic guidelines.

1. Clean

2. Anatomic

3. Active

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.