Posts Tagged ‘showcase’

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


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.


2010 Web Design Trend: Increased White Space

Tuesday, March 9th, 2010

Today’s websites are getting cleaner, more streamlined and focused on an increased use of white space. White space refers to the negative space between and around the elements in a design (graphics, type, columns, etc.). Those who are inexperienced with the use of white space may view it as an empty area, and thus a waste of valuable screen real estate. This blank space, however, is extremely beneficial to a design and the usability of a site. White space will make a layout much easier on the eyes. It reduces the amount of text a viewer will see at one time, increasing legibility and helping a visitor quickly find what they are looking for. It can also improve the structure of a site by creating a visual separation of elements, allowing content to stand out from the background. Not only is it functional, increasing space can also give a web site a more professional, uncluttered, and fresh appearance, providing a strong platform on which to present your message. Check out the examples below for excellent uses of white space:

Apple

Jason Reynolds

Indie Labs

Buffalo

Astheria

Left


2010 Web Design Trend: Speaking Navigation

Thursday, February 25th, 2010

For some, one word navigational links simply aren’t clear enough. Designers are now trying to explain, in a short snippet, what the visitor should expect to see upon clicking on a link. This additional short phrase has been coined as “speaking navigation,” as opposed to “silent” navigation which follows the traditional style of using keywords to represent a group of information. The end goal in this method is to create a more effective communication style with site visitors. If content can be clarified, navigation will be simplified for the user and could potentially generate increased traffic through the site. Check out the examples below of speaking navigation:

Sifter

Sifter

Lift Interactive

Lift Interactive

AgentPoint

AgentPoint

Lennon Bus

Lennon Bus

You Version

You Version

Dishizzle

Dishizzle

goodbytes

goodbytes


2010 Trend Prediction: Subtle Textured Backgrounds

Friday, January 29th, 2010

Subtle background textures will be popping up all over the web this year. This new trend doesn’t go overboard with textures (as seen in many grunge styles), but focuses on simplicity and a more precise use of texture. The goal of the trend is to give the site a surface and the illusion of actual texture, but to not distract from the other visual elements on the page. A subtle texture can add dimension and depth to a design, creating a sensory experience for the viewer. If the texture is used well it can become a significant and beautiful feature of the web design. Check out the examples below showcasing great uses of subtle textures.

One Twenty Seven

One Twenty Seven

Delibar

Delibar

(more…)