Accent Creations: Almost done on my part

The 3 pages I've been working on are nearly done. I just need to add the images for the background and logo. The hyperlinks to these pages are set as well. Once the team assembles for our final day, then the website will officially be complete.

Accent Creations: Progress Screenshot #1

The spry menu bar still needs some positioning work.

Easy Rotator plugin

Roseannah recently found a free program that creates dynamic scrolling image gallery. You can find it at http://www.dwuser.com/easyrotator/ and you will be able to run a program or plugin that creates a gallery for your web page by using a javascript code that is automatically inserted where the images are desired.

IMPORTANT NOTE:

I've done some tests with this code and I have found that inserting large image files will not only make the web page load too slow, but it may crash the browser as well (tested in Firefox).

Also note that the Easy Rotator image gallery will won't transform the image that much when using different sizes, but a slim container for the gallery will look like this:



Notice that the image has been cut off.

Accent Creation: Designing the Code (part 3) - Gallery Template

Here is a screenshot of the gallery page template. The thumbnails will be set into a 3 x 3 grid, and they the images will be aligned using columns that contain containers for the thumbnail images. The finalized version of the gallery source code will have thumbnail images that swap the larger image which will fill the space in the large container to the right of the thumbnail container (the large container temporarily colored yellow).

Accent Creations: Designing the Code (part 2) - Template Example

The basic template has been constructed. Here's a screenshot that shows a preview using Firefox and the page source code. The next step is to evaluate what containers need to be added for each unique page. The green box is the container for the page content and the blue box represents the container for the menu bar. Both of these containers can be switched around by changing the stacking order in the code in-case the design of the website changes during development.

Accent Creations: Designing the Code (part 1)

The development of the website has begun, and I have been given the task of developing the basic template of each page. An important element I should mention is the importance of commenting out notes. I have started to carefully place notes on each and every dividing tag. This information will be helpful in both the initial development of the website and its future development, because it will provide future developers to understand the structure of the code.


I have also added an area to leave notes. Since this is a group project, this area will the members communicate better. So far I've only taken note of who last edited the page and what the date is. This area can be deleted or kept after the initial development of the website has been finalized.

Since images for each container have not been finalized, each one will have a temporary random color so that each container can be visible during the development process.

Accent Creations: Furniture Gallery - Design Rough #1

This an example of how the furniture gallery page may look like. The design keeps the same layout as the previous page(s) I posted. It would be a page with swapped images on rollovers. The rollover images on the left box would swap the image to the right without an image restore. Clicking on either the thumbnail or the enlarged image would lead to a link to the full size image. Some of these images need to be re-sized and re-sampled, and some of the backgrounds for these images don't quite match each other and the page it was intended to be placed in.

Accent Creations: Rough #4

I redesigned the previous rough that I did using the suggestions made by the comments under my post. I got rid of the "Accent Creations" from the headline since that piece of information is already in the heading. I also made the type for the headline much larger so that it is visible. I got rid of the warped image from the header due to it being distracting, but I left the color burn layer that accompanied it since it left an interesting color. A picture of Michael replaces the picture of the chair due to a small mistake in the distribution of photos, and the fact that the paragraph to the left is more about the artist than it is about a chair.

Accent Creations: Rough #3

I reworked my rough after having been shown better examples of website layouts. For this rough I decided to have more emphasis on images. A gradient is used in the background so that the viewer is led up and down the page. In this example the image is large and vertical and the text boxes are horizontal. Drop shadows were added to the boxes in order to keep the page from looking flat. The text within the header is now lined up on one horizontal line and the menu bar no longer has small images to distract the viewer from the text.

Accent Creations Project - Site Architecture, Information Architecture/Wireframe, Roughs

Site Architecture

The user starts at the home page. All pages have links to each other. Clicking on the link for "furniture" leads to the furniture page, which includes links to photo galleries for tables, chairs, cabinets, desks, beds, boxes, as well as miscellaneous pieces. The "links" page will include links to useful pages about exhibitions, facts about wood, and inspirations. The contacts page will contain all the contact information on one page.

Information Architecture/Wireframe

Each page will have this layout. The menu bar will be located below the header. It will be a spry menu bar, and on rollover it should show the links to each link featured on the "furniture" and "links" pages. Page content, which will vary from page to page, will take up the rest of each page.

Rough #1

This rough is how the website would look like as a very simple design. The links on the menu will will be PNG images that have furniture acting as bullets each piece of text (this rough uses the same image of the same chair, but the actual website would use different images all around). These PNG images will have a swapped image on rollover. The swapped image is the same image, except it has a back-light. The logo will be hovering over the menu bar, and will also be a PNG image.

Rough #2

This second rough retains most of the same design from the first rough. The difference is that an image is placed behind the logo. The menu bar has a solid shape placed behind it.

List Exercise Screenshots

My Website - The Soil Horizons

Soil Website: Wire Frame/Information Architecture

Image in a Box

Soil Website: Site Architecture

Side by Side Boxes in a Box

Box on Box on Box

Brown

Brown is made up a mixture of orange, red, rose, or yellow with black or gray. It evokes a sense of stability, reliability, strength, and approachability. It can also create negative feelings, such as sadness and isolation. The mind often sees it as a color that brings warmth, comfort, and security. It is often described by many as the down-to-earth and conventional color. It is often associated with the earth and all things that are natural or organic.

I actually asked people the first thing that comes to mind when they they think of the color brown. Some of these answers associated with food. Brown is often associated to chocolate and brownies. It is also interesting to note that brown is often the color of the food people recognize as appetizing. This is because that not only is it the color of chocolate, but it is also the color that cooked food often turns into. An example would be red meat that is cooked and turns brown or dough turning into brown bread, hence the cooking term "browning".

Another response I got from asking people was that the color also reminds them of boxes. This response is probably associated with packages that often come in brown boxes. UPS is a brand that associates itself with the color brown and is usually associated with brown boxes, and because of this the color brown enhances their service by visually providing potential customers direction towards a service they need.

Brown can also be associated with dying leaves. In India, brown is a color of mourning because it is the color of dead leaves. The Japanese language has no word for the color brown, so it is often described using other words, like the color of tea or a the fur of a fox. In the United States, brown is associated with Thanksgiving holiday along with orange, since this holiday takes place in the autumn.

As mentioned before, brown is associated with the dying leaves and this is the reason why brown is associated with autumn. Dead leaves eventually cover the land, and the once green scenery of spring turns orange and brown due to the dead or dying leaves. The colors cover both the ground and the air as the dead brown leaves fly through the ground and land into piles of other dead leaves.

Brown is also a great color to use in designing any type of visual art. It is able to compliment many colors since it often blends well behind them. An example would be the image of a beautiful garden. The garden can contain flower stems of green and petals of red, yellow, white, etc. and the brown soil beneath them will never look out of place.

Many ethnic groups are often identified with the color brown. This is due to the brown skin color of these ethnic groups. Examples of brown people would those that live in Southeast Asia or Mexico.

Brown is mostly associated with nature, so one of the ideas I thought about would be to make a website that has information about soil. I could talk about the layers of soil hidden beneath the Earth, the uses of soil, living organisms within the soil. I would explain the layers of soil using an illustration that points out the several layers of soil and what could be found in each layer. This information can be carried over to another part of the website which identifies and describes organisms living within each layer of soil. I could even go far as to say that the organisms living above all the layers of soil still depend on it, which could carry over to the part of the website that identifies and describes the uses of soil.

My Haiku in 3 Pages

Page 1

Page 2

Page 3

The designs I used for my haiku in 3 pages borrows mostly from the first HTML file that I created (see my previous post). There are only a few major differences: The words containing the links to the other pages had their text size increased to hint that they are the words containing the hidden link.; the second line (page 2) now has scrolling text that moves upwards in order to point out that the sky is located above everything; the third line (page 3) has a darker blue background than the other pages in order to look like a deep blue sea.

My First HTML page: Haiku

The code itself

Top of the page (Firefox)

Bottom of the page (Firefox)

Page viewed in Google Chrome

Page viewed in Internet Explorer

For this design I decided to visually describe the line of text by having "clouds" scroll to the right. I decided to use "brush script mt" for the text face since it is a safe text to use for HTML pages, and it reminds me of the fluffy and flowing shape of a cloud. Each line of text for this part of the page moves in a different speed in order to create an effect that is similar to clouds moving in the sky. This is supported by the sky blue-like background for the page.

I decided to make the text for a "dome of blue sky" centered and small so that the negative space surrounding the text would seem large like the blue sky in reality, since it seems to stretch out infinitely. The text stands still in order for the viewer to have a look around at the "blue sky" without much distraction.

At the bottom of the page is the text that visually represents a sea. The text is floating on a sea of slashes, and each line bounces back and forth on the page. The size of the text from top to bottom. The top contains text that is small but moves quickly. The size of the text gets larger and slower towards the bottom of the page. The size of the text in each line creates makes it seem as the sea expands toward a horizon therefore creating the illusion of space. The text containing the last line from the poem moves the slowest so that the reader has an easier time reading the text.

2 Bad Websites

Mr Bottles

This first site is for Wisconsin antique bottles. This is example of bad design for various reasons, and the most notable reason is the man that keeps popping in and out of the page saying the same thing over and over again. It is bad enough that sound can be annoying to the viewer who first loads the page, but it is really bad when there is no way to turn it off. Another issue is that the text is scattered and pressed against each other, which makes the page look like a not so interesting wall of text. The image in the background also does not contrast well with the text and creates a distraction.



Dokimos

This second site was too painful to look at, so the only information I know about it is that it is some sort of religious site. The reason I say it is too painful to look at is that the animated rainbow in the background not only makes the text hard to see, but it also made me feel sick. At the bottom left you see an animated panther that is there for no apparent reason, and at the very top is a fake security message.

2 Successful Websites

Consumer Reports

The first website is for Consumer Reports and it is an example of a good design because the layout is simple and easy to navigate. The text is large enough and contrasts against a white background so that is easy for anyone to read. Users can easily find that they are looking for, since there is a navigation menu on the top left with various categories. The search bar is also conveniently located at the top of page, and it's large size makes it very easy to find.



Starcraft 2

The second website is the community site for the video game Starcraft 2. I think that this site has a good design due to the fact that the art style is similar to the menu navigation from the actual game itself. The navigation "buttons" light up when you hover the pointer over them which makes them easy to find and creates a point of interest. The text is large enough to read, and although its mostly light colored, it contrasts against a darker color making it easy to read.

Final: Animals in Jeopardy story book

For my final project I did an animated storybook based on the poem "Animals in Jeopardy". The basic format that I used for this storybook was an animation viewed within two cinematic bars in each scene. The text at the bottom is viewed below the animation, and a "next button" goes to the next part of each scene. There is also an additional button that could be pressed on some scenes whenever an animal is first named. These buttons appear along with the text and when pressed they lead the viewer to an information page that teaches the viewer about the animal. This part of the project adds to the educational aspect of the project as a whole, and it is accompanied by the reading of the story itself.

Word Animation

The two words I chose to animate were exposed and subtle.

The first part of the animation for the word "exposed". A strange unrecognizable shape is spotted in the dark by a spotlight. The spotlight is actually a mask that shows layers underneath a layer of black. The unrecognizable object is chased by the spotlight, and eventually the spotlight exposed the entire shape. The viewer can actually skip to the exposed part by clicking on the moving shape as a way for the viewer to expose the shape as they please.

The second part is an animation for the word "subtle". The word subtle is a lot sneakier than the shape in part one. The spotlight tries to chase the word down and expose it. The letters of the word fade away whenever the spotlight tries to expose them. The spotlight, after a long period of time, eventually is able to expose the word before it fades away. I animated it this way, because things that are subtle are only noticed if someone takes the time to seek them out. The interactivity included in this part is the letters of the word which darken if rolled over. The rollover makes the word a bit more clear, but not enough to expose it as one still has to be patient and wait until it is found.

Self Portrait Animation: "The Doppelganger"

A Good Flash Site and a Not So Good One

http://www.volkswagen.co.uk/technology/rollercoaster

I found that this is a pretty good flash website that gives the user some information about Volkswagen's engine technology. The user is given a roller coaster ride through the many details about Volkswagen's engines. The animation itself gives you a sense of speed with not only a roller coaster track, but also an environment with objects to pass by such as trees. Details about the engines are viewed through robotic arms holding futuristic screens.

http://www.zincbistroaz.com/index.html

This is a flash website that doesn't look bad at first glance, but to a first time user the navigation will seem very confusing. It took me awhile to realize that the navigation is done through the clicking of the eggs at the bottom center of the page and not the word "navigation" far left of it. You only get to see what page you are about to navigate to after highlighting one of the eggs and not many first time users will notice that.