Graphic Interface Design - Semester's Work

HTML WEBSITE
For my html website I have chosen to focus on the Aggie Special Olympics. The reason I chose to do this is because I am a head for this campus organization and I have to do one anyways, so why not kill two birds with one stone.

Over the last few weeks I have gone through and actually completed this html website. the main structure, flow chart, and content has remained the same. There are still several bugs in it at the moment, but it still works (which was my goal).

Here's the url:

http://www.fall10.graphicinterfacedesign.com/students/jeddy/html/So_website/Index.html


POSTER DESIGN & Animation

This project was extremely difficult for me for mainly 2 reasons. The first one being the poster, I can design and such but layout design is certainly my weak point and I struggle with it. The second one being the animation... I absolutely love animation (it's actually what I would love to do as a career). My problem is I can get so into it that due to a time frame I can never get it done in time. Due to the time constraints and my inability to get it done within the given time I have not yet finished it.

Here is the finished poster:

FLASH WEBSITE

The begining: For my flash website I have decided to make a website based around greeting cards. I am in a card club and have tons of cards and I thought it would be fun to show case them in a gallery type website with a page where you can "design your own card". The website will have 4 buttons: Featured, Seasonal, Gallery, and Design your own card.

Several key things I plan on using is and outro/intro and drag & drop actionscript. If I have time at the end I will attempt to make it so when you click or rolloever an image it will enlarge.

The middle: So far I have created a flow chart and spent forever going through all my cards deciding which ones to use and such. For my color choices I have actually gone through all my scrapbook paper and creating mini color palletes. As I look through the colors I find that the more simple the better because the cards are already colorful enough and I don't want to background to over power the cards.

The actionscripting: At the moment I have all my content into flash and everything placed where it needs to go. I have all the pages on seperate layer and I have made it so I can do an intro and outro (I just have to do the code). At the moment I have the drag and drop code working on the design you own card. Now I just have to do a preloader.

... the preloader was not fun to do. I kept having problems with it and it was ruining everything I had going. In my flash files it wouldn't work but when I put it on the server it did :)

... the intro and outro. I ended up canning the intro and outro because it kept ruining everything else that was working. I know it's now not as fun as it could be but I figure it was better to have the drag and drop feature and the preloader work than for it to be animated between each page.

... the drag and drop. The drag and drop worked exactly how I wanted it to with only a few minor changes. I ended up putting a trash (black and white lady bug) so that if you wanted to dispose of an element you could however there was only one of it on the page so once it was gone there was now way to get it back or to put another one. I know there's got to be another way to make it so you have unlimited elements, I just don't exactly know what it would be called. I've done a bit of researching and I'm not finding what I want (it's probably just because I have no idea what it's called... I had this same problem when researching the "trash can" code).

Overall, I'm pleased with the outcome... the only thing I would change would have been to make the area bigger in flash becasue when it opens on the web it's a bit small. I also wish I had more time and could figure out how to rollover and image and it would pop up large. I found a few code snippets that I couldn't get to work and everything I found online also wouldn't work. Overall, I learned a lot creating this website and if I had to choose between flash and html, I would definately pick html.

Here's the link to the website:
http://www.fall10.graphicinterfacedesign.com/students/jeddy/flash/HTML_FLASH/Jaimie_FLASH.html

How to create a table using HTML

Tables are “A systematic arrangement of data usually in rows and columns for ready reference.” (from Merriam-Webster,  http://www.merriam-webster.com/dictionary/table).

Tables are nice, within a website, because it allows the viewer to quickly find links and data without having to search through all the contents of the page being viewed.

Within this tutorial you will learn the code necessary to create a table for your website.

Software needed: Adobe Dreamweaver

HTML table terminology & Important Info

·      Tables consist of rows (horizontal) and columns (verticle).

·      Table…                    <table>                           </table>

·      Table Row…            <tr>                                </tr>          

·      Each row is divided into data cells (like in an excel spreadsheet); this is where the context for the cell is placed. (<td> tag)

·      Table Data…            <td>                                </td>

·      <td> tag can contain information such as text, links, images, forms, lists, etc.

Step 1:             Open up Adobe Dreamweaver.

                        Click the following in order given:

Files

New

Page Type: HTML

Layout: <none>

Create

Step 2:            Click the “Split” button at the top left-hand corner of the document. This allows you to few both the HTML code as well as an example of the browser. Once here you will find code automatically created, DELETE IT ALL (only do so for the purpose of this tutorial).

Step 3:             Begin your code, remember to start out with the <html> tag, and a <body> tag. Do not forget to close them as well.

                        To begin the table, start with the <table> tage and then hit enter and type in the <tr>, hit enter twice. Now put the end tag (</tr>). In the line between the opening and the closing <tr> tags there should be a blank space (see image), this is where you will type the information regarding what is going into the tables.

                       

Step 4:             In the line between the <tr> and </tr> type <td> for data table, then type in what you want in the first cell, for this example lets create a multiplication chart starting with the number 2. Type the end tag </td>. See the example. If the design view does not show up try saving it first or clicking on the design side.

Step 5:            Now under your first <td> add 3 more <td> consisting of the multiple of 2. When viewing your design you will see the 2,4,6,8 all lined up in a row. You can continue this process to add more information.

Step 6:            Now you have 1 row and 4 columns, we want this to be a multiplication chart therefore we need more rows. To do this you end the <tr> that was done in Step 5 and you start another table with a new<tr>. You will do this several times in order to complete the chart. The hardest thing is remembering the times tables. See example.

           

Step 7:             You have now completed the chart! Feel free to add any other HTML code that you know that may enhance your design view. (I added a headed <h1> and gave it a title.

                       

There is a lot more that can be done with this table such as table borders, etc. However, it is not covered in this tutorial. If you would like to know how to create borders as well as more about creating tables you can visit: http://www.w3schools.com/html/html_tables.asp

This tutorial was made possible with help by www.w3schools.com and www.m-w.com.

HTML Webiste Assignment

Since Tuesday I've been thinking of ideas to do for my HTML website. Here's a short list:

-Animals... specifically monkey's (they are my favorite).
-Autism... information about Autism and techniques on how to work with an Autistic individual.
-My Portfolio... I really need a portfolio blog and this would be a great chance for me to do one.
-Non-Profit Organization (Specifically Aggie Special Olympics)... I volunteer for this organization and  we don't have one.

Right now I'm torn between Austism, my portfolio, and Aggie Special Olympics. I should really do the portfolio one but I am extremely passionate about Autism awareness (my youngest brother is autistic) and the Aggie Special Olympics (I love my special needs athletes).

Like I said, I'm torn between those three, maybe I should just go with the monkeys...

Graphic Interface Design - Site Critique

Here are the two links for this assignment (plus one of my favorite links):


http://www.cartelle.nl/#/toys/beatmonsters
http://www.pixar.com/
http://www.plateinteractive.com/

I had an extremely hard time finding a html site, all the sites I was interested in were completed in flash.

This assignment is based on the "cartelle" site.

The navigation of this sight is not common, it took me a minute to figure it out. All of the navigation is located on the left - hand side of the template. Under the "C" it says menu, first you hover over that and then several options pop up, click on one. Once that has been completed all the options pull up along the left - hand side of the "c". If you don't hover over there they disappear. Once I figured out the navigation it was much easier for me to look through this site.

This site feels "fun" to me, this is not due to it's look but due to the first menu labeled "toys". That section consists of "toys" for your mouse to follow and move around. One toy is a skeleton and you can make it bounce and twirl etc. Another example is the birds and the bee's mouse mover. It's very addicting. I found myself checking out all the toys before I moved on to anything else in the site.


I did not see anything pertaining to a "true" hierarchy. I would click on something and it wouldn't state where I was except for in the address bar. I found this a bit annoying.

The contents of this site I found to be fun and informational. They had a section for their "toys" as well and examples of their work and information about themselves. Cartelle is a Graphic/Interactive Studio.

This website had a large variety of elements within it. First off it was extremely engaging with their "toys". Several of the toys made noise when moved around and the view was compelled to move them around. It had motion synced with the sound (only within certain toys).

I found the typography and text a bit difficult. The background was a variety of dark colors consisting of blacks and shades of gray. (It's the whole white on black thing... doesn't work so well with text.). The simplicity of the type worked well with the simplicity of the look of the website. The colors were simple, black, white, red, and shades of grey. Using these colors they were able to pull of contrasts between lights and darks. I found that the combination of colors within the site as well as their toys works well. The colors of their site and their design work did not work as well together.

Information... I felt that more information about Cartelle could have been provided. A list of affiliations as well as a spot for the blog was useful however I would have enjoyed reading more information about how it was started and not just a brief message of what they do and a few key people.

I would say that the audience for this site is other designers and those individuals in the community that are looking to hire an interactive studio. To communicate this they not only show examples however they allow the viewer actually participate in the motion.



My favorite link...

I absolutely love the Pixar website. This website contains all the info needed to feed a Pixa junkie like myself. It talkes about upcoming projects, history of the company, features previous work. It is just a FUn site. I'm not sure if this site is html or flash (the whole "right click trick" didn't work on this site).

Introducing My Design Blog

Hello everyone and welcome to my design blog. Here you will find sketches, ideas, and research behind my design process. Feel free to leave comments. Enjoy!