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

Posts Tagged ‘design’

10 Epic Dribblers That You Should Be Following

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!

Photoshop Brush Pack – Rough hand drawn sketched lines

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!

Common UI/UX mistakes that can hurt your website’s conversion

Most would agree that user experience (UX) is important to the overall prosperity of a website or web application. In some cases, though, the user’s experience can make or break a site completely. UX mistakes can affect conversion, piss off users and give your site a bad reputation for being hard to use. Here are some common mistakes that I see all over the web that directly affect customer conversion:

Unclear Mission

You would likely be surprised how many web designers don’t realize how important their mission statement is. Actually, this might arguably be the most important UX factor in regards to conversion. I mean, if a user doesn’t immediately understand what the heck your product does, why would you expect them to click around on your site and not just close the window altogether? Want to see an example of a mission statement done right? Checkout some of these examples of rocking mission statements:

campfirenow

cuphon

forrst

Hidden Login / Signup

There really is a science behind login and signup placement. Some websites even put both right on the front page:

New Twitter

Facebook Homepage

While this technique might not be right for every occasion, it really is an example of why it’s so important to grab the user without making them think too hard or click too much.

This technique may work wonders for sites like Facebook and Twitter but it might actually be a bad idea for smaller sites with less traffic. Most people have already heard of Facebook or Twitter and come to these sites with the intention of signing up. Less popular sites don’t have that luxury. Instead, it’s a good idea to use your header real-estate to grab the user’s attention with you mission statement and funnel them to the signup button.

Dribbble

Dribbble focuses on highlighting the work of it’s members to entice spectator’s and potential players to sign up.

The Funnel

I mentioned the funnel briefly but it deserves a bit more attention. Basically the goal of a web page is to take the user through a series of steps, the last if which is them signing up and becoming a conversion. A good funnel starts with a large mission statement (see the examples above). This gives the user a clear understanding, in as few words as possible, what your website is all about.

If your site is a social service, step two might be including a window into the social activity on your site. This might be a list of recent signups, comments, etc.. Having a social section on your front page lets the user know that they aren’t the only one using your website.

While most sites don’t seem to follow this trend, I believe that having an FAQ or a Learn More section on your home page is an excellent conversion tool. After all, why make the user click a link to get to these details when they are usually the best way to learn about your software or app?

Another popular conversion tool is video. It’s a hot trend right now to include a fun video right on your home page that shows how useful your service is. This only works if your video is good so please, if you don’t know video I would highly consider hiring a professional to help you out.

Here’s an example of how I might be converted to a user given a site with a proper funnel in place:

1) I take in the overall design aesthetic of the page
2) I read the mission statement, assuming it’s no longer than a sentence
3) If I am intrigued then I immediately search for a video or a learn more section near the top of the page
4) After the video ends I take a look at the activity feed on the front page and get the feeling that the site is alive with users and traffic
5) At this point I am interested in signing up so I look to the top of the site for a signup button
6) If the signup form is more than 4 fields or includes a captcha I close the page and move on
7) If the signup form has an option to use Facebook or Twitter to connect then I use that

While this certainly isn’t a blue-print for converting an average viewer into a user, it is the general path I take when making the decision to become a member of a service. A good practice might be to take a second and make a list like the one above and see what it would take YOU to sign up for your service. After all, we are all potential users.

Small but important UI mistakes

Using default input text as the label

A huge pet peeve of mine is when an input field has default text which doubles as it’s label. If you’re not sure what I’m talking about, here’s an example:

Comment Form

The problem with this is that I usually tab through form fields. However, the label automatically goes away when a cursor enters the field. Then I’m stuck with an empty field having no idea what I’m supposed to enter. This may seem trivial but most users don’t like to think when doing mundane tasks like entering in a comment. A series of potential stumbling blocks like this could cause them to abandon their comment altogether.

5 Star rating systems

It’s slowly becoming common knowledge that these rating systems are highly flawed. The problem is, when a user likes an item they will generally give it a 5 star rating. If they dislike the item they will generally give it a 1 star rating. This leaves your site with only 2 types of content. Content with a 4-5 star and content with a 1-2 star rating. Instead it’s more practical to use a simple like/dislike or thumbs up/thumbs down type of system. The results can be output as a percentage or as a star rating. In either case this yields much better results.

YouTube actually recently abandoned their 5 star rating system for a more practical one: YouTube

What are some common UI/UX mistakes that you’ve noticed?

Are there any common issues you would add to this list? Let me know in the comments section below. Thanks for reading!

Awesome UI inspiration from great UI/UX and web designers

Here are some awesome designs and UI that I have stumbled upon recently that I have found very inspiring. I’ll go into brief detail about each item and why I like it. Enjoy!

Youzee has an awesome “coming soon” page that is functionally innovative and very pleasing to look at. I can’t wait to see what cool UI their service has once they launch!

Not sure where this one is from but it is an awesome example of elegant UI controls.

Most of you have probably heard of Sofa. They are responsible for apps like Versions and Kaleidoscope. They have a firm grasp on the balance between good UX and good design. Head over to their website and check it out. You will no doubt be inspired.

Catch A Pixel has an awesome, yet simple web presence with a very eye-catching header followed my a modest content layout. Definitely check them out!

What Letout Outlet is a focus on the product itself rather than content. The design is very clean overall and offers very large photos of the product which pretty much tell you all about it without having to read or think too much. Relogik uses this same layout for all of their products so feel free to browse around and check them out!

At first glance Checkout may seem like a ripoff of Apple.com but it is actually design genius. By recreating the feel of an Apple website, the brand immediately has a trust factor among current Apple users. The design is also different enough that I wouldn’t at all call it a blatant copy. Overall a really good move in my opinion.

Free PSD – Sleek and small calendar UI for jQuery, CSS date picker

Here’s a great little calendar that I have been using in my own User Interface that is great for date pickers or flat CSS calendars. If you use it please let me know as I’d like to see what you do with it. As always this item is free for both commercial and personal use. Enjoy!

Calendar

Free UI sliders and progress bars for your interface

Here are some pretty looking UI sliders and progress bars for you guys to use in your own projects or as inspiration. These are FREE to use for both commercial and personal use. Please let me know if you do end up using them so I can see what you did with them! Thanks for checking it out!

Slider Bars

Creating a repeating website background texture in Photoshop

Prerequisite: You are familiar with Photoshop and the clone tool.

Part of optimizing your website for all browser types and monitor resolutions can include creating a repeating texture that will scale to fit any monitor size. I’m going to show you my technique for creating a texture that can infinitely repeat width-wise from a basic non repeating texture. I’m open to pointers or workarounds though if anyone out there has anything to contribute.

The starting texture

Starting Texture

This is just a standard wood texture that does not repeat. It has a lot of marks and blemishes that interfere with each other making it impractical to use this as a background.

You can see that if we try to repeat this texture to the right, we end up with quite a few issues that are fairly obvious. So here is how I deal with a texture like this.

Step 1: Cut the image in half

First thing we need to do is to create 2 layers from this image by cutting it in half. You can do this easily by selecting the Rectangular Marquee Tool in the Tools Palette. At the top toolbar you will see “Style:”. Set that to “Fixed Size”. Then, since our texture is 468×468, set the marquee to 234×468. This way, when you drag out the marquee, it will automatically divide the image in half.

With the texture’s layer selected in the Layers Palette, right click the image and select “Layer via Cut”. This will create 2 layers where the marquee was outlining.

Step 2: Flip


Now that the image is divided up into 2 separate layers, select the layer in the Layers Palette that contains the left side of the texture.

Once you have the layer selected, go to Edit >> Transform >> Flip Horizontal. Then go ahead and flip the right side horizontally as well. This will flip the left side of the image horizontally, creating our unsightly repeating texture line in the middle of the image.

Step 3: Fix the problem areas

The next thing we need to do is to blend the two sides of the texture together, getting rid of the seam. First we need to select the both of the two layers that we created (you can select both by holding ctrl as you click them). Then right click on the highlighted layers and select “Merge Layers” at the bottom of the menu.

Now select the Clone Stamp Tool from the Tools Palette. Change the brush size to somewhere between 10 and 15. The goal is to blend the two textures together as seamless as possible. So start blending the texture one area at a time. Try to sample from random areas on the image to reduce texture repeating.

Conclusion

Now you have a texture that can repeat-x seamlessly off into infinity. If you would like to make this texture repeat both x and y, repeat this tutorial but divide the image in half on the width-wise instead of height-wise. It is usually a tad more difficult, however, to make a texture repeat-x so I may create a tutorial for that later on. Please feel free to leave any comments or criticism. Thanks for reading!

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.