NBA Internship Program offers college students an exciting opportunity to use their skills and classroom learning within a national sports environment. Imagine having a real job experience and being able to learn all about the NBA at the same time.

Students must be juniors or seniors already attending a U.S. accredited college or university, first and second-year graduate students, and law students. Internship positions are located either in New York City (Manhattan) or Secaucus, New Jersey. Each office will have different positions available, and students will be matched to a position based on their skills and experience. 

Interns will not be fetching coffee for other office employees. They will get hands-on experience in their field and learn how the NBA League Office operates. The internship is 10 weeks long and is offered every summer; interns work 40 hours a week. Students will work and learn, but also be able to attend NBA events and other activities.

Students may apply online for internships in marketing, communications, human resources, information technology, business, media, events and much more. 

For more details, visit 

http://careers.peopleclick.com/careerscp/client_nba/external/gateway.do?functionName=viewFromLink&jobPostId=3896&localeCode=en-us

I agree with these general guidelines from Dudley Storey. Funny how these general-purpose length measurements have fallen into to some pretty specific niches.

Direct Link to Article — Permalink

Which CSS Measurements To Use When is a post from CSS-Tricks

The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.

My first intuitive guess at doing this would be like this:

/* Warning: this doesn't work */
    .tinted-image {
      background: 
        /* top, transparent red */ 
        rgba(255, 0, 0, 0.25),
        /* bottom, image */
        url(image.jpg);
    }

Unfortunately, that's not valid. I'm not entirely sure why. A while back when I whined on Twitter about it I got a variety of ideas/reasons/excuses. None of them rang quite true for me. It's true you cannot comma-separate background-color, but I don't think that's relevant here as I'm comma separating the background shorthand not specifically background-color (not to mention ordering those values the other way around works fine).

I suspect the real reason that was decided is because it would be too easy for authors to screw up. background: green, url(image.jpg); would "fail" in a sense in that it would just flood the background green. Forcing the color to be last makes the color kind of like a "fallback" rather than a layer like any other.

Unfortunately we also can't simply leave the color at the bottom and adjust the opacity of the image to allow some of that color to come through, because background-opacity isn't a thing. (Although you can kind of fake it.)

There is a way though!

Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-images and thus not subject to the rule where they can't come first (be top) in the stacking order.

/* Working method */
    .tinted-image {
      background: 
        /* top, transparent red, faked with gradient */ 
        linear-gradient(
          rgba(255, 0, 0, 0.45), 
          rgba(255, 0, 0, 0.45)
        ),
        /* bottom, image */
        url(image.jpg);
    }

See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen

Hey, whatever works, right?

Tinted Images with Multiple Backgrounds is a post from CSS-Tricks

Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly, but they’re not always easy to create.

A great way to get started with charts is with Chart.js, a JavaScript plugin that uses HTML5′s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more, incredibly easy.

To see how to use chart.js we’re going to create a set of 3 graphs; one will show the number of buyers a fictional product has over the course of 6 months, this will be a line chart; the second will show which countries the customers come from, this will be the pie chart; finally we’ll use a bar chart to show profit over the period.

Setting up

The first thing we need to do is download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>Chart.js demo</title>
 <script src='Chart.min.js'></script>
 </head>
 <body>
 </body>
</html>

Drawing a line chart

To draw a line chart, the first thing we need to do is create a canvas element in our HTML in which Chart.js can draw our chart. So add this to the body of our HTML page:

<canvas id="buyers" width="600" height="400"></canvas>

Next, we need to write a script that will retrieve the context of the canvas, so add this to the foot of your body element:

<script>
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>

(We can actually pass some options to the chart via the Line method, but we’re going to stick to the data for now to keep it simple.)

Inside the same script tags we need to create our data, in this instance it’s an object that contains labels for the base of our chart and datasets to describe the values on the chart. Add this immediately above the line that begins ‘var buyers=’:

var buyerData = {
 labels : ["January","February","March","April","May","June"],
 datasets : [
 {
 fillColor : "rgba(172,194,132,0.4)",
 strokeColor : "#ACC26D",
 pointColor : "#fff",
 pointStrokeColor : "#9DB86D",
 data : [203,156,99,251,305,247]
 }
 ]
}

If you test your file in a browser you’ll now see a cool animated line graph.

Drawing a pie chart

Our line chart is complete, so let’s move on to our pie chart. First, we need the canvas element:

<canvas id="countries" width="600" height="400"></canvas> 

Next, we need to get the context and to instantiate the chart:

var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);

You’ll notice that this time, we are going to supply some options to the chart.

Next we need to create the data. This data is a little different to the line chart because the pie chart is simpler, we just need to supply a value and a color for each section:

var pieData = [
 {
 value: 20,
 color:"#878BB6"
 },
 {
 value : 40,
 color : "#4ACAB4"
 },
 {
 value : 10,
 color : "#FF8153"
 },
 {
 value : 30,
 color : "#FFEA88"
 }
]; 

Now, immediately after the pieData we’ll add our options:

var pieOptions = { segmentShowStroke : false, animateScale : true } 

These options do two things, first they remove the stroke from the segments, and then they animate the scale of the pie so that it zooms out from nothing.

Drawing a bar chart

Finally, let’s add  a bar chart to our page. Happily the syntax for the bar chart is very similar to the line chart we’ve already added. First, we add the canvas element:

<canvas id="income" width="600" height="400"></canvas> 

Next, we retrieve the element and create the graph:

var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);

And finally, we add in the bar chart’s data:

var barData = { labels : ["January","February","March","April","May","June"], datasets : [ { fillColor : "#48A497", strokeColor : "#48A4D1", data : [456,479,324,569,702,600] }, { fillColor : "rgba(73,188,170,0.4)", strokeColor : "rgba(72,174,209,0.4)", data : [364,504,605,400,345,320] } ] }

As you can see, the data is largely the same, except this time we’ve chosen to use RGBA to specify our colors which allows us to add transparency.

Conclusion

You can view a demo of this in action here, and if you prefer copy and paste, here is the full script:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>Chart.js demo</title>
 <!-- import plugin script -->
 <script src='Chart.min.js'></script>
 </head>
 <body>
 <!-- line chart canvas element -->
 <canvas id="buyers" width="600" height="400"></canvas>
 <!-- pie chart canvas element -->
 <canvas id="countries" width="600" height="400"></canvas>
 <!-- bar chart canvas element -->
 <canvas id="income" width="600" height="400"></canvas>
 <script>
 // line chart data
 var buyerData = {
 labels : ["January","February","March","April","May","June"],
 datasets : [
 {
 fillColor : "rgba(172,194,132,0.4)",
 strokeColor : "#ACC26D",
 pointColor : "#fff",
 pointStrokeColor : "#9DB86D",
 data : [203,156,99,251,305,247]
 }
 ]
 }
 // get line chart canvas
 var buyers = document.getElementById('buyers').getContext('2d');
 // draw line chart
 new Chart(buyers).Line(buyerData);
 // pie chart data
 var pieData = [
 {
 value: 20,
 color:"#878BB6"
 },
 {
 value : 40,
 color : "#4ACAB4"
 },
 {
 value : 10,
 color : "#FF8153"
 },
 {
 value : 30,
 color : "#FFEA88"
 }
 ];
 // pie chart options
 var pieOptions = {
 segmentShowStroke : false,
 animateScale : true
 }
 // get pie chart canvas
 var countries= document.getElementById("countries").getContext("2d");
 // draw pie chart
 new Chart(countries).Pie(pieData, pieOptions);
 // bar chart data
 var barData = {
 labels : ["January","February","March","April","May","June"],
 datasets : [
 {
 fillColor : "#48A497",
 strokeColor : "#48A4D1",
 data : [456,479,324,569,702,600]
 },
 {
 fillColor : "rgba(73,188,170,0.4)",
 strokeColor : "rgba(72,174,209,0.4)",
 data : [364,504,605,400,345,320]
 }
 ]
 }
 // get bar chart canvas
 var income = document.getElementById("income").getContext("2d");
 // draw bar chart
 new Chart(income).Bar(barData);
 </script>
 </body>
</html>

The great things about Chart.js are that it’s simple to use and really very flexible. Plus, once you’ve mastered the basics here, you’ll discover that there are tons of options listed in the documentation.

Have you used Chart.js? Do you prefer a different solution? Let us know in the comments.

SlickGallery: An Elegant Photo Gallery Script – only $14!

Flat design is the most popular trend in UI design right now.

Superficially, flat design is simple:

1. Don’t use gradients, shadows and textures
2. Use simple shapes, bold colors and clear typography

I believe that a few prominent flat designs sacrifice usability and best practices such as consistency for the sake of aesthetics — and this is what I’ll primarily be talking about. But first, I’d like to discuss flat design in a historical context.

Flat Design’s Origin

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."

- Antoine de Saint-Exupery

Skeuomorphic Design

Flat design is a reaction to its predecessor, skeuomorphism.

Skeuomorphs are user interfaces designed to look like real-world objects.

For example, the UI below resembles how a real-world audio compressor looks and functions:

Source: Klaus Göttling

Skeuomorphs started in the 1980s as a way to ease people into computer interfaces.

Up until recently, Apple was skeuomorphism’s biggest champion, embracing the design philosophy in all of the company’s UIs and guidelines.

For instance, the old Apple Safari icon is instantly recognizable as a compass — it has shadows, gradients, and fine aesthetic details compared to its flat counterpart:

The Purpose of Flat Design

Flat design as a design approach strips away all the aesthetic frills, leaving behind only the essentials.

In a way, I see flat design as just another name for modernism, defined by a generation of UI designers who grew up with computers and have found skeuomorphism to be unnecessary.

No more gradients, drop shadows, and textures. Just beautiful typography, simple icons and shapes, vibrant colors to help establish visual hierarchies, and, most importantly, a deeper attentiveness on ease-of-use.

Flat design is driven by a desire for a more efficient and user-friendly interface.

That’s the idyllic purpose of flat design, but the current reality is so disconnected from it.

Issues with Flat Design

While there are plenty of great examples of flat design, there are also plenty of bad ones.

iOS 7′s UI Inconsistencies

Before the mobile operating system’s debut, rumors flew around: With new leadership from Jonathan Ive, iOS 7 was finally going to ditch skeuomorphic design and go flat.

And it did.

Take a look at the comparison below when iOS 7 was first announced:

Source: designmodo.com

Skeuomorphic elements are gone. No more highly-stylized icons and faux wood trim.

What’s wrong with iOS 7?

It’s inconsistent.

The icons look glaringly out-of-place, as if they were designed by different teams (and they probably were).

Some icons have gradients. Other icons don’t.

Of the icons that do have gradients, sometimes the gradients go in different directions:

Line thicknesses vary.

Symbolic representations of some icons are oversimplified and are sometimes meaningless. The Game Center icon, for example, is a group of colorful, glassy-looking circles:

What does the Game Center icon mean? How does it relate to gaming? If there was a symbolic meaning behind the icon, it’s too obscure for most people to know, thus making it a poor metaphor.

Other symbolic representations are overdone. The Newsstand icon, for example, is too complex and fine-detailed compared to its neighbors:

Consistency is crucial in creating a user-friendly design. Flat or not.

Usability Issues That Come From Being "Too Flat"

Okay, so no gradients, no textures, no drop shadows.

Keep things consistent.

And try to make it look modern.

That’s it? Piece of cake.

But there’s more to it than that.

Like any good UI, a good flat design should make usability the topmost priority.

Flat design aesthetics need to go hand-in-hand with usability. And if a decision had to be made between aesthetics and user-friendliness, the latter should be prioritized over the former.

Functionality has been neglected in some UIs that have adopted a flat design. Take Windows 8 for instance:

Source: mobiletechworld.com

Window 8′s UI is radically flat. Its brave use of bold colors and tiled Modern UI design are fresh, positive steps for the Windows brand.

But its main issue is usability.

With Windows 8, Microsoft tried to apply a tablet experience onto a desktop.

It didn’t work.

Window’s flat Modern UI (formerly known as Metro UI) is not intuitive for someone using a keyboard and mouse. According to Soluto’s Monthly Insights Report, between 44-60% of all Windows 8 users (desktop and tablet) are opting for the old interface over the Modern UI option.

Though flat design is supposed to make things easier, many people still find the old interface more user-friendly.

Jakob Nielsen ran usability tests on Windows 8 and noted several issues with its UI. The main issue Nielsen found was how the operating system’s flat design made it hard for users to know if things are clickable or not.

Source: nngroup.com

While the new Windows 8 icons are elegant and clean, they don’t appear actionable. Without a gradient, shadow, or just something that makes them distinctive, it’s hard to tell what’s clickable and what’s not.

Flat design can sometimes be so flat that it hurts usability.

If a user interface is "too flat", actionable elements can be lost in a sea of flat elements that all look the same.

There are even some concerns with iOS 7′s Control Center being "too flat":

Without any good visual hints, it’s not obvious which objects you can interface with.

Solution: Almost-Flat Design?

So how do you remedy issues with flat design? Almost-flat design.

Almost-flat design is an approach that chooses flatness only when it improves usability. It doesn’t categorically say or imply that gradients and drop shadows are evil.

Almost-flat design permits subtle shadows and gradients to create dimension, distinction, visual hierarchies, visual cues, and boundaries.

Gmail’s Almost-Flat Design

Clean and consistent, Gmail’s recent UI redesign is easy on the eyes. It’s clear that Google’s designers love flat design — they’ve been moving towards flatter and flatter UIs as of late.

Source: idownloadblog.com

However, hover your mouse over a button, and you’ll see the hover state has a slightly different color gradient as well as a useful tooltip:

These subtle aesthetic effects give users visual cues that the object is important and that it is actionable.

Users instantly recognize buttons in Gmail as clickable or tappable without the need for over-the-top embellishments ala skeuomorphism.

Crucial interface elements are easily accessible. There’s no need for twenty buttons to be visible at once because Gmail’s UI employs progressive disclosure intelligently:

The Future for Flat

Gmail’s interface is exactly what flat design is supposed to be:

• User-friendly
• Consistent
• Clear

iOS 7′s and Windows 8′s versions of flat design often sacrifice usability and well-established design best practices for flatness.

To be fair, both Apple and Microsoft are listening to criticism.

Before iOS 7′s release, Apple addressed some usability issues such as updating the slide to unlock function with an arrow pointing to the right to gives users a better visual cue, and they have tweaked the color gradients for the Safari and Mail icons so the operating system’s app icons are more cohesive.

And Microsoft just released Windows 8.1 which will allow users to bypass the Modern UI interface entirely, going straight to the desktop version instead.

Ultimately, good design — whether it’s flat or not — should aim to address problems for its users through clear visual communication, efficient design, and user-friendliness.

Related Content

• Lessons We Learned from Our Biggest UX and Design Mistakes
• 5 Reasons Why Metaphors Can Improve the User Experience
• Improving Usability with Fitts’ Law
• Is It Time to Rethink Website Navigation?
• Related categories: User Interface and Usability

About the Author

Rick Debus is the founder and CEO of Signazon.com, a national e-commerce printing company based in Dallas, Texas. With over 15 years of web design and development experience, he’s passionate about bringing unique and innovative solutions to the Internet. Connect with him on Google+.

The post When Flat Design Falls Flat appeared first on Six Revisions.

When someone lands on your website for the very first time, what happens?

That’s the most critical point of conversion for any website: That moment when a new visitor takes their first glance at your page and decides whether or not they’ll stick around a little longer to learn more.

Hopefully they do. But what then? Are they engaged and compelled to go deeper and take the next step to subscribe, get in touch, or purchase something?

The goal of just about any website you design is to build traction with your target audience. Whether you’re designing a site for a client, or you’re designing one for your own startup — whether it’s a site for a product, an event, or a service — if it’s not building traction, then it’s not helping your business move forward and grow.

In this article, I’m going to share a few simple, but important tips to help you design a site that performs its primary duty: Build traction with your audience and convert them to customers.

Know your target audience

Hopefully, you know who your website’s intended target audience is. And hopefully it’s very specific.

For example, rather saying your product is targeted at small business owners, narrow it down even further: “It’s a product for small business owners with 10 to 20 employees working primarily within software as a service.”

Don’t be afraid to niche down to the point you’re excluding periphery users. You’re better off focusing your message on your core audience, as this will help you resonate with them. The others will find ways to fit your product to their use if it really provides the solution they need.

But knowing who your audience is is only the first step. You also must know them. What do they care about? What is challenging them? What are their goals? How can you produce a “win” for them?

Through in-depth audience interviews, and keeping tabs on the common questions that are raised — either through support, your contact form, or in person — you can get to know your audience on a deep level. This will help you craft a website and message that cuts straight to the things that matter most to them.

The website for Sketch, a design application, does a great job of speaking to their target audience: Graphic designers. They know designers are seeking an alternative to Photoshop so their message and content reflects this.

Speak to one person (not many)

We all want to design websites that receive thousands of unique visitors per day. So the common mistake that I see website owners make is they write their copy as if they’re speaking to a crowd of people.

That might make sense from your perspective as the website owner who sees thousands of hits in analytics. But to each individual visitor, your message feels impersonal and bland.

A better approach is to speak to one individual person — your target customer — and write as if you’re having an intimate one on one conversation. This is how you develop a deep relationship and build trust with your audience.

By speaking in terms they relate to, and talking about things they care deeply about (you know what those things are, don’t you?), you’re setting the stage for a successful visit or transaction.

Notice how KISSmetrics speaks to “you” and connects with key pain points, matched with lofty goals that web business owners really care about.

Focus on a single call-to-action

You’ve seen those sites that bombard you with popups, slide-ups, sidebar opt-ins, bottom of page opt-ins, and oh-by-the-way — like us on Facebook, Follow us on Twitter, and while you’re at it, would you like to chat with us live right now?

If your visitor’s attention is pulled in too many different directions and none of those are the actual content of the page, you’re in bad shape. Very few people will decide to opt in or buy right away without reading something of value first. And those that do are not highly qualified and likely won’t ever purchase from you.

A more logical approach is to keep the focus on your content first. Clean, unobstructed views, with a limited number of callouts, links, and action buttons around.

With highly compelling content comes engagement. That means that once a visitor reads something thought provoking from you — it could be an article, an overview of a product’s benefits, a video, whatever — then they’re ready to take the next step. In fact, they want to.

That’s when you present one single, relevant, call to action. For example, if it’s a blog article about the latest CSS3 technique, the single call to action on that page could be a newsletter opt-in with a free email course about CSS3 essentials. 

Instapaper focuses on a single call-to-action, “Create an Account”. They draw attention to it by making it the only element with a red color, among a very stripped-down black and white site.

Prioritize your navigation

If you’ve put together a site map, prior to designing and building out your site, you may find there are many different sections, with many pages within each section. From your product tour pages, to pages about your company, contact pages, and so on.

Don’t try and include every page in your main navigation. Split up your navs and prioritize.

In your main navigation, I like to include what I call “mission critical” pages. These are the pages that contribute to making the sale. For example, I consider a page about the product and its benefits a mission critical page. The pricing page is mission critical. A contact or signup page is mission critical.

The goal is to trim down the number of pages included in that primary navigation. Why? You don’t want your visitor scratching their head, asking themselves “where should I go next?” Make that decision easy and give them only a few choices.

The rest of your pages, such as your About page, frequently asked questions, and team bios, can fall into a secondary navigation, somewhere out of the way. Sure, these might be necessary pages to include in your website, but they don’t need to be front and center.

The main navigation for Flow is stripped down to just two page links (Tour and Pricing) along with a subdued login link and a bright green Sign Up button.

Is a particular design or messaging technique having a real impact with your audience? How do you design for traction? Let us know in the comments.

Featured image/thumbnail, targeting customers image via Shutterstock.

SmartyLogo: A full Year of Design Templates + Logos – only $17!