HTML

Living on the Edge. Adobe Labs “Edge” Software Preview.

I’ll admit it, I can be a bit lazy. Actually I shouldn’t say I’m lazy, I should say I am always looking for an easier or faster way to get something done, with quality results. I’m also going to say that I don’t like writing code, and I’d rather be designing. Nothing against those of you that like to code, I’m just not into it. That is why I am pretty jazzed about Adobe Edge which will be released shortly on Adobe Labs.

This is an early look at the preview of “Adobe Edge”,  an easy to use tool for creating dynamic, standards-based animation with ease and precision.From the video, the UI looks similar to After Effects which is a huge plus for me. In the video below, Doug Winnie, Principal Product Manager for Edge, takes you through the basics of what Edge can do highlighting its features.

Edge will be available soon on Adobe Labs.  You can sign up to try it here:

Advertisements

HTML 5 in an Easy To Understand Info Graphic.

If you do any kind of interactive design work you are probably familiar with the big hoo-ha going on with HTML 5 and Apple’s continued denial of Flash on it’s iOS platform. I am a guy that works in Flash on a fairly regular basis, and uses pretty much every Adobe application daily. Well not every application, but the core ones (Illustrator, Photoshop, Flash, After Effects, and Premier). I have mixed feelings about Apple’s stance. I don’t like anyone telling me what tools to use, and how to author interactive content. My real beef has to do with Apple pulling the plug on the Flash compiler for the iPhone but that is another story entirely.

Now with all that said, I know HTML 5 is coming, and I know it is going to impact the way people develop interactive content. There is no getting around it. So if you are a bit curious about what HTML 5 is, and why it is a big deal, here is a great info graphic that breaks it down for you. Image courtesy of littlepixer

Web Design Trends for 2010 and Beyond

It’s a new year and a new decade, it’s time to pack away the old thinking, and prepare for the brave new face of 2010 and beyond. Although trends don’t start and stop on January 1st, there is a definite shift from what we craved at the beginning of the year to what we are seeking at the end of the year. Most of the time, this shift is subtle. It’s the perfection or re-interpretation of a currently hot trend.

As designers trends help us evolve. We master the skills needed for a new design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered.

As you read this you will recognize the ideas behind the trends presented here. Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and hopefully made better as a result. As you think of how you will incorporate these new trends into your designs, focus on the main idea of each trend and try to find a way to push beyond it, especially with trends that are becoming stale or over used.

Oversized Logos/ Headers

Splash pages were the hot design trend in 2000, and they died off because of usability issues, and their grandiose nature. One current hot trend similar to the splash page, is oversized logos and headers. The thinking is that a huge header makes the viewer remember you. I’m not sold on the thinking but you can’t deny the emerging trend here. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia due to years of poor navigation and user experience design, so big headers do the job of a splash page without forcing your visitors to click anything. My issue with this trend is that eats up precious content space without any real benefit to the design.

Sketch/ Hand-drawn Design

Hand-drawn design is not exactly new on the horizon, but it is still huge and bordering on overuse. Because of its popularity it will unfortunately remain on the scene until it reaches the tipping point and we finally have a backlash against it. Personally I hate this style. I think it is as overused as animated growing vines and flowers were a few years back. None the less it is here, and it continues to be a driving force in a lot of motion graphics and , print design.

Many designers like the look but are afraid to create their own sketches because they feel they can’t really draw. If you look at the most popular hand-drawn websites, you will notice that most of your fellow designers can’t draw. and it shows. What this style does convey is a sense of whimsy, that blurs the line between cold web and personal interaction. If you can doodle, you can sketch for web design.

My feeling is that the Sketch style in 2010 will become more elemental, and not as the main focus of a web design. Hopefully it will be used to personalize standard web design in new and exciting ways, and it will be used to soften the edge of corporate design.

Slab Typefaces

Slab typefaces are a relatively new phenomenon for web design, even though they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of Letter Press design. Those bold letters used in many classic letter-press designs are slab typefaces. A slab typeface is commonly all capital letters. They tend to be heavy and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, when combined with the trend toward larger headers, slab typefaces demand attention and that the reader to take notice. Think of Slab typefaces being used to make a statement about the message you are trying to convey.

Typography

Typography has always been one of the most difficult trends to tackle for web design.  With all the limitations surrounding type, web designers have been afraid of using new and different fonts. But with the introduction of services like typekit and opentype this is going to change. Designers now have the option to use any font they want with these services. Because of it we will now be able to mix different fonts, and create light weight web designs that rival anything in print, broadcast or built with Flash. Dynamic well designed type is going to explode in the next few years. And thankfully it won’t have to be static bitmaps.

One Page Layouts

One pay layouts challenge you to edit away what’s unnecessary. Influenced by the limitations of social networking sites like Twitter and Facebook, this trend will move away from the current quirky trend and become more minimal in its approach. Think of these websites as glorified business cards. This kind of website will be more of a launching platform to locate you and your work on various other sites, your blog and your social media hangouts.

Huge Images

A close relative to the oversized header, the huge image does much the same thing. The thinking is that it creates visual impact that a visitor won’t soon forget. Unlike the oversized header mentioned above, huge images are not a direct part of a website’s branding. Instead, these images draw the visitor into your site, by creating a can’t look away point of focus. In 2010, designers will find themselves more comfortable using these large photographic statements in their design to help set the site’s overall tone.

Change of Perspective

The desktop metaphor has been pretty much played out. While it is still very functional and quite ubiquitous in terms of user experience, the design style feels like it has run its course. The next decade will see a definite change in perspective to a more realistic view, as different user interface models and experiences get developed and played out. Major influences here are touch devices like the iPhone, and a slew of touch based netbooks that were introduced at CES this year.

Interactive / Intuitive Design

There was a time when you couldn’t visit a website without running into an annoying Flash interface. Something that was created to show off a designer, or programmers skills rather than benefit the user experience. These days the use of Flash feels more relaxed and much more professional. Although some designers prefer things like jQuery for forms and pop ups, Flash still has a rock solid place in web design. Especially when executed well, and when designed for the end-user experience. There is still no equal to Flash in terms of interactivity, animation, and video delivery. As Adobe continues to add more features to Flash (CS5), web designers will move toward the more redeeming elements of Flash.

Modal Boxes

Modal boxes are a trend that has picked up steam and will be virtually everywhere in 2010. A modal box is a pop-up windows more sophisticated city cousin. They look great and feel like part of the OS instead of a website add-on. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer with usability concerns.

Oversized Footer

Oversized footers are everywhere already, but this year we will find them even more exaggerated. The good thing is the footers of tomorrow will be less of an after-thought and more of an integral part of the overall design theme. You will see footers that feature and contain random information, such as RSS feed updates from various social media, daily polls, and even Flickr feeds.

Retro

Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across as undone. The key to pulling off retro designs is to be inspired by its tone and underlying playfulness, and the ability to execute something that still feels contemporary and fresh. In 2010, retro design will be expanded as designers find new ways to vintage graphic design.

Magazine Layouts

As more and more people migrate from traditional print design to online design, there is a move toward the traditional magazine layout style. where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to anyone who’s ever read a magazine or newspaper. As programs like InDesign improve output to HTML with a minimal amount of clean up, magazine layout will take a huge step forward in the next few years.

Typekit is Going To Change the Way Websites Look for Forever

kit-editor

Sometimes you stumble across something on the internet, that will change the way  you develop for the internet, in ways that are so profound you don’t really know where to begin. This is one of them.

If you are a designer, you know that one of the most frustrating things about web browsers and websites is typography. You are limited to a small subset of fonts, and styles. So, if you want to use a specific font for lets say something like a corporate logo, or to match a companies style guide, you are kind of hosed. you either have to make the word a bitmap, or set the type in Flash and embed the font etc. In short it is a pain in the butt.

Now along comes Typekit and all the fonts you have are at your finger tips. At this point, all visual design people cheer loudly please. What does Typekit do? It is allows you to use real fonts on the web. Typekit is a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries like Adobe, or Bitstream. With this service we enter a brand new era of type Possibilities on the web.

Typekit is now available to the public with introductory pricing that will remain in place for a while, so I say sign up now.