Posts Tagged ‘trend’

« Older Entries

Getting More from Mobile Sites

Tuesday, April 24th, 2012

Mobile sites are generally designed for the on-the-go user. With this user-type in mind, mobile sites can become overly paired down to just the basic details that a user might need, such as directions, a phone number, and social media links. Yes, a mobile user may most-likely be on-the-go, but I think the mobile audience is shifting. When I’m away from work, I use my phone as my primary method of surfing the web, meaning I’m not just using it on-the-go. It’s the main way I access the internet and I’m now expecting more than the most basic functionality from a mobile site.

Like most people with smartphones or other mobile devices, you can find me using mine everywhere. I’m on it while I’m at lunch, estate saleing on the weekends and definitely on the couch while “watching” TV. Since I’m using my phone as my second computer, I would hope that the mobile site would have the same functionality of a laptop or desktop, but optimized for my mobile device. A mobile site has to accommodate every user, if they are out and about, or just laying in bed before they turn off the lights.

Because of this common over simplification, I often find myself clicking on “view full site” taking me away from the mobile version of the page. I’ll get frustrated when information on a mobile site isn’t intuitive or if a site is so pared down that I can’t find the information I’m looking for. And once I move away from the site, the user experience deteriorates. I have to pinch and zoom to read any text or sit waiting for pages to load. The mobile site experience becomes a missed opportunity. A better experience causes increased engagement, more conversion and a good chance someone will walk away feeling positive about your company or product.

A mobile site should create a focused experience, not a limited experience. To do this:

1. Information needs to be highly prioritized. Present the content that will be most important to the user first. A mobile site should focus on prime information pages upfront, but let you dive deeper if needed. The content users interact with should be adjusted to suit the size of their site— the same information from the full site may need to be presented in a different order from the full site to make more sense for the mobile user.

2. Navigation should be simplified, minimizing the user options. The navigation needs to be clear and intuitive to the user so they can find exactly what they are looking for. If needed, pages should include sub navigation so the user can still access any meaty details.

3. Your site should be touch-friendly. Buttons or links need to be large and easy to hit with a thumb or finger tip, based off of standard finger sizes (Apple suggests 44 pixels) Not only should it be click-able, but it should be in an area it can be easily clicked—buttons shouldn’t be placed too closely together, or you risk taking the user to the wrong link.

4. Images should be limited. Reduce the number of images to limit loading times.

The ultimate goal in having a mobile is to create a platform that is adapted to a device’s size, but mainly to what the user needs. We need to think about what mobile users want when visiting a mobile site, if it is to get things quickly on-the-go, or if they are using it as their main computer. A mobile site should not be limiting, but focused to give the user a valuable and positive experience that keeps them coming back for more.

Tags: , , , , , , , , ,
Posted in Code Logic, Design Love | No Comments »


The Trend Effect

Wednesday, September 7th, 2011

I’ve been living on Pinterest since I first signed up and I am constantly getting a first hand look at some great trends in action. With Pinterst you see all types of images that members are bookmarking across the internet, from fashion, interiors, to graphic design. It allows you to get a first hand look at what’s popular and new.

There is always a trickle effect in design trends. I’ve said it before, that what you see in fashion effects the world of interior design and finally touches on graphic design. These effects can be seen through color, pattern, shape, balance and even texture. Keeping up with the trends in all three areas is important. It allows us to see design trends from a different angle and lets us evolve our own designs.

On Pinterest you may need to do some wading, but there are definitely some great current trends that you can pick up on. Below are a few trends I’ve been noticing in the fashion and interior realms and how these trends may effect design choices for current graphic design.

Industrial: Industrial design is everywhere in interior design. It’s a mixture of clean lines, heavy metals, warm woods and simple shapes. Industrial is all about form and function without any fluff.

How it translates to graphic design: Minimalist designs, heavy gritty textures, shiny and smooth surfaces, dark moody grays, taupes and blacks, chunky slab serif and modern serif fonts, simple icons, and geometric forms.

Industrial Design

Pattern: Geometric, tribal and Southwest patterns are all over fashion and interior spaces. Patterns are generally a wonderful mix of rich vibrant colors combined with neutrals like soft gray, white and black.

How it translates to graphic design: Exciting geometric designs, bright colors and contrasting neutrals. Subtle patterned backgrounds and unique color pallets.

Mod/Mid Century: The 60s are coming back with tailored clothing, contrasting stripes, warm leathers, rich wood tones, and pops of vibrant color paired with charcoal grays and blacks.

How it translates to graphic design: Bold geometric shapes. Vibrant mix of muted warm colors paired with strong dark neutrals. Heavy use of typography and a mixture of font types.

Romantic / Organic: Softer shades are emerging. Dusty Rose is back in along with nudes, taupes, and creams. Gauzy fabrics, organic materials, tufted furniture, velvet, reflective mirrored surfaces and elegant shapes and lines.

How it translates to graphic design. Heavy use of neutrals, soft organic shapes and textures. Hand drawn calligraphic fonts. Light and subtle textures. Thin lines, natural shapes and soft curves.

Tags: , , , , , , ,
Posted in Design Love | No Comments »


Web Design Trends 2011: Typography

Monday, August 29th, 2011

Web safe fonts. If you are a web designer or developer, names like Arial, Verdana, Georgia, or Tahoma instantly come to mind when you hear those words. Up until recent years, designers (sometimes begrudgingly) relied on these and a small handful of other web safe fonts to allow visitors to view fonts correctly on screen. Internet browsers could only display fonts that were installed on a person’s individual computer, so this standard set of fonts became the typographical foundation for most websites.

With only a few web safe fonts available, web designs of the past have been extremely limited in the use of exciting and engaging typography. Specialty fonts online were generally reserved for main headlines and could only be placed in as static images, limiting the functionality of the type and hurting search engine optimization (SEO).

In recent years, there has been an emergence of font-embedding services, like Typekit, letting designers break out of the “safe” zone. Designers have more font options and can not only play with font style, but also the important details of leading and line height. These new options for fonts allow text to be easily updated and copied and selected from the browser, meanwhile maintaining a positive effect on SEO.

The font-embedding tools have created a boom in typographical exploration. Strong typography on a site can help tell a story as well as evoke an emotion from the audience. It can also set a tone for the site or emphasize a chosen theme. This year are seeing designs that are using large and exciting font choices, both through the use of static image and services like Typekit.

The big trend right now is to go huge with your headlines. These over-sized headlines capture the attention of the audience immediately and can make a site stand apart from their web-safe counterparts. Not only that, they can also create a visual hierarchy with the rest of the elements on the page as well as improve legibility for the viewer. The trend of typography on the web is definitely long-awaited and something I think it will keep growing and continue to be explored through a variety of methods. Typography lends a richness to websites that we haven’t seen in past years and gives web designers a whole new way to present information.

Check out the designs below for great uses of large typography.

CarsonifiedTapp3 MediaNeiman GroupMarie CatribsJeroen HomanChirp TwitterBlack Estate Vineyard

Tags: , , , , , ,
Posted in Design Love | 4 Comments »


Tutorial: Tilt Shift Photography

Friday, June 10th, 2011

I have an obsession with small things. Starting at a young age, I can remember building tiny cities and farms with my brother with wood blocks and small plastic figurine pigs. I continuously checked out the same book on making my own miniature doll furniture, and was way obsessed with decorating Barbie’s dream house with all of her miniature accessories. Even a bit more grown up, I still find myself in love with small things, from miniature brass figurines to tiny tiny lamps and, as most here know, dogs with short legs.

Tiny is just too cute, and so I love the emergence of Tilt Shift Photography. I can now make everything appear at a smaller scale. Tilt shift photography gives the appearance of a scaled model, with a shallow focus, high-contrast, and vibrant colors. Today, I’m sharing a fun way to create this look in Photoshop, so you too can start shrinking your world.

1. Select a Photo. Generally a model is seen from above, so make sure you’re choosing a shot from a high and wide angle, this will give you the best results. For this tutorial, I choose a photo taken out of my upstairs window of the street below.

2. Enter Quick Mask Mode. Open the image in Photoshop and enter Quick Mask Mode. You can do this by pressing Q on the keyboard, or select the Quick Mask icon at the bottom of your tools palette.

3. Draw a Gradient. Select the gradient from the menu by pressing G. Choose the reflected gradient. Draw a line where you want your main focus to be on the image. In this picture I choose the car to be the most in-focus element. If you look closely, I drew a line from the bottom of the car wheel to the top of the car. Keep using the gradient until you get the placement you’d like.

(more…)

Tags: , , , , ,
Posted in Design Love | 1 Comment »


2011 Web Trend: Creative Navigation

Monday, April 25th, 2011

Again and again I’ve run across experimental and creative ways to navigate a page. I’ve uncovered side-scrollers, one-page vertical scrollers, parallax scrolling, animation, story-telling, and even horizontal scrolling within horizontal scrolling (and the list goes on). These new types of navigation systems can give web sites an exciting and engaging way to captivate users, forcing them to interact differently with content, experiment, or be taken on a journey through your web site. But be careful, because something new and different can often confuse or scare users away.

More traditional styles of navigation are comfortable and expected to users, enabling them to easily guide themselves through your content. By steering your users in a non-traditional style, you can risk losing your audience. For this reason, it’s vital that your navigation remains effective. A non-traditional navigation needs to be smart, thoughtful, and content appropriate. An e-commerce site probably wouldn’t benefit from a single page scroller, because of it’s high-volume of information. But a smaller scaled portfolio or promotional site could potentially benefit from a more dynamic style of navigation. If you are in a specific design, illustration or web field, giving your users a new way to get around can be a great way to show off personal style, technique and skill.

Want to experience it for yourself? Check out these examples of creative navigation below:

Nike Better World
This site uses parallax scrolling to create a dynamic site with depth. Just scroll to explore and animate.

Jax Vineyards
This site uses a mixture of vertical and horizontal scrolling, for a clean, minimal look and feel. Constant top navigation is smart and let’s users interact easily with the site and side. Scrolling arrows are large and easy to maneuver.

Ben The Body Guard
This web site takes you on a journey, once you figure out about its vertical scrolling feature. Follow Ben along the dark streets to figure out all you need to know.

Youzee
This vertical scroller takes you step by step. Just click the button on the home screen to get started. Use the icon driven nav at the top or scroll on through each page.

crushlovely
With a constant navigation on the left, it’s easy to get around this vertical scrolling site. Each “page” is broken up vertically with a different color theme.

Polecat
This is a vertical stroller that allows you to jump between pages with a simple top navigation.

Tags: , , , , , , , ,
Posted in Design Love | No Comments »


2011 Web Trend: The End of the Fold

Friday, February 25th, 2011

With new developments in screen sizes and devices, the fold has become practically outdated. In web design, the “fold” is known as the imaginary line on a screen that designates what content is visible to a viewer without scrolling. If you’re curious, the term, “fold” originated from the traditional newspaper, where the most important content and images were printed above the paper fold. This rule helped gain maximum attention from the reader and made sure essential information was always visible. The same goes for web design, you want to make sure a viewer has visual access to the key info on your site within the first five seconds of reaching the page.

For years, web designers could mostly rely on the fact that a visitor would have a screen resolution between 1024×768 or 1280×700, and web sites could be created accordingly. There have been debates on where the traditional fold fell on these screen resoutions, but in general, the rule has been, don’t put any essential information below 600 pixels. Today, this is not always the case. Viewers now have access to a variety of screens, from iPhones, to giant TV’s, and it’s getting more and more difficult to establish the ‘fold’ line on a specific device. You can’t possibly design for all outcomes, and so the “fold” is starting to become irrelevant. To add to the mayhem, users today also aren’t afraid of scrolling either, and devices like the iPhone, make this intuitive and essential to view important information. With this new openness to scroll, these invisible boundaries seem somewhat unnecessary.

Even though we are moving into an entire new use of space, it doesn’t mean we should totally ignore the idea of the fold. The most important messages should remain near the top. We still need to respect the importance of the initial visual hit a viewer gets when they reach a site. It’s a powerful tool and and can help to capture the attention of the audience and perhaps even keep them scrolling on down the page.

Tags: , , , , , ,
Posted in Code Logic, Design Love | No Comments »


2011 Web Trend: Full Image Backgrounds

Wednesday, January 26th, 2011

Want a show-stopper? Then hop on trend with full image backgrounds. A large scale illustration or photo background instantly grabs your viewer’s attention, adding life and creating a more dynamic and engaging look and feel. These over-sized backgrounds are great, but should be used in the right setting. Sites that already have image galleries make great candidates, think photography studio, design agency, fashion designer, illustrator, or even a picturesque resort. Beware, the most common issue with large backgrounds it that they have to conform to many different screen resolutions, so make sure you test, test, test and use an image large enough to fit the width for the most commonly used screen resolutions. Check out these images below for this new trend in action.

Tags: , , , , , , ,
Posted in Design Love | No Comments »


2011 Web Trend: Parallax Scrolling

Monday, January 10th, 2011

First seen in side scrolling video games from the 80′s, Parallax Scrolling is a special technique that gives an illusion of depth in a video game, or in today’s case, a web site. Parallax scrolling uses multiple layers to create the illusion of a 3D space, where background images move slower than foreground images. When used in web design, it can add a great sense of depth to the look of your site and is best used as a header, footer, or background. The effect can be created using CSS and some JQuery plugins (I’ll leave that up the the dev team). To experience this technique in action, check out Silver Back App. You’ll have to scale your screen width to get the full experience. Also, The Old Pulteney Row to the Pole web site uses a top down parallax that is super sweet. Be on the lookout for more designs like these popping up in 2011. For more info and how it can be done, check out Think Vitamin’s post on how to recreate the silverbacks parallax effect.

Tags: , , , , , , ,
Posted in Code Logic, Design Love | 2 Comments »


Pantone 2011 Color of the Year

Monday, December 13th, 2010

Pantone recently released its 2011 Color of the Year; Honeysuckle, a bright reddish pink. While I am personally not a huge fan of the color pink, I really like the spirit of the color. I like the idea that 2011 will be brave, confident and dynamic. I love the 2010 Color of the Year (PANTONE 15-5519 Turquoise) and am still dreaming of painting my bedroom with a nice pop of turquoise. However, I am looking forward to year that does not call for a color of escape but calls for a color that is lively, energetic and courageous.

Below is an excerpt from Pantone’s web site announcing their choice for the color to represent 2011. To read the full article click here. Enjoy and cheers to a bold, brave new year!

A Color for All Seasons
Courageous. Confident. Vital. A brave new color, for a brave new world. Let the bold spirit of Honeysuckle infuse you, lift you and carry you through the year. It’s a color for every day – with nothing “everyday” about it.

While the 2010 color of the year, PANTONE 15-5519 Turquoise, served as an escape for many, Honeysuckle emboldens us to face everyday troubles with verve and vigor. A dynamic reddish pink, Honeysuckle is encouraging and uplifting. It elevates our psyche beyond escape, instilling the confidence, courage and spirit to meet the exhaustive challenges that have become part of everyday life.

“In times of stress, we need something to lift our spirits. Honeysuckle is a captivating, stimulating color that gets the adrenaline going – perfect to ward off the blues,” explains Leatrice Eiseman, executive director of the Pantone Color Institute®. “Honeysuckle derives its positive qualities from a powerful bond to its mother color red, the most physical, viscerally alive hue in the spectrum.”

Eiseman continues, “The intensity of this festive reddish pink allures and engages. In fact, this color, not the sweet fragrance of the flower blossoms for which it was named, is what attracts hummingbirds to nectar. Honeysuckle may also bring a wave of nostalgia for its associated delicious scent reminiscent of the carefree days of spring and summer.”

Tags: , , ,
Posted in Design Love | No Comments »


Color Trends: The Economic Effect

Tuesday, November 2nd, 2010

Earlier this year, Pantone named Turquoise as the color of the year and it can now be found all throughout the fashion, interior, and graphic industries. The color was chosen because it “evokes thoughts of soothing, tropical waters and an escape from the everyday troubles of the world, while at the same time restoring our sense of well being.” Color trends for all areas of design are most often chosen based on our current economic and social trends. We have been living in a world economic crisis and it’s no wonder a color was picked to represent an escape from our everyday lives.

The current economy continues to haunt us and that translates into a desire for the better days of the past. We are saving money, and trying to go green by repurposing, recycling, and reusing the materials available around us. For 2011, with money on the back-burner, there will be a foreseen focus on family and preserving and exploring the past. What does this mean for design? Picture old, heirloom colors, distressed finished and earthy hues of brown, green and blue. We’ll seek styles that bring us comfort, reminiscent of our heritage and roots. Trend analysts are forseeing a large interest in patterns, textures and colors that have a global influence. Renewed Aboriginal, Tribal and bold geometric patterns will be set off with amber tones, tomato reds, and sea blues, balanced by earthy neutrals like putty and sand.

To keep money in our wallets, we will also crave to keep things simple. Tones of gray and white will be the hottest neutrals and will be popped with warm butter yellows and taupes. To keep things sophisticated, understated washes of gold and champagne metallics will make their way into this upcoming 2011 season’s pallet. We should find all of these trends reflected in paint and fabric, and we will probably find overlapping in graphic design, by the use of simple and warm-colored hues, printed textures, and a mixture of patterns throughout collateral. Curious about how this might look? Check out these examples below of how this may effect design in the upcoming year:

Reference:
 Pantone Unveils Color of the Year for 2010:PANTONE 15-5519 Turquoise
Pantone Must-Have Colors for 2011
Interior Design Trends for 2011
Interior design trends for 2011 will reflect on ancestry

Tags: , , , , , , ,
Posted in Design Love | No Comments »


« Older Entries