Design & Development Blog | Jared Lunde » Web Design

DISQY – the web’s most viral videos

Jared Lunde — Sat, 04 Sep 2010 02:52:18 +0000

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

Le Gossip – Celebrity Gossip Revisited

Jared Lunde — Fri, 27 Nov 2009 23:35:33 +0000

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.

Smart Layouts with PHP and HTML in Web Design

Jared Lunde — Tue, 24 Nov 2009 00:13:25 +0000

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 tags.

– include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:

Next let’s think about the 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 tag within it. This file will be required directly after the tag.

– include name: “body-top.php”

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.

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

Here is the rest of our body content.

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.

Web Designer Depot – Part 1

Jared Lunde — Fri, 20 Nov 2009 05:56:18 +0000

This is part one of a mini-series of blog posts that I will be referring to as “The Flaws and Delusions of Web Designer Depot”

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).

Web Design – Form & Function

Jared Lunde — Fri, 06 Nov 2009 10:22:08 +0000

I’ve coded a lot of websites for a lot of different designers and a common problem I experience with each one is something that should really be natural to them in the first place – the idea that form follows function. Most of this problem stems from the fact that they are not web developers. The most overlooked areas that I’ve noticed are those in SEO, usability and in page load time.

Web Fonts
A well-known fact about non-developing designers is that they love to use not safe for web fonts. This becomes more of a problem when they specifically request that a webpage looks exactly like their design. The truth is that no matter how you slice it, web developers are limited in options when it comes to web fonts. We shouldn’t use sIFR, because that can cause serious load time problems. Even with @font-face our hands are tied because we are limited to only free fonts due to redistribution clauses in font licenses. The last resort is to use images to replace all of the good quality content that should be on the page. An alt tag only does so much for search engines so we are really shooting ourselves in the foot in the form of Search Engine Optimization by using this method. What is the purpose of producing a website that *looks good* if no one is going to see it in the first place?

Page Titles
Another problem I have faced not only with web designers, but clients in general is that they like to use their page titles as cheesy marketing devices rather than for keyword optimization. In a perfect world, I’d like to use something like Works by Jared Lunde | Design Simplified, but the reality of the matter is that I am much better off using a page title like Logo Design & Web Development | Madison, Wisconsin because those are the key phrases that I am looking to get visits from. Again, what is the purpose of making it look good if no one is visiting?

Background Images
A major pet-peeve of mine is when I see a website that doesn’t take into account screen resolution sizes or load times with their web pages. A designer should always be aware of typical screen resolution sizes and plan accordingly. I’m also a firm believer that a background doesn’t need to be elaborate or textured and in some cases it definitely shouldn’t be. While the background may look *cool* it is entirely possible that you are in fact doing harm to the experience by a) increasing load time by a lot or b) distracting from content that a visitor should be paying attention to. I mention the former a lot because it really is the most important thing you need to consider when designing a web page. You never want to direct a visitor’s attention away from where they should be looking and with proper background usage, we can actually point them in the correct direction. For instance, you’ll see a lot advertisements in magazines where something as subtle as lines in sand can be directing your eye attention to a specific phrase on the page. It is entirely possible to harness those same techniques on a website and you should definitely consider it if you are going to be using a background image.

Javascript
One final annoyance of mine is poor use of javascript effects. Not all javascript effects are bad, in fact if used correctly they are amazing and can add a real wow-factor to the UI. Some designers just don’t know how to use it correctly, though. I’ve been on a few projects where a substantial amount of good information is hidden from a user’s view for the sole purpose of using javascript fade ins/outs. The last thing we want to do is hide something we need the user to see from their eye line. Another downfall of hiding information is that there is a possibility that hiding enough will actually start to harm your search rankings. Because of this (and because some users have it turned off) there absolutely needs to be a no javascript backstop on the page where ever it is used.

UI Design – A Positive Experience

Jared Lunde — Thu, 05 Nov 2009 08:09:11 +0000

The user interface is an integral part of a website no matter what the purpose. My job as a web designer and developer is to figure out how to make a website navigable and easy to use whilst making it look professional.

Different websites have different purposes and therefore have different requirements in the user interface. The first question I ask myself and my client when designing a web page is ultimately “What do you want the user to do next?” The question is so important, yet is often overlooked by most designers and developers. If I want them to fill out a form, how do I direct their attention to the form? If I want them to watch a video, how can I get them to do so? Knowing what you want a user to do next is important as knowing what exactly it is your website is about.

This task is much more difficult than it sounds on paper. We need to consider that the last thing we want a user to think they are looking at is spam, even if it is. Ultimately, a user wants to land on a page that is a) what they were searching for when reaching you and b) professional-looking enough not to raise any red flags. The former is most important on e-commerce websites where the goal is to sell something tangible and not look like a scam-artist while the first is a requirement across all websites. This means that the user interface includes not only includes design and content, but page titles and descriptions as well.

By taking into account the little things that affect a user’s website experience, we can ensure that the end result will be a positive one.