Ten Web Design Trends - The Part of Tens - Adobe Edge Animate CC For Dummies (2013)

Adobe Edge Animate CC For Dummies (2013)

Part VI

The Part of Tens

Chapter 24

Ten Web Design Trends

In This Chapter:

arrow More images, less text

arrow To scroll horizontal or vertical, that is the question

arrow Designing headers and creative navigation

arrow Telling stories through the latest coding techniques

New web design trends emerge every year — rounded corners, shadows, inset text. This year is no exception; new trends continue to appear, and I expect to update this chapter when it’s time to write version 2.0 of this book.

One consistent factor is that new trends in web design appear to go hand-in-hand with new coding capabilities. For example, at the beginning of web design, it was difficult to create rounded corners without using tables and several different images. These days, creating rounded corners is as easy as writing a few lines of CSS code — not to mention that you can ditch the tables and the extra images.

The web design trends presented in this chapter, for the most part, represent not only new coding techniques but also new ways for your audience to interact with your site in engaging ways. When you grab your audience’s attention and get them intrigued in your web design, you’re well on your way to retaining that audience. By using Adobe Edge Animate, you can create all of the design trends listed here.

More Imagery and Illustration

Are you tired and bored of looking at a wall of text? Are all those small images and icons starting to look a bit dated? Does a solid background color make you yawn? If you feel that way, there’s a good chance your audience feels the same way. Adding more imagery and illustrations to your site can greatly improve your web design. To make your site look more current, add a subtle background image instead of using a white, grey, or black background.

In Chapter 3, I discuss importing images for use with your Animate composition and how to work with them. In Chapter 6, you can discover how to use images in the background and the difference between using a div tag and an img tag for the images. Chapter 8 has great information on setting Layout presets for your images. Chapter 12 goes into detail on using images from the Library panel. As you can see, this book can give you a strong start working with images in Edge Animate.

Horizontal Scrolling

Creating web designs with horizontal scrolling could take some courage— it’s rarely been done — but that doesn’t mean it hasn’t been done before and to great effect. A simple web search for “great horizontal websites” won’t leave you disappointed. You will find many great examples of art sites, galleries, and creative sites that use horizontal scrolling to great effect.

While this type of navigation is still relatively new, by creating a site in this fashion you could place yourself at the head of the pack in terms of fashionable web design.

Vertical Scrolling

Just the opposite of horizontal scrolling is vertical scrolling. While scrolling vertically has been a popular web design trend for many years, in the past year or two it has been greatly exaggerated.

Many sites, such as boingboing.net and twitter.com use a never-ending vertical-scroll technique that keeps the audience on the page. This never-ending presentation style is designed to keep audience attention on a continuous search for more content.

Fixed Headers

If you decide to design an animated web page using the never-ending vertical-scroll method, then you might want to think about adding a fixed header to your site. A fixed header is a navigation menu that rests at the top of the page and it remains visible as your audience scrolls down the page. This feature enables your audience to navigate quickly from where they are to a different section of your site — and always know where they are.

A fixed header is a convenience your audience can appreciate because they don’t have to scroll all the way back up to the top of the page to find the menu. Features that keep user convenience in mind will also keep your audience on your site for longer periods of time.

Creative Navigation

Getting creative with your navigation is neatly complementary to using more illustrations and images in your web designs. Instead of a basic text menu, use images to denote a link. After your users learn that they can click images to advance through your site, they’ll become more comfortable with looking for links in unusual places on your site. This kind of interaction opens up the opportunity to create easter eggs within your site. An easter egg, in this context, represents seemingly hidden content that can surprise and excite your audience when they stumble across it.

A great way to show your audience that an image or an icon is a link, is to use the Cursor attribute feature in Animate. When your audience passes the mouse pointer over a linked image, the cursor can change from a pointer to a hand, indicating a link (as discussed in detail in Chapter 5).

Storytelling

Everyone loves an engaging story. So, why not design a site or animation that tells your audience an engaging story? Instead of creating a basic restaurant website that presents only images of the food and descriptions of ingredients, why not create a fanciful background story? In addition to listing your best dishes as being locally organic, farm-raised, sustainable goodness, why not add a story about the couple who got engaged between the main course and the dessert? You could add an animation of a ring dropping into a flute of champagne, complete with rising bubbles. Site visitors might have arrived at your restaurant site looking for a good meal, but they’ll stay to learn more about what goes on at the other tables. Storytelling website animations not only enhance presentation, they can connect with visitors’ life experiences.

Navigating within One Page

One-page websites — once known as brochure sites — are making a comeback. By keeping your audience on a single page that can take on the appearance of various different pages, you can take advantage of the scrolling trend. Instead of clicking around to different pages in an attempt to find something, your audience can instead scroll through your site as they advance through your content. Links that serve as images can also help your audience jump directly to specific spots on the site when they know what they want — while still engaging someone who is casually searching.

By creating a site as described in this section, you are really taking advantage of a few current web design trends: scrolling for information, using more imagery, and implementing creative navigation. Chapters 19 and 20 provide examples of how to create a one-page site complete with navigation.

Moving Away from Flash

Adobe Flash was once the wave of the future, but that wave has crashed on the beach and a new wave is rolling in. Where Flash used to be the predominant tool for creating animations and websites, that tool’s heyday has come and gone. But I’ll stop short of calling it dead in the water.

Adobe Edge Animate might not quite be ready to completely replace Flash, but it’s on its way to accomplishing just that. After all, you can’t view Flash on i-devices such as iPhones and iPads, and who wants to create content that appears broken on some of the most popular mobile devices around?

HTML5, CSS3, and JavaScript

The world of web design and coding techniques is constantly evolving. The big trend in code is HTML5 and CSS3, which are only going to become increasingly ingrained into the web-o-sphere. Google Chrome is leading the charge, implementing the latest standards — with Firefox and Safari right alongside. Then there’s Internet Explorer — currently a bit late showing up at the party — but Microsoft is making great strides in updating their browser to keep pace. In the first chapter of this book, I go into detail on HTML5 and browser compatibility.

In Chapter 14, I discuss how to safeguard your animation from appearing broken on older versions of Internet Explorer by using the Down-level Stage and the different web publishing options that Edge Animate offers. In these regards, simply using Adobe Edge Animate could be considered a web design trend itself!

Responsive Web Design

Responsive web design (RWD) is the latest rage these days. The concept behind RWD is to design one site for use on any number of devices, from desktop monitors to tablets to phones. While web designers might be split on whether to create a mobile site separately from a desktop site, or to create a single site that can respond to browser size, I see the trend tilting to the responsive camp.

The reason for this is rather simple, by creating one responsive site, you don’t have to keep updating two different sites. Creating an RWD points in the direction of the future; the more advanced coding techniques and tools become, the better they’ll work with RWD. Consider it one more way Adobe Edge Animate puts you in the vanguard of web design trends. (Chapter 21 goes into full detail on how to create an RWD using Animate.)