Flash Website

The Flash Website was a lot of fun and a lot of work. I think working in Flash makes a lot more sense then HTML and I was able to figure things out a lot quicker then I could with HTML. Getting started with the project was tough. Again I am indecisive so it took me awhile to come up with an idea that I wanted to do the website for. I decided doing a website on bubble gum would be a lot of fun, so I went with that.

My initial idea was to stylize the website after a bubble gum package. Which was easy enough to do for the home page and maybe one other page, but it was difficult coming up with different angles of a gum package that I could tie together to make it all work. Let alone making it look like it all goes together. I played around with the idea though trying different things.

After going to the first critique I wanted to try to play off the stickiness of bubble gum. Doing a page that would maybe have bubbles popping from page to page. Using a popped bubble to cover the entire page. I tried doing this in flash. I got the animation to work, but then I got stuck trying to get the content and layout to go along with the popped bubble. I wasn't sure how to lay everything out. I tried out different options, but in the end I thought I shouldn't worry about the animation for the site as much as I should making sure the site was well designed.

So I went back to the drawing board. I completely switched everything: colors, style, and layout. I think it was a good decision. I am pretty satisfied with how it all came together. It doesn't have much animation to it, but I think it does have a nice design. So I consider it a success. I could go back and add more animation, maybe some audio with the gum ball machine. Other then that no real complaints with how it turned out.

Check it out for reals go to

http://www.fall10.graphicinterfacedesign.com/students/lporter/flash/Root%20Folder%20Flash/flash.html

Typography Animation

I had a good time putting this project together. The hardest part for me was trying to decide on what movie to do. I wasted too much time trying to decide which quote to use. I am pretty sure that at each critique I had a different quote that I was going to use for the animation.

I started out using a quote from a scene from Matilda. My ideas for the animation poster were all over the place and I had no idea really how to go about it. I wanted to make an awesome Typography Animation Poster using great design that would just wow everyone. I am pretty sure that the exact opposite was my end result. I came up with a few animation ideas that needed a lot of help. I had so much to do to fix up my rough drafts that I thought I'd be better off just going into a different direction all together.

So for the actual Animation Poster critique I decide to do a quote from the movie, "The Man Who Knew Too Little." I spent most of my time doing a typography illustration of a hand shaped like a gun, similar to the hand on the on the cover of the DVD which explains a lot about the movie. Which I was pretty pleased with how well it was turning out, but it was taking up a lot of time to do.

About half way through the hand, I decided it would make more sense to create an illustration that would go along with the actual quote. So I switched tactics about four hours before the critique. Not that best move, I was obviously struggling hard core with this project. Anyways this is what I came up with.

Then it came time for the actual animation part. I had no idea how I would animate that quote. There was nothing exciting in the voices that I could even go off. So for the third time I switched quotes. I decided to do a quote from the TV show, "Friends." I had a good time creating it in Flash. Although it was very time consuming, I thought it was quite enjoyable to animate the letters to go along with the quote. After days of constant work I believed I finished about a half hour before the critique. Awesome! I was pretty proud of how well it turned out. Obviously I could always go back and do more, but for my first experience with Flash i don't think it was half bad.

HTML Site

Creating an HTML site was pretty difficult to get the hang of. Starting out was the worst part, but it definitely got easier as time went on and it almost became fun. It was very rewarding to have something work after spending forever trying to get it figured out.

I made a website for my sister and brother-in-law’s dogs. A website that would show and help sell their Cocker Spaniel puppies. Normally these kinds of websites are crammed with information, not set up with a good page layout, and are just plan messy looking. I really wanted to try making a clean and simple site that could still include the needed information.

I drew a few sketches of some different ideas of what I could do. Then got on the computer trying to add colors and what not to it. I came up with a few ideas that I really liked. I illustrated stylized Cocker Spaniel dog that I liked so I tried to play off that creating a website that would follow the same style. Coming up with a few different ideas that might work with the illustration.

In the end simplifying everything as much as possible looked best. The layout I choose to do was clean and simple. It made it easy to follow suit with my other pages. I had to come up with a few more similar illustrations of Cockers for the other pages. Which I was surprised most of them worked out pretty well. I am not a fan of the illustration for the litter page, but I just couldn’t seem to get it right after countless attempts. It turned out ok but it’s not my favorite.

After finishing the Cocker illustrations I played around with a few ideas for my logo. I came up with one pretty quick, which was nice. I just tried the different color options I could apply to the logo, than I just had to decide on a background color for the page before I started with HTML. After looking at my computer thumbnails again I decided to go with the tan color. I liked how it looked with the black and white lettering.

Then it was time to start HTML. I had no idea where to even begin. Once I was able to get started I slowly got the hang of the HTML coding and how to get it to work with CSS. I was able to get the page to set up the way I wanted which I felt was a big feat. Once I had figured out the home page for the most part it came together easily. I even almost started to enjoy it.

After hours in the Lab I was finally able to upload a fully functioning site. I was very pleased with how it turned out and was excited about everything I had been able to learn about HTML in just a few days. Despite the many headaches, I found that for the most part enjoyed the project and enjoyed being able to work with HTML. Below are a few of the pages, but check out the actual site the best part is that it functions! The URL for my site is

http://www.fall10.graphicinterfacedesign.com/students/lporter/html/newboldscockers/Root%20Folder/

Tutorial: Margins and Padding

In this Tutorial you will learn how to create Margins and Padding. First off I better explain just what Padding and Margins are and how they differ. Padding is the white space inside the border and the margins is the whitespace outside the border allowing you to separate your box from surrounding things on your page.

Step 1: The first thing you are going to want to do is set up a style sheet for your page. You will want to input this in the head of your page:

Step 2: The second thing that you will need to do is apply the style sheet that you set up in your body for your outer div and inner div, so that it knows which text you want in each. So that should look like this:

After you input the correct CSS code your page should look something like this:

Step 3: So you can see in the image that the inner div goes right up to the edge of the outer div. To change that just adjust the numbers in the style sheet. An example would be something like this:

Doing so would then change your to look something like this:

So you can see by changing the padding and margins it created space between the border of the inner div and the text inside the inner div using padding. It also created space between the border of the inner div and the border of the outer div using margin.

Step 4: With this next step I am going to add some margin and padding to the outer div too. You will basically do the same thing that you did with the inner div but this time adding space to the outer div margin and padding. An example would be:

So your div should now look like this:

Step 5: The fifth and final step you can add color to the div if you would like. Again just by adjusting style sheet. Simply adding a background color. For example you could try something like this:

So your final div should now look like this:

Congratulations! You are now a padding and margin genius! Now go try it yourself.

Site Critique

HTML Google: www.google.com

This site is successful because of the convenience of the site. Besides the fact that it’s a very well-known site that is makes online researching quick and easy, it is very straight forward and easy to use. It uses a simple design that is quite plain so that the content of the page is easily located. The layout is very standard and simple making the site convenient to navigate to where the viewer would like to go.

The layout that Google uses makes the page very simple to navigate. Although this site is a major window for the World Wide Web; the simple home page allows the viewer to successfully direct where they’d like to go next according to their needs. The main portion of the page is shown by the large colorful font located directly above the search bar. Which is the main tool used on this page, allowing the viewer to spot instantly.

The first thing the viewer notices when pulling up this page is the large, colorful Google font. It uses Visual Hierarchy to attract the viewer first to the Word Mark then to the search bar located directly below it. It has very few words on the simple home page, allowing the viewer to choose where they would first like to go, then giving more information after selecting where they would like to be on the Google website, where it is a search of some sort or Gmail. The web page itself is mainly white, with black or blue words; most of the color shown on the page is seen on the Google word mark attracting the viewer right to it.

Google is a large online search engine. It uses is a combination of both text and images, mainly text though. Because the content of the website is so large, it uses strictly text on the homepage before the viewer goes deeper into the site depending on what they are searching for. Even Gmail is still mainly text except very few picture icons to display the messages quicker.

This site is communicating to a very large audience. Young and Old all use this website, assuming of course one knows how to properly use an online search engine. It is a website for all ages. The simple design is what makes this website work so well for all ages. Not being too specific for one generation over another.

Flash Café Rio: caferio.com

Café Rio’s website is successful because of the design of the page. It has a very neat style to it, which coordinates very well with the style of their Café Rio restaurants. It is a very interactive page making it more enjoyable for the viewer. The interactive site is a good way to advertise to the customers what is available and the different deals that are going on. It really does a great job showing what is available for the customer.

The navigation on this site is pretty straight forward. Depending on what the viewer is trying to do the website shows different categories for options to click on the home page. It makes the site very simple and easy to use. As you click from page to page, the layout and everything stays constant except the main screen part which shows the information you are looking at.

Café Rio’s website coordinates very well with their restaurant. It uses the same colors mainly red, orange, yellow, and black. The site has visual Hierarchy to show the main information in the large screen in the middle of the page. To show the viewer where they should look for the information they are inquiring about the site uses a lot of animation and interactivity to draw the viewer’s eye before showing the information. The font used throughout the page is very similar in size besides the Café Rio logo and a few words shown on the center of the screen.

This site is mainly visual, using animation and illustration to attract the viewer. It does use words to show where different searches are located but the words are secondary to the entire image of the page.

The site’s audience is probably young adults to middle age adults. An audience that has the need, knowledge, and capabilities to get onto their site to find out what they would like to know. This site does effectively communicate to the viewer the information it is trying to get across. Any questions the viewer might be inquiring about is mainly shown on the site with easy navigation.