The quality of work on dribbble is amazing. It’s an great source for inspiration, finding talent and connecting with other designers. I’ve spent quite some time on dribbble lately and wanted to share some of the awesome talent I have found. Here are 10 amazing designers I have had the pleasure of stumbling across:

Hillary Hopper

Hillary has a unique and light hearted design style which I really dig. She uses a lot of bright colors and textures to really bring a fun vintage feel to her work. She is currently a designer at TinyCo and recently launched her new website.

Kerem Suer

Kerem is an excellent designer with knack for clean UI design and use of whitespace. He has done a good deal of both mobile and web work which is all pretty much outstanding. He has also recently launched a new website.

Tomas Jasovsky

I was pretty much forced to follow Tomas after discovering his profile on Dribbble. He employs a wide range of design styles, mad attention to detail, and a strangle-hold on color palettes. Checkout his personal portfolio to see more.

Lunaris

I’ve always loved fantasy style web art so Lunaris naturally stood out to me. His designs are uber detailed and indicate a very strong command of both design and software.

Larry Chen

Head over to Larry’s profile and you will see some great use of color along with a firm understanding of UI design, depth and spacing. His versatility as a designer makes him an immediate stand out.

Daniel Waldron

What I love about Daniel is that his interfaces and logos all have a common theme of cleanliness and simplicity. Many of his designs also have that touch of texture and pinch of vintage. I highly recommend following him on Twitter.

Eric Hoffman

Eric Hoffman is kind of a UI badass. Head over to his profile and checkout some of his mobile work. You won’t be disappointed. I also recommend checking out his website.

Rayz Ong

Rayz isn’t afraid of color. Checkout his profile for a landslide of color and creativity. His logos are outstanding and his presentation is great. I also recommend checking out Rayz on Behance.

Tanya Maifat

All I can say about Tanya is wow. This girl is an artist first and foremost and it shows in her designs. I highly recommend following her on Dribbble. Need help on a new game? Well you’re in luck because Tanya is a freelance designer. I highly recommend hiring her!

Riley Cran

I chose Riley for his amazing grasp of typography and vintage style design. Clicking through his profile is like stepping back in time. He has a ton of shots to look through, each one bawler so I definitely recommend checking him out!

Today I’ll be showing you how to make a popout login box for your website using jQuery and CSS. This is a common technique that I’ve seen and used across the web and is actually very easy to implement with jQuery.

Click here for a demo of what we’ll be building.

First we need to setup some base styles so everything looks pretty. Click here to download the base project files which we’ll be using as a starting point for the tutorial. This includes the initial HTML, CSS and jQuery files to help us get started.

If you load up index.html in your browser you will see a login box just hanging out in the layout. First thing we need to do is position this login box so that it is sitting on top of the other content on the page. We do this via absolute positioning:

#login_box {
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now the login box is sitting on top of the content in the spot that we want. Since this login box needs to not be visible until the “Login” button is clicked, we add display: none; to #login_box in style.css:

#login_box {
	display:none;
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now open up js/login.js. First thing we need to do is make this login box fade in when the “Login” button is clicked:

$(document).ready(function() {
    $(".login_btn").click(function() {
        $("#login_box").fadeIn();
    });
});

The login box will now appear when the “Login” button is clicked. However, we need to be able to close the login box by clicking the same “Login” button again. The code for this is actually quite simple:

First we create a variable for #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
         var loginBox = $("#login_box");
    });
});

Then we add a simple if/else statement to determine the current state of #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
});

Now we are able to show/hide our login box with ease. At this point the login popup box functions quite well but still has an obvious limitation. The user must click the “Login” button in order to close the login box. This box will not close by simply clicking outside of it. This functionality is a little bit tricky but is still only a few lines of code:

First we set a variable at the beginning of login.js:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
...

Then just before the end of the document ready statement we create an if/else statement which sets mouse_is_inside to true or false depending on if the user’s mouse is inside or outside of the login popup box:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
})l

Directly after that we create a function which fades out the login popup box if the user’s mouse clicks outside of the popup:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
 
    $("body").click(function(){
        if(! mouse_is_inside) $("#login_box").fadeOut("fast");
    });
});

What this does is, when a click occurs on the body of the website, we check to see if the mouse is clicking inside of the login box. If so, we do nothing, if we are outside the login box, we close it.

Click here for the project files for the final product

And we’re done! What rocks about jQuery is that things like this can be created in a matter of minutes. It’s very convenient and speeds up development time drastically! So, would you do anything different? Did I miss something? Let me know in the comments section below. Thanks for reading!

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
     </div>

The problem is that, if you float the content within the wrapper, the wrapper does not expand with it’s content:

There’s a simple fix for this. All you have to do it stick a clearing div after all of the content. This will force the wrapper to expand to the size of it’s content. Here’s an example in HTML:

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
          <div style="clear: both"></div>
     </div>

Which will yield a result similar to this:

As long as you have this invisible clearing div, the height of the wrapper is increased along with it’s content. Any boxes you place after the wrapper will come after the full wrapper block as you would expect. Do you know of another fix? Let me know in the comments section below. Thanks for reading!

I recently began working on an e-book of my own and quickly realized that this space has a lot of room for innovation and reform. First off, I had a hard time even figuring out how the EPUB format works and what it takes to create it. Hopefully this will clear some things up for you.

How does epub format work?

An ePub document is really a collection of XHTML files, stylesheets and images which are all contained together in ZIP format. It is basically like a little self contained website. This format tells the e-reader how to display the book to the user.

Here’s an example of an EPUB .xhtml file skeleton:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>Pride and Prejudice</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
    ...
  </body>
</html>

Each .xhtml file represents a chapter of the book. You can embed images, styles, etc in the document just like you would a standard XHTML document. If you’re familiar at all with HTML this won’t come as too much of a shock. If you’re not familiar with HTML then you’re in luck! There are some tools out there which help you organize your ebook visually. Be forewarned, however, they are not easy to use.

Sigil – This is a multi-platform EPUB editor that is very simple and very small. The overall user experience (as with many ebook editors) is pretty bad though. It took me an hour or so to figure out how to use it but it works well overall. The main thing I liked about Sigil is that it gives you pretty deep control over the styling and organization of the ebook. You’ll need to understand HTML and CSS at least a little bit though since you must use it for styling.

epubbud – While the user experience may be pretty rough, epubbud is one of the only websites I could find that actually had decent EPUB editing functionality. The main issue I ran into here was that their text editor would constantly mess up my formatting. It made it nearly impossible to format the book the way that I wanted to.

Calibre – I used Calibre for about an hour and then gave up. It definitely works and comes pretty highly recommended but I just didn’t have luck with it, maybe you will though!

Table of contents

The table of contents for an EPUB book is stored in a .ncx file. This file must conform to a specific format and must reference chapter files exactly.

Here’s an example of a .ncx skeleton file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
 
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
 
  <head>
<!-- The following four metadata items are required for all NCX documents,
including those conforming to the relaxed constraints of OPS 2.0 -->
 
    <meta name="dtb:uid" content="123456789X"/> <!-- same as in .opf -->
    <meta name="dtb:depth" content="1"/> <!-- 1 or higher -->
    <meta name="dtb:totalPageCount" content="0"/> <!-- must be 0 -->
    <meta name="dtb:maxPageNumber" content="0"/> <!-- must be 0 -->
  </head>
 
  <docTitle>
    <text>Pride and Prejudice</text>
  </docTitle>
 
  <docAuthor>
    <text>Austen, Jane</text>
  </docAuthor>
 
  <navMap>
    <navPoint class="chapter" id="chapter1" playOrder="1">
      <navLabel><text>Chapter 1</text></navLabel>
      <content src="chapter1.xhtml"/>
    </navPoint>
  </navMap>
 
</ncx>

Defining components of your ebook

The .opf file defines the different components of an ebook like metadata, file manifest and linear reading order. There are a lot of important sections to a .opf document.

Here’s a sample skeleton to help you understand how it works:

<?xml version="1.0"?>
<package version="2.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId">
 
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <dc:title>Pride and Prejudice</dc:title>
    <dc:language>en</dc:language>
    <dc:identifier id="BookId" opf:scheme="ISBN">123456789X</dc:identifier>
    <dc:creator opf:file-as="Austen, Jane" opf:role="aut">Jane Austen</dc:creator>
  </metadata>
 
  <manifest>
    <item id="chapter1" href="chapter1.xhtml" media-type="application/xhtml+xml"/>
    <item id="stylesheet" href="style.css" media-type="text/css"/>
    <item id="ch1-pic" href="ch1-pic.png" media-type="image/png"/>
    <item id="myfont" href="css/myfont.otf" media-type="application/x-font-opentype"/>
    <item id="ncx" href="book.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
 
  <spine toc="ncx">
    <itemref idref="chapter1" />
  </spine>
 
  <guide>
    <reference type="loi" title="List Of Illustrations" href="appendix.html#figures" />
  </guide>
 
</package>

Writing it yourself

There is always the option of writing an ebook yourself, though I don’t necessarily recommend it. Before you decide to go down this road I would encourage you to checkout some of the EPUB management apps mentioned above. If you do end up creating your own files manually, Calibre has a nice conversion feature to get your files into the proper EPUB format. I haven’t used it personally so I’m not sure how well it actually work.

The EPUB specification is actually pretty descriptive and well written so I’d certainly recommend checking that out if you are looking to write your own EPUB book manually.

Please let me know if you have any questions or other issues in the comments section below and I will try to help you out as best as I can. Thanks for reading!

How does this help?

If you are asking this question then you are missing something vital to your business’ success. Without users you have no advertisers and typically no content. This also usually means you have no revenue. Basically, you have no business.

Building for the user and thinking about pie

Keep this principle in mind as you build out your web service or product. With every decision you make ask yourself “Is this good for the user? Why?”. User-centric design is indeed on the rise but you’d be surprised how many UX and product designers are still slaves to aesthetics. Looks are nice but they are not everything. If your web app was a pie, aesthetics would be a single slice while user experience would be half the pie.

Conclusion

We truly are entering an era where the user is king. Customer service, customer interaction and user experience are becoming increasingly important in our society. This is because users, at their core, are the primary link to revenue. Users are the ones who add true value to your platform, product or service. Without them you don’t even have a business.

I also want to note that I realize this principle doesn’t apply to all products everywhere but most modern services and products would truly benefit from this user-centric mentality. So what do you think? Is the user really that important or are there other factors? Let me know in the comments section below. Thanks for reading!

The Terminal

Apparently Virgin America had been stationed in the SFO international terminal while preparations were being made for them to switch over to the domestic terminal. Luckily the terminal was ready to go when I flew out last week. Upon entering I was immediately impressed. The terminal had that modern, un-cluttered feel. The furniture and seating areas were all modern and colorful. There was even a cool looking station where you could borrow a Chrome Book for your flight and drop it off at your destination.

Uniforms

As if Virgin didn’t stand out enough, their entire crew wore a sleek and seemingly comfortable black uniform. This may seem like a small detail but I think it’s marketing genius. In the back of your mind you will always remember Virgin for all the reasons they stood out, unique uniforms included. All of these little enhancements support your overall impression of the airline and help you remember your experience.

The Aircraft

The first thing I felt once aboard was excitement. I was immediately greeted by smiling crew members who seemed excited and happy. The vibe of the aircraft is electric. Unlike other aircrafts, Virgin is modern and sexy. Purple and blue lights line the top of the cabin above sleek leather seats. In the background you can hear an upbeat techno soundtrack that’s just faint enough to support the whole vibe of the aircraft. Once you sit down you are greeted by Virgin’s interactive screen on the back of the seat in front of you. I’ll go into more detail about that next.

Inflight Entertainment

Virgin’s inflight entertainment is second to none. Among other features you can use your display to order food/drinks, play video games, watch satellite TV, and even chat with the other passengers on the plane! The system also provides a remote that doubles as a video game controller and has a full size keyboard on the back side.

Conclusion

I’m excited that there’s an airline out there that is actually trying to push the industry by raising the bar on technology and service while keeping prices competitive. It shows that Virgin’s competitors are making a choice to provide a worse experience, though that won’t work for long. Once Virgin expands to more locations they will begin to rival even the largest airlines thanks to their amazing service and dedication to technology and experience. What do you think about Virgin airlines? Was your experience as good as mine or worse? Let me know in the comments below and thanks for reading!

The problem

You create this amazing design for an Android app but three months down the road, you want to port it over to iPhone with support for Retina display. You have two options. Let the hardware scale up the graphics, resulting in some extremely blurry sprites or remake the app from the ground up at a higher resolution.

The solution

I thought it was more common knowledge among the design community but I’m noticing more and more that it actually isn’t. Photosho has some very good support for shapes using paths. This isn’t really true vector since the shapes are still sitting on pixels but the shapes are scalable.

Not sure what I mean? Here’s a fancy graphic:

You’ll notice that the first circle was rasterized and then scaled up, resulting in blurry edges. The second circle was kept vector and scaled up, resulting in smooth edges. Now imagine this was a sprite for an original iPhone game that you are now porting to Retina. Instead of recreating the sprite you can simply scale it up without losing any quality.

Scalable layer styles

All too often I see a designer using a rasterized layer in place of a layer style. One important thing to understand about layer styles is that they are scalable. Shadows, gradients, strokes, etc. can all be scaled up without any quality loss.

Here’s another fancy graphic showing what I mean:

Notice that the top example, which uses rasterized layers for the effects, looks more pixellated the larger you make it while the bottom example, which uses layer styles for it’s effects, is completely scalable.

Conclusion

I understand that sometimes it is necessary to use rasterized layer styles for those nice subtleties and effects. But it really is to your advantage to use layer styles and vector shapes when at all possible. You never know when you might need a higher resolution version of your graphic or interface and it’s nice to be able to easily scale up a few shapes and call it done.

What do you think? Have you ever needed to scale up a design that was completely made up of rasterized shapes? Or is it not worth the extra work to use layer styles and shapes? Let me know in the comments section below. Thanks for reading!

The moral of the story is clear. Sometimes the most valuable work you do is done while relaxing and turning your brain off.

I cannot count the times that I’ve been glaring at my screen for hours trying to solve some seemingly simple programming issue or design problem. I eventually, reluctantly, pull myself away from the problem out of frustration, usually to sleep, eat, or just turn my brain off. And, like clock work, once I give it another go the problem is usually solved within 5-10 minutes. The important thing I take away from this is that some of our most valuable work happens while we’re not even at the computer. Sometimes we are more constructive eating dinner or taking a shower than we are toiling away at a computer.

So the next time you find yourself up against a wall when faced with a coding or design problem (or any other problem, really) take a bath, go out, take a nap, eat some dinner. For every problem there is at least one solution and sometimes the easiest way to find the solution is to stop looking.

Overall the interface doesn’t have many stumbling blocks. The whole thing works as expected and has obviously borrowed many ideas from iTunes, which is fine in my book. Combine Spotify’s predictable user experience with some really cool social features and you have an awesome music streaming service. I predict that Spotify will be around for a long time as a viable alternative to other music services like Pandora and Grooveshark.

Search

The first thing I noticed was the overall organization of the search results. It feels a lot like itunes but with less clutter. After all, you are essentially searching your own personal library of music when you search Spotify, so it doesn’t need to be too complex.

It is also very easy to organize the search results based on popularity, album name, etc, making it really simple to add new music to your library. And, of course, you can drag-and-drop songs to your playlist, send them to a friend or share them on your favorite social network.

Awesome Social Features

Friends

This is where Spotify really shines. Most of the social features of Spotify are pretty simple, but that’s what makes it so great. Connect to Facebook and you will instantly be greeted by a list of your friends who use Spotify.

Sharing Music

Sharing music with your friends is easy and intuitive. Simply drag-and-drop a song on to a friends name to share your favorite tunes with them! This sends the track directly to their inbox.

It is also really easy to share music on your favorite social networks like Twitter & Facebook. Select any song on Spotify and hit the share button near the song details pane at the bottom left.

Inbox

My favorite feature is the inbox. It allows you to send new artists/tracks to a friend with only a few clicks. Your inbox sort of works like a playlist. The music there is similarly organized and can be drag-and-dropped to your library, new playlists, etc..

Collaboration

Spotify allows you to create a playlist and collaborate with a friend to determine the contents. This is a fun way to share new music with a friend. All you have to do is right click a playlist and select “Collaborative Playlist”.. couldn’t be easier!

Link Sharing

Every song on Spotify has a link that can be shared. This is a great way to turn other non Spotify users on to a great song and get them signed up!

Mobile

Since I’m not a premium subscriber I haven’t had much experience with Spotify’s mobile app but. So far, though, what little time I have spent with it has shown me that, overall, the interface is simple and seems fairly easy to use. Once I take the plunge and become a premium subscriber I will be sure and do a write up about my thoughts on their UI/UX.

The Bad

One of the only real complaints I have is it seems that about 90% of the artists I search for are absent. And while some artists exist on Spotify, they don’t always have the album you’re looking for. However, the positives definitely outweigh the negatives here and I’m sure will only get better with time.

Can’t play track

Recently, Spotify has been suffering from a terrible bug. While shuffling through songs, you would be presented with this error. It even appeared when Spotify attempted to play its own ads! The error was such a stumbling block that I was preparing to pack up and leave Spotify. Luckily it looks like they have managed to fix the bug.. at least for now.

So what are your thoughts on Spotify? Have you had a good or bad experience so far? Let me know in the comments section below!

Twitter is meant to build relationships

The minute we start looking at Twitter as a “marketing tool” we lose sight of what the service really is. If you use Twitter purely for marketing your product, then, I can tell you with confidence you will do nothing but piss people off and drive them away.

One very important thing to understand is that you should never close too early. What do I mean by that? Well, whether you are looking to gain more exposure for your product, brand, or even your own name, you are trying to close someone. You are trying to sell them on something. Even if “closing” simply means converting them in to a unique visit to your blog. Here’s an example of closing too early:

“@whoever hah that’s true, say if your in to cars then you should check out my auto blog over at www.whatever.com! I bet you’d love it!”

Most twitter users will go running for the hills at the site of this tweet. Can you guess what the first thing that runs through the user’s mind is? “SPAM!”. That’s right. The same feeling they get when they think they’ve gotten a comment on their blog but it’s actually just some joker faking interest, hoping to farm links to his own site. So, please don’t do this.. you will only hurt yourself.

Want to know more about this? Talk to Gary Vaynerchuk (@garyvee) on Twitter or grab his book the Thank You Economy. Gary started out with 0 followers on Twitter, just like everyone else. The way he amassed his faithful following was by building a relationship with his potential customers instead of just trying to stuff wine specials down their throats.

So, instead of responding immediately with a link to your product or website, try to help the user. Or, at the very least, engage in conversation and learn something about them! If they like what you say then chances are they will checkout your profile and find your website all by themselves!

Engage!

Engaging with others is key. No one wants to follow an empty stream that gets updated once a week. So join the conversation! There are a ton of Twitter clients that can help you stay connected to the conversation. Here a few good programs to check out: HootSuite (my favorite!), TweetDeck, Seesmic.

Find some keywords that interest you and monitor them. If someone says something that you are interested in then engage with them! Get in the discussion and make friends! For those of you who care about the numbers, this alone will increase your follow count drastically.

HootSuite is my weapon of choice and is a great way to keep tabs on my different Twitter feeds:

Follow the people who interest you the most and engage!

Head over to wefollow and find the greatest influencers who align with your interests and follow them. Many of them will openly interact with other Twitter users so get in the conversation and talk to them! Every time they mention your name in an @ reply you are gaining exposure and, not to mention, making friends!

Lists are a great way to keep all of your follows organized. Most of the Twitter clients can turn these lists in to a separate stream so you can easily monitor them.

Follow Friday

Follow Friday is a fun way to recommend people for other Twitter users to follow! It’s a great way to establish connections and to make your followers very happy!

The problem, though, is that most users don’t understand the proper way to use Follow Friday. Here is an example of what not to do: “#FF @ericbieller @mattboyd @davidcc @driklyn @garyvee Thanks guys!”. This doesn’t give anyone a reason to follow these users. It really has become equivocal to spam and is currently running wild on Twitter.

So what’s the proper way to execute a Follow Friday? Simple. The point is to give your followers a reason to follow a specific person. So just do that!: “#FF @davidcc because he is a great artist and has some really strong opinions!”.

Conclusion

For those of you looking for the secret technique to gaining thousands of followers over night, keep searching. Besides, followers gained through those techniques are low quality followers who are only looking for followers themselves! Not to mention most of them are spam bots!

The key here is simple: engage. If you create value to for other people then they will follow you. The simplest way is to just put out meaningful content. If you remember to do that and you stay engaged and become part of the conversation then you will see you numbers and exposure rise very quickly!

I’ll leave you with some proof. I employed the techniques mentioned above for the last few months and here is my follower graph:

The bottom line is, it works. So what are you waiting for? Get in to the conversation! And if you have anything at all to add please let me know in the comments below. Is there anything I’m missing? Do you have a secret of your own? Let me know!