Web Design Dev » Inspiration

10 World Class Athlete Websites

Scott Stanton — Fri, 06 Jan 2012 16:36:35 +0000

I have always appreciated an athlete who has their own website. Especially now days when they could call it good with a Facebook fan page, or really go above and beyond with a Twitter account. Some athlete’s are active members of charity organizations, or have their own product line, and they use their personal site as a platform to pitch and promote those organizations or products. In other words, they use it to generate revenue. Others aren’t trying to pitch anything and just want to give their fans a place to learn a little more about them. Let’s take a look at some of the better athlete websites out there.

Tom Cleverley

Tom Cleverley is not only quickly making his presence known on the football pitch, but online as well. His website allows fans to learn more about the England international and keep up to date with his accomplishments as well as what he’s up to. His site features his Twitter feed, a news section, and a monthly playlist of his favorite songs.

Bjoern Dunkerbeck

Bjoern Dunkerbeck is a world-class windsurfer with a world-class website. The Flash site features some stunning fullscreen background images, cool music, news, projects, and contact info, amongst other things.

Maria Sharipova

Maria Sharipova is not only stunning on and off the court, but on the web as well! Her personal website is packed full of content, including Facebook updates, photos, videos, news updates on her foundation, links to her various collections and products, as well as info on her sponsors.

Andres Iniesta

Hailed as one of the greatest modern day footballers, Andres Iniesta has a rather flashy Flash site to stay in touch with his fans. The site is packed full of photos, videos, news, bio and background info on the World Champion goal scorer at both club and international level. The site can also be viewed in Spanish, Catalonian or English.

Serena Williams

Serena Williams took the time to develop a site packed full of information on her and her various accomplishments. Amongst the standard, bio, pics, media, sponsor info, and contact links there is a schedule of her upcoming events, as well as a page about her foundation.

Troy Polamalu

Troy Polamalu is an American football player and a man to be feared on the field. If anyone was wondering how intimidating it may be to come face-to-face with him, you may now do so on his homepage. Along with a very stoic and intimidating background pic, Polamalu also has a store on his site where fans can buy his merchandise. You can also learn about the foundations Troy supports from his website as well.

Floyd Mayweather, Jr

Love him or hate him, Floyd “Money” Mayweather, Jr is a force to be reckoned with in the boxing world. You can access Money’s Facebook page, Twitter account and YouTube channel, as well as well as get info on the not-for-profit The Floyd Mayweather Jr, Foundation or shop his online store.

Lance Armstrong

Seven time Tour de France champion, Lance Armstrong has become a worldwide cancer awareness advocate since he gained worldwide fame as a cyclist. The site contains info on the Livestrong foundation, photos, news, pics, a bio, sponsors, and a whole lot more.

Felipe Massa

Felipe Massa is a Formula 1 driver for Ferrari with an extremely cool website. Featuring a fullscreen background image slideshow, multiple language options, and all of the standard, media, bio, and news content you’d expect. Felipe also has a fan club you can join from his site, as well as a link to the Ferrari merchandise store.

LeBron James

LeBron James has a site you must witness. A single page concept with a parallax scrolling effect that hovers over character drawings of the man himself, the site has your standard updates, and links to his social media presence. But the content gold mine comes in the way of “The LeBrons” cartoons.

There are some certain trends that you can see present throughout the majority of these sites, lots of color, emphasis on images, and basic content elements like bio, contact info, and links to social media platforms. These concepts can be applied to many other niches of web design and don’t have to be limited to athletes, the same concepts could work for artists, musicians, cooks, and many other professions.

10 Awesome Single Page Websites

Scott Stanton — Wed, 04 Jan 2012 18:18:43 +0000

These days it seems like the term “webpage” and “website” are thrown around loosely, often being used interchangeably. I can’t recall how many times I’ve been in a meeting with a client and had them tell me they’d like a webpage, which I interpret as a basic, single-page website that is basically a digital business card. Something that gives them a web presence without breaking the bank, but then what they begin to describe is a fairly complex, multi-page structure, or something that I would define as a “website.” Thanks to jQuery, Java, CSS, and some good ol’ fashioned HTML, there are quite a few tricks that allow a singular webpage to function like a multi-page website. Let’s take a look at 10 Awesome Single-Page Websites.

Fandango Media Group

Fandango Media Group utilizes a very basic CSS fixed background trick to add heaps of character to how the content flows on the page. It’s not much, but it certainly gives navigating the page an edge over most other vertically scrolling sites or pages. I found it interesting that they opted to use images for a majority of their text. It certainly works, but more often than not people seemed to be concerned about their SEO, at least to some degree, and text is the best way to boost your SEO.

Bennett Feely

Bennett Feely has developed a very clever webpage for himself. I like his fixed position navigation bar at the top of the page, it’s both hidden and transparent, as to not intrude on the page too much, but enough to let you know it’s there. Bennett also a slider in his portfolio to showcase his work, and a fun CSS transition effect on his email contact link. It’s simple and minimalist, yet gives you everything you need.

HatBox

HatBox is another excellent webpage and I especially like that it’s responsive without any loss of content. I really admired how they opted for a creative icon tab navigation for their portfolio where I feel most companies would have gone with an image slider. HatBox is another example of not overwhelming the viewer with information and things to look at and click. You get what you need. The only minor critique I would give is to make the contact information a little more visible, the text for the email address is easy to overlook. Simply adding an icon in with the social media icons could do the trick.

Code Slingers

Code Slingers only has two sections, home and about. But they utilize parallax scrolling to give the page heaps of character. I’m also a fan of sites that utilize the header to put color in to a site and set the tone, then have the bottom of the header image set a single color background for the rest of the site.

CoFinery

CoFinery is another perfect example of a webpage that gives you exactly what you need, and nothing more. They have a large main image banner that helps set the tone for the site and give it a little character, along with some text explaining who they are and what they do. You’ll also find icon links to their twitter and dribble accounts. Below the belt you find the rest of the details you need, the who and what, along with contact info.

Pixelbacker

Pixelbacker reminds me of one of my favorite arcade games from the 80’s, Asteroids. The home page consists of some fun animations, with parallax scrolling asteroids in the background. The navigation system is very non-traditional and is set up more like a video game, with links placed throughout the page rather than featuring a standard navigation bar.

TM Design

TM Design isn’t the first site I’ve seen that features a full screen background image and origami on the homepage. But that’s not all this page has going for it, parallax scrolling, an easy to navigate portfolio section with multiple links rather than one decorating the middle of the page, and a footer that is more than just an afterthought round out the rest of the highlights. In fact, I really like the footer, it has a little mission statement, an image to tie the page together and all of their contact information.

Rareview

Rareview is exactly that, a rare view. They don’t rely on too many fancy scrolling or navigation gimmicks, but they don’t need it. There are some simple anchor links that quickly jump you further down the page, but that’s about it as far as a navigation system. The design is very clean, and just a basic, vertically scrolling site. It’s a timeless design that doesn’t instigate any popular trends, which means there’s no need to keep updating or redesigning the site as trends rise and fall.

Marcela Garces

ThisIsMarcela.com is a fun site to browse thanks to the color palette, animated graphics, icons, and soft textures. I enjoyed the ever-present navigation bar adorning the left side of the page. The page includes some fun facts about the designer, a healthy amount of portfolio samples, and is another great example of utilizing the footer as a design element, rather than a quick way to tie off the end of the page.

Ready When You Are

What better way to spruce up a taxi webpage than with a taxi driving through it? That’s what Ready When You Are has done, starting with a crazy driving cabby navigating through the various highlights of the page. Then, with each click, the taxi is right there behind you. This is another perfect example of giving the viewer enough content to keep them happy and encourage them to actually read it all, rather than overloading the page and overwhelming the viewer, which may cause them to leave the page without reading anything.

It’s clear from some of these examples that there is a blurred line between what constitutes as a single page, or a webpage and a website. A site may scroll left or right, giving the appearance that it’s a new page, but a quick look at the URL will show that the developer just used an anchor to take the viewer to a different section of the same page. As with developing any website, the most important thing is structure and navigation. If a viewer can’t figure out how to get around your site, or get to the information they’re licking for quickly, they’re going to get frustrated and leave. Keep that in mind if you’re planning on developing a creative, single-page, horizontally scrolling page.

10 Awesome Websites With Full Screen Background Images

Scott Stanton — Tue, 03 Jan 2012 12:22:14 +0000

10 Awesome Websites With Full Screen Background Images

When it comes to web design my tastes walk on a very thin line. I like simplicity and visual stimulation, which is a very difficult balance to pull off. However, one of the easiest ways to do so is by featuring a full screen background image on your site. Accomplishing this feat is not as easy as it may sound once you take in to consideration all the different sized monitors and screen resolutions out there, not to mention tablets and mobile devices. That’s not to say it can’t be done as there are multiple ways to approach this technique, but for now we’re just going to look at ten sites that utilize a full screen background image.

Go To China

If you drag, shrink, pull, push and widen this page you will notice that the background image not only continuously fills your browser window, but it’s also keeping the image in scale. Meaning the image is not a fixed size where someone who has their screen resolution set to 800×600 will miss the majority of the image, where as someone who has their monitor set to 1440×900 is able to see most of it. This site is able to achieve the effect thanks to the “cover” attribute for background-size in CSS3.

Bjoern Dunkerbeck

Pro surfboarder Bjoern Dunkerbeck has a pretty rockin’ website complete with a full screen background image. As a matter of fact, he has multiple background images that cycle through as a slideshow while you’re on his site. Bjoern’s site uses Flash in order to display the full screen image.

The Door Works

The Door Works use a full screen background image to establish their high quality craftsmanship to the viewer immediately. Through the use of jQuery the image is clipped and resized on the fly. This may sound similar to what the previous sites were doing, but those sites had the image dimensions set to 100% in order to fill the screen. Meaning the image colors won’t get blotchy if the window is shrunk much smaller than the original size of the image, or the image won’t become blurry and pixilated if it’s stretched much larger than the original size of the image.

Ben Thomson Photography

I’m a sucker for a good photography website, you’ve got a plethora of creative, high-res images to look at and capture your attention. And that’s exactly what Ben Thomson accomplished with his website. Ben keeps it clean and simple, only offering what’s necessary for a man of his profession to have on a website.

Fleming Steele

The Fleming Steele creative agency understands the importance of a website. They understand that a site should not only represent you and what you do, but encompass your personality and philosophy as a company. The full screen, black and white, background images of the city they’re based out of immediate triggers words in my head like “elegant”, “creative”, and “clever”.

Teletech

Teletech dishes up some phenomenal photos as their background images, but they don’t stop there. Their site features a miniature camera icon just to the right of their main navigation bar, towards the top of the page, clicking on it results in getting background information on the photo. Unique and educational.

Gravitate Design

Gravitate Design is a bit of a special case for me. On its own the image isn’t that interesting or intriguing. But in the context of the design and the website as a whole, it’s perfection in its simplest form. It delivers some character to the homepage, it’s simple, clean and full screen. Try picturing this website with out the image, you wouldn’t have the textures that the wood and wall offer or the character and creativity that the origami crane offers. Try putting in one of the images from the other sites and all of a sudden the site would become to cluttered and you wouldn’t know what to focus on.

Medis Bar

Medis Kitchen and Bar is another site featuring a full screen background image slideshow. In fact, I didn’t even need to know Swedish to know what the place offered or for the site to convince me I need to go there. Their images tell it all through pictures of the food, bar, coffee, cooks and servers.

Tour Alarm

I can only hope that the only thing this bus was used for was to get the background image for the Tour Alarm website. A couple aspects of the site that I really enjoyed and really worked for me was the ability to translate the page to English, from German, and the ability to close the content so you can see the full picture of the bus unobstructed. Now, whether the bus works or not is another story.

Davidia

Davidia is a Croatian company that knows multiple forms of design, or at least interior and web design. This site is another example of a full sized background image that maintains the proper scale and proportions as it is resized. The image also never looks to pixilated, blurred or blotchy.

Content is nice, but how many of the people visiting your site do you think read every word written on your site? And, let’s be honest, was the content written because you thought the visitor had an interest in it, or because you had an interest in optimizing your site for search engines? You will notice that with most of these sites you didn’t need to read a single word to figure out what the company the website was representing did, what the service was they offered, or how good they were at their job. All of those messages were conveyed through a handful of images that perfectly represented the company. Think about that next time you’re trying to type out a 1,000 word “About Us” page. After all, a picture’s worth 1,000 words.

Taking Super Mario Brothers to Flash

Web Design — Mon, 02 Jan 2012 19:05:40 +0000

All of the talk in the video game world either revolves around Skyrim, Call of Duty; Modern Warfare 3, or motion activated technology like the XBOX Kinect. We have become too immersed in massive worlds, online multi-player gaming, and advanced technology to realize that the games we play aren’t as much fun as they are all-encompasing and addictive. While taking up massive amounts of online storage and high concentrations of RAM on next-gen consoles, these games never lack technology but too often neglect the element of fun.

With the power of Adobe Flash, some developers are eschewing the normal web design and development roles in favor of bringing back classic 8-bit gaming staples to the computer platform. Jay Pavlina of Exploding Rabbit has taken the original Nintendo Entertainment System and converted the platform staple Super Mario Brothers to an awesome Flash game.

Not only did he bring the classic Mario Brothers to the Flash platform, he brought along several other classic Nintendo characters for the journey. The latest version of the game includes Ryu from Ninja Gaiden, Link from The Adventures of Zelda, Simon from Castlevania, Bill Rizer from Contra, Sophia III from Blaster Master, and Samus from the legendary Metroid line of games.

While most would think that each of these characters would play a static and non-interactive role in the game, Pavlina has incorporated each of their unique abilities into the coding and storyline. Not only can each character attack with jumps and fireballs, they are also equipped with special skills according to their prior gaming history.

For instance, Simon can whip opponents and throw axes while Samus can curl up into a ball and drop bombs on unsuspecting Goombas. If you think that you are just going to rehash the same tired gameplay of the Mario universe, think again. Imagine taking out turtles with Mega Man’s arsenal or blasting away at Bowser using the Konami Code.

Adobe Flash can be used as an excellent tool for creating the most dynamic and interactive web pages and cutting edge video players known to man. It can also reach deep down into the nostalgia bin and pull out a gem like the Super Mario Crossover game. Are there any other characters who would fit into Jay Pavlina’s epic vision of the Mushroom Kingdom?

To see the Super Mario Crossover game, click the screenshot below:

7 Fun Flash Games For Inspiration

Iggy — Fri, 23 Dec 2011 18:41:13 +0000

One of the best areas of flash is the online games. Their popularity lies in the fact that you can go online any time and start playing a game. There is a huge variety of flash games out there. I have chosen 7 flash games that stand out from the crowd. If you are a flash developer then these games are a great source of inspiration.

7-Moby Dick 2

In this game you get to be a great white whale killing humans to protect yourself. The controls of the game are really interesting here. You use your mouse to set the direction of the whale while the whale keeps on moving at all times. You have to use the momentum of the whale to attack boats. One of the many good things in this game is the upgrades. You can earn upgrade points which you can use to improve you whale’s size, speed and lots of other things.

Click here to playMoby Dick 2

6-Fireboy and Watergirl – The Light Temple

This game has a really unique gameplay. It’s a puzzle game in which you get to control 2 characters; fireboy and watergirl. You have to use your brain and control both the characters at the same time to solve the puzzle.

Click here to play Fireboy and Watergirl – The Light Temple

5-The Fancy Pants adventure world 2

The reason of this game being in this list is its ease of play and fun. This is the kind of game that people look for in flash games. The graphics and gameplay is amazing. There are a lot of levels so you wouldn’t get bored with this game soon.

Click here to play The Fancy Pants adventure world 2

4-Shift

Among all the puzzle games that I have ever played, this game is the most unique and most addictive. When you start to play this game, it’s just an ordinary jump and run game but when the shift comes in, it’s a whole new world. Whenever you press the key in this game, the stage would change states. You have to solve the puzzle while thinking about both the states of the game. This game is a great exercise for brain.

Click here to play Shift

3-Liquid measure 2

There are a lot of games out there that look alike this game. But this game tops all of them because of the graphics, the gameplay and by introducing new things in every new level. In this game you have to put the pipes together to form a path for the water to its destination. The game starts out easy but after a few levels it gets really interesting and difficult. It’s the ability of this game to keep the user immersed that has earned this game the 3^rd spot.

Click here to play Liquid Measure 2

2-Shell shock live

The capabilities of flash have always been underestimated. But this is a game that really leverages the power of Flash. The game offers a unique multiplayer experience in flash. This is a turn based game in which all players have to target the other team in their turn. There is a huge variety of weapons in this game and all of them are really interesting. The in-game chat is also very interesting. Messages from a user are always shown as a bubble on their tank. This is a new concept and it is really interesting.

Click here to play Shell Shock Live

1-Raze

If we can choose one factor for determining a good game then that factor wouldn’t be graphics or gameplay or its multiplayer capabilities. The only factor that matters is how much fun you have playing the game. And Raze is a game which scores a 10/10 on that factor. Raze is an action game in which the main theme is to shoot and kill. There are 2 campaign modes and a lot of single play modes. The graphics of the game are impressive. The huge variety of weapons is amazing. If you are making a game then make sure that Fun is on the top of your list.

Click here to play Raze

10 Incredible Examples of Responsive Web Design

Scott Stanton — Wed, 21 Dec 2011 15:01:48 +0000

With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both mobile devices and computers. When internet capable phones first began gaining popularity the method was to have two separate sites, a mobile site and a “full” site. But that would limit the mobile viewers experience because the site would be so basic it would cause you to wonder if it was coded by chisel and stone. That was then, now everyone is jumping on the “Responsive Web Design” bandwagon and finding it to be a rather happy median.

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let’s take a look at 10 excellent examples of responsive web design.

Sony

Sony is a big brand that has embraced responsive web design. You’ll notice there’s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you’ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.

Gravitate Design

It’s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate’s site not only because it’s responsive but because it’s very clean and simple. Their color palette compliments itself nicely and they didn’t go overboard on shadowing, borders or putting all their content in boxes.

Spark Box

Spark Box is another web design studio that knows a good thing when they see it and doesn’t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don’t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn’t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.

Food Sense

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don’t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that’s on the side column under the navigation. They still have links to both social networks in the footer, so it’s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.

dConstruct

dConstruct is a stunning example of dynamic images that are resized on the fly. As you drag the window left and right you will see that the padding between images isn’t what’s adjusting in width and size, but the images themselves are. Once you hit a certain parameter all of the images resize to a smaller, or larger depending on if you’re shrinking or expanding the site, version to accommodate the screen size.

Clean Air Challenge

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn’t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.

Sasquatch Music Festival

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it’s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.

Flexslider

It only seems fitting that Flexslider also has a flexible website to promote their handy jQuery image slider. And what better way to get people interested in the slider than to use pictures of cupcakes to show off how it works! One of the best things this site has going for it is that you don’t lose a single thing between widescreen mode and mobile mode, all icons, images, elements, comments, and everything stay there. This way visitor’s don’t feel cheated between missing out on content if they’re browsing the site from their mobile device or desktop computer.

The Cacao Trail

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don’t mind as the image doesn’t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.

Alsacreations

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile they dropped all elements except their “About” blurb and their email form, while including links to everything else.

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries a person may only be viewing a site from their mobile device to find that companies contact info. In those instances it’s probably best that’s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what’s best for them, and keep all monitor sizes and internet browsing devices in mind as you’re developing your next project.

10 Holly Jolly Christmas Fonts

Scott Stanton — Tue, 20 Dec 2011 18:36:20 +0000

10 Holly Jolly Christmas Fonts

With Christmas right around the corner, now’s the time that you realize you haven’t sent out your yearly Christmas card. Or it has just dawned on you that you haven’t sent out the invitations for Christmas dinner. Let’s have a look at ten free Christmas-themed fonts that are, best of all, free! If Christmas isn’t your thing, or you’re looking to send out your New Years Eve party invitations, these will suit your needs just fine as well.

Kingsthings Christmas

Kingsthings Christmas font is a fun one, full of snowflakes and winter cheer. This font set comes complete with dollar, euro, and British Pound Sterling signs as well as all of the major punctuation marks. This font will give a fun, cheerful feeling to any card or invitation thanks to the snow-top effect given to each character.

Christmas Snow

In most countries nothing is more symbolic of this time of year than snow, making the Christmas Snow font a good choice for your crafty needs. With the letters sandwiched between the fluffy white stuff and big flakes falling down around them, you’ll start to think all that’s missing is a mug of hot cider and Frosty the Snowman. This package does come with all of the major punctuation marks as well as numbers, but unfortunately they are not themed like all of the letters are.

Summer’s Snowman

Speaking of Frosty, Summer’s Snowman font capitalizes on the snowman theme of Christmas by putting each letter on the belly of a snowman. Frosty must have a big appetite though because Summer’s Snowman only has uppercase letters and numbers. So, if you’ll either have to get friendly with your caps lock, or go a different route.

Candy Cane

No Christmas font list would be complete with out a candy cane themed font, and that’s exactly what Candy Cane delivers. True to its name, this font keeps its theme throughout all of the uppercase and lowercase letters, as well as numbers and a handful of the more common punctuation marks. Candy Cane does not however include any currency symbols with the same theme.

Christmas Lights

Christmas Lights are not just another fun tradition this time of year, but another fun font to add to our list. You can choose between indoor and outdoor Christmas lights, with the indoor strand being perfectly linear opposed to the outdoor strand that looks as though it were just untangled from a wad of wires, just like normal! This font collection covers an extensive range of punctuation marks and special characters and is a little more elaborate than some of the other custom fonts out there in that regard.

Kringle

Kringle is a font that incorporates some Santa magic with Santa hats to cap off all of the capital letters and bows to gussy up the lowercase letters. The Kringle font goes miles beyond most custom fonts by offering themed special charters and punctuation marks for everything except the euro currency sign. Granted many of the special characters or punctuation marks don’t have a Santa hat or bow, but at least the font matches with the rest of the theme.

Ornamental

The Ornamental font is a lot like Christmas Lights, but rather than having the letters contained within Christmas lights, they’re inside of Christmas ornaments. However, one unfortunate thing with the Ornamental font is that you get no special characters or punctuation marks in this font package, and the numbers are just random ornaments that in no way represent the number they’re affiliated with.

Toy Train

Toy Train is a font that brings back memories for those of us who set up a toy train that ran around the base of the Christmas tree. While the actual toy train would leave youngsters imagining that the train was going to deliver cargo boxes full of presents, the Toy Train font has an engine in front of every capital letter and a box car for every lowercase letter. This Christmas time font package also comes with a decent amount of special characters and punctuation marks, as well as all of the numbers.

Christmas Tree

Every time I see this Christmas Tree font I can’t help but begin singing, “O Christmas Tree.” It’s a fairly basic font, a black Christmas tree icon outlines the white letter, but it certainly gets you in the spirit of Christmas. The font package features all uppercase and lowercase letters, as well as all of the numbers. Most of the more commonly used punctuation marks are represented, however the ones that aren’t have a default icon as well.

Papa Noel

I’m curious to know if Santa uses Papa Noel font when writing his list to find out who’s been naughty or nice. Complete with capital and lowercase letters, as well as numbers and then simply the bare minimum of punctuation marks, Papa Noel surely has all the things needed for Santa to make that list. This is a very playful and fun font that will surely spread Christmas cheer through your invitation or card.

The holidays are a fun and festive time, so why not spruce up your text with some fun fonts to put people in a holly jolly mood. If you’re having trouble getting the font to load in Photoshop, Fireworks, or what ever program you’re using, once you’ve unzipped it and dropped it in to your “Fonts” folder, try saving your project and restarting the program. Sometimes programs load their fonts only when you open the program, so if you’ve installed a new one after you’ve opened the program it won’t show up in your list.

10 Awesome Parallax Scrolling Sites

Scott Stanton — Tue, 06 Dec 2011 17:52:20 +0000

Last week I wrote an inspirational post titled 10 Footer Designs That Don’t Stink. This week I am bringing you an inspirational piece that focuses on parallax scrolling. Parallax scrolling is not just for Moon Patrol any more. Well, I guess it hasn’t been for a while, but there’s been an increasing number of websites popping up across the interwebs over the past few years that feature parallax scrolling. For those of you who are not familiar with parallax scrolling, it is a technique where various layers of images are all moving at a different rate. If Moon Patrol doesn’t ring a bell, think Super Mario Brothers. If you’re still confused as to what parallax scrolling is, let’s take a look at ten good examples of a parallax scrolling site.

Mario Kart Wii

Speaking of Mario, Mario Kart Wii stays true to its roots with a parallax scrolling microsite for the game. The scrolling isn’t as evident as or in your face as some of the other parallax scrolling sites out there, but their site is almost as fun to navigate through as the game is to play!

Nike

I’ve always been a fan of Nike. They have top-notch branding and brand philosophy and it’s rare that I come across any sort of advertising or promotional material from them and wonder what they were thinking. That not only goes for web-based strategies, but print and video as well. And their Better World site is no exception, featuring a parallax scrolling interface and informing people on their earth friendly practices.

Row to the Pole

Row to the Pole is a great concept for a site. The perspective for the viewer is from the sky, so as you scroll through the site you’re passing over ice caps and having clouds pass by underneath you. The only downside to the site is that once you leave the homepage you lose the parallax scrolling feature and all you have is a plain white background.

Rastape Casa de Forro

Rastape is a fun site that navigates more like a video game than a website. There’s plenty to click on, nice graphics and an abundance of interactivity. Notice how they also incorporate the header and footer in to the design, it’s there but not in your face. Along with a little music to help set the mood, they’ve got quick links to Twitter and Google Maps, as well as their address and phone number.

David Beckham

I have a bit of an obsession with the sport of soccer. So, naturally, when I came across this tribute site to David Beckham, a player who started his career at the club I’ve loved for nearly two decades, I had a soft spot in my heart. For a single page website, this is really well executed. I think this style of layout would also work well with a designer or someone looking for a unique way to feature their portfolio.

The Moods of Norway

The Moods of Norway site is another great example of a parallax scrolling site. One of the interesting things this site has that many of the others didn’t is a horizontal scroll bar. Many of the other sites relied on the positioning of the cursor to navigate through the site. The Moods of Norway site also has text content that fades in and out as you scroll in to and out of position.

Iutopi

Iutopi.com is the best of both worlds for me. I love sites that have a theme in their vertical depth, meaning that as you scroll down the site is following some sort of theme. For example, the top of the page has a sky scene, then as you scroll down you reach land, followed by underground. Combine that with parallax scrolling, how could I not include it?

Lenovo

Rapidboot.com is another example of me getting my cake and being able to eat it too. The page starts at a high altitude and as you scroll down you get a feeling that you’re falling towards the ground. Clouds pass you by, you scroll past skydivers, on laptops, and you’re back to solid ground once you hit the bottom of the page. Overall, it’s a great theme and a fun site to scroll through.

Netlash

The Netlash site is similar to the Beckham and Iutopia site in regards to how it navigates. It’s a vertical scrolling site with background images that slide in to place over the previous image. A fun site overall, but I would have liked if they stuck to a theme of moving through floors in a building. They get close, showing the exterior, then going through a couple floors, but you hit the ground floor a couple times.

Smokey Bones

Who doesn’t like drinking beer while surfing the web? That’s exactly what Smokey Bones allows you to do as you navigate yourself through their site. Along with teasing your appetite with pictures of gargantuan burgers, and bartenders pouring pints while their hair blows in the breeze. Along with all of those features, I also liked how Smokey Bones also combined parallax scrolling with some horizontal sliders along the way.

Parallax scrolling changed the way programmers looked at video games, and now it’s changing the way developers look at websites. It will not only set your site apart from others, but will help make your site more interactive and provide your viewers with an actual experience to, well, experience. It’s just one more thing to keep in mind while brainstorming for your next project and an excellent way to keep our viewers engaged throughout their visit.

10 Footer Designs That Don’t Stink

Scott Stanton — Wed, 30 Nov 2011 19:39:59 +0000

Last week I listed some websites with the best navigation structure and how it can really add a lot of character to a website. This week I would like to cover another aspect of a website’s layout that is often overlooked, the footer. The majority of the sites I see do the bare minimum when it comes to footers, maybe an

tag with some copyright information, contact info and links to social media sites or something similar. But what if you want to go above and beyond the norm? What if you don’t want your feet to stink any more? Then I would suggest you include your footer in to the design of your page.

YoDiv

YoDiv is a fun site, not only because of the entertaining icons and artwork, but because the footer provides a wealth of free resources for developers and designers. I’ve seen this strategy of making the bottom of your page ground level, giving everything above it the appearance that it was in the sky, and by making the color below it an earthy, dirt-brown color, suggesting the footer is buried underground.

Viget

Viget utilizes their footer to give viewers an easier way to browse through archived posts or browse by specific categories. Another thing that I really enjoy about this site, and it is actually something I’ve done for clients in the past, is using a skyline at the bottom of the page. This instance is a bit different than the YoDiv site we looked at above because the bottom graphic is very similar to the header graphic, and the footer colors don’t exactly flow smoothly with the rest of the site. I do like how they utilized the footer to deliver the archive and category links though.

Inspiredology

I’ve run across this theme a couple of times, but Inspiredology was the first place I saw it. It’s a fun layout from top to bottom, but the one noteworthy thing about their footer is how they use one simple graphic to tie the entire page together. They could have left the chemistry beaker full of magic potion and the pile of books out and the site would have still been fine. But by placing that image there it ties us back in to the header at the top of the page, giving the site a whole and complete feeling.

Basecamp HQ

Basecamp HQ does a great job at sprucing up their footer by including creative icons and neatly organizing the links. One of the more interesting things I found about this footer was how they used text instead of the standard Twitter or blog icons as their links for each social media presence. This strategy doesn’t emphasize a great deal of importance on either link, as they don’t stick out like icons do, but instead the icons for the services they provide are more dominant. And surely that is what is more important to their business strategy than their social media presence.

Carol Rivello

Carol Rivello has a perfect example of social media icons in use in her footer. Her color selection flows together seamlessly and there aren’t any sharp contrasts that strain the eyes and make it hard to look at. I also like how she uses a simple graphic to add a little character to the footer of the page. It makes the footer a little taller, but without the graphic it would be just another footer and would be easy to overlook.

Branded07

Branded07 uses a few different techniques with their footer. They use an image that signifies you’re at the bottom, they’ve got links and logos galore, and what I really liked the most, a contact form. Interestingly though, I didn’t see any other way to contact them on the site. No links or separate contact page, so it could be a little difficult to spot if you were hoping to get in contact with them.

Toffeenut Design

Toffeenut Design is another fun footer. How could it not be, it has a ninja icon! Like Branded07, Toffeenut also includes an email contact form in their footer, but Toffeenut also includes a contact link in their main navigation cluster at the top of the page. There’s also an abundance of social media icons and ways to get in touch with them, their latest Twitter feed, and all that other good copyright jargon and sitemap linkage that comes standard in a footer.

Hopking Design

Hopking Design is an excellent example of maximizing minimalism. Their footer is not overly tall, it’s not so short that it’s easily overlooked, and it’s not packed full of a string of icons fighting for your attention. It delivers all the information they deem important, contact info, photo blog, and a way to join their newsletter.

Andy Simpson

I’m always fan of including photography in sites. So, naturally, when I came across Andy Simpson’s site and saw his footer had a mini-flickr feed in the footer, I was quite pleased. Along with his flickr feed Andy also includes all the basics and useful info, like how to get in touch with him, page links, a site map, his logo, and even a button to quickly jump back to the top of the page.

Bern

Bern was a bit clever with this design. By using a torn cardboard graphic as the background in every place they have some sort of navigation, it helps frame the page. You see the graphic in the header at the top of the page, just above the main navigation links, you see it down the side, and you see it in the footer. This helps pull the whole site together and keeps you from wondering if you’ve reached the bottom of the page or if there’s more content that’s still loading. I also like that they feature their logo in the footer along with all of their main navigation links. If you’ve scrolled all the way down the page it doesn’t give you the sense that you’ve seen everything there is to see, all the links just make you wonder what you should see next. The other nice thing about it is that it keeps the viewer from having to scroll all the way back to the top of the page to go to another page, it’s much easier to hit the “Back” button than go through all that scrolling or drag the scrollbar back up.

I often feel that the footer of a website is usually something that is an afterthought to designers. They plan a site and lay it all out, then get to the bottom and wonder how they can quickly and easily tie the page off. But why not include it in the design? Why think of your site as a vertical page that scrolls from top to bottom? A website has multiple pages, just like a book. So why not think of your next website more like a book, something that comes full circle at the end and returns you back to the beginning?

Web Design Dev » Inspiration

Top 10 Flash Slideshow Image Viewers

10 World Class Athlete Websites

10 Awesome Single Page Websites

10 Awesome Websites With Full Screen Background Images

10 Awesome Websites With Full Screen Background Images

Taking Super Mario Brothers to Flash

7 Fun Flash Games For Inspiration

7-Moby Dick 2

6-Fireboy and Watergirl – The Light Temple

5-The Fancy Pants adventure world 2

4-Shift

3-Liquid measure 2

2-Shell shock live

1-Raze

10 Incredible Examples of Responsive Web Design

Sony

Gravitate Design

Spark Box

Food Sense

dConstruct

Clean Air Challenge

Sasquatch Music Festival

Flexslider

The Cacao Trail

Alsacreations

10 Holly Jolly Christmas Fonts

10 Holly Jolly Christmas Fonts

Toy Train

10 Awesome Parallax Scrolling Sites

Mario Kart Wii

Nike

Row to the Pole

Rastape Casa de Forro

David Beckham

The Moods of Norway

Iutopi

Lenovo

Netlash

Smokey Bones

10 Footer Designs That Don’t Stink

YoDiv

Viget

Inspiredology

Basecamp HQ

Carol Rivello

Branded07

Toffeenut Design

Hopking Design

Andy Simpson

Bern