Blog | Graphicpeel

iOS Icons Made in Pure CSS

Sun, 27 Jun 2010 01:54:00 -0400

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. Update: Apparently, there’s a bad bug in Chrome on Windows. I haven’t tested this on a PC yet, but I’m working on a fix.

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.

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

Fri, 04 Jun 2010 18:25:46 -0400

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

Sun, 16 May 2010 10:19:00 -0400

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

Wed, 17 Mar 2010 13:48:00 -0400

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.

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.

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.

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.

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

Fri, 29 Jan 2010 22:03:02 -0500

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

Thu, 21 Jan 2010 08:06:00 -0500

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.

View the full resolution UI

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.

Gallery of Older Icons

Sun, 03 Jan 2010 18:18:44 -0500

Gallery of Older Icons:

Looking for previous icon sets of mine? I got rid of a few when launching the redesign. View my deviantArt to see all past icons sets including what’s not on the icons page. Like: Donuts, Holiday Wreaths, and Safari Gleam.

The Inspiration for Graphicpeel v3

Sun, 03 Jan 2010 11:55:00 -0500

A lot of work went into the new version of Graphicpeel, but I was inspired by a number of websites and other designers across the web. I’d like to credit them here. See if you can find the similarities…

Front Page Layout - Louie Mantia

Email Overlay - Michael Flarup

Twitter Sidebar - Mike Rundle

Download Buttons - Rich Dellinger

Custom Zoom Cursors - Max Rudberg

Thanks guys!

Welcome to Graphicpeel v3

Sat, 02 Jan 2010 11:29:00 -0500

It’s a new year and Graphicpeel is due for an update. I’ve been hard at work pushing pixels and writing up code to make this the best update yet. Inspired by the websites of many others, I have come up with something that I can call my own.

The previous version of Graphicpeel was hard on the eyes. The dark blues and white text was a pain to read. The icon page was messy and difficult to understand and the blog had too many features and spam comments. Ironically, I used very few icons or buttons for navigation and relied on text for everything. Graphicpeel 3 is designed to be ten times more simple and user friendly. This one quote inspired me the most:

“A design is finished when any more would be too much and any less would be too little.” - Chuck Anderson

Graphicpeel 3 has a simpler, more elegant design. It uses more icons and new javascript to improve the users experience. I’m finally not embarrassed when I tell someone to visit my website. Here are a few more details about the new design:

Slideshow on front page to showcase featured work.
Visits and downloads are now tracked with Mint.
Improved footer showing my availability for new projects.
New email form.
New Favicon.
Simplified blog (no more tags, categories, or comments).
Twitter timeline built into about page.
Revised “Limon” and “Life Saver” icon sets with more realistic visuals.
Improved lightbox javascript for previewing work and icons.
Recent app I have designed appear on the front page.
IE 6 protection (redirects you here).

What do you think of the new design? Hit me up on Twitter or send me an email.