S &

A graphic design major nearing completion. My name is Sophia and I attend LCC. This is a school blog for interface design and research, but I also post typography, digital art and design, as well as tips. Please enjoy yourself on my blog!

[sweet-ampersand]

Banner Ads... what happened?

The banner ad... remember the ones? In their peak, they would often have you play a "game" or have sound where it could talk to you or make annoying sound effects. Where'd they all go? The internet has gotten much quieter since the near-death of them.

There are several potential explanations to look at. In the advent of more complex, and yet, more simplistic web design (think how popular CSS is and how up-and-coming HTML5 is), banner ads just. Don't. Work. They're animated (not a problem if it's inobtrusive, like a small wiggle), which tends to extend to the whole, usually large and narrow, ad space, being annoying and unpleasant to look at. The more work put into them that would've been noticed a decade ago, the noisier they are, the more colorful they are, the less people are inclined to want to look at/click on them and the more likely they are to ignore them, or turn the ad blocker back on.

This source (x) cites the "dot com bust" of 2000 and 2001. So many people were buying so many domains it was impossible for any one company to keep up. At the time, banner ads, especially with Flash, an up-and-coming program at that time on the internet, would have been very expensive, and with not many click rates, companies were bound to go under quickly.

Yet another reason banner ads have fallen through is because of the popularity of websites like Facebook. Does Facebook have banner ads? Nope! They don't need them. If a company has a nice or entertaining enough page, they can generate views.... and therefore more business. They also use relevant information about their users to generate smaller ads that are more likely to be clicked on, just because they're only shown to their target market. With the popularity of social media, places may not even need to advertise anymore... word of mouth can sometimes be enough. However, the main reason for some pages (like for instance, check out the Applebee's page, or the page for your local hotel) is to act as a go-to customer service person for people who have become irate by the actions of their local business.

So why did banner ads go away? There wasn't any one reason (and if you go far enough into the internet, you can still find them anyway).

[sweet-ampersand]

Here's an overview of the evolution of the Pokemon logo in Japan vs. North America, etc! 

Progression from, Red, Green, Blue, Yellow, Gold, Silver, Crystal, Ruby, Sapphire, Emerald, FireRed, LeafGreen, Diamond, Pearl, Platinum, HeartGold, SoulSilver, White, Black, White2, Black2, X, Y.

Although from what's to be seen, the North American progression isn't entirely accurate. Here's what the logo looks like with the second latest games (OmegaRuby and AlphaSapphire haven't been shown):

I do love how the logo progressed, though. As a Japanese mega corporation, this hardly surprises me (I mean, look at Coca Cola, for instance), but that doesn't mean it's not interesting to see.

Here's the source: (x)

[sweet-ampersand]

Wacom Global

Whoa! This site is packed... it LOOKS so touchable. With a layout similar to, say, the infamous Windows 8 look, it connects each big icon with a small animation if you roll over it (inobtrusive, totally inobtrusive, and yet they draw you in). Looking at the Boost Your Ideas link, it looks like it uses HTML5, very cool. As you scroll down, it's colorful and packed with characters, and yet it doesn't seem like too much. Perfect for a site selling drawing tablets. Each corner of detail (there's content bars, one each for each scroll) has a little something that jumps out to catch your attention.

Going back to the homepage, there's a sidebar that, once you scroll over it, retracts and shows you more options under categories like "Everyday", "Creative", and "Business". Despite the bright and cheerful colors of the artwork featured on the site, the site itself stays on the greyscale spectrum, making sure to give it a professional edge.

There's a carousel also on the front page, and if you click on one of the three products highlighted in it, the first scroll takes the page. It's more obvious here that the site does use HTML5, which is fantastic. Overall, this is a great site and I love to visit it... except that when I'm broke, I avoid this site like the plague because I know I'll just get thirsty. But yeah, cool site.

[sweet-ampersand]

Some really cool Tumblr alternatives!

Tumblr with its newest update combined with its alliance with Yahoo! has made it a bit hostile to those image/graphics creators. They want to make the blogging experience more like Vine's, so if you ever feel forced to move, here are some similar alternatives:

Soup: A simple and clean dashboard layout, not much different from Tumblr.

Typepad: Unfortunately, this one has a charge, but you can try it free for 14 days. It seems to operate more like Pinterest, but still blog-like. Better for the professional crowd.

Jux: A very nice image viewer that's a cut above the rest. Showcase your best graphics here. (Did I mention it's more mobile-friendly?)

Hopefully among these you can find something you like if you ever feel as if you want to leave.

[sweet-ampersand]

Corporate image pack and promotional merchandise for Rosie's Allergy Free Bakery!

[shirtsnshorts]

MIKE ROUSH / The Hidden Life of the Burrowing Owl / 5:16

I have always been fascinated by wildlife documentaries. As a kid I would take my mom’s camera and try and get as close to the neighborhood animals as I could. Most of the time this would mean long hours sitting motionless on the back deck with bird seed sprinkled on my lap and shoulders. I never got the shot I wanted, so when Chris and Shannon  asked me if I wanted to make an animated film for Titmouse, I said yes before they finished asking. 

Chris and Shannon Prynoski, Dik Pose, and I Line up a shot in the middle of nowhere. photo by Steve Kellener.

Early thumbnails of the burrowing owl.

Rough turnaround.

"Owl" was animated in Flash. I used a technique where I would animate traditionally very rough, then I would take a second pass cleaning up symbols that I would be able to reuse later. Most of the final animation you see in "Owl" is puppeted symbol animation with hundreds of symbols and a different puppet for each shot. This way I could get the detail and animation quality I wanted.

The Flash break-down on one of the owl puppets. Lots of feathers!

One of my favorite parts of making this film was having to get out of the studio and go on location. I found an amazing place in central California called The Carrizo Plain using google maps. I spent the weekends driving all around taking pictures and exploring. Fun fact: The burrow used in the short was an actual owl burrow. On one of the days I was taking photos of the burrow one hissed at me from inside the burrow with it’s rattlesnake like call. It scared me nearly to death.

This is how I made all the “live action” backgrounds. I drew a storyboard of what I wanted and photo collaged lots of pictures together to make it look like what I drew. Unfortunately these places don’t exist in real life.

Whenever the owl had to touch the flower or fork, I took hundreds of photos, cut them out in photoshop and animated them. Fun.

On location I used a couple stand-in models to get the lighting right and a maquette when animating for inspiration.

I had a great time making this film and when I was done we were lucky enough to show it at festivals around the world. After 4 years the “Owl” showed at more than 40 festivals, in over 25 countries. 

Can’t wait to do another one.

Mike’s Tumblr

[sweet-ampersand]

This is so cool to see! I was not honestly expecting that the live action parts were just pieced together from different photos.

[sweet-ampersand]

The Evolution of LINE Play

Let me introduce you to LINE Play, a sort-of-complex phone game in which you create your own avatar and use it to move around peoples' "houses" and other various places.

This app has gone through SO many impressive changes ever since I picked it up (it's free in Google Play Market and the App Store if you want to check it out, but it's not kind to older phones so consumer beware!)

At first, the only options were to go to people's houses. As in the picture below, you started at your own house, and had a few select options to choose from. This was fine for awhile, as you can have lots of friends. You can earn "gems" by watering your plants when prompted, cleaning your items, sending hearts, and sitting down, bathing, eating, or sleeping when you need to. 

At some point, the app evolved to have these function buttons be tiny rounded squares at the bottom of the screen (this is about when I got it, but I don't have a picture). The "random" button turned into a colorful spiral-hole under the mailbox.

Some time after that, a new adventure was added! The giant witch Popo appeared in front of your house to show you a giant crystal in the corner of your yard which could transport you to different places: at that time the park and the coffee shop. Here a new function to earn gems was added: to "high five" another avatar.

The only problem with this crystal is that it created a pop-up which took some time to load, and it was not always guaranteed you could make it to these new places, even as more showed up.

But a few days ago, another update was made where the screen looks something like this.

What a neat change! That makes everything so much nicer to find. All the options are still accessible in the "more" menu, but this is so much cleaner and more organized. And I got this notice:

So I'm excited to see how this app develops! Check out their website here: (x)

[sweet-ampersand]

40 Free Branding & Identity Mockup Templates to Download

A roundup of top-quality, free downloads of branding and corporate visual identity mockup templates from around the Internet.

Hi guys! Here I am again to share with you some potentially useful mockup templates. As you all know, corporate branding is very important, and these might make packaging a little bit easier and more convenient.

[sweet-ampersand]

An example of awesome interface design.

Today we'll be looking at the mobile version of Wikipedia. (x) Going through on your phone or small device is so beautifully easy. No clunky buttons to get in the way of searching for what you want. The sidebar has minimal links so as not to deter you from what you're really there for: soaking up mass quantities of information you're interested in. 

Once you've searched for the term you want, scroll down. All the categories are shortened in length, ready to be clicked open. Perhaps you're the type who likes to read large chunks of text. I don't. I'd much rather be able to open up one sub-article at a time and close it when I'm done to move to the next, which this allows me to do.

Images do not cram themselves on the sides, but take up the middle and break up paragraphs nicely. If you click on one, it will take you to the image itself (so you can save or send it), where there will be information on the image below it.

The edit buttons and links (besides in the slightly enlarged text) are as big as they need to be, making sure you can click on it without having to worry about clicking on the five other things around it.

The interface is black on white, classic, unobtrusive on the eyes. There's no worry about getting a headache after five or ten minutes of research. In a world full of people who refuse to make truly mobile-safe versions of their websites, preferring people to download their app instead (I'm looking at you, Facebook), this is a breath of fresh air.

[sweet-ampersand]

We blank iconic designs and challenge you to design them in a new way. Re-invision an iconic brand. Design a custom T-shirt. Become a design superstar. Join now.

Love designing in your spare time or just want some inspiration for some up-and-coming designers submitting for alternative companies? Consider giving this site a look! Currently running contests for Grenco Science and Asphalt Yacht Club. Assets are provided to form a base for your ideas, and you could win money for your design (who doesn't want that?)

[sweet-ampersand]

Oh boy, does this site ever have problems. First, there's the fact that the homepage uses terrible, terrible graphics. They squashed parts and stretched parts and used non web-safe colors and used photos that are way too small, and boy is it a mess. Also, please don't create things that look like buttons and then not make them link to anything.

Secondly, once you log in, you find that you cannot use the back button! Like, at all. You are literally prohibited. 

I'm all in favor of using tiny font as a stylistic thing, but this is not stylish. At all. It's really tacky and hard to read, especially on the dark grey background they like to use in some places.

All their information is displayed in a highly annoying, all-out-there format, similar to LCC's linking system.

Overall, it looks like it hasn't been touched in at least ten years.

I would link a screenshot of the site, but blurring everything out would take time and patience I don't have, since logging in you get all highly classified information.

[sweet-ampersand]

7 objections to paper prototyping and why each one is mistaken.

A good read about website paper prototypes... and how else are you to create the "pop-up book" effect that your paper website would need?

And if you read all the way to the bottom, support for paper prototyping and resources are provided.

[sweet-ampersand]

(To go with the three maps)

Let's start with my home school, Lansing Community College. I mean, I like the moving banner, but it doesn't work well for a site like this, since it seems more like it's trying to sell a service than direct potential students on how to apply. Their buttons were hidden and a lot of tasks took you everywhere BUT the place you needed to be. In fact, to get the tuition and fees links for this one, I had to ask my fiance, who works for Support Services and therefore knows this site like the back of his hand, for help to figure this one out. Links for important items were often buried in paragraphs of information (really icky for someone who has a low attention span like me) and roundabout. For some tasks you may need to look at one thing, remember the thing, and search for the thing. Why not be more open to someone who may have a learning disability? They had two bars of links, but I think they should have drop downs of the links they have on the bottom and move them to the top, whereas you move their links that are on the top to the bottom. They should also make it mobile friendly (it's really gross on the phone).

Moving on to Wayne County Community College, I was very surprised at how long it took me to find each thing! It was easy to get to and understand, right where you might expect it to be. It was much longer a landing page than LCC, but at least they put the less important stuff towards the bottom. (Come on, who actually reads their college's mission statement?) They, like LCC, also have a moving banner, but it's for the campus events instead of showing ridiculously happy people taking classes. They have a button to apply RIGHT IN THE HEADER! The only thing I might suggest for them, is, again, to make it more mobile friendly.

Lastly, we have Mid Michigan Community College. This was about as user-friendly as Wayne County Community College, (except OH GOD WHAT'S WRONG WITH THAT PIG CLIP ART) except when it came to finding classes for the particular majors. You had to either guess which category the major fell under or (like me) just open all the drop downs on the major page and look to see where the major fell. Except for biology. They hate biology. What kind of community college doesn't teach biology classes?!????

[sweet-ampersand]

The idea was to find out how each website worked and how easy it was to work around. I have selected three Michigan community colleges to study, this is the last of a set of three. I have captioned each set with the things I was supposed to find, and that should help you understand the last map.

[sweet-ampersand]

The idea was to find out how each website worked and how easy it was to work around. I have selected three Michigan community colleges to study, this is the second of a set of three. I have captioned each set with the things I was supposed to find, and that should help you understand the last map.

[sweet-ampersand]

The idea was to find out how each website worked and how easy it was to work around. I have selected three Michigan community colleges to study, this is the first of a set of three. I have captioned each set with the things I was supposed to find, and that should help you understand the last map.

(I'm so sorry, the third one is supposed to read "Organismal Biology course descriptions", I don't know why I put "shippings". That doesn't make any sense.)

[sweet-ampersand]

Allow me to introduce you to my very favorite stock image and font source, Veer. Not only do they offer you these services, but they come to you with catalogs, activity books, online games and even more goodies. Here are some of their wallpapers.

Visit by clicking here: (x)