When I was designing Make A Dare, I really wanted to highlight the major features and let the new user know what they were in for right away on the landing page. On its homepage, I put in a big banner the general concept of the site.

Watch – Check out the crazy things our members are doing everyday!

Join – Why just sit there when you can be a part of Make A Dare?

Dare – Got something you want to see? Dare someone to do it!

Vote – Like what you see? Hype it! Think it’s lame? Diss it!

Compete – Earn streetcred by completing dares and impressing your friends and fans.

Beneath the banner I placed a large featured video section to give a general sense of the type of dares one could expect to see/complete on Make A Dare. This is followed by a featured user and the most popular dares on the site. Upon seeing all of this, I believe it is immediately recognizable just what kind of a fun, addicting site this can be.

The second likely landing page was the individual dare video page. On this page we see clearly in the title what the dare is, how much streetcred has been earned so far and who completed the dare. We also have social sharing buttons in the title section. On the right side we put a section for “more about the dare” which explains the dare more in depth in case it wasn’t clear from the title, as well as a section for what the user had to say about the dare and which other people had completed the dare previously. There is also a related media section at the bottom of the page which encourages deeper site navigation for a new user and fuels addiction to the site.

Although typically referred to as “Jackass meets YouTube,” we really wanted to emphasize in both the design and concept that this was not just a site to show how much pain you could withstand, but was also a site about how much fun you can have out in public or in your own bedroom. In reality, the dares range from the funny, humiliating, gross, off-the-wall, to painful. Because of this, the design really stays away from being really crazy and all over the place and really sticks to clean and fun.

Sign up at Make A Dare and find out for yourself just how fun and addicting this new social network is.

Last weekend I had a really interesting project. I redesigned and developed an existing site called MakeAGif.com to make it more user friendly and to give it a nice boost in traffic. MakeAGif is a clever site that was started by my favorite partner in crime, Troy Osinoff, that lets users create an animated .gif online out of still images they have on their computer in just 3 easy steps. The main problems with the old version were that it was hard to figure how to make a gif and once you had made it you were redirected to a page that was only temporary. Check out the old site by clicking the picture to the left.

With the new redesign, there are clear steps laid out to animating your gif and the form options are much easier to use. The script used to create the gif is a lot more fast and efficient now, as well. Once your gif is uploaded, instead of being redirected to a temporary page, you are redirected to a “Share Page” where you can link your gif to your blog, website, facebook and twitter pages.

Along with improving the UI and speed, I was able to implement some new features to the site. The most notable is the photo booth which allows you to take pictures directly from your webcam on the website and create a gif from from them instantly. I also had the site translated into Spanish and created a sister site called Animados Gif to be more user friendly to our Spanish-speaking traffic.

Since implementing the share pages and other features, traffic on the site has almost doubled in less than 3 days, with more people sharing and hosting their gifs right on Make A Gif, rather than uploading them elsewhere and sharing. Be sure to check out the redesign and to use the photo booth. Trust me, it’s addicting.

One major problem a user experiences when trying to stay on top of celebrity gossip on the Internet is that most celebrity news sites have a lack of direction and clear organization. Le Gossip aims to change all of that by striving to deliver better information on a more organized platform.

This quick project was the brainchild of my business partner Troy Osinoff and myself. Designing the Le Gossip brand was far from easy. We did extensive research on the pros and cons of typical celebrity news sites, took the typical headlines and photo albums and essentially made the path to information a more concise and easy for the visitor. The site is scheduled to hit the web early next week.

Logo Design Process
We wanted to position the site as being more MTV-cool and less TMZ-cheesy. The logo itself was made to appeal to young women and teens. It is clean and simple, but rough in a way that makes it look like Zac Efron’s hair when he wakes up in the morning. Here is the grid representation and kerning model for the logo:

Earlier versions of the logo I did seemed a little bit too kids-boppish and I think that this one does a really good job at staying more age-neutral, yet hip.

Further reading on Chermayeff & Geismar can be done on this article from Logo Design Love and this article from AIGA.

Tube by Julian Hrankov

Ajeva by Julian Hrankov

Forza by Cris Labno

Badona Typeface by Oguzhan Ocalan

Practicum by Lapin Design

Armenian Foods by Haik Avanian

Design Works by Jesse Kaczmarek

Koenig Architektur by Muggie Ramadani

Well there you have it. I think that much can be learned by merely observing and studying the brilliance of others and I think that this group of designers did a wonderful job of teaching. Not have they taken me down a peg or two, they have managed to make me extremely jealous and to inspire me – a rare thing.

Designer Credits: Cris Labno, Julian Hrankov, Oguzhan Ocalan, Muggie Ramadani, Jesse Kaczmarek, Lapin Design, Haik Avanian

Honestly anyone with knowledge of HTML can do this and trust me it will save you loads of time in the long run.  The main idea behind this structure is that anything that is going to be on more than one page in your website is going to be called through a php include.  The reasoning behind it is that if you ever plan on updating the design or structure of your site, you’ll be able to do so much quicker through this method because instead of updating each page individually, you’ll only have to update one file.  It is also a wonderful solution because of how clean your markup will look.

The first thing we want to do is map out the areas that we are going to be using on every page on our site.  Let’s start with the information between our <head> tags.

<head> – include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/global.css" />
<script type="text/javascript" src="/js/global.js">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Development Blog RSS" href="http://www.jaredlunde.com/blog/feed/" />

Next let’s think about the <body> of our document. Since I like to keep similar page structure on all of my sites for easier user navigation, I’m going to include a file that has the <body> tag within it. This file will be required directly after the </head> tag.

<body> – include name: “body-top.php”
<body>
<div class="main">
<div class="content">

Now that I have my main page structure set in body-top.php, I’ll want to include a file within body-top.php that takes care of the header portion of my website.

Header & Navigation – include name: “header.php”
Within header.php, we’ll keep our markup for our logo, navigation, search bar, etc. Anything that will be in the header of every page on your site.

If you have a sidebar that is constant on your entire site, it’d be a good idea to include that as well, but for the sake of length I’m only going to include a footer in this example.

Footer – include name: “footer.php”
The footer is where we will close our body, html and set structure tags. You may also want to include a footer navigation or copyright information in this file as we did with header.php.
</div>
</div>
</body>
</html>

So what does this look like when it is all pieced together into a document?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
<meta name="description" content="An example of a well-structured HTML layout" />


<?php require('head-constants.php'); ?>


</head>


<?php require('body-top.php'); ?>


Here is the rest of our body content.


<?php require('footer.php'); ?>


It’s looks clean and pretty doesn’t it? What’s great is that we can now spend 10 minutes updating all of our pages instead of 10 hours or having to deal with the horror of a massive find/replace.

I don’t get particular enjoyment out of pointing out the flaws in others, but in this case it is so worth it.  For over a year, WebDesignerDepot (Web Designer Depot) has been handing out terrible advice and ripped off posts to its users.  Their articles lack attention to detail, sense, and quality of any kind.

Perhaps the funniest post I read of theirs was one that they did on “Coding for Speed and Quality”.  I say it is funny because if they can’t even control the speed at which their own website loads and is presented (it is slow and looks like someone threw up on the header – also lacks any navigation whatsoever) why in the world are they writing an article about it?  The site (uncached) weighs an incredible 1642.3KB, with a cached weight of 118.3K and all the while making an unprecendented 160 HTTP requests.  The entire site took an astonishing between 22 and 29 seconds for me to load uncached and between 14 to 20 seconds cached.  Maybe I’m nitpicking, but if I’m not on a 56K modem and a site is taking that long for me to load, someone is doing something very very wrong.

The worst part of all of this is that the Web Designer Depot actually has people who drink their kool-aid on a regular basis.  Their following is over 85,000 on twitter and they sport a cool 4,500 Alexa ranking.  You get what you pay for I guess.  At least I assume that’s how they did it – paying users at digg to get their articles to the front page.  There is no other possible way that intelligent beings would ever digg or distribute their drivel.   I suppose it’s easy from there, you’ve got your name in the ring and you become a hobby for beginner and know-nothing web designers and developers who are now doomed for eternity (or at least until they find a better blog).

How do I use it? It’s simple! Simply visit the link above and press the “Lay it on me baby!” button. That’s it. Don’t like it? Click it again and presto change-o you’ve got a new one! Careful, though, some may already be in use! Wouldn’t that be a drag.

Minima is my under construction Logo Design Portfolio where I will showcase the design elements of my job in a more in depth and creative way than is possible on this site.

The most important thing with the minima logo was to communicate the name in the most appropriate (minimal) way, while still producing something that was unique and memorable. I knew right away that I wanted to do a custom logotype. Here is a grid representation of the logo:

I like using grid representations in this manner because it really helps you see minute details or inaccuracies you might not see with the naked eye. As you can see, by using a lowercase “a” instead of an uppercase “A” the logo is much more cohesive and the whitespace is more consistent throughout. Not only does the lowercase “a” balance the logo better, it also made the logo a touch more unique.

My inspiration for the style of “a” that I used was Chalet Paris 1960 which actually showcases my favorite “a” in typography. Here are side by side comparisons between the minima “a” and the Chalet Paris 1960.

The major similarities between the two reside in the bowl where the curves are nearly spot on. The only in your face difference is in the spur where I decided to keep it straight to maintain consistency in the type. There are maybe more similar “a’s” out there, but like I said, Chalet’s was where I drew my inspiration from.

The end result of this logo ended up being everything that I wanted it to be. It is simple, memorable, minimal.

Frank O’Driscoll
E-Revenue Project Manager
American Cancer Society
Eastern Division, Inc.