Teachers College, Columbia University Working Papers in TESOL & Applied Linguistics is an online journal
(http://www.tc.columbia.edu/tesolalwebjournal) dedicated to publishing research in progress in the fields of TESOL and Applied Linguistics.

Within a conceptual framework that values an integration of theory and practice, the journal publishes full-length articles dealing, in a principled way, with language, language acquisition, language teaching, and language assessment. The journal also publishes interviews, short commentaries, and book reviews.

The Editorial Board is currently accepting manuscripts for future issues. Articles submitted to the journal should normally be no longer than 8,000 words. Each paper must begin with an abstract not exceeding 200 words. No information that identifies the author should be included in the paper. A separate title page should be provided, with the following information: title, the author's name, affiliation, address, e-mail address and both a daytime and an evening telephone number. Contributors may submit their papers in either of two ways. Three printed copies (double-spaced throughout) or an electronic version of the initial submission should be sent/e-mailed to:

TESOL/AL Web Journal
Teachers College, Columbia University
Box 66
525 West 120th Street
New York, NY 10027
E-mail: tcwebjournal@tc.columbia.edu

Manuscripts submitted should follow APA format. Works referred to should be separately listed at the end of the article. Submission Preparation Checklist is available at
http://journals.tc-library.org/index.php/tesol/about/submissions

Questions concerning submission can be directed to Catherine Box, Editor
(tcwebjournal@tc.columbia.edu).

--
Catherine DiFelice Box
Editor

Teachers College, Columbia University Working Papers in TESOL & Applied Linguistics

In the last several years, we’ve seen a rapid shift in software and app interface design, from 3-D and skeuomorphic to flat and minimal. Although this trend has become nearly ubiquitous, let’s take a moment to consider how we got here and what influence it’s having on interface design as a whole. Additionally, I’ll share some tips and considerations on designing flat interfaces.

Interfaces on a Windows Phone 8 and Apple’s iOS 7.

What Happened?

So, how did the collective consciousness swing from a love of all things textured, beveled and drop-shadowed to a desire for flat colors and simple typography? Many factors have fuelled this transition, but here are a few that stand out.

Information Overload

As a constantly connected culture, we deal with a nonstop flow of information, some of it important and relevant, most of it not. We are constantly evaluating, filtering and, of course, creating content, and it all gets pretty exhausting. In addition, much of our content consumption has moved to devices with small screens, thus exacerbating that feeling of overload. Becoming overwhelmed is all too easy, and a reduction of clutter in a user interface (UI) can create a little visual zen.

Free of clutter: Geckoboard‘s visualisations are designed to make key data easy to interpret at a glance.

Simplicity Is Golden

In a similar trend, a lot of disruptive Web apps and services are offering highly focused tools with extremely limited feature sets. Whereas traditional software developers tend to load their products with a glut of features to justify the high price tags, this shift towards focused micro-apps favors simplicity over feature set. Simpler apps mean simpler interfaces.

Beautiful and minimal: The Blue weather app by Oak.

Content Is King, Again

As so often happens when new devices and technologies enter the market, we become fascinated by what they can do and how we can advance interactivity. This interface frenzy is usually followed by a return to a focus on content. Media consumption, whether of text, audio or video, is probably the activity we engage in most on our devices, and for that use case, we just want the interface to get out of the way.

Technological Literacy

As smartphone and tablet adoption has rapidly penetrated all user demographics, concern about the obviousness of controls has reduced. Whereas we once feared that users might miss a button if it didn’t pop off the screen, we are now willing to explore subtler interactions. Windows 8 and Chrome for Android even support touch commands that start off screen, without any visual indicator.

Fitbit’s dashboard is a bright, bold, and easy approachable visual identity.

Technology’s Influence

Most software will be limited by the platform on which it runs. Screen dimensions and pixel density are the confining factors of hardware. A minimal interface demands a very limited design palette, which means that every element needs to sing. Typographic scale and font weight will largely determine both the aesthetics and usability of a flat design.

If your target devices can’t handle that level of nuance, you’re out of luck. As screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity. Of course, support for @font-face has also boosted the appeal of minimal typographic-focused designs.

Live sales monitoring with Wallmob: keeping track of the figures from any device that has a browser.

Responsive Design

With the proliferation of connected devices of various dimensions, UIs have had to become more fluid, and the responsive design movement has responded. While responsive design does not call for a particular aesthetic, one could certainly argue that flat UIs lend themselves to it more easily than many other styles. The other advantage of minimal design is the reduction in page weight and loading time.

To the point and weightless: OnSite. (Larger view)

Best Practices

OK, enough with the theory. Let’s get down to some practical considerations. Creating an effective minimal design is surprisingly challenging. As you strip away common UI tricks (drop shadows, bevels, textures and the like), you quickly realize how important the few remaining elements become. While the following tips are mostly universally applicable, they are especially relevant to flat UIs.

Before You Begin

As with any project, the first step is to ensure that your chosen style makes sense. Before diving into a flat design, make sure it aligns with your target users’ sensibilities and your target platform, devices and application type. Following a trend is pointless if it’s the wrong solution for your project.

Process

The process you follow is pretty important, no matter what style you are adopting. Here are some ideas to keep in mind when aiming for simplicity.

• When designing a minimal interface, I often seek inspiration from the pre-PC era, when designers and artists did more with less. This is a perfect opportunity to revisit some of the design greats, such as Josef Müller-Brockmann and Wim Crouwel. I also look to minimal painters such as Ellsworth Kelly, architects such as Mies van der Rohe and industrial designers such as Dieter Rams.
• Walking away from the work is also helpful. Flat and minimal design is all about nuance. So, taking a break and coming back later with fresh eyes is often more effective than hammering away.
• Comparing versions side by side is also helpful. After moving a line of type up and down by 5 pixels for 20 minutes, I’ll save two versions and compare them; the better option is quickly revealed.
• Because the relative scale of objects plays such a critical role, check your design concepts on a variety of target devices early on to confirm that they work.
• As you work, keep asking yourself, “Do I really need that?” Getting attached to an item that you find clever is so easy, but we must always look for elements to cut or simplify. Ditching something that you’ve put so much work into is always hard, but editing is critical.

Global Closet: an interactive game designed for National Geographic Education by The Workshop.

Grid

The grid plays a crucial role in so much of interface design, and no exception here. As you attempt to establish order and make usability intuitive across a project with a restricted set of visual elements, the grid is there to help.

• The grid establishes more than visual order. Use it to define content and functional groups. You don’t always need a line or box to group a set of objects. Simple alignment and spacing can help the user understand an interface’s structure.
• Try breaking the grid with elements of particular importance to really draw the user’s attention. Without fake 3-D trickery, basic layout principles such as scale and placement become the best elements by which to establish visual hierarchy.
• Experiment with a denser grid than you are accustomed to working with. When you dramatically reduce the visual palette, you may find that the design supports a more complex structure without feeling messy. See what additional information you can convey through placement alone.

Live School iPad app by Rossul Design.

Color

Obviously, color is always a key component of visual design. With minimal interfaces, it is even more critical.

• Consider a broader palette. If you’re like me, then you feel that a narrower palette usually leads to a more functional interface. Ending up with an overwhelming rainbow is all too easy. Here’s your chance to really stretch; and with so few elements to work with, you can feel good about expanding the palette.
• When setting the palette, test your selected hues across a wide value spectrum to make sure they behave in lighter and darker versions.
• You’ll probably want to experiment with tone on tone and stark type. Experiment with your palette early on to ensure that you have enough range for both subtle and high-contrast elements.

TriplAgent‘s visual design makes use of a stunning color palette.

Typography

When it comes to flat content-driven websites, typography is the hero.

• While serifs are certainly an option, san serifs almost always feel cleaner.
• Look for a font family with a wide variety of weights and styles. You certainly don’t need to use them all, but a broad selection will help you define the hierarchy more sharply, and you might also find that certain weights render better in certain environments.
• Don’t be afraid to pair fonts with extreme differences in size and weight to create visual order. Try pairing an oversized ultra-thin font for headlines with a small medium-weight font for the body.
• Watch out for legibility in fonts. It sounds silly, I know, but you will be asking a lot from your chosen fonts, so make sure they have great legibility at any scale.

Clean and legible typography on Siteleaf.

Interaction

In a flat UI, indicating that an element is interactive can be tricky. Here are a few methods I rely on.

• Contrast is key. If the majority of the layout is white, then you could give interactive elements some color. If the design is primarily text-driven, then you could use simple iconography. If the headlines are large and all lowercase, you could make links small and all uppercase. You get the idea.
• Conventional placement helps as well. If you use a slim chevron for a back arrow, place it in the upper-left corner, where users would expect to find the back button.
• As you layer more features on the page, making every interactive element look like a button wouldn’t make sense. The interface should be as intuitive as possible. But in cases where interaction is particularly complex or unexpected, make it easy to recover from mistakes.
• Drop-downs, modal windows, fly-outs and other layered elements can be troublesome to implement in a flat design. Leverage sharp contrast, borders or tinting to visually separate the levels of interaction.

Design elements presented in a simple layout and with optimal contrasts: Taasky.

Wrapping Up

I don’t believe in hard and fast rules in design. Seeing designers so heavily invested in creating extremely clean and simple user interfaces is pretty awesome. Does exploring flat design mean using absolutely no gradients or shadows? Of course not. In fact, some of the most intriguing work I’ve seen recently balances flatness and dimension by presenting content intelligently while keeping the interaction intuitive.

In this highly connected, information-rich and feature-packed digital world we live in, minimal design’s widespread resurgence is refreshing to witness. It is by no means the right solution for everything (no style is), but when applied thoughtfully and appropriately, it makes for a highly usable and enjoyable digital experience.

(al) (ea)

© Adrian Taylor for Smashing Magazine, 2013.

The Web Real-Time Communication Working Group and the Device APIs Working Group have published an updated Working Draft of Media Capture and Streams. This document defines a set of JavaScript APIs that allow local media, including audio and video, to be requested from a platform. Learn more about the Ubiquitous Web Applications Activity.

Congratulations! You won a job, worked hard to produce a great site, and the client is thrilled with the results. Now, wouldn’t it be nice to get paid?

While invoicing may not seem to most enthralling subject, it is without doubt one of the most crucial areas for every business. Your invoice reflects your branding, reinforces your professionalism, is an extra point of sale to win more work, and most importantly gets you paid. Do it wrong, and you won’t be in business for long.

Many freelancers and small business owners struggle with creating invoices, especially those who do everything for their business by themselves.

In the following post, I’ll try to clarify this process as well as some terms and practices related to it, while avoiding any accounting jargon. In addition, I’ll give you 10 beautiful invoice templates you can customize and use immediately and I’ll show you some great tools that will simplify your life and help you invoice like a pro.

What is an invoice?

An invoice, or bill, is a commercial document issued by the seller, received by the buyer and which contains details such as prices and quantities of goods, payment methods, and maximum period within which the buyer should make the payment.

The seller is the vendor or service provider, while the buyer is the customer or client.

This document is important for both parties because the seller needs to keep a copy as a record of their sales, and the client needs to keep a copy as a record of their purchase.

Sending an invoice indicates that ‘someone owes you money’ and a receiving an invoice indicates that ‘you owe them money’.

What should an invoice look like?

The look and language of your invoices should be in keeping with the rest of your branding and the message you’d like to deliver. It should match your business card design, letter head, tagline, even your site colors.

Even though the invoice structure is industry dependent, there are some general elements and rules that should be followed.

To remember this more easily, you can divide the invoice into 6 different sections:

Section 1: Your details

Contains details about your company (or your full name if you’re freelance), company logo, contact details, payment info etc.

If your company holds a specific legal status, for example if in the U.S. it’s a corporation, or in the U.K. it’s limited then you should include the information specific to your jurisdiction; that usually means an official address and registration number, but rules vary so check with your local tax office.

In Europe, if you’re V.A.T. registered, you must include your V.A.T. number as well.

Section 2: Rules of the game

Here you may specify the invoice options such as issue date — date of the invoice, net terms, due date, currency and P.O. Number.

In business, the term net 30 is used to indicate payment within 30 days, or it’s fairly common to see 10/15, net 30 which is another way to say 10% discount if paid in 15 days, and net due within 30 days.

However, people who are less aware of business terminology may not know what this means, so depending on who your buyer is, it may be better to use plain English instead: “Please note that payment is due on or before 07/09/2013″.

Also, bear in mind that the date formats differ internationally — payment due 07/09/2013 may mean payment in July, or September depending on the client’s location — so to avoid any ambiguities consider a more formal expression such as July 9th, 2013.

Another term that may also cause confusion is “Upon Receipt”. Freshbooks produced an interesting study which says that many people seem to interpret this as “whenever you feel like it”.

It’s as if they receive an invoice with the words ‘payable upon receipt’ and immediately dump it into the ‘whenever’ pile. Instead, using specific terms such as ’21 days’ seems to focus the client’s mind around a specific timeframe and will actually get you paid faster than asking for immediate payment. — Zach Mathew

Section 3: Your client

This part contains the name and address of the customer you are invoicing. If you’re addressing a multi-office company you need to specify the right person or department. This may not be the person you’ve been communicating during the project, so in order to get paid faster, make sure to ask who will be dealing with paying you.

Section 4: Title and number of the document

Usually, the word Invoice indicates title, but depending of the type, it can also be Bill, Tax Invoice, Pro-Forma, Quick Invoice etc. If in doubt, stick with Invoice.

The number of the invoice is a unique reference ID and is used in case of correspondence. The rule is to never use the same number for multiple documents.

In some jurisdictions it is mandatory that your invoice numbers ascend chronologically. But, they don’t have to be consecutive. If you don’t want your client knowing how much work is crossing your desk consider increasing the invoice number by a random number every time you write a new invoice: your first invoice would be ’00007′, the next would be ’00012′, then ’00014′ and so on.

You can also work codes into your invoice number to jog your memory come tax time. For example 2013-06-WDD-002 can be translated as “Second Invoice for Webdesigner Depot in June 2013″. This depends on you; be creative and find a numbering scheme that suits you best.

Section 5: List of products and/or services

The itemized list should clearly describe what you are charging for — name / description of the product or service, quantity, unit price, discount (usually given as a percentage), tax and total amount charged.

The description should match the terms you have agreed with your client, so be as specific as possible. Always double-check for typos, grammatical or computational errors as they create a poor impression and can damage your reputation. In fact, triple-check your invoice before you send it out.

Another thing you should consider is the quantity and unit price entries and check what the rules are. For example, for UK businesses, if your company is VAT registered HMRC rules about VAT invoices say that you must include the price per unit on your invoice.

If you charge by the hour you might specify the amount of hours you have spent as well as your hourly rate.

Subtotals and totals with a breakdown of taxes should be calculated below the table.

Make sure everything is clear as day, because if the client cannot identify the total they are being asked to pay, it is very likely your invoice to end-up in the ‘deal with later’ pile.

Section 6: Mumbo jumbo

This is a box for your custom message or note that describes your invoice terms more thoroughly. For example if you accept more than one payment method, here you may specify which one you prefer. Is it a check, bank transfer or PayPal?

Furthermore it is a perfect spot to show appreciation. Remember, being polite matters and can really get you paid faster. Some studies claim that a simple “thanks” can increase the percentage of invoices that are paid quickly by more than 5%. Analogously, that could be translated to lots of cash per year.

Although a late fee is not my preferred way to ask for on-time payment, keep in mind that here you can specify this too. For example: “Interest accrued at 5% per month thereafter”.

In Conclusion

Your invoice is a hidden marketing tool. Just imagine how great it would be if you could make your document stand out among 100s of others. I personally get more interested in working with clients who send me creative invoices. A well designed invoice can make paying you a pleasure.

To get you started we’ve set up 10 templates for you to download free, remember insert your own branding and personalize the wording for an effective invoice.

How do you invoice clients? What tips would you share for getting paid on time? Let us know in the comments.

Invoices kindly designed by Dimitar Stojanov.

Featured image/thumbnail, invoice image via Shutterstock.

FLATPAD: A Twitter Bootstrap-Friendly UI Design Bundle – only $9!