Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGenerator::Enable() should not be called statically in /home/pixelshell/pixelshell.com/blog/wp-includes/plugin.php on line 160
Pixelshell | Blog » UI Design
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 446

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 510

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/kses.php on line 511

Apple’s Inverted Text Shadow

on Jan 25, 2008


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

Recently, I’ve started noticing an interesting design change in Apple’s user interfaces, mainly on their site, but also a lot on the iPhone. The design item is an inverted shadow—that is, a shadow falling above, rather than below the text. Here’s an example from their website’s navigation (Click to read more)


UI = The Killer Feature

on Dec 4, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

iPhone UI

Many new electronics products and software have a bucket-load of new features. They try to incite you to make the purchase by flooding you with their extensive functionality and a million of things they can do. In the end however, the list of the functions would be capped, in some cases cut at a surprisingly low number — for example, if a product has 100 fancy features, they may actually be capped at 30. “Capped?!” you ask? If a product has 100 features, how can you possibly cap them? Let me tell you how… (Click to read more)


Why Time Machine Works

on Nov 12, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

Time machine icon in space

Now, I’m sorry to disappoint you if you thought that I’d be talking about a real time travel machine, that unfortunately hasn’t been invented yet as far as I’m aware—however, I am going to give you my perspective on Apple’s application called “Time Machine”, which was released recently with the Macintosh operating system, OS X Leopard.

Time Machine is an automated file back-up application—it backs up everything, quite literally…everything. Of course, back-up software has existed for years in many forms and shapes. The latest release of the Windows operating system, Windows Vista, has its own automated back-up solution called Shadow Copy. Time Machine, is just another back-up application then, right? Not quite… (Click to read more)


UI Design: Animation

on Oct 26, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

Being fairly busy this week, I am going to skip over the regular Friday Review. Instead, I will offer my thoughts on the use of animation in user interface (UI) design.

Today, OS X Leopard is released for the Mac. It’s a new operating system that offers many upgrades, one of them being Core Animation—a technology that allows for complex animations to be integrated easily into the UI. As technologies like these become more common, as we gain more processing power and as developers realize the importance of visual quality in their interfaces it is important not to jump in and implement eye candy for the sake of it. Animating the user interface is a risky business because (Click to read more)


Typesetting UI Elements

on Oct 18, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

typesetting

Alignment of text is important on things like buttons and tabs, and this is something that many times designers get wrong. For example, I’ve been browsing some blogs and found an interesting new application for the iPhone that let you calculate tips. Great idea, and the app looked pretty nice too—except for one thing…the alignment of text on the buttons. Now, I don’t know whether the designer or the actual SDK is at fault—that is really irrelevant—I’m not here to criticize the app, but to just illustrate a simple point about text alignment and how to do it right.
(Click to read more)


User Interface Aesthetics Matter

on Oct 9, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

a UI button

A lot of people say that they don’t really care about what the software they use looks like, as long as it does its job. They are wrong—they do care—even if they don’t know about it. The cosmetic polish of a user interface (UI) should never be underestimated, and yet, hundreds of products on the market today look like the developers didn’t bother putting any effort into making things look nice. Why should they spend time “prettying” up something which in the end is only going to get used for its function?—or so they might think. What is important to understand is that the “prettying” up of the interface will actually enhance the function, through user experience. Let me give you a real world example from a completely different industry. (Click to read more)


Effective Use of Light and Color in User Interface Design

on Oct 1, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

While there is a lot of information, research and guides on light and color theory, I do not see much writing applying this to user interface (UI) design—especially how to effectively use light in interface elements. What I mean by light is actually the brightness levels of the individual UI elements—in other words, how light or dark something is, something like a button or the window texture itself.

Lighter shades are perceived by the human eye to be brought forwards—to feel closer to us. Darker shades are pushed back—they appear further away from us. In UI terms, we must apply this to (Click to read more)


Typography in the Windows Vista User Interface (UI)

on Sep 13, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

The release of Windows Vista introduced a refreshed and redesigned user interface (UI) for Windows users, but although the interface features a lot of eye candy in terms of animations and dynamic visual effects (such as blur filters for its glass), it fails at getting the basics right—font alignment. Whenever I switch from using Mac OS X to Windows Vista, the differences in typography on the UI jump right out at me—or indeed, the (Click to read more)


Why the OS X Leopard transparent menu bar is great

on Aug 25, 2007


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pixelshell/pixelshell.com/blog/wp-includes/formatting.php on line 74

I’d like to talk about something that has been talked about a lot in the Mac community (well, at least in the circles of those who care about user interfaces or are just really fussy about the way their desktop looks). Since Steve Jobs has premiered the new OS X Leopard operating system features for the Mac in June, the new and refreshed user interface (UI) has been received with mixed feelings–some very negative, especially regarding the transparent menu bar at the top of the desktop. I’d like to tell you why I think the general public opinion is wrong, why I think Apple has gone with this design decision and why I think people will (Click to read more)


Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876