Put On Your Thinking Cap.

Recently I had the pleasure of working on a project called DISQY. DISQY is a video aggregator that searches the Internet for the most mentioned videos each day. It then applies an algorithm to what it finds and decides which videos are the most influential and which are spreading the fastest. The most viral videos are then ordered and placed on the homepage with the most viral video that day getting embedded right at the top. Videos can also be sorted by the most viral each day, week and month. There is also an “upcoming” page which displays videos that aren’t viral yet but are spreading more quickly than the other videos on the site and may soon make the jump to being viral.

The video pages themselves offer up cool charts that are updated each hour and show how and where videos are trending. Users on the site can then react to each video with comments and preselected phrases such as:

This video made me… cry

This video made me… OMG

Users can also submit videos to the site themselves from a choice of around 10 of the largest video sites on the Internet. This gives them the ability to gain clout on the community by finding material before other people and before the site itself finds it. Another cool feature that members of the site are given is the ability to create playlists featuring their favorite videos.

Overall DISQY is a fun site for the casual visitor or the hardcore user.

Check out DISQY

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.

I read this Tom Geismar interview on Logo Design Love today and I suggest anyone interested in logo design read it, too. Tom is truly one of the great logo designers of our time and his firm Chermayeff & Geismar, inc. is responsible for some of the most icon logos of all time including Chase, Mobil, the Rockefeller Center and my personal favorite NBC. The firm’s logos are a testament to the fact that a good logo does not and should not require the use of photoshop or illustrator filters in order to be unique.

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

One of the hardest things to do in design is to create custom typography. There are a lot of pieces that need to come into consideration and it takes a lot of talent to do it right. Having recently started to develop my own typographic skills, I was starting to get a little cocky. In those prolific moments when I find that I am starting to lose my humility I usually find that browsing Behance is a nice cure. It was there that I stumbled across these brilliant examples of typography and I figured I’d share them with you in case you hadn’t seen them. Click the images to see the whole presentations. Also, be sure to check out the rest of their behance profiles because I’ve really only scratched the surface as far as what these talented designers have to offer.

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

Difficulty level: Novice

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.