Thursday, November 29, 2012

Post 72 - Favorite Sites 3

"Destructoid Site"
This site is so jumbled, but I still like coming here. It's interesting really.

From a design standpoint, it's jumbled.

But from an entertainment standpoint, I really like reading what's on this site.

It's strange when you find yourself both liking and hating a website.

Post 71 - Favorite Sites 2

"Channel Awesome Site"
While this is one of my favorite entertainment sites, I will say that the design to it is very simplistic.

They do implement the scroll down menu in their navigation bar, but other than that, nothing really visually interesting is going on.

Never really thought about it before.

Post 70- Twitter Feed


The Twitter Feed is something I'm pretty proud of. I will admit, there was some treaking that needed to be done.

I actually had to change the size of the document so that it would fit in the dimensions of the site.

The only thing I'm really wondering about is if I should have made the bar much longer than it actually is. I may very well make it longer in the corrections.

Post 69 - Twitter Analysis

"Twitter Ticker"
Since the Twitter ticker is something I want to implement on my site, I did a bit of research on how Twitter pages and font looks, which was very easy, since it involved copying and pasting type.

I also know my ticker will likely end up being thin, so it doesn't take up much space on the page.

I will say I would have prefered a vertical format, but the other way works just as well.

Post 68 - Flash Example 4

"Doble Fine Flash"
I really like the navigation bar on this site. The way that it's done here is that when you highlight an option, a scroll down menu will appear so you can go to sub pages.

This makes navigation of the site very quick and easy, so you're not clicking through various pages on the site.

Efficiency is a good thing that a site should have.

Post 67 - Flash Site Sketches 3

I will say that I'm expecting the things I've drawn here to be a lot like my previous website: a fourth will make it in. That's not really a bad thing though.

The website is a puzzle. It's just a matter of finding the right pieces that fit.






Post 66 - Flash Site Sketches 2

This is a continuation of the sketches I've done so far. I will say having the Tea tank that's present here is something I want to do with my actual website.

It goes well with the whole army angle of my site.





Post 65 - Flash Site Sketches 1

The Sketches present here kind of show that, because of doing the previous projects before, I did end up rehashing old ideas from my first crop of sketches.

But that's okay. What doesn't work there may very well work here.





Post 64 - Flash Example 3

"Yahoo Site"
The flash here is much like IGN's flash portion, except they've added arrows for even more stories. This allows to have more information and still have room for other information.

I like how this was implemented.

Post 63 - Flash Example 2

"Think Geek Flash"
The flash here comes into effect with the navigation bar. The icons themselves light up when you highlight them with the mouse.

This is a very simple implementation of flash, but it works here.

Post 62 - Bad Flash Sites 2

"Bad Example 2"
This site is actually infuriating in it's design choice. The icons, when you try to highlight them, run away from your mouse.

This, in and of itself, is self explanatory as to why this would be a bad design choice.

Post 61 - Bad Flash Sites

"Bad Example"
The thing about flash sites is that it';s never a good idea to make it completely in Flash. This is because:

  • You can't find it in a search engine
  • Copying text can't be done
These sort of things can very well bother anyone using a site, so only use flash a little. Never go all out with your design.

Post 60 - Flash Example 1

"IGN Flash Example"
The major flash based thing that's going on here is the main square in the middle. It shows the days top stories, and it allows you to click on the top writing to get a larger view on the story and get an idea on if you want to read it.

May sites seem to use this sort of format.

Wednesday, November 28, 2012

Post 59 - Project 4 Thoughts

Project 4
CGR 257 – Advanced Web
Project 4

Combo Web Site

Project:
Create a website for Ocha Green Tea that mixes flash and HTML. The website will continue our brand on the internet. Be sure to create sub pages for: Products, Events, History, Contact Info, and FAQ. The copy for the site can come from the internet or you can use Lorem Ipsum. Focus on the graphics and layout of your page. Consider who is viewing the page and market it accordingly. Design the page to look good on monitors that have a resolution of 1024x768. (955x600)
I would like this site to look different than your previous site. Please include flash elements to create a more dynamic web experience.
Objectives:
Discover new ways to market your product and continue its image. Know how to layout a company website using flash and continue a brand on it.
Thumbs Due: Nov 15
Due date: Dec. 4
 
 
I don't really have any concerns with the parameters in this project. Since I've gotten better at using Dreamweaver, and since I'm already well versed in Flash, I'm not really concerned.

What I can say about the stuff here, is that I want to take my project 2 site and turn it into the site it should have been. I want to incorporate the army men from project 3 into project 4.

Then, the things we talked about in the second project can become a reality.

Post 58 - Final Pop-Up

"Final Pop-Up"
I feel that the animation works best here in the pop-up. With the previous designs, the general animation was fairly cramped. Here, however, I think it actually has the room for it to work here.

The design is my 2nd favorite of the bunch, and I could actually see this sort of design in a real web advertisement.

Post 58 - Final Skyscraper

"Skyscraper Banner"

While the animation leaves something to be desired, this is actually my favorite design of the bunch. Having the one army man seems to work here, and I really like the stripes on the side as well.

Tuesday, November 27, 2012

Post 57 - Final Banner

"Full Banner"
I hate to admit it, but this, along with the other 2, didn't turn out how I wanted. Originally, I wanted it where I had the full Ocha logo revolving. However, I only got one petal to do that.

Other than that, design wise, I think it turned out alright. I didn't need to get too fancy, and I feel it fits the image of my original site idea very well.

Post 56 - Bad Advertising

"Bad Advertising 1"

"Bad Advertising 2"

I feel the need to discuss the audience of websites. When you go to a website, the advertising there should apply to the overall interests of the viewer. The advertisements above conflict with that.

While number 1 seems like a very simple coincidence, the second one seems more blatent.

It's best to remember who you're advertising to when designing ads and selling products.

Post 55 - Internet Advertising Article

While looking around on the internet, I found this article about internet advertising. I thought that some of the points could be used for making my web flashes, so I've included it below:




Internet Advertising Is Like Selling the Steak…Not the Sizzle.

By Borcz:Dixon
There's an old marketing adage: "Sell the sizzle, not the steak." In pay per click, when using keywords, you want to do just the opposite.
Well, if you're selling anything, you had better pay attention to the "sizzle." In today's market, your potential prospects have one thing in mind. "What's in it for them," and if you're into sales, you must realize this. While the "nuts and bolts" of your product or offer are important, that is not normally what gets someone's initial interest and makes the sale. BUT - here's the most important point if you want to be successful with search engine marketing - Google ONLY cares about the "nuts and bolts" - the steak!

Why it's true that people don't buy products or services. They buy benefits. In the advertising arena, this tends to be the mantra — but online, Google's search engine results pages (SERPs) deliver information specific to keywords — all without the sizzle. When's the last time you visited a store and asked a sales person where you could find the "brand new designed, fresh and environmentally friendly best...?" Consider Google the sales person that immediately cuts to the chase...Regardless of what you're selling, in order to sell effectively, you have to sell both the sizzle and the steak in combination. The sizzle (or benefits) will help you get attention through AdWords textural ads; the steak (or the keywords as they relates to the product) allow for Google indexing and high-ranking.
Search engines behave like people.
  • They like web sites WHICH contain substantive information about a certain topic.
  • The best sites usually appear first in search engines because people like them as well as the search engines.
  • Unless your site is near the top of the search results, customers are not likely to see your listing or to learn about your business.
  • 62 percent of searchers click on a link within the first page of results
Search engines are really indicative to the behavior of the people who visit the website.
  • Search engines segment the market and connect the right people together.
  • People search for topics that they are interested in
The power of the search engine should not BE underestimated.
  • One of the building blocks of the foundation of the Internet.
  • The use of the SEARCH engine to be able to reach one's target audience one of the most effective Internet marketing strategies
  • SEO is 6-times more effective than banner ads
  • SEO delivers qualified leads
  • 90% of internet user sessions begin at search engines
  • 55% of online purchases are made on sites found through search engine listings
  • Google, the dominant player in the search engine industry, generates 70% of all search-related Internet activity.
Search engine optimization aims TO achieve the goal of getting more visitors to a website
  • By helping it get higher rankings in the search engines.
There are two ways to be able to get noticed by search engines.
  • The first way of increasing search traffic is by GETTING high rankings from search engines through optimization.
  • The second way of increasing traffic through search engines is by GETTING high placement from search engines through pay-per-click-advertisements.
Choosing niche keywords that are relevant to the audience is key.
  • What are they typing into search engines to find your products and services?
  • The right keywords are: relevant to the business -AND- popular with searchers.
  • Using generic two-word keywords that are common in your industry are not likely going to get result listings on page ONE in Google, especially if there are many competitors.
  • They must be aggressively incorporated into the specific landing page as if the landing page were the ONLY page on the entire website.
But to be found for the right words on any site, you must undergo regular, extensive keyword research.
  • To understand what words people use when they search for specific goods and services.
  • Understand how many searches are taking place for targeted words and phrases
  • Evaluate the size and competitiveness of specific keyword markets (w/respect to the keywords).
On the internet, “the whole is greater than the sum of the parts.”
  • A page might not get ranked on every keyword put forth.
  • The point is consistency overall, and that more opportunities to rank higher aggregate for a higher ranking overall.
The MOST important consideration pertaining to SEO... Search engines do not rank WEBSITES.
  • Rankings are based on INDIVIDUAL pages and the specific keyword-related content therein.
  • Search engines recognize content and page ranking on a per-page basis only.
  • It is vital that each and every page of a website be optimized for the specific content (or keywords) found within the page.
  • This keyword-rich content is referred to as keyword density.
  • Websites should be "optimized to be seen" by surfers — search engines assist with achieving this goal.
The strategy for writing term papers that communicate well is the same with search engines.
  • Tell them what you're going to tell them (html tags and titles)
  • Tell them (pages with keyword-rich content)
  • Tell them what you just told them (tagged navigation and images)
Search engines evaluate this content by using what they call “spiders.”
  • These programs scan (or crawl) the top-most portions of website pages collecting the ‘textural’ information about them
  • Spiders analyze the information and pass it back to the search engine.
  • It will lead to a website which is more organized and a website which contains substantive information to answer the search query.
Fortunately, the tried-and-true tactics still work. Google still loves:
  • Topically relevant links from important sites
  • Anchor text
  • Keyword-rich title tags
  • Keyword-rich content
  • Internal hierarchical linking structure
This is the main arena of search engine optimization; utilizing a set of methods to be able to get search engines to list the website pages with high ranks:
The TITLE tag:
  • Like the heading for a book chapter;
  • Convey the message in about 40 to 150 characters;
  • Keywords should ALWAYS be used in the TITLE tag.
META description tag:
  • Allows page authors to determine how they would like each page described when the search engines display a page;
  • Some search engines show the content in this tag as part of the search results; Description tag should be between 50 and 250 characters.
META keywords tag:
  • The keywords used in this tag are not viewable in a Web browser;
  • This is where keywords are inserted that are relevant to each page's content; Recommended size from 75 to 125 characters.
Page content
  • Each page of the site should contain about 250 - 600 words of unique content with 4
  • or 5 occurrences of the targeted keywords; this is called keyword-density; Use of no more than three keywords per page;
  • Too many keywords in one place can hurt rankings.
ANALOGY: Suppose for a moment that a UPS delivery person arrived at the front desk of a large corporation only to find a note, “Please place the package in Bob's office.” Without a map of the office showing the location of Bob's office, the package wouldn't get delivered. Part of SEO is:
  • Continually providing search engines with website 'Site Maps'
  • To assist the spiders in collecting this data.
The easier it is for a spider to crawl a page (and site):
  • The more likely the pages will be crawled -and -
  • The more likely it will rank higher.
The second way of increasing traffic through search engine optimization:
  • Is by GETTING high placement from search engines through pay-per-click-advertisements;
  • Depending on how the keywords relate to the content, the highest bidders' ads will appear;
  • The more completely the search query is answered, the higher the placement on the results page.
Search engine optimization effortlessly COMPLIMENTS and empowers the PPC campaigns:
  • The textural ads satisfy the search query more completely.
  • Google rewards advertisers who provide more relevant data to satisfy the search query
With lower costs, and; Higher placement on the page; More cost-efficient delivery.
State right up front what your offer and how much it will cost. There is unconventional wisdom in that approach and it basically boils down to what you'll pay in clicks if you don't.
Remember that people will click your ad based on what you tell them in the headline and description. It pays to qualify the clicks before you pay for them. Your conversions will be higher and your out-of-pocket expenses will be lower. That will translate into higher revenues for you.
So the next time you write a PPC ad to drive traffic to a landing page, remember this: Every click is money out of your pocket, but not necessarily money in. Therefore, use your ad to qualify the clicks so that you don't have to pay for them later.

So...Long-and-short of it...Sell the sizzle or the steak?
So, should you sell the sizzle or the steak? Well, if you want your business to sell effectively, you should sell both. Attract attention by clearly stating the benefits of your offer, and then maintain and build interest by demonstrating the connection between your product and the benefits you're touting. Definitely sell the sizzle, but don't let marketing clichés make you afraid of telling people what it is that's sizzling away on the grill.

Post 54 - Advertisement Research 3

"Banner Example"

"Skyscraper Example"

"Square Pop-Up Example"

From this last batch of advertising examples, I find that having videos in the advertisement comes up alot. However, since that is a skill that we probably won't be using in the class, trying that at this point might not be the best idea.

However, it is something to look at in the future.

Post 53 - Square Pop-Up Study

"Storks Example"
"Sparkol Example"
"Brooklyn Example"
The square pop-up examples allow for more illustration from what I see. Unlike the skyscraper and the banner, the pop up doesn't show up as much as it used to. However, fro what I see here, it probably should.

Post 52 - Skyscraper Study

"Book Example"
 
"Rental Example"

"Turbotax Example"
With the skyscraper example, I notice there isn't much room for being artistic. I think people are used to just working with a horizontal format when it comes to advertising. There also seems to be more type involved here than with the other 2 formats. I may have to keep that in mind when designing my advertisements.

Post 51 - Advertisement Research 2

"Banner Example"

"Skyscraper Example"

"Square Pop -Up Example"

 
With this set of examples, the banner and the square pop up are for the same thing, but with variations based on their format. This shows that you don't need to really use different ideas for each style. You can just alter and tweak a pre-existing format to fit your given advertising method.

Thursday, October 25, 2012

Post 50 - Advertisement Concepts

"Concept Page 1"

"Concept Page 2"

"Concept Page 3"

"Concept Page 4"

"Concept Page 5"


The conceptual phase of the advertisement project was easier than I thought. Since it was supposed to be 75 drawings, I was nervous. However, I ended up doing 25 concepts and fitted them to the different formats. Once I did that, the concept drawings became easy.

Of the 25, I was surprised that 21 actually worked over all 3 formats. The Ocha Army concept could work from a graphic and flash standpoint.

The project itself would require a lot of illustrator work first, but I'm not worried.

Post 49 - Banner Study

"Banner Examples"
The thing that I really like from this group is the photo present in the Pumpkinville advertisement.

It's not really the picture itself that I like, but putting a picture into my advertisement. I notice that alot of Web advertising does this, and I think I might do this for my banner design.

Post 48 - Advertisement Research

I went and searched my usual site for advertisements, and that was easier than I expected.


"Skyscraper Example"

"Square Pop-Up Example"

"Banner Example"

From what I see here, it's all a mix of either type or graphics. It actuall seems alot better than what I expected originally. The square pop ups seem to allow for more graphics than either the skyscraper or banner set-ups.

I think that right now, the pop-up will be the easier of the 3 to design for.

Post 47 - Project 3 Thoughts

Web Advertisements

Project:
Create three flash advertisements for Ocha Green Tea. The ads will appear on various websites on the internet. Be sure to carry your brand image into each of the ads. Consider who is viewing the advertisements and market them accordingly.
The ads will be several different sizes. They are:
Skyscraper – 120x600px
Full Banner 468x60px
Square pop up – 250x250px
Objectives:
Understand how advertising for the web is different than print advertising. Discover ways to market your product and continue the brand image. Know how to layout web advertisements in Flash
Thumbs due: Oct. 25
Project due: Nov. 6
 
 
 
This project seems alot like project 1, and that might work in my favor. Since it mostly uses flash, I'm comfortable with the parameters. 2 years of using the program puts it on par with Illustrator and photoshop for me, so I shouldn't have too much trouble with this project.

Post 46 - Site Critique

My final site, while being one of my better works, does need some corrections for the final critique. I need to:

  • Change Font for headlines and body copy
  • Lose brown bar on history page
  • Match nav to bottom of Ocha
  • Add Green Headlines
  • Change Contact Info to contact
Most of the problems here involve simple design flaws. I remember when it was the technical stuff that I lost points on. The fact that it's not the case here means I'm getting better.

Post 45 - Final Website

"Site 1"


"Site 2"


"Site 3"

My final site actually turned out nicely. As I was going through doing the site, there was some doubts with working with the program. However, this turned out very nicely.

I will say that looking back, doing Lorem Ipsum saved me alot of time. I remember with my previous projects, trying to come up with new things screwed me up.

By not doing that, I saved some time.