Dear Siri, Who Is Eliza? The Past And What’s To Come

If you’ve managed to get your hands on a new iPhone 4S, chances are you’ve interrogated Apple’s new personal assistant, Siri. I’m pretty sure I have asked Siri to marry me, love me, and tell me jokes more times than I’ve looked up any sort of useful information, but I’m not alone. In fact, so many people are digging into Siri’s artificial brain, streams of her witty remarks are popping up all over the web. Apparently, attitude can be programmed.

One particular interesting “easter egg” in Siri is her response to “Who is Eliza?” If asked, Siri responds that Eliza, “was a good friend” but, “is retired now” and links to a Google search for ELIZA AI history. Apparently, ELIZA was a very early AI language processing program developed at MIT in 1966. She is likely Siri’s best friend and greatest inspiration. According to Wikipedia, ELIZA ran a series of programmed scripts to take on different responses. One of the most famous scripts was that of a psychiatrist, called DOCTOR, which provided a “startlingly human-like interaction.” Sound familiar?

Once again, I love how much attention to detail Apple puts into their products. Whether it’s perfecting the yellow gradient in an icon, or taking the time to hide this little piece of history inside Siri. For more fun, you can ask Siri to tell you a story, and after a few tries she’ll spit out even more history.

I’m extremely excited for the future of the virtual assistant. Movie times? Product recommendations? Flight information? A Siri DOCTOR? Maybe even automatic suggestions: “You haven’t gotten your haircut in a while. Should I schedule an appointment for today?” or, “It’s your mom’s birthday. Would you like me to call her?” Who knows? If anything, maybe some of ELIZA’s scripts can help provide a hint of what’s to come.

Credit Card Icon Pack

Introducing 35 miniature credit card icons. A hand drawn icon pack just for you. They’re realistic, simple, and one-hundred percent awesome. Each one has just enough pixels to remain clear and understandable, and just few enough to stay out of the way. Use them for online checkouts, your personal store, donation buttons, affiliate links, or whatever else you need them for. One look at these miniature works of art and your customer won’t wait to checkout their cart.

This pack consists of 35 icons. Each icon comes in a 32x32 pixel in PNG format in these variations:

Support and Donate

Like what you see? Feel free to tweet, digg, stumble, bump, buzz and share this post. You can also follow me on Twitter. And if you’re feeling really generous, you can donate me a little something for the free icons. I’ll be sure to thank you after the checkout with a little surprise.

License & Download

This icon pack is available for commercial and personal use. If you use these icons (under any circumstances), please place an attribution link to Graphicpeel.com.

Credit Card Icon Pack by Graphicpeel, Louis Harboe is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Based on a work at Graphicpeel.com.

I claim no right of ownership to the respective company logos and glyphs in each one of these icons.

and buy me a coffee!

Thanks for your download! Don’t forget to share this post and follow me on Twitter.

New Icons: iTunes 10 

You’ve heard all of the fuss. It’s all just stupid. Even Steve agree s that the new icon does not “suck.” In fact, I love the iTunes 10 logo. The CD was getting old, and Apple decided it was time for a refresh. The only problem I had was that the icon looked just a little off in my dock. Not dramatically, but a tiny bit. So I took it into Photoshop tweaked a few things. The result? These. I even added a purple version to match iTunes on iOS.

Designing the Capo Icon

I’m proud to announce Capo 2 is officially out. Get ready to rock because the latest update is insane.

Capo lets you learn your music. You can drag a song from iTunes into Capo, slow it down, loop difficult sections, hide vocals, and mark up certain verses. With some practice you can actually learn to play entire songs from your favorite artists. Capo received quite a lot of buzz on its original release, but it’s about to get a whole lot more.

Capo 2 takes a huge step forward. You can now automatically detect the chords inside a song and mark them up in real time. As well as (get ready) generate the entire tablature. By simply drawing atop the spectrogram, Capo will generate tablature automatically for you. “It really doesn’t get much easier than this!”

The application was developed by Christopher Liscio, a master of audio applications. The interface was designed by Brandon Walkin Fortunately, they contacted me to make a new icon for Capo 2. Here’s a little behind the scenes.

Capo’s original icon (left) wasn’t exactly ideal. It gave a clear idea of what the application did, but it was far from pretty. Strange perspective and combination of photos and illustration looked horrible in the dock. So I did a major overhaul (right) for Capo 2.

The new icon shows the recording of music from a CD. One of the main reasons for the hand-written note was because of Capo’s awesome new tablature feature. Now you are literally copying the notation from the CD. This wasn’t my first idea though, I went though several concepts.


Concepts

The first concept was similar to the final icon, except instead of a yellow notepad I used a hand-held chalkboard. This became very close to the next stage, but I decided that a notepad seemed much more practical then a small chalkboard. It also allowed for an awesome document icon.

There were also many alternate styles for each of these. I tried a waveform on the chalkboard, instead of an eighth note but then it looked like Activity Monitor. I originally used a purple/blue disc but then it looked like a notepad was burning DVDs.

Another concept was the sheet music peeling off a compact disc. I really loved this idea, but there are already so many application icons using large discs, something more unique would be better. If you imagine this icon as a silhouette with no detail, it’s just an oval. Basic shapes and masks are important in icon design. Also, different icon sizes for this would have been tricky.

And finally, I tried using the same metaphor as the original icon except cleaned and simplified.

Here’s how my PSD transformed in the process. (It always starts out bad)

So after many hours, the Capo 2 icon was born. So far it’s gotten great feedback, but I’d love to hear what you have to say.

If you’d like to comment on this article, send me a message on Twitter.

Learn more about Capo!

iOS Icons Made in Pure CSS

iOS Icons in Pure CSS

Click here to see 11 iOS icons made in only CSS, no images whatsoever.

NOTE: This demo will only work correctly on a webkit browser and has only been tested in Safari 5 and Google Chrome 5. Here’s how it will look when rendered correctly.



How was it done?

The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv’s tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples.

Contacts iconWeather iconiDisk icon

In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes.

The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon.

To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

There are a lot more tricks I used (especially in Voice Memos). See if you can find them all by snooping around my code. If you have any questions, you can email me.

Lastly, during this process I came up with two big CSS requests. CSS polygons/triangles and CSS noise. Hands anyone?

Of course, to all of those that feel that this is utterly pointless, I agree (kind of). CSS is the wrong tool for creating icons I will admit, we’re better off using images, SVG, or Canvas then bloating CSS documents. So what is the point of this? To show what’s possible with CSS, not necessarily what it should be used for. Also, it’s fun to look at, and interesting to dig into. If this was made in SVG would it have been as popular as it is right now? No. People like these sort of things, no doubt and I do too.

Inspiration

I wouldn’t/couldn’t have done it without some inspiration and help. Tutorials, examples, and blog posts play a big part in the making of the project. If you liked this demo, you’ll love these. If you know any other awesome demos like this, be sure to tell me.

Opera logo in pure css by David Desandro
Pure CSS speech bubbles by Nicolas Gallagher
Pure CSS glyphs by Zander Martineau
iPhone in CSS3 by Jeff Batterton

Follow me on Twitter! And ask questions or send comments.

Background on demonstration page was created by Louie Mantia. No images were harmed in the making of this demo. If you spot any errors in supported browsers, please let me know.

Apple Showcases HTML5 

Insane examples of some awesome HTML5 techniques. Apple says, “These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today.”

MobileMe Mail Beta, a Visual Walkthrough

When MobileMe launched two years ago we saw a major improvement from Apple’s original service “.Mac.” MobileMe came with the use of the cloud and “push” technology and a brand new set of desktop-class web applications (or Me.com). Me.com allowed anyone to access their email, contacts, calendars, photos, and files from any computer with an internet connection.

One of the reasons I love Me.com (other than being an Apple fanboy) is that it looks great. Every little aspect of the interface was thought out, from the icons to the scrollbars. It was a major improvement over the original .Mac interface which was filled with brushed metal, serif fonts, and aqua buttons. Me.com uses an interface based of applications on the Mac, but formatted for the web. This way, we’re already familiar with how to use Me.com before we even open the browser. But recently, this all changed.


Overview

So what’s all of the talk of the MobileMe Mail beta? A short time ago Apple updated their Me.com mail application. They’ve added server-side rules and a simple archiving feature (like Gmail) as well as redesigned the entire mail interface. It’s gone from resembling a application on the Mac, to an application on iPad. It’s a giant clue that Apple is planning for a more touch-based future.

The new interfaces includes tons of iPad-esque elements. There’s a new toolbar using glyphs as buttons. The default mail reading view resembles an iPad “split-view.” "Popovers" are now used in a few places, such as adding a link to an email (right). There’s also other positive changes like search moved to a different location, redesigned preferences and buttons, and webkit animations. Here’s a summary of what’s new visually.


Toolbar

The beta focus’ on a new color: blue. What was previously gray, is now a shade of blue, most noticeably the toolbar. The new toolbar (top) is a much simplified version of the previous design (bottom). The tiny colored icons are now glyphs, without a surrounding button. Reply, reply all, and forward has been consolidated into a popup after clicking on the reply icon. Apple’s also added an archive icon (second from left) that moves the selected message into the new archive folder. You’ve never have to delete an email again! Also, the delete symbol has been replaced with a trashcan glyph, just like the iPad and iPhone. Each of these icons gets a faint glow when hovered, a nice touch.

If a brand new user looked at each of these toolbars, which would be more intuitive?

Finally, the search bar has been moved to a more prominent side of the page, to the left. It’s been brightened and elongated too. I’m assuming, just like the recent Facebook redesign, this change was added to put more emphasis on the search bar. I never used search on MobileMe that often, maybe this redesign will remind me it’s there.

There’s also a faint shadow under the toolbar, this seems to be a new addition to Apple’s toolbars. iTunes 9 and the latest iPhoto have the same effect. I’m not sure I love it, but we’ll see how it comes along.


Formatting Bar

The formatting bar brings a lot of new functionality to the compose window, and brings Me.com a lot closer to a desktop application.

You can choose between 14 different fonts including Helvetica, Marker Felt, Georgia, and my personal favorite: Comic Sans MS! There’s 6 different font sizes available as well as a color picker, link editor, list maker, and the basics (text style and weight, text alignment, indentation). Apple even manages to make the color picker and link editor beautiful (see above). Apple’s done a great job with the design of the new toolbar.


Preferences

There’s a new look for the preferences, very different (aesthetically speaking) from the preference windows on a Mac.

Just like parts of the iPad, and previous versions of Me.com, the preferences window floats on top of the background. It’s got a new tab style, using rounded squares with glyphs as icons. The selected tab turns bright blue, and hovering over one creates a blue glow around it. All of the buttons and check boxes in the beta use this same style.

As for the preferences themselves, I think they’re pretty much the same as before except for the rules, and maybe the vacation setting? It allows Me.com to auto-reply when you’re on vacation or away, useful!


Other Changes

A few more notes: To access your account, help, and sign out you click on your name in the top right and select from the popover, just like Facebook. There’s also a new loading indicator, like the ones on iPhone that float on top of the content. Drafts autosave (I love the folded paper icon). There’s a new “flag” icon, which is noticeably different. You can view your mail in three ways: widescreen, compact, and classic view all which use the new scrollbar design. There are also new buttons, checkboxes, and drop-down handles which are all matte instead of glossy.

That’s the MobileMe Mail beta! If you’ve got MobileMe be sure to apply for beta so you can try it out yourself. For those who don’t have it, maybe this will convince you to sign up.

The new Me.com is just starting to take shape. I’m sure Apple will continue to update the rest of their MobileMe web app suite with iPad-esque redesigns very soon. Could these new designs be hinting us towards a Mac OS redesign? Oh, I sure hope so. Say goodbye to poor Mac OS, and hello to iPad OS. Next stop, the tablet age!

Do you like the new look, or do you hate it? Let me know on Twitter.

Designing for the Multitasker

Everyone wants to be able to multitask these days. Especially with cell phones and mobile gadgets. More and more mobile applications are being released every day, many of them that interact with others. For example, finding several images from the web and adding them to your text document. This works wonderfully on a large display. One can just drag and drop from window to window. But what about on a mobile device like the iPhone?

Here are several methods used by different operating systems from large displays, to smaller ones. Each one provides a great way to switch between open windows quickly.

Overlays

One of the most common ways users switch between applications is through an overlay. It’s usually made of a small box, list, or row of the currently running applications brought up by pressing a key. What’s nice about the overlay is that it floats on top of whatever you’re doing. This way, you get a full size view of what’s running as you switch from app to app.

overlay

Usually, overlays have a transparent background of some sort to act unobstructive. The way operating systems display the open applications are very different though. Mac OS X (top) shows the open applications as icons, while Windows (bottom) shows the icon as well as a screenshot. These screenshot thumbnails seem useless in my opinion. While it’s more informative, the detail is difficult to read on such a small thumbnail. Screenshots are better left for other types of application switching (which I’ll touch on later).

Overlays might be the quickest option, but they work best with a keyboard and large screen. While they can be done on small screens, it would require nearly everything behind the overlay to be hidden, defeating it’s purpose. When working with a small device, it’s best not to show too much at once. Instead, let some of content flow offscreen and allow the user to scroll to it. I love how overlays work on my Mac, but I’d never want to see an overlay on something as small as my iPhone.

Cards

When the Palm Pre was announced last year, everyone was excited to try its “cards” interface, including me. The idea was simple, fun, and realistic. When pressing the main button on the Pre, running applications shrink slightly into “cards” on the homescreen (left). The user flicks left and right reveal other cards and flicks a card up to exit the program. Anyone who picks up a Palm Pre almost immediately knows how to navigate it. The interface made multitasking feel natural.

cards

Of course, the same idea existed before Palm announced their card interface. Mobile Safari used the same method to navigate open websites (right). But, Palm made their interface unique with the flick-up-to-close gesture rather than a close icon on the upper left corner. The flick gesture requires more explanation, but it’s a creative approach to the closing of an application.

The only downside to the card interface is that you can’t see all of your open apps at once. Mobile Safari has some indicators underneath the pages to tell you how many windows are open, but not what each window contains. One has to compromise due to the small screen. On a mobile device the card interface is definitely my favorite. It makes multitasking faster, and more “fun” than ever.

Grids

Common on Apple products, screenshots in a grid formation provide a very clear picture of what’s open. For example, in Exposé (right) on Mac OS X, pressing a key rearranges open windows into a grid. Now the user can see everything at once. Of course, the downside is that the grid method only works well on a large screen.

grid

Instead of using the “card” interface on Apple’s iPad version of Safari, Apple makes use of the extra screen space and places the open Safari pages on a large grid. No more flicking left and right to view open pages. In my opinion, this is by far the clearest and most efficient way to display a set of windows on a larger screen.

Stacks

Stacks of paper and open books are two good examples of how we manage applications. The metaphor is often used in interface design. For example, Windows Vista introduced Flip 3D (left), a new way to switch between open applications using depth and perspective. It lines all of your open windows into a 3D “stack.” Some find this irritating, others love it. Its main problem is that a majority of the windows are covered by other windows. This requires a user to scroll through the entire stack until they’ve seen full images of each window.

windowsflip

Sneak peaks of the Microsoft Courier have been spotted all over tech blogs. The Courier is the rumored Microsoft tablet with an interface based off books, handwriting, and scraps of paper. The mockups are quite impressive. One particular interface element that caught my eye was the search view (right). After making a pinch gesture, open windows are frayed out left and right, like an open book. It’s a combination of Apple’s CoverFlow, Palm cards, and real books all in one. It’s something brand new. It’s also a lot of fun to play with.

That’s four different techniques, and all of these interfaces are incredible examples of multitasking. Each one is better on a different screen size. For pocket-sized devices, “cards” fit just enough on the screen at once. For tablets and mid-size devices “stacks” work just like objects we already know how to use. For larger screens with more flexibility, grids and overlays provide a map of what’s open. And for the iPhone? I think we’ll have to wait until June, but in the meantime here’s a concept by Ocean Observations of what multitasking on the iPhone could look like.

I’m excited to see what new multitasking interfaces will come in the future. A 3D carousel of open windows? A bulletin board with screenshots scattered all over? Which kind of interface is your favorite? Tell me on Twitter.

Microsoft Courier image credit: Gizmodo

iPad UI Roundup 

Sebastiaan de With has wrote a wonderful summary of the Apple iPad’s user interface. While I don’t think the homescreen is as slick as my mockup, the rest of the UI is fantastic. Sebastiaan carefully covers the good, the bad, and the ugly.

Apple Tablet: The Concept UI

With all of the rumors going around about the new Apple Tablet, I thought I would take a stab at the UI. The past two days I’ve put together a mockup of the “homescreen” by combining Snow Leopards UI with the iPhone OS. I also used the rumored information along with some of my own predictions.

Similar to the Palm Pre and iPhone’s Mobile Safari application, the Apple Tablet uses a “card” interface. Each application that’s running appears in a horizontal tab-view. To switch between apps you swipe. To close an app you tap the X button. Also notice the wallpaper behind the tab-view. This is customizable in Settings.

The dock at the bottom of the screen shows the default applications. Pressing “More..” opens a stack-like grid of the rest of your applications. iPhone applications work too, acting as Dashboard widgets. The Dashboard acts as a second layer underneath the tab-view. Tapping Dashboard in the dock hides the tab-view to reveal the widgets underneath.

The News application displays the current headlines from multiple papers and RSS feeds. The Print application lets users download and read books, textbooks, and interactive magazines.

These are just a few of the features the new Apple tablet could have. There is still a lot to be covered. Will you be typing with you fingers or thumbs? Will you buy books at a new application called the Print Store? How will the email application look? Should the Dashboard widgets be hidden completely from the homescreen? If you’ve got any ideas, hit me up on Twitter.