Archive

Posts Tagged ‘navigation’

Motorola DROID review

November 1st, 2009 No comments


It’s hard to look at the DROID without looking at the company which brought the device to life. Motorola: for years the name has been synonymous with… well, disappointment. While the industry-stalwart made cellphones sexy with the RAZR, the days which followed have not been especially fruitful or compelling. Over the past year or so, we’ve seen Motorola beating its way back into the mainstream through a series of smart plays: first embracing Android as a platform, then shucking off the weight of Windows Mobile and finally bringing some desirable (and high profile) devices to market.

With the DROID, the company has perhaps created its most attractive and intriguing piece of technology yet. Forging an alliance with both Verizon and Google, Motorola has come up with a second compelling reason to count the phonemaker down, but certainly not out, while the other two giants have finally found a seemingly worthy device to position against the iPhone. So we must pose these questions: is this the phone which will catapult Android into the mainstream? Is it the device that will pull Motorola back from the brink? And — most importantly — is it the lynchpin Google and Verizon have needed to challenge the leader in mindshare in the smartphone market? After putting the device through its paces, we think we can give you the answers you seek — so read on to find out!

Hardware


The DROID is an odd and beautiful device. Looking at the hardware from a purely philosophical standpoint, the ID of the phone seems staunchly defiant. Instead of taking its cues (and lines) from current contenders in the smartphone space, the DROID is all hard edges and angular slopes. The construction is a mix of plastic and metal, and the phone has a solid, expensive heft to it. Couple that weight with soft touch materials and gold highlights, and the effect is somewhere halfway between a Vertu device and the European version of the Hero — and it’s a good mix.

The basic structure of the phone is made up of two main pieces, the large, glass display up top, and the slightly longer keyboard / mainboard lower half. Above, the 3.7-inch screen dominates, almost filling the space edge-to-edge, though there are four capacitive buttons at the bottom of the display: back, menu, home, and search (which might be tricky for folks coming from other Android devices, since they’ve thrown the order of the buttons in the blender). The top section slides smoothly upwards to reveal the aforementioned QWERTY keyboard, though unlike other models of this ilk, it doesn’t snap automatically into place; rather, it requires a bit of force to move up, then clicks firmly once settled. The keyboard is a wide (though mostly flush) affair, with minimal amount of spacing between the keys. To the right of the four row QWERTY is a 5-way rocker — a bizarre deviation from the CLIQ’s left-sided controls — and the bottom piece has a strip which juts out from the device with a small mic hole (closed or open). It’s almost like Motorola’s version of the HTC chin… though tempered somewhat. Atop the phone is a 3.5mm headphone jack and a power / sleep button; along the right edge is a volume rocker, and camera button on opposite ends; the left side houses a MicroUSB port; around back the 5 megapixel camera (and flash) are revealed, along with a thin, gold, crosshatch strip that hides the DROID’s speaker.


The thickness of the DROID is striking, coming in at just a hair (13.7mm vs 12.33mm) thicker than the iPhone 3GS. The body itself is actually narrower than the iPhone. While thinness is important (though typically not a deal breaker for us), the fact that the phone packs a larger, higher resolution screen and a physical keyboard in such a small frame is notable.

In all, Motorola has pulled off what seemed unimaginable for them just 12 months ago; they’ve made a device which is truly lustworthy, even next to the best efforts of Apple, HTC, and Palm.

Internals

Inside the DROID beats an Arm Cortex A8 CPU (a 600MHz, OMAP3430 chip downclocked to 550MHz), 256MB of RAM, and 512MB of ROM. If that CPU sounds familiar, it should — it’s similar to the chip inside the iPhone 3GS and Palm Pre. If you’re wondering about performance, you can breathe a sigh of relief… kind of. Yes, there is a noticeable bump in speed when switching applications on the phone, scrolling through lists, and generally getting any basic tasks done. We did notice, however, that paging through homescreens on the DROID actually seemed somewhat stuttery; odd, considering this phone is certainly better equipped than most Android devices to handle pixel pushing. Pulling down the window shade notification area also seemed less than optimal. We don’t know if this was due to the screen resolution being jacked up, or just a software quirk, but it was mildly disheartening — especially considering that the rest of the phone’s performance seemed extra snappy to us. As an aside, in a totally unscientific test of playing a 3D game (Mystique, in case you’re wondering) the rendering seemed considerably smoother on the DROID than with other, older Android-based phones we’ve used.

Throughout our tests, we were consistently impressed with the tightness and speed of navigation on the phone. The DROID makes Android feel modern the way the iPhone 3GS and Palm Pre are — like machines designed for a pace of life that’s increasingly more Twitter and less USPS.

Display


As we mentioned, the screen on the DROID is a 3.7-inch capacitive touchscreen — a full glass display with a WVGA resolution clocking in at a handsome 480 x 854. We found the responsiveness on the DROID to be on par (if not better) than most of its Android contemporaries; gestures and flicks registered with little to no lag. Whether that can be attributed to Moto’s screen technology, Android 2.0 improvements, or just the speedy CPU inside the DROID is anyone’s guess, but we certainly won’t knock the phone for it. Another perk to having that big screen is seeing webpages how they’re meant to be viewed (or at least closer), and browsing on the DROID is a solid experience. Those additional pixels definitely come in handy when you’re looking at something graphically intensive or wordy… such as Engadget.

As you have probably heard (or guessed), there’s no multitouch on this device. That’s clearly an issue with Android 2.0 and choices that Google is making about user interface — we’re fairly certain there’s nothing technically holding back the DROID from utilizing multitouch input, and we wouldn’t be surprised to see some tweaked ROMs hit the information superhighway with the functionality onboard. Regardless, the resolution, materials, and clarity of the DROID display make it an absolute pleasure to keep your eyes on. Motorola gets a +1 for the bump in resolution, and we can only hope everyone else follows suit.

Note: Android 2.0 does support multitouch events, but the functionality isn’t implemented here.

Keyboard


A physical keyboard can be a blessing or a curse, depending on just how well (or poorly) it performs. In the case of Android devices, QWERTYs have definitely been hit or miss. We think the closest case for comparison with the DROID’s version would be the G1; both have shallow, clicky keys, and both force your right hand into a bit of an awkward position. On the G1, it’s due to the placement of the “chin,” and with the DROID, it’s all down to the five-way rocker living next to the ‘board itself. We’re happy to report, however, that after a short adjustment period, typing on the DROID is a reasonable experience. It’s not as slick or comfortable as a nice, portrait-oriented Tour or (better yet) Bold layout, though it bests the CLIQ, and holds its own against other landscape contenders like the Moment.

Visually, the keyboard is an easier read (and more aesthetically pleasing) than those other QWERTY phones too, though sometimes the keys can feel a bit cramped. Additionally, we had major issues with the auto-dimming on the DROID. If we left the screen in auto brightness mode, the constant on / off dimming of the keyboard was intolerable; eventually we had to just switch the auto dim off altogether. We also had issues with the keyboard not lighting up at all in some instances, requiring us to close and open the pad again. Not a huge deal, but annoying when you’re trying to quickly tap out a message. Admittedly, we missed the CLIQ’s two-stage keyboard backlighting that only enabled the second light when ALT was pressed, but it’s a luxury we can do without.

As you would expect, Android 2.0 includes the onscreen keyboard as well, but there don’t seem to be many improvements in this area. As a backup keyboard for quick SMSs and the like, it works, though we eventually had to replace it with the Better Keyboard application — which we think is more usable and snappier. In comparison to the iPhone keyboard (really the high bar for virtual keys) Android continues to feel like a distant second. Still, you won’t go to it that much — the DROID’s physical keyboard is solid, but it’s going to take some getting used to for most people.

Camera


Google has made some pretty major changes to the camera application in Android 2.0 (including more control over white balance, focal length, flash settings, and effects), and Motorola has smartly outfitted the DROID with a 5 megapixel camera coupled with an LED flash. It sounds like a match made in heaven, right? Well, not quite.

No, no, no. Yes! Our attempts to photograph a watch in broad daylight.

While the camera certainly seems capable of taking great looking photos, getting everything to play nice isn’t as easy as it should be. First off, the camera is painfully slow to focus and snap pictures — and when it does, the results can be unpredictable. Strangely, the lens seems to be able to take pretty sharp macro photos (it’s even a setting in the camera app), but it struggled with getting adjusted to close subjects, even in broad daylight. Sometimes we got lucky and cranked out a decent pic, but the process was frustrating. Furthermore, the new settings Google has added to 2.0 are contained in a hard to get to and counterintuitive menu which sits to the left of your viewing area. Trying to make changes on the fly was a hassle. If this is the best the engineers at Google can do, they need to outsource this work.

Video, on the other hand, was somewhat of a pleasant surprise. The DROID is capable of shooting at a 720 x 480 resolution, and in our tests, produced watchable — if not totally shake-free — video. The phone definitely fares better in this department than with stills, and we could easily see using the DROID as a stand-in for a flip cam. You can check out a little of the action in the video below (with a surprise cameo from !!!’s Nic Offer).

Speaker / earpiece

The sound on the DROID is second to none — really. In fact, this is simply one of the best sounding devices we’ve ever used. Whether it’s audio through the loud (but undistorted) earpiece, or a speakerphone call — even music — the sound which Motorola’s device outputs is crystal clear. Now, obviously Verizon’s reception has something to do with our in-call sound, but it’s likely Moto put some thought into the aural aspect of the phone. There’s not really much to say except that we were more than pleased with the audio fidelity of the DROID, and we can only hope that future phone makers (ahem, Apple) look to this device as a high water mark in this department.

Software


Besides the introduction of the phone itself, obviously 2.0 is a major update for Android. Based on the launch and hype surrounding Moto’s device, we’d say it’s fair to assume that Google wanted as many eyes on the achievement as possible. They definitely got it with the DROID — but was it worth all the fuss?

The first thing you should know is that Android 2.0 isn’t drastically different than 1.5 or 1.6, save for a few notable features and tweaks that have significant impact. True to form, Google hasn’t gone for visual flair or wild embellishments for the sake of a few dropped jaws; most of these changes are about functionality and usability.

One of the first major changes Google has made is support for multiple Gmail or Exchange accounts, and a new universal inbox which allows you to get a look at your electronic correspondences in a single view. For BlackBerry users, this concept is old hat, but for most people with multiple accounts, it should feel like manna from heaven. We would have been slightly more stoked about the feature if it allowed you to look at both Gmail and POP / IMAP / Exchange accounts in one field. Instead, you can view your Gmail accounts separately (not in a single stream, but in one place), and your other accounts can be blended in the “Combined Inbox” view. Not exactly a perfect implementation for those of us with both Exchange and Google accounts, but certainly a solution light years beyond what previous versions of Android were offering. Another minor niggle: deleting an email now takes you to the next email in your inbox rather than bumping you back out to the list of emails, as it did in 1.5 and 1.6. We preferred the old functionality, though we imagine some will prefer the new as well.

We loved being able to keep a few of our accounts in the phone, but we ran into a weird and annoying issue when attempting to remove one of them. We were using the DROID with two Gmail accounts active, but when we tried to remove the second one we’d added (note: not the account we used for our contacts or calendars) the device informed us that we would need to factory reset the phone because that account was “required” for certain applications. Try as we might, we couldn’t find a way around the problem, and we eventually did reset the device. The behavior was strange to say the least, especially since it was a barely-used, secondary account — not a daily use address which tied into services.

As you may have heard, Facebook account integration is now built into 2.0, and there should be more of that coming, as Google has created “sync adapters” which allow third parties to plug into the contact and calendars of your phone. Mercifully, Google has figure out that you might not want your Facebook contacts in your address book, and gives you the option to turn off contact syncing (as it does with Exchange and Gmail accounts). You’re also given the option to sync contacts, but keep certain sets from displaying in your contacts list; this variation is best demonstrated with Facebook integration, because it merges duplicate names and pulls the accompanying images, but doesn’t clutter up your Gmail contacts with additional names. Beyond that, the pairing doesn’t go tremendously deep, even though we’re told Facebook had a hand in this version of the OS as well. Really, you get a widget for your homescreen which auto-updates, and that contact integration if you really want it. This is obviously just the tip of the iceberg for this kind of… er, synergy, and we expect to see lots of people taking advantage of the feature (hello, Twitter). Regardless, it’s a forward thinking move that will clearly obviate the need for some of the functionality built into BLUR, and makes the DROID (and other 2.0 phones) competitive against the Pre and Pixi when it comes to social networking integration.

Speaking of contacts, Google has made some big and thoughtful changes to how contacts are handled (and used) in Android 2.0, most notably adding a “Quick Contact” menu to your contact list. The quick contact function allows you to tap on someone’s name and get a context menu with jumps to the various ways you can reach out; if you’re friends with someone on Facebook, you’ll be given an option to message them there, along with SMS, phone, and email choices. It’s a brilliant little touch that makes quickly pinging someone a cinch. Android 2.0 also improves the SMS and MMS experience by giving you the option to search your messages, and also allowing you to set a limit on how many SMSs to store before beginning to delete old threads. It’s not groundbreaking stuff, but nice choices to have (finally).


You’ll notice some major changes within the browser, most notably the fact that when you load up pages now, you’re presented with a fully zoomed-out “overview” (much like the iPhone and Pre). If you’ve been griping about that weird, half-zoom that Android has relied on for so long (as we have), this is a breath of fresh air. Coupled with the DROID’s massive display, it makes navigating pages roughly a million times more pleasant. The updated browser also now supports double-taps to zoom (as does Google Maps) — making navigation a bit more natural — though we noticed some weird column display issues on our site and others. As we mentioned before, there’s still no multitouch, but this does stand in quite well for pinch zooming. While the overall browser speed still isn’t as snappy as the iPhone 3GS (or even the Pre), it’s a step up from previous efforts, and when you factor in little touches like auto-prediction on URL entry, it’s eminently usable.

As we said, most of the alterations are under the hood — not stuff that immediately jumps out at you, though there are some notable visual tweaks which bear mentioning. Google has added some new fades and cross-application animations into 2.0 which makes Android seem a bit more contemporary. Of course, older iterations of Android contained animations, but 2.0 seems far more polished to our eyes. Additionally, icons and elements have been updated across the board to give the OS a more modern look, sadly there is much of this UI and its applications that remain unchanged — and not for the better.

A few of the obvious spots include the music player, which is quite frankly a mess; not only is the navigation poorly thought out, but the application is just straight-up ugly. It’s not easy on the eyes, and not much fun to use either. The same goes for the phone app — the remnants of a hastily thrown together interface are plain here, and the functionality of the phone itself gave us some issues. Often the screen was confused or unresponsive during calls, as if the hardware and software weren’t communicating with each other properly. It seems obvious to us that some portions of Android need a serious, ground-up reworking… but they don’t get them here. Another annoyance was the home screen — unlike with HTC’s tweaks (or even Motorola’s BLUR), you only get three screens for icons and widgets. Furthermore, the DROID doesn’t come equipped with even the most basic widgets you see in most new builds, like weather. The weird thing is that there is a weather app in the dock display, but no way to access the application in standard phone mode.

Additionally, some third-party (and even some first-party) software seems unable to deal with the DROID’s new resolution. There are bitmaps that look upscaled and jagged, such as the attachment icon in Gmail. The game Robo Defense seemed to play slower than it did on the Hero, which was a bit of a surprise, though it has been updated to support the new resolution. None of these problems are show stoppers, but it points to a disconnect between where Google is at versus its developers. There is catch-up to be played.

Also notable (and perhaps a selling point for some) is that the DROID is a Google Experience device, which should theoretically mean that it’s more likely to receive fast and frequent software updates than its skinned cousins like the CLIQ. The Google Experience is sort of the “gold standard” Android showcase for the company, so to speak, and it’s in Google’s best interest to keep it rock solid at all times — and since there’s no third-party skin to revalidate after every Android version is released, the update process should go a heck of a lot smoother.

One thing to keep in mind: when it comes to media syncing, you’re in the same boat you were for previous versions of Android — which means sideloading or additional desktop apps. doubleTwist has just introduced DROID compatibility, though the experience leaves much to be desired. In fact, after our tests, we’d say you’re better off just mounting that SD card and dragging your content over.
Gallery: Motorola DROID / Android 2.0 screenshots

*
*
*
*
*

Navigation

One of the biggest pieces of news (perhaps the biggest) to come out of the DROID launch was the introduction of dedicated, fully realized turn-by-turn navigation which integrates with Google Maps. The DROID makes further use of this functionality by switching into a nav mode when snapped into a dock (you can also enter the application normally, sans dock). Google has gone all out on this, providing a rich mixture of its satellite, map, traffic, and location info with text-to-speech directions. Of course, the big G takes it one step further and adds layers like parking info, ATM spots, restaurants, and gas station locations (amongst others) to the stew, making the navigation more robust than many dedicated PNDs — which would explain that nasty drop in Garmin and TomTom stock we saw yesterday.

In our tests, the nav worked excellently for the most part, though as you can see in the video above, we did run into some minor issues on our hunt for cannoli. It’s not uncommon for a GPS unit to send you the wrong way down a one way street, and maybe it was just unlucky coincidence that it happened on our first outing, but being told to turn left where you can’t — then being sent in a loop — doesn’t fill us with warm, fuzzy sensations. Still, the navigation is super intuitive and cleanly laid out, and even if there were major issues (which there really aren’t), it’s hard to knock a service that is completely free. We think a little more time and some longer trips will help put it in better perspective, but we like what we’ve seen so far.

Accessories


The DROID will get a few nifty extras when it launches, most notably a dock for setting your phone on a nightstand (or appropriate flat surface), and a car mount for using the device as a proper GPS unit. Both are notable because they use sensors to alter the DROID’s functionality. The dock turns the DROID into something that looks not entirely dissimilar from Verizon’s now defunct Hub, while the car mount just boots the phone into nav mode. Both are nice touches, and you’ll want the car mount if you plan on taking Google up on that offer of free satnav.

Battery life

We haven’t had a lot of time to put the DROID through its paces when it comes to battery life, but at a glance it seems to be holding its own against the current crop of 3G devices — impressive considering it’s only packing a 1400mAh battery behind that extremely sexy door. Paul Miller, who has been concurrently testing the phone, claims he had 24 hours of on and off usage before requiring a recharge (syncing, but no major phone calls or lots of screen time). In general, you won’t be blown away by the DROID’s staying power, but it doesn’t deviate in any wild ways which should make you take pause. It’s solid, not breathtaking, and it seems better than the CLIQ, which — despite using the same battery — typically manages to just barely eke through a day’s worth of typical use.

Wrap-up


It will be difficult for casual observers not to see the DROID as a kind of anti-iPhone in Verizon’s arsenal. Certainly the company has played up the comparison with its “DROID does” ad campaign, and it’s no secret that Verizon and Apple have previously had some friction — the V famously passed on the first-generation iPhone, after all. Of course, it’s easy to draw parallels between the two devices; as with most current smartphones, they share a tremendous number of similarities, though there is plenty that set the two apart as well. And that’s really kind of the point — it’s useless to look at devices like this in black and white, or to try and figure out if an Android device on Verizon is better than an Apple device on AT&T (or any other device on any other carrier, for that matter). What it ultimately comes down to when judging this kind of device is more complicated than a “yes” or “no” answer.

If you must compare the DROID to the iPhone, then know that the Android platform still has a ways to go before the experience of using the phone is as seamless as the one Apple has created — but also know that Apple has a long way to go before its messaging, email, and customization can match what Google is offering. Both products have very distinct strengths and weaknesses.

So, is the DROID a good smartphone? Yes, the DROID is an excellent smartphone with many (if not all) of the features that a modern user would expect, and if you’re a Verizon customer, there probably isn’t a more action packed device on the network. That’s not to say the device doesn’t have its faults; the camera was unpleasant to use, the application selection feels thin in both quantity and quality (despite the claim of 10,000 options), and the phone has bits of basic, non-intuitive functionality that might chafe on some users after a while. But even still, it’s hard not to recommend the DROID to potential buyers eager to do more with their devices. It’s easily the best Android phone to date, and when you couple the revamped OS, Verizon’s killer network, and an industrial design straight from a gadget enthusiast’s fever-dream, it makes for a powerful concoction. Ultimately, the DROID won’t usurp the iPhone from the public’s collective mindshare or convince casual users that they must switch to Android, but it will make a lot of serious geeks seriously happy — and that’s good enough for us.

source >>

Originally posted here:
Motorola DROID review

Share/Save/Bookmark

Official Google Blog: Announcing Google Maps Navigation for Android 2.0

October 29th, 2009 No comments

Since 2005, millions of people have relied on Google Maps for mobile to get directions on the go. However, there’s always been one problem: Once you’re behind the wheel, a list of driving directions just isn’t that easy to use. It doesn’t tell you when your turn is coming up. And if you miss a turn? Forget it, you’re on your own.

Today we’re excited to announce the next step for Google Maps for mobile: Google Maps Navigation (Beta) for Android 2.0 devices.

This new feature comes with everything you’d expect to find in a GPS navigation system, like 3D views, turn-by-turn voice guidance and automatic rerouting. But unlike most navigation systems, Google Maps Navigation was built from the ground up to take advantage of your phone’s Internet connection.

Here are seven features that are possible because Google Maps Navigation is connected to the Internet:

Here is the original post:
Official Google Blog: Announcing Google Maps Navigation for Android 2.0

Share/Save/Bookmark

Web Design Trends For 2009

January 22nd, 2009 No comments

We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As a result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.

Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Update: the second part of our review is now published as well.

Web Design Trends For 2009

Let’s first take a closer look at the main trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

  1. Embossing Letterpress

    Web Design Trends 2009

  2. Rich user interfaces

    Web Design Trends 2009

  3. PNG transparency

    Web Design Trends 2009

  4. Big typography

    Web Design Trends 2009

  5. Font replacement (sIFR, etc.)

    Web Design Trends 2009

  6. Modal boxes

    Web Design Trends 2009

  7. Media blocks

    Web Design Trends 2009

  8. The magazine look

    Web Design Trends 2009

  9. Carousels (slideshows)

    Web Design Trends 2009

  10. Introduction blocks

    Web Design Trends 2009

Now let’s go into detail and take a closer look at each of the trends presented above.

1. Letterpress

One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

2. Rich User Interfaces

Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

In particular, we’ve seen much more white space over the last year, much more padding and much more space for various design elements. We also observed that many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look (as on Newspond.com and Quicksnapper.com), confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

Design Trends 2009

Design Trends 2009

Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

3. PNG transparency

PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance. In most cases, semi-transparent backgrounds stand out in the overall background of a page and are intended to highlight an important design element, such as a headline or announcement. Sometimes PNG transparency is used for the background of modal boxes as well.

Last year, we described a variety of ways in which can get creative with transparency in Web design, and many designers seemed to experiment with these techniques in their work. Interestingly enough, transparency is often used either in the header or footer of designs, but some designs go beyond that.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

4. HUGE Typography

We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites.

The font size of these design elements often goes beyond 36 pixels, and in many cases quite expensive typefaces are used to reach an audience. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font. The consequence: websites are more beautiful and more consistent and look solid and trustworthy.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

5. Font Replacement

As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR).

What is interesting is that these fonts are often seamlessly integrated in the design of websites; they are almost never used for their own sake or simply to “upgrade” the typography of a website. Designers are trying to blend beautiful typography and arresting visual design to improve the appearance of websites and improve the user experience.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

6. Modal Boxes (Lightboxes)

Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

Design Trends 2009

Design Trends 2009

Design Trends 2009

7. Media Blocks

With more broadband Internet access, users can now afford to browse more than they did a couple of years ago, and designers can use this opportunity to present content in a more attractive and memorable way. Hence, it’s no wonder that many product websites use media blocks (for videos and screencasts) for this very purpose. The main advantage of such elements is that they can communicate content quickly and effectively and make it easier for users to consume information.

Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too.

But please make sure that videos are an alternative presentation of (and not the main or only!) content on your website. Not every user has broadband access to the Web, not every user is willing to watch a video (e.g. because he or she may have a radio or music playing in the background), and not every user has Flash and JavaScript installed on his or her machine.

Design Trends 2009

Design Trends 2009

8. The Magazine Look

An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

9. Carousels (Slideshows)

Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.

Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

10. Introduction Blocks

The upper-left area of a website is the most important block on the page, because it grabs the most attention from visitors. Therefore, it makes perfect sense to place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.

In fact, this is exactly what many designers are doing. Whether for a Web application, corporate design, online service or portfolio, designers are pushing their slogans and brief introductions to the top of the page and are using strong, vivid typography to make a good first impression. Some introductions are short, others are quite lengthy; in either case, they usually take a lot of space; the full width of the layout and between 250 and 400 pixels in height are common dimensions for these introduction blocks. Notice, though, that introduction blocks almost never appear in blogs and rarely in online shops.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Stay tuned!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Update: the second part of our review is now published as well.

SOURCE

Read the original here:
Web Design Trends For 2009

Share/Save/Bookmark

More Web Design Trends For 2009

January 22nd, 2009 No comments

Last week we presented 10 Web Design Trends For 2009, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters (”letterpress”), rich user interfaces, PNG transparency, big typography, carousels and media blocks.

This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren’t covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). Did you miss any recent development in this overview? Let us know in the comments!

You may want to take a look at the following related posts:

Web Design Trends For 2009

Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

  1. Out-of-the-box layouts

    Web Design Trends 2009

  2. One-page layouts

    Web Design Trends 2009

  3. Multi-column layouts

    Web Design Trends 2009

  4. Huge illustrations and vibrant graphics

    Web Design Trends 2009

  5. More white space than ever

    Web Design Trends 2009

  6. Social design elements

    Web Design Trends 2009

  7. “Speaking” navigation

    Web Design Trends 2009

  8. Dynamic tabs

    Web Design Trends 2009

  9. Still large search boxes

    Web Design Trends 2009

  10. Category visuals

    Web Design Trends 2009

  11. Author icons

    Web Design Trends 2009

  12. Icons and visual clues

    Web Design Trends 2009

  13. Tag index (instead of tag clouds)

    Web Design Trends 2009

  14. Illustrations in blog posts

    Web Design Trends 2009

  15. Watercolor

    Web Design Trends 2009

  16. Handwriting

    Web Design Trends 2009

  17. Retro and vintage

    Web Design Trends 2009

  18. Organic textures, tiles and photographic backgrounds

    Web Design Trends 2009

  19. Badges

    Web Design Trends 2009

  20. Price tags

    Web Design Trends 2009

  21. Ribbons

    Web Design Trends 2009

1. Out-Of-The-Box Layouts

As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box, we are observing a strong trend towards more individual and creative layouts. Instead of applying conventional boxy layouts, designers are experimenting with the way information is structured, presented and communicated.

In these out-of-the-box-designs, the overall creative approach is often more important and more memorable than the attention to details. Still, usability, typography and visual design are rarely overlooked and are often carefully executed. Creative layouts are particularly popular for portfolios, websites of design agencies and promotional websites (e.g. commercial campaigns of large companies), but they are also very popular on blogs.

Design Trends 2009

When it comes to creativity, the line between a usable and unusable design is very thin; thus, usability testing is particularly important, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and try to achieve a balance between a “bulletproof” (yet ultimately boring) usable designs and an innovative unusable designs. Keep in mind that innovative ideas need some time to mature: to be rethought, modified, adapted, optimized and finally integrated in the design.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

Showcase of Unusual Layouts - Get London Reading

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Showcase of Unusual Layouts - Good

2. One-Page Layouts

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”). On the contrary, such designs are often quite complex, include rich imagery and vivid animation effects and therefore take some time to load.

Design Trends 2009

When the user clicks on a navigation option, the page changes (partly), and new content is displayed in the area that was previously occupied by the previous content. The navigation of such layouts is supported by sliding and scrolling effects from common JavaScript libraries.

The main advantage for the user is the simple fact that she needs less mouse movement and less clicks to get the information she is looking for. Because this approach is quite new, there is a good chance that some readers will get confused by the unconventional navigation techniques. An alternative “static” version may be helpful or even necessary in this case; you’ll have to offer an alternative version anyway for search engines and for people who have deactivated JavaScript support in their browsers.

Showcase of Unusual Layouts - tap tap tap ~ Groceries

Design Trends 2009

Design Trends 2009

3. Multi-Column Layouts

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

Over last few years, we’ve seen an explosion of content on the Web, which has led to the problem of a decrease user attention span, the time that visitors are willing to spend on a given website (see an article on ReadWriteWeb for details). Consequently, it’s no wonder that designers have tried to find ways of presenting information compactly, both to keep visitors on a website as long as possible and to make it as easy as possible to find content.

Design Trends 2009

One way of achieving this is simply to use layouts with more columns placed next to each other. The idea is quite reasonable. Screen resolutions have been constantly increasing in recent years (though a wide adoption of netbooks, like Asus’ Eee PC, may change that), providing users with more horizontal space and designers with additional space to fill with content.

The result: now more and more designers are using more and more columns. We have observed a strong trend towards these so-called multi-column layouts, which are often fixed layouts of 850 by 1000 pixels in width. Multiple columns are used in magazine layouts and portfolios. In these layouts, grids are often used to guarantee a structural balance, hierarchy and order.

With multi-column layouts, the importance of active white space between and within columns cannot be overstated. (Active white space is the space that is deliberately left blank to better structure the page and emphasize different areas of content.)

For this purpose designers often make use of Shneiderman’s Mantra (”convey big picture first, reveal details later”), providing users with a brief overview of available options first and offering details on demand — later, when a link was clicked (Mozilla Labs is a great example of just that).

Design Trends 2009

Design Trends 2009

Design Trends 2009

4. Huge Illustrations And Vibrant Graphics

Just as huge typography keeps dominating modern Web design, huge illustrations seem to be gaining popularity across both professional and personal Web projects. And designers are trying to communicate the message of a website using interactive elements (embedded video blocks) and visual elements (introduction blocks and illustrations). Recently in designs, illustrations have taken up much more space than before and usually supplement huge typography, and they are more attractive, more vivid and therefore more memorable to visitors.

Alternatively, designers are also using vibrant graphics, particularly for backgrounds but also for other design elements. Various styles and graphic approaches are used: grunge, collage and scrapbook, ornaments, retro and vintage, watercolor, organic textures and photographic backgrounds.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

5. More White Space Than Ever

Probably one of the most predictable, yet extremely beneficial, developments in Web design over the last few years has been the increasing prominence of white space. White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

6. “Social” Design Elements

If you take a close look at the blogosphere, you’ll hardly be able to find a blog that doesn’t use some kind of “social” icons or social blocks to encourage readers to promote its stories on popular social media websites. Every author loves traffic and recognition, which is why the social element in modern design is becoming bigger and aesthetically more attractive.

Social icons are usually put all over the place, often in the top right of articles or at the bottom of the post. Social blocks often fill the area beneath a post and sometimes appear beside a list of related articles. Twitter, Flickr and Last.FM integration is still common for blogs and portfolios.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

7. “Speaking” Navigation

We wrote about “speaking” block navigation in one of our showcases last year, and this design element seems to remain popular across various websites. The most significant task a navigation menu has to accomplish is to unambiguously guide visitors through different sections of a website. However, it’s quite hard sometimes to communicate the content of a website’s section with just one or two keywords, particularly if horizontal navigation is used.

That’s why navigation options aren’t often listed simply one after another using appropriate keywords (i.e. using “silent” navigation). Instead, designers are attempting to concretely explain what options are available and what visitors should expect from a website section upon clicking the corresponding link.

Because designers are trying to initiate more effective dialogue with visitors, we like to call this navigation scheme “speaking” navigation, as opposed to “silent” navigation, which is based on listings of keywords.

Design Trends 2009

Design Trends 2009

Screenshot

Screenshot

Screenshot

So that visitors perceive content as being easy to navigate, the navigation is often structured with blocks of the same height and width. Large icons are quite often used; but in most cases the decision as to whether or not they are appropriate depends on the content of the website and the overall layout. “Soft” hover effects often support the navigation design by making browsing more pleasant.

Design Trends 2009

8. Dynamic Tabs

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time (the attribute display is used to achieve this effect). You can follow a tutorial on dynamic tabs and ‘tabs’ visual control in jQuery to create dynamic tabs.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Did we miss something?

Did we miss any recent development in this overview? Do you have any further ideas or suggestions? Let us know in the comments.

SOURCE

View original post here:
More Web Design Trends For 2009

Share/Save/Bookmark