Latest blog post: 10 Epic Dribblers That You Should Be Following →

10 Epic Dribblers That You Should Be Following

by
Ericon January 9, 2012  :  2 Comments

dribbble

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 HopperHillary Hopper

Snuglug

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 SuerKerem Suer

Kerem UI

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.

TomasTomas Jasovsky

Hire me

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.

LunarisLunaris

Warhammer

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.

LarryLarry Chen

Webos

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.

DewDaniel Waldron

Winged Thing

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 HoffmanEric Hoffman

Snapper

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 OngRayz Ong

Cloud9

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.

TanyaTanya Maifat

Eco Stuff

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!

RileyRiley Cran

Smash Robot

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!

CSS container/wrapper height does not expand with floated content: CSS fix

by
Ericon December 8, 2011  :  Leave a Comment

The problem: If a parent container/wrapper is NOT floated but the children inside of it ARE floated, then the parent will not expand at it’s children do. Here’s some quick markup showing a common scenario:

     <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:

CSS Float Issue

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:

CSS Float Issue

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!

Create and convert an epub formatted book for iBooks, Amazon, etc..

by
Ericon November 10, 2011  :  Leave a Comment

Girl holding Kindle

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!

Your users are your brand’s most important asset

by
Ericon October 3, 2011  :  Leave a Comment

Over the past year I have been involved in many different discussions and meetings with the purpose of determining a company’s or product’s customer. I quickly realized that there isn’t a simple answer that can be applied across the board. However, I sometimes like to propose a different question: Who is your brand’s most important asset? More often than not the answer is simple. The users.

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

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!

What makes Virgin Airlines better than all the rest

by
Ericon September 12, 2011  :  Leave a Comment

I recently had the pleasure of flying Virgin America for the first time from San Francisco to Las Vegas. I was so impressed and intrigued by this airline that I was compelled to share my experience. So here’s what I thought of Virgin Airlines.

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.

Virgin Airlines Cabin

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.

Virgin interactive screen

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!

Creating scalable vector graphics in Photoshop

by
Ericon September 2, 2011  :  3 Comments

Lately I’ve been noticing that many designers are creating complex graphics and interfaces in Photoshop but aren’t putting any thought into scalability. So what is scalability and how does it apply to graphic design? Nowadays it’s common to port interfaces to a higher resolution, especially on mobile. This means that you can usually rest assured that whatever interface or design you create has huge potential to be scaled up in the future.

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:

Vector graphics example

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:

Scalable layer style

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!

Stuck on a programming or design problem? Take a bath.

by
Ericon September 1, 2011  :  Leave a Comment

Ever heard the story of Archimedes and King Heiro II? Well the king tasked Archimedes with figuring out if his crown was real gold without damaging it. After many sleepless nights and much mental anguish, Archimedes’ wife instructs him to take a bath to relax. In doing so he notices the displacement of the water, which he could invariable use to determine the purity of the crown based on weight/volume.

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.

The REAL way to Increase your follower count and gain exposure on Twitter

by
Ericon July 27, 2011  :  Leave a Comment

Give it a search on google and you will find a million and one articles that share their own step by step guide to success on Twitter. You will also find a ton of adverts for auto adders and spam programs >:/ If you are looking for this kind of “get followers quick” scheme then you’ve come to the wrong place. If you’re looking to actually increase your exposure and influence and actually use Twitter the way it’s mean to be used, then you’re in luck because I’m going to give you the REAL secret to increasing your follower count and gaining exposure!

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:

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!

Photoshop Brush Pack – Rough hand drawn sketched lines

by
Ericon July 8, 2011  :  2 Comments

I’ve always had a hard time finding a good brush pack for that hand drawn sketched line effect. These are great for highlights, strikethroughs and underlines. Feel free to use these for whatever you’d like!

Lines Sample

Download now!

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

The best way to contact me is through one of the networks on the left or by emailing me at
ericbieller [at] gmail [dot] com.