Posts Tagged ‘web’

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


Pinterest: catalog what you love

Monday, June 13th, 2011

I think my dreams have come true! Today I stumbled upon a new site that quickly struck my interest. Pinterest is a virtual pinboard that let’s you share and organize all of the images you find on the web. As I’m sure many designers do, I have saved TONs and TONs of images on my computer to use as references for design, pattern, texture, color, typography and the list goes on. The problem is, I save these images into one huge folder, and about once a month, have to take the time to organize them into each of their specific folder categories so I actually have a chance of them be useful.

With Pinterest, you create a link in your tool bar that quickly let’s you pin (bookmark) an image from the interwebs. You can then, from what I’ve read, create different pin boards that allow you to organize all of the images you have pinned. On top of that, you can edit, comment, repin, and follow other people who have awesome boards. Pinterest isn’t just for designers either, you can pin any kind of image you like, from fashion, to weddings, to foodie photos. I requested an invite immediately and I’m on the wait-list to start pinning. Just visiting the site was inspirational, it’s awesome to see what other people have pinned, and I can’t wait to start my own pinboard!


Tutorial: Subtle Web Backgrounds Using Photoshop Texturizer

Wednesday, June 8th, 2011

Subtle web background textures are extremely popular in current web design. They can be used to give a site depth and and add richness in a way that isn’t too overwhelming. I’ve been really into using these subtle textures in my web designs and I’ve been on the hunt for how to create my own textures from scratch. Today I’m going to share one way to create these patterns for your own web designs.

In this tutorial I’ll show you how to create a repeatable pattern in Photoshop and then use Photoshop’s texturizer to make a unique subtle and repeatable web background (as seen on the left). The texturizer’s great, because it allows you to add texture to an image without altering the image below. If you’ve already got a repeatable texture, you can jump down to section B to get started with the Texturizer!

A. CREATE A REPEATABLE TEXTURE

1. Find a Photo. Start with finding a high-res pattern image. I choose to work with a great fabric texture found here, but you could easily use a different photo or create your own.

2. Convert Texture to Grayscale and Resize. Bring your texture into Photoshop and convert to Grayscale. To do this go to, Image > Mode > Grayscale. Resize your image as necessary. I scaled mine down to create a more subtle look. Go to Image > Image Size to adjust the scale of your pattern.

(more…)


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.


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.


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.


Google Font Previewer

Thursday, November 18th, 2010

Another free Google tool in beta?  Yep.  Seems like another one comes out every week.  This one in particular has been out for months, so if you haven’t given it a try yet, then you are overdue.

Do you need help configuring, testing and then easily embedding some free fonts into your web pages?  Great!  The Google Font Previewer lets you pick one of the open source fonts from Google’s Font Library, then tweak the size, spacing and decorations using simple sliders and buttons.

Perhaps even more exciting is the Chrome browser extension for the Google Font Previewer.  Click the icon in your Chrome toolbar, and select the web font you want the page you are currently viewing to become.  Zap!  New fonts to preview.  This can be great if you’re designing a site, but you’re just not sure which free web font to use.

These are both great tools for designers and web coders alike, so give them a shot.

Google Font Previewer (http://code.google.com/webfonts/preview)
Google Font Previewer Extension for Chrome (https://chrome.google.com/extensions/detail/engndlnldodigdjamndkplafgmkkencc)

Also, don’t forget to go back and read Greg’s post about Google’s Library of free Web Fonts.


Custom Icons with the Google Maps API V3

Tuesday, November 16th, 2010

Putting a map on your website is pretty easy. The easiest way is to go to Google Maps and find the location you want, click embed, then copy and paste the code onto your site. This creates an iFrame on your site, which isn’t bad, but isn’t the most flexible either.

If you are feeling brave, you can put a map on your website with the API that Google provides. It’s all javascript code that works on every modern browser. The API is extremely well documented, so I won’t get down to the complete process of setting up a map, because this blog post is about using custom icons for your markers.

Click through to read how.
(more…)


MODx Update: Fantastic new administration panel

Wednesday, October 27th, 2010

We here at the Zoom Creates Nerd Herd (the development team) have always loved the modX CMS tool. It’s extremely flexible, has a great system for templates and code chunks, and is limited only by your imagination. We’ve been using it for sites since before the code base was at a stable 1.0 release, probably since around late 0.8 beta releases. There are many great plugins that help with breadcrumbs, dynamic navigation and menus, AJAX requests, search engine friendly URLs and more. Today I’d like to point out some of the features and changes of their latest release, Revolution 2.0.4.
(more…)


Top 5 Free Resources For Business Tweeps

Friday, September 3rd, 2010

TwitterGrade for Zoom Creates

As of the writing of this post, there are 7,682,986 registered users on Twitter.  Once your business has made the leap in to the Twitterverse, you’ll need to have some resources at-hand to monitor and contribute to this additional way of sharing yourself. Your adoring customers, clients, fan-boys, and industry peers will begin following you. How do you stay on top of the flow of followers, and keep everyone engaged?

For businesses to grab a share of those potential customers, they need tools to research, track, and position themselves correctly.  Here is the short-list of business-oriented resources you should be using for Twitter.

TwitterGrader
Find out what your business rank/grade is on Twitter.  Great tool to start your research.

TwitterCounter
Register for this free tool to begin tracking your subscribers, get weekly reports, predictions, and advice on who you should be following.  You can also overlay your competitors in the graph to see how you compare.

HootSuite
The “do-it-all” tool for business tweeps.  Register and set up scheduled tweets to be posted days, weeks, and months in advance.

LocaFollow
Geo-located Twitter happenings in a specific area.  Set it up to track your city or neighborhood, and keep an eye on what is trending near you.

TweetScan
Similar to Summize (AKA Twitter Search), get reports on topics which affect your business.  Sign up to generate email alerts. Find out who is talking about your business or brand instantly or report daily and become aware of how your brand is viewed by the Twitter masses.

If you incorporate some or all of the above resources into your Twitter endeavors, you will definitely see better results than if you hadn’t done any at all. How much of a difference will it make? No one can say for sure, but at least you’ll be able to see how your numbers and metrics are being affected and what measures you’re taking that seem to be paying off. Happy Tweeting!