Webdesigntuts+

Win a Ticket to Our New Tuts+ Live Workshop

Joel Bankhead — Thu, 23 May 2013 13:38:36 +0000

We have 5 tickets to give away for our newest Tuts+ Live Workshop, all you have to do is subscribe to our newsletter. Be quick though, this giveaway ends on Monday!

We have a superb new Workshop, Introduction to WordPress Plugin Development, starting in a week. This is your chance to win a free ticket!

Simply subscribe to the Tuts+ Live Workshops newsletter and we’ll pick the winners on Monday 27th. Read on to find out more about the Workshop and for more details about the giveaway!

Introduction to WordPress Plugin Development

Our newest Tuts+ Live Workshop, Introduction to WordPress Plugin Development, teaches you everything that you need to know to start developing WordPress plugins; from setting up a local development environment, all the way through to building a WordPress plugin that’s ready for release into the WordPress Plugin Repository.

It’s led by Instructor Tom McFarlin, a self-employed WordPress developer who divides his time between running his own WordPress development shop, building plugins for WordPress, blogging every day about software development in the context of WordPress, and working for 8BIT (the team responsible for Standard Theme and WP Daily).

Each weekly workshop will last one hour, running over a five week period. You’ll have the opportunity to follow along with Tom, ask questions live during the workshop, and complete a weekly homework assignment. Not able to make it to the live recording? No problem! All of the workshop recordings will be made available online the day after the live workshop.

Learn more about Introduction to WordPress Plugin Development

Subscribe and Win a Ticket!

We have 5 tickets to give away and will be choosing the winners from everyone who has subscribed to the Tuts+ Live Workshops newsletter, so no worries if you’ve already signed up. We’ll also reimburse any winners who have already paid for their ticket.

To enter simply subscribe to the Tuts+ Live Workshops newsletter and stay informed on upcoming workshops!

Quick Tip: Switch Over to Photoshop Swatches

Adi Purdila — Thu, 23 May 2013 12:37:33 +0000

Let’s talk about Photoshop’s swatches panel. This is one of those tools which you may overlook or even intentionally ignore, which is a shame as it’s really powerful! Let me show you how it works compared to your usual color-picking workflow; hopefully I’ll convince you to make the switch..

(S)Watch Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Any Old Icon: All Wrapped up!

Ian Yates — Wed, 22 May 2013 15:59:51 +0000

Any Old Icon is complete, 70 icons in all! Thank you to everyone who contributed, you can be proud to have participated in the most random icon set on Earth! For the rest of you, here’s how to download and use the set..

Quick Hat-Tip to Icomoon

This really wouldn’t have been so easy to realise without the genius of @Keyamoon‘s Icomoon webfont app. Uploading a pile of SVGs and outputting as a neat, usable webfont package has never been easier! And I’m very happy to report that Any Old Icon is now featured within the Icomoon library for everyone to use.

Get it. Use it.

I bet you’re itching to use this icon set in your next project, well here’s how to do it..

Download

To begin with, head on over to the project page http://tutsplus.github.io/Any-Old-Icon/. Browse the icons if you wish (I’ll wait) then head back and hit the big download button.

Files

You’ll end up with a folder called “Any-Old-Icon-Master”, zipped up courtesy of GitHub, which looks a bit like this:

In it you’ll find the font files, an index.html demo web page, a style.css file, some other stuff and an “svg” folder which contains all the original vector artwork.

Installing the Fonts on Your System

If you’d like to be able to use the fonts in Photoshop, Illustrator and so on, double click the .ttf Truetype file and it will (should) automatically install to your system, whatever platform you’re using.

You’ll then be able to select the “any-old-icon” font from within your favorite design application. Go nuts.

The Web

The demo index.html file is what Icomoon automatically churns out and illustrates a couple of ways you can use webfont icons on the web. Take a look at style.css and you’ll see the necessary bits and bobs.

To begin with, the @font-face rules, which assign a font family name (any-old-icon) and point to all the font files which you’ll need to upload to a web server. Make sure all the paths are correct, relative to the css file.

@font-face {
	font-family: 'any-old-icon';
	src:url('fonts/any-old-icon.eot');
	src:url('fonts/any-old-icon.eot?#iefix') format('embedded-opentype'),
		url('fonts/any-old-icon.woff') format('woff'),
		url('fonts/any-old-icon.ttf') format('truetype'),
		url('fonts/any-old-icon.svg#any-old-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

With that set, you can now use the font files in a couple of ways. The next chunk of code in style.css looks like this:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'any-old-icon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

It sets up the styles to use data-attributes, applying a pseudo-element to any element on your page which has a data-attribute of data-icon. For example, you may have:

<span data-icon="&#xe039;">This span will have a :before element applied!</span>

In which case, the value within the data-icon, an HTML entity () will be injected into the :before pseudo element. The any-old-icon font family is applied to this :before element, so the correct icon is displayed.

This is just how Icomoon styles things, you can handle it however you want of course..

Or..

The next chunk of CSS applies indvidual classes for each icon (pretty big chunk of code). Then each class has further styling, applying the pseudo element in a similar way to before, but representing the icons using escaped unicode entities, which is necessary in CSS.

.juan-ortiz-zaforas-plug-c-female:before {
	content: "\e01a";
}

Lastly..

What you may prefer to do, though which arguably incurs a small performance hit, is to apply the font-family to a global selector like this:

.icon {
	font-family: 'any-old-icon';
}

Which then points to the following:

<span aria-hidden="true" class="icon">&#xe039;</span>

Slightly muddying up the markup, but hey.

Note: that aria-hidden="true" is useful for hiding the markup from screenreaders and other assistive technologies. The character has little meaning without the icon, so could cause confusion.

Changing the Character Mapping

If you prefer to use different characters with these icons, head on over to Icomoon, use Any Old Icon from the library there (or upload the font files provided with our own source), then assign whichever characters you wish before downloading the package.

One Last Time

Thanks again to everyone who took part! If your icon didn’t make it into the final cut, I’m sorry, but I have a feeling we’ll be running more of these in the future. Enjoy the icon set!

Learning from Historic Web Archives

Warren Day — Tue, 21 May 2013 15:19:59 +0000

There are a plethora of resources available to aid in your success on the web. From countless analytics and SEO applications, to thousands of articles and reports from our peers. For anyone who runs their own website we can use these resources to improve and fine tune the online experience we give our visitors. One oft-overlooked resource is the Internet Archive, which contains years of fine-tuned updates and improvements from the world’s biggest and most successful websites – and we can learn from them.

How can we have critical thinking without being able to quote and being able to compare what happened in the past?

Brewster Kahle, the founder of Internet Archive

What are the Internet Archives?

As you would expect from any kind of historial record, the Internet Archive houses information dating back years. But there’s a twist; these records are cached snapshots of websites, so you can actually visit webpages such as Google from as far back as 1998. This information is priceless (not to mention quite humorous) and it’s astonishing to see how design has changed over the years.

Check out this example from 1998 when Google was still in Beta!

All these amazing resources can be found on the waybackmachine over at archive.org. Simply type in a URL and start exploring. You can have a lot of fun seeing how some of your favorite sites have developed over the years (or am I just a huge nerd?) Regardless, a lot of time, research and money had gone into improving and tweaking these websites and we can observe this information for our own benefit.

How can we Learn From These Records?

A people without the knowledge of their past history, origin and culture is like a tree without roots.

Marcus Garvey

We are always building on the knowledge of others, and I can’t think of a better place to apply this ideal than in the field of web design. By analysing the archives available to us we can see (through a certain amount of assumption) why certain decisions and changes have been made. This can help to not only see the natural progression of a website, but better understand the development process involved in bringing something like Google to what it is today.

By comparing the progression of many websites we can also see how design trends have changed over the years. Currently flat design is “in” and you can see how Webdesigntuts+ itself has changed to embrace this style.

Leveraging archives is essential in learning from past developments and mistakes, so let’s take a look at a process I often use.

Step 1: Choose a Website

It’s important to choose a subject to begin your research, preferably within the same field you wish to improve on. If you run a blog then choose a successful blog in a similar niche, if you have an online store then learn from the eCommerce masters. Of course, these are just examples.

When you encounter these sites as they are today it’s easy to think that they popped up from nowhere with overnight success, but the Waybackmachine will tell a different story. With archives we can begin to see the years of hard work put in to achieve their current position and their design progression along the way. So just how did they do it?

Step 2: Follow From the Very Beginning

I will use play.com as an example here. Being the desirable URL that it is, there is data running back until 1996. However, I came across its first instance as the eCommerce store it is today on 7th August 2003. The first thing I noticed is the iconic look and feel Play have maintained for years until being acquired by Rakuten back in 2011, at which point it underwent a much larger update and style change.

As we look at each incarnation of the site we must also remember that there are always the technological limits of the time at work, such as cross-browser support and reduced speeds.

Step 3: Analyse the Progression

By comparing how Play started to what it is today, you will find that the changes have been drastic. Let’s drill down and examine areas such as user-experience, functionality and aesthetics. I have found four snapshots for the large updates made between 2003 and 2013. So let’s take a look and begin to understand how each change has contributed towards the next.

2003

This is the very first version launched in 2003. Built with tabular markup, which at the time was common, and has a simplistic layout. A unique style has been developed to give strong brand identity. The large area in the center has clearly been chosen as the prime spot for internal advertising whilst the search bar is given little weight on the page.

2007

Four years later you can see from the number of categories that the product range has grown substantially. The main navigation has managed, however, to maintain the same format with a much needed design upgrade. You wouldn’t think it today, but heavy bevels were actually pretty trendy at one point..

The old center piece has been moved down to make way for a more prominent advertising section. Not having removing it completely indicates that it was actually doing well, but it was felt the area could be put to better use.

2010

Again the catalogue of products has expanded. The menu has grown substantially, becoming left justified to better fit all content. The original center piece (after losing its prime spot) has fallen from grace, becoming second best to the more prominent feature, ultimately being removed completely.

The search bar has finally been given more weight on the page, most likely due to analysis, perhaps heat maps and user feedback highlighting its importance. You can also see how the way people interact with a website has changed as on site search became more popular.

2013

Finally we have play.com today; this is by far the biggest update of all. The side bar has been removed completely and there is much more whitespace. The center piece has now stretched to the full width of the page after proving for years that it held an important role on the page.

The style of the site has changed completely and it has almost been totally rebranded. Some familiar colors remain, however, and it is easy to see that we are still on the same website. The search bar is now much bigger than before and a user trend has clearly been noted for this to happen.

Step 4: Gather Your Results

By looking at each step towards the final and definitive website we can take a lot away to learn from. We can see that search has become a crucial part of eCommerce, user interaction has changed and from this I can begin to make accurate assumptions. I believe that a user will already have in mind what they are looking for before they even get to the site, heading straight for the search bar. For this reason they will become relatively blind to most elements on the page. By making the main advertising section massively more prominent it can better catch a visitor’s eye, even subconsciously.

Bringing it all Together

Now that we understand the benefits of learning from archives we can add it to our arsenal of tools and resources available to us. By using archives alongside other tools we can uncover even more information.

With Alexa.com we are able to track the traffic of a site over the course of the last two years. By comparing this to archives we can often observe correlation. Often this can be a way to confirm our analysis of a page, be it good or bad. Sometimes a change could have had negative effects on traffic and we can learn from this not to make the same mistakes.

Don’t Jump to Conclusions

When seeing correlations between Alexa and Internet Archives you must be sure not to jump to conclusions. The demise of MySpace was not due to a design change, but the rise of stronger opposition.

Do your research in order to make sure your results are accurate.

Case Study: Disqus

Disqus is an awesome commenting system used across millions of websites (includiung Tuts+). Over the last year its popularity has seen huge gains. This would have been for a number of reasons, but at the time of its rise in traffic it just so happens that a large design update was made. This has surely contributed to the rise and we can begin to question why.

The Old Design

Here is the landing page of the site back in 2011.

You have just 10 seconds to engage users and convince them to take a closer look.

Jakob Nielsen

The overall design is solid, but the actual product is not well displayed. Without reading into it you would not have a clue what Disqus is or does. Dr Jakob Nielsen, a renowned usability expert noted that you have just 10 seconds to engage users and convince them to take a closer look. This means you need to get your initial message across as quickly as possible in order to convert visitors, here I am not convinced. Bring in the new design.

The New Design

Instantly you can see a huge improvement in aesthetics, the design is clean and simple.

The product itself is now clearly understandable and has been given a prime spot on the page. From this, users with no clue about Disqus can better see that it is an onsite commenting system. Although the previous graphic looked nice, it held little meaning and was rather distracting from the purpose. The call to action “Get this on your site” is also much more prominent now and better guides the eye towards it.

I believe that from this there is clear evidence that a design change has contributed towards the increase in traffic and a decrease in drop rate. We can take this information and use it as a guide towards our own decisions when designing a splash page or advertising a product online.

Conclusion

From these examples we can clearly see the benefit of learning from historic archives. They can form a crucial part of the research process in order to gain inside knowledge of the most successful websites around today.

It is important to do your research and use Archives as a tool alongside all other resources available. Remember that you can only make assumptions here and nothing will be hard fact. Archives can compliment your arsenal and improve the quality of your research.

I hope you enjoyed this article and thanks for reading!

Dunked: Launched, but Hardly Finished

Mark Southard — Tue, 21 May 2013 08:22:59 +0000

I'm part of the team that has recently launched a web app called Dunked. Dunked is a free simple-to-use online portfolio for creative types. As of May 2013, we are in public beta; continuing to build out features as well as making incremental improvements based on user feedback.

In this article, I am going to discuss some of the reasons I believe that a beta launch is important to the development of your product. I will also discuss how we, at Dunked, are going about the process of monitoring and gathering user feedback. Finally, I will discuss how were are going about implementing changes based on user feedback as we continue to build the product out.

Why I Like Beta Launch

I personally believe that having a beta launch is a really great idea. Of course, it’s inadvisable to release something which is riddled with bugs. It’s also a bad idea to release a product that isn’t ready for public consumption. It’s far better to release the product once it has the necessary core features and is free of bugs.

Google is probably one of the more well known companies that initially offers products as a beta release. Gmail is a great example. Gmail was in private beta from April 2004 to February 2007, when it was made available to the general public. Even then, it still had the "beta" label. Gmail wasn't officially taken out of beta for another two years. Having it as a beta product enabled Google engineers to continue enhancing Gmail based on user data as well as to test various additions.

Perfect just doesn't exist within software development

I recognize that it can be tough letting users see a product before you believe it to be perfect. But perfect just doesn't exist within software development. You will always need to iterate over a product in a constant effort to make improvements. I believe that by releasing a beta version of a product, you put yourself in a position to best offer users what they want. You may have assumptions that are just flat out wrong. By operating in beta, you can quickly pivot to improve your product to your users' needs.

In taking Dunked to launch, we felt that it was crucially important to identify and establish the differences between must-have features and nice-to-have features. Must-have features are the features which shape, and essentially, make your product. Must-haves are the features on which you should focus your time pre-launch. Once you've completed your list of must-haves, launch. After launch, you can tackle the nice-to-haves, fix any bugs that arise, and make adjustments based upon user feedback.

Monitoring and Gathering User Feedback

As we continue to build, user feedback is like gold. Users tell us when we're doing things great; when we're doing things wrong; and when we're being just plain stupid. Because user feedback is so valuable, it is important that you have a system in place prior to launch so that you can monitor and gather feedback. You must also establish a system to act upon the feedback that you receive.

Monitoring and gathering feedback is no easy task. Users are all different, with varying preferences in how they go about expressing their opinions. Therefore, you need to have a system in place to actively monitor a variety of channels of feedback. We've opted to use Desk. It serves as our central hub collecting all tweets directed at our @DunkedHQ Twitter handle, comments on our Facebook page and emails sent via our support contact form (this form is linked to from within the app itself). It enables me to log into a single location, where I can review and respond to feedback in the order it was submitted. This is a win-win for us and for users. Users can express their opinions however they feel most comfortable, and we can very easily access all feedback in a single location.

That handles current users, but what about the people that just delete their accounts without offering any feedback. Know that accounts will be closed, and do your best to collect information from users closing their accounts. At Dunked, we direct the user to a quick "exit" survey once they have completed the account deletion process. The survey is completely optional and can be completed in under five minutes. Most folks have been willing to fill it out, providing us with additional feedback on why they deleted their account. We've used Wufoo to handle our survey needs because they make it really dang easy.

Using User Feedback

Now that we have a method of monitoring and gathering feedback, what should we do with it? For Dunked, we have a pretty simple approach. We use a to-do list within Basecamp to house the feedback we collect. Whenever a user writes in with a suggested improvement or requests a missing feature, we add it to our Wishlist/Suggestions to-do list. This list also contains our previously mentioned nice-to-have features. Not all the items that get added to the list will be added to Dunked, but it helps us to monitor the suggestions. Common feature requests are noted, moved to the top of the list, and are often included in our code sprints, which I will discuss later.

Unfortunately, the Dunked platform hasn't been perfect, so we do occasionally get bug reports. We maintain a separate bug list also within Basecamp. Any item added to the bug list is considered a top priority and is fixed as quickly as possible.

As I previously mentioned, we are continuing to build out core features for Dunked, but we feel it is important to act upon the feedback provided by early users. Because users have been so great in providing us with feedback, we want to implement their suggestions as time permits. We do this through daily code sprints. Once or twice a week, we will go through our Suggestions/Feedback list, and pick a few items that can be completed in a single day of coding. We complete those items, test on our development server, and then push to the production server once we are happy with the code.

To illustrate how user feedback has improved Dunked, consider the following example. For image uploads, we created a simple, click-to-upload button. Clicking the button launched the file browser on the user's computer enabling them to browse to and upload images for their projects. It worked perfectly for us. Users, however, had some issues.

There are two basic options on how to handle image uploads: click-to-upload or drag-and-drop to upload. As it turns out, we (Team Dunked) each prefer click-to-upload. We didn't envision that users would want drag-and-drop uploads. In gathering feedback, it became evident that we had room for improvement in image uploads. We added "Drag-and-drop uploads" to our Wishlist/Suggestions list. After multiple requests, drag-and-drop uploads was added to one of our early code sprints. Now when you want to upload images to a project, you can click-to-upload or drag-and-drop.

This is a rather simple example of how users used Dunked differently than we envisioned. We never considered that users would be put off by our traditional method of image uploads. In monitoring, gathering, and acting upon user feedback, however, we were able to improve the Dunked for our users.

The Limitations of a Beta Release

Now that I've explained a bit about our approach to a beta release and why I think beta releases are great, I must discuss some of the mistakes and limitations that could plague a beta release. The biggest mistake that one could make in a beta release is to release a beta before it is ready. If you encounter bugs in your own testing or if you haven't run a thorough set of tests on your application, you have no business releasing into beta. When you release software that you know isn't ready for release, you are risking the trust of your users and the life of your product. While most beta users are willing to forgive minor bugs that pop up in beta, releasing a product that you know to be buggy is irresponsible.

When you release software that you know isn't ready for release, you are risking the trust of your users and the life of your product.

The second biggest mistake you could make in a beta release is to let in users too fast. While you can run stress tests, you won't 100% know what your server can handle until it's been put under a real test. If the server is going to crash, you want it to crash with 1,000 beta invites out and not 10,000 or 100,000 beta invites outstanding. Additionally, you are in beta, so it is possible that you will come across a bug or two. With Dunked, for example, we had an odd bug related to certain project slugs. Everything worked fine with the admin, but the live page resulted in a 403 error. It turned out to be a very simple fix. But because the issue was related the URLs, we had to correct existing URL slugs. It was certainly easier to search and remedy hundreds of project and page slugs than it would have been for hundreds of thousands.

One of the biggest limitations of a beta release is related to feedback. Granting users beta access, does not mean that they will provide you with feedback. Users may fully intend in provide feedback, but simply don't have the time put their feedback into words. They may also feel that they are doing something wrong, when the application doesn't work as they expect, and thus don't write you with feedback. Additionally, if you have to iterate over a certain component within your application, odds are that the quality and quantity of the feedback is going to wane.

Summary

I do not believe that it is not wise to try and include every single wanted feature when launching a product. I think you are better off launching a "completed" beta version, and then continuing to iterate over the product, adding additional features. In doing so, you'll be able to gather and use user feedback to improve your product.

Saying that, you must have a plan in place as to how you are going to monitor, gather, and act upon the feedback you collect. Thus, you'll be in a position to add features that create real value for the user, improving your chances of success.

Tuts+ Premium Cash Back Offer: 3 Days to Go

Joel Bankhead — Thu, 16 May 2013 14:30:33 +0000

This offer ends soon! Act now and don’t miss out on cash back when trying a monthly Tuts+ Premium subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you!

For a limited time we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal. If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides there’s never been a better time to join up and dive in.

This offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member and take your creative & technical skills to a new level.

What can you learn on Tuts+ Premium? Glad you asked! Currently, more than 15,000 members are sharpening their skills in a wide range of areas including web design, web development, Photoshop, vectors, video effects, and many more.
With Tuts+ Premium you learn from expert instructors in every field, such as:

Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
Illustrator Russell Tate (McDonald’s, Coca-Cola)
Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Super Simple eCommerce With Gumroad

Cory Simmons — Thu, 16 May 2013 12:22:46 +0000

Gumroad is an insanely easy way to create customizable products and start selling electronic and physical goods within minutes. It’s not meant to be a replacement for all shopping systems, but it can definitely handle selling your music, art pieces, t-shirts, PDFs, and much more.

Watch the Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Read the Tutorial

If video isn’t your thing, here’s a written guide to get you started. Feel free to ask any questions you have in the comments!

Why Gumroad?

I literally think your grandmother could use Gumroad to sell her ugly sweaters. It is that easy. It’s not just easy, it’s good. The system is very well designed to make it simple to upload, customize, and manage orders.

What’s the Trade Off?

Without the API you don’t have a lot of control over what your item detail page looks like. It’s not a big deal because the item detail page looks pretty good. The only other caveat I can think of is that JavaScript carts always feel a bit insecure to me. I’ve heard stories of people changing the prices on items in various JavaScript carts, but to be honest I don’t know if it’s applicapable to Gumroad since it creates an iframe to display your product. So I’m assuming when you click the “I want this!” button that it’s validating on the server.

So, the downfalls are it looks good, it’s extendable with a great API, and it’s probably pretty secure. Wait, those aren’t trade offs! Is Gumroad really this good?

Yes

The creator of Gumroad, Sahil Lavingia, made some really good decisions when he was putting Gumroad together. I think the decisions that make Gumroad work so well were to take control away from the seller; make sure whatever design you force on them looks good; and make everything else drop-dead simple & elegant.

Try it Out

You can’t break anything or accidentally buy anything if you don’t enter your payment information. So go create an account at gumroad.com now and start looking around.

The first thing you’ll notice after logging in is that Gumroad wants you to create products.

Create a Product

Add a title and upload or link to something. If you’re selling an e-good (PDF, some vector icons, some music) then upload or link to that. If you’re selling a physical good, then it’s pretty common practice to upload or link to a photo.

Name your price. Set this to any price you want. If you put a + in the field instead of a number, a textbox will popup and ask you to enter a suggested price. Enter whatever price you think is fair. This will set up a “Pay what you want” system where the buyer can get the item for free, but they’re nudged to actually buy the item.

Upload or link to a 670px cover image. This is the image at the top of your product detail modal. People tend to buy your product more if you have a nice cover image, so actually take time to make one and upload it.

Describe your product. Use all kinds of big, fancy-shmacy, city-boy words.

Click the “File Options” button to add any extra files you want. If you forgot to .zip your product, feel free to upload extra files associated with it now.

Save Changes, click publish, and grab your http://gum.co/**** link. Now you can share this link with anyone and they can view your product. They’d be able to buy your project if you filled out your payment information, but let’s look at everything else we can control before you start selling. You might see something you’d like to use.

Inventory, Shipping Rules, Customizable Checkout Forms, Coupons and Variants

The Options tab has a lot of stuff in it considering how compact and clean it looks. You can change the permalink of the item you’re selling (if the permalink hasn’t already been taken – I wonder if http://gum.co/gumroad-tutorial is available, these guys don’t pay me enough! I’m joking – I’ll get back to work now Ian, sir! sniffle)

By default you can deliver an unlimited amount of your product. This is fine if you’re selling e-goods, but if you have physical goods you need to ship, you should definitely “Limit sales to” something less than infinity.

If you only want to ship to a certain country, then you can change this as well.

You have a profile page which is at http://gumroad.com/YourUsername. If you go there, you can see some boilerplate profile information, but this will also show off all the items you’re selling. If you specifically don’t want a product to show up on this page then you need to uncheck the “Visible on Profile Page” checkbox.

Below this, you’ll see the User Purchase Form. This form is all the stuff a buyer needs to fill out before checking out. By default your product only requires an e-mail address, but if you’re shipping something, you’ll want to click the “Requires shipping information” button. In this area you can also specify fields you’d like to collect during the checkout process.

Now you can make coupons that the user can either navigate directly to via a URL you give them (something like http://gum.co/****/MyCouponCode), and if you check the “Add offer field to purchase form” checkbox, anyone can use the code during the checkout process. It even has a spot for you to specify the number of coupons available, so you can do something like “The first 100 people to use the coupon code ‘HamburgerSalad’ get $10 off their order.”

Finally, you can add some “Variants” to the product. A good example of this would be t-shirts. With variants you could specify the size of the t-shirts, and if you add another category you could specify the color at the same time.

Onwards to the next tab!

Receipts

Receipts look nice but they’re pretty boring and self explanatory. Once a product is sold the Buyer will be able to click a link on the receipt to instantly access their file (along with being e-mailed this link). You can write a thank you message in here.

Buyers

I assume this is a list of people who bought the product, but to be honest, I haven’t sold anything with Gumroad yet so I can’t be sure of all the information displayed here. I’m willing to bet the information supplied on the “User purchase form” (under the “Options” tab) is listed here.

Feel free to submit screenshots. I couldn’t find any. :)

Email Customers

When Buyers purchase a product, both the Buyer and the Seller will be sent an e-mail. The Seller will get a “You sold ProductName” e-mail. The Buyer will get a “You bought a product on Gumroad!” e-mail with a link to their download. You can customize this e-mail here. You can also actually attach the file to this e-mail explicitly by checking the “Attach product to this email”. This is also a good way to send your Buyers an updated file. For instance, new versions of a PDF book you wrote.

Not only that, but if you just want to e-mail your Buyers and to inform them about something you can leave the checkbox unchecked and just send them an e-mail.

Setting up Payment Options

You can start selling your product now, but you won’t be able to actually get paid until you set up your payment options. Click on “Settings” in the top right, then “Payout”. Once you’re on this screen, you will be prompted to enter your bank account information. Do so.

Gumroad will be pay you every other Friday, for all sales up to a week before that date. You have to have at least $10 in your account. So you need to sell over $10 worth of stuff, and wait for the next Friday to roll around before being paid.

Note: Precisely what additional charges (if any) are incurred through using PayPal are unclear to me at this point.. I would expect normal charges to apply, depending on the type of PayPal account you have, but if you have any experience with Gumroad and PayPal please let us know in the comments!

Selling Your Product

Now that you have configured your product just the way you want, and you’ve connected your bank or PayPal information, you can start selling. Click on your product and “Publish” it if you haven’t done so already. Look on the right sidebar of your product and now you’ll see a “Share to sell” link, “Share on Facebook”, “Tweet”, and “Put on your site”.

Sharing is Caring

Give anyone the “Share to sell” link (something like http://gum.co/****) and they’ll be taken to your product page. If you’d like to see how this looks, just visit the link. You can even customize the background color and the button color of each product page.

Obviously you can share this on Facebook or Twitter with the links provided.

Adding Products to Your Site

The “Put it on your site” area contains embed code for the link, a button, and an overlay which will create a modal popup when someone clicks on the link. The link obviously just links to your product page. The button and overlay embed codes contain two different JavaScript files that you should put at the bottom of your HTML right before your closing </body> tag.

The button script will turn your http://gum.co/**** links into actual Gumroad branded buttons which is nice if you want to hint at the user that you’re using something they may already be familiar and have an account with.

The overlay script is pretty sweet. Any link to a product (http://gum.co/****) will open in an iframe modal window that looks pretty nice and loads your product detail page. This is how you turn your HTML store into a real store with real items in a few minutes. Just include the overlay script tag at the bottom of the page and fill your anchor tags with links to your product pages. Gumroad does the rest. It doesn’t get any easier than that.

Tracking Your Sales

If you’re struggling to make sales or you’re just curious, you might want to check out the “Analytics” link at the top of the page. This will take you to a section where you can view:

How well you’ve been doing over time (are you losing customers? Maybe it’s time for an upgrade or new product?)
What your conversion rate is (are people scared off by your cover image, description, or pricing?)
Where your users are coming from (are you big in Japan? Maybe you should create coupons in Japanese to show your appreciation).
And finally, some referrer analytics (do you get most of your Buyers from Facebook, Google, or your blog? Find out what serves you best and capitalize on it).

You can also select a specific time range and filter your results by certain products.

Customizing Your Profile

Click on the “Settings” link at the top of the page. Once there you’ll be able to edit generic profile stuff about yourself; add your Google Analytics ID for even more in-depth analytics; and if you click on the “Customize” link, you’ll be able to change how your profile page (http://gumroad.com/YourUsername) feels, and even customize the style of it. The level of customization depends entirely on how good you are at inspecting elements and hacking CSS.

Conclusion

So that’s it. I hope you enjoyed my first written tutorial for Tuts+ and will consider using Gumroad for all those sites where your friend wants you to sell their “artwork” (bleh) but you can’t be bothered with a bulky system like Magento or WooCommerce.

Gumroad is incredibly easy to use and very powerful. It lets you spend less time worrying about your web store and more time creating the things you love (to sell).

Taking the “Erm..” Out of Ems

Ian Yates — Tue, 14 May 2013 16:45:05 +0000

I’m going to make a sweeping statement; pixels have no place in web design. There’s only one reason you’re still relying on pixels – and that’s because you haven’t yet gotten the hang of ems. Let’s change that!

Decorative M courtesy of Frances Mcleod – winner of TypeFight #34

Size is Everything

When we build websites, we need to tell the browser how “big” stuff is: “this heading is so big”, “this container is yay high”, “this form is wider than that”, it’s how we layout a page. Pixels have always made perfect sense as the chosen unit of measurement; we’re outputting to a screen, so what else would we use?!

However, it turns out that pixels are inherently inflexible. And it turns out that being inflexible isn’t great for the web.

Problems with Pixels

Oliver Reichenstein stated a long time ago: “The Web is 95% Typography”, but it’s taken a good few years for people to get on board with the idea. Content and users; they are our priorities as web designers, and typographic design helps us meet those priorities.

Browsers display body copy at a default size. On desktops this is generally 16px, mobile browsers vary. Users can change this default, depending on what they prefer.

Often, web designers will use CSS to cast the base font size in stone..

..preventing the user from tailoring their own reading experience, ultimately making the content less accessible.

Lesson one is in handing power back to the user. Don’t prevent users from setting their own type size, but make sure you begin on a level playing field. Set your base font to 100% of the browser default:

then we can work from there.

Our Typographic Scale

We still need to define how large our various typographic elements appear, especially if we’ve used a CSS reset technique to remove all default sizing. A fairly typical modular scale would look something like this:

These figures have been used for centuries, calculated in order to optimize proportions, without having to physically manufacture too many of the blocks used in printing. There’s all kind of clever mathematics which justify scales like this and I’m sure you can appreciate that this range is pleasing to the eye too.

We would translate this scale to our own typography by applying CSS a bit like this:

However (as we’ve said already) using fixed pixel values is inflexible, so let’s rectify that..

Enter the Em

An em is a unit of measurement. Just like pixels, ems can determine the size of elements on a web page. Unlike pixels, which are absolute, ems are relative to their parent’s font size, which is where a lot of confusion lies.

1em is equal to the inherited font size. If the font size of a <div> is set to 16px, 1em within that <div> is equivalent to 16px. If the font size of that <div> changes to 20px, 1em within that <div> is equivalent to 20px.

Ems get their name from printing. Precisely when the term was first used is unclear, but as the uppercase M (pronounced emm) most closely represents the square printing block on which printing letters were placed, it came to lend its name to the measurement. Whatever the point size of the font in question, the block of the uppercase M would define the Em.

An em is usually a touch larger than the letterform, but you get the idea.

An uppercase M in Calendas Plus – the surrounding square is 1em high, 1em wide

Conversion from Pixels

We’ve already started to set our typographic scale in pixels, so how do we convert that into ems? A simple calculation, which expresses the desired font size in relation to the body font size:

Using the body size we assume to be 16px, aiming to convert our 36px <h1>, we get:

Here’s how our scale is converted, using the method above:

Some of these values can get a little complex, but don’t be afraid to be as precise as possible with the decimal places. Browsers will always do their best to render the exact values.

Tip: It’s often useful to make a note in the comments, to remind yourself how you calculated each em value.

Issues with Cascading

The number one biggest grumble people have with ems comes from complications which arise from cascading. An em value is relative to its nearest parent’s value, which can accidentally mess things up if you’re not paying attention. Take a look at the following css, which aims to get anchors and paragraphs sized equally:

Now take a look at this innocent piece of markup:

As you’d expect, all appears well in the browser. Both the paragraph and the anchor are displaying at 1.2em, relative to the body font size (1.2 * 16px = 19.2px).

However, if we were to introduce a second anchor within the paragraph, let’s see what happens:

The anchor within the paragraph is still sized at 1.2em, but that’s now relative to the parent paragraph, which is already 19.2px – (1.2 * 19.2px = 23.04px). This gives us extra large anchors in some parts of our page; hardly desirable.

Note: Nested list items in navigation menus are a classic example of where cascading can get out of control – watch out for that one.

The Fix

There is no fix for this; the last thing you want to do is add an extra rule to decrease the size of anchors which happen to be in paragraphs – that’s a one-way ticket to Migrainesville. In order to keep your CSS and HTML maintainable, it’s important to Keep It Simple™.

Keep your markup simple and modular.
Define your ems clearly and in a restrained fashion – don’t go throwing them all over the place.
Try to restrict font-sizes to typographic elements; be cautious of applying font-sizes to structural elements.

That should help! Using Ems does mean that you’ll have to think quite hard sometimes, but doing so will force you to clean up your act and be efficient in your coding.

Rems

Rems are useful and behave in exactly the same way as ems, without the cascading. Every Rem you define is relative to the body font size. Support is nowhere near as good however, so IE8 and older will need a pixel-based fallback.

What About Using Ems Elsewhere?

We’ve covered the CSS font-size property; a sensible first step into using ems, but now let’s look at line-height. If ever there was a property which screams “don’t use pixel values”, it’s line-height. The line height (discussed during an earlier article in more detail) of a typographic element should always be relative to the font-size. If you have a heading whose size is set in ems, but whose line-height is set in pixels, you could end up with ugly overlapping and a poor visual relationship in general.

There’s no fixed rule for how large line-height should be, but 1.5em is a reasonable value to try out and will make your typography pleasantly readable.

In this case, 1.5em is 1.5 * 18px which is 27px

Tip: Take a look at Bryan Gruhlke’s suggestion in the comments for using unit-less values with line-height..

Note: Things can get complicated if you’re trying to set a baseline grid with ems, but that’s a topic for another article.

Structural Elements

Once you get into the mindset of keeping your layout flexible in terms of the font size, you’ll find you rely on pixels less and less for laying out elements on the page.

If we’re talking about fluid layouts, you should be using % values to determine the width of any given element. Pixels should be nowhere to be seen when determining horizontal dimensions.

Vertical spacing can be achieved very easily with ems; again, it’s a question of being clean with your markup and styling. Consider restricting margins to the bottom of your elements, so as to make managing vertical rhythm easier.

If you need to define a height (which can be tricky in flexible layouts) use ems too. Perhaps you’re building a navigation and need to define the height of the menu links – they should grow and shrink with the font size.

Rounded corners on a button? Set the border-radius using ems, so everything scales seamlessly.

Take a look at this Codepen for a more visual example of what I’m talking about here

Text shadow, box shadow, ditto.

RWD

And if you need to change the size of everything under certain circumstances, like smaller viewports? Alter the base font size of the body in the appropriate media query body { font-size: 90%; } and wham! Your whole site scales in the time it takes to hit enter.

Exceptions

Like all excellent scientific rules, there has to be an exception to prove it. In this case, I can think of one good scenario where you may need pixels; borders. If you define a border width (or the height of a horizontal rule) in ems, it may find itself being calculated so small that the browser can’t render it.

In this case, you simply won’t see it.

Take a look a this wee demo

For horizontal rules, you may have styles a bit like this:

hr {
	height: .02em;
	border: none;
	background: white;
	margin: 2em 0;
	outline: none;
	display: block;
	clear: both;
	width: 100%;
}

In order to prevent it disappearing when the body size is too small, you could add this:

	min-height: 1px;

There. A pixel. Dangit.

Border widths cannot have a minimum value (sadly) so a similar backup in that case isn’t possible. Instead, you could use the border width values of thick, medium and thin, although these values don’t scale with font-size any better than pixels do.

Conclusion

Start using ems today! Your content is typographically grounded, whether you realise it or not. Referring back to pixels, converting figures and thinking in terms of fixed layouts isn’t even necessary. Begin thinking in ems and you’ll soon forget pixels altogether.

If you can think of a situation where you simply can’t use ems, I’d love to hear it in the comments!

Polishing up Your Creative Process

Sven Lenaerts — Mon, 13 May 2013 13:57:27 +0000

Today we’ll focus on increasing your creative capabilities through an introduction to a couple of creativity techniques. An important key issue to understand is that creativity techniques are not magic tools to increase your creativity as skill. Rather, they act as guides to help you find possible creative solutions for the problem you’re up against.

Thumbnail: Taken from the highly polished Flat UI kit by Designmodo

Creativity is Like a Diamond

Okay, here comes a massive, extended metaphor which suits our needs perfectly.

During the duration of a project you first generate ideas, then you work towards a final solution.

In general, creativity techniques focus on two different issues: They either try to generate as many ideas as possible, or they attempt to select which ideas are better than others – and which idea is ultimately the best.

Trying to generate as many ideas as possible often makes it difficult to alter your train of focus. In other words, the longer this process takes, the more we start recycling the same ideas over and over again. This is why, when generating ideas, it’s important to have a wide perspective, as this will make this process easier.

Quantity creates quality. Sort of.

To a certain extent it’s true that quantity creates quality. By having a lot of ideas, there will be many ideas which are bad or impractical, but there’ll also be ideas between them which are excellent. There’s one simple rule while generating ideas and that is never scrap any. The first priority is to be creative, not to judge.

The process of judging is usually faster. Scrapping a bunch of ideas is usually pretty straight-forward – and more often than not you’ll end up with a condensed collection of good ideas. The challenge is then in figuring out which of the remaining is the best solution for the problem at hand.

Mining the Diamond

First we focus on techniques which generate ideas.

Association

Association is a very obvious technique for generating ideas; you use one idea as inspiration for the next. The risk of association is that you end up recycling the same concepts over and over again. In general it’s advisable to use the association technique during the very start of your project, as it’s a quick method to gain a fairly amount of ideas.

Logo development on Dribbble

Some preferred tools I suggest are moodboards and visual mind-maps. Choose a fairly visual approach as this can be more stimulating. I personally prefer to work on a large piece of paper or a whiteboard. Keep this mind-map with you throughout the whole project (if it’s a whiteboard, take a photo). It’s always great to be able to look back at it when you encounter creative block, plus you can gain inspiration from it. Besides, a good mind-map is something which grows as the project evolves.

What Defines a Good Brainstorm?

Daring ideas are like chessmen moved forward. They may be beaten, that they may start of winning game.

- Johann Wolfgang von Goethe

In general, the best brainstorms happen in a group. Equally, if you are in a group and need to come up with a creative solution for a problem together, then a brainstorm is often the best method. The great thing about brainstorming in a group is that everyone has a different point of view, so there’s a far less risk that you’ll keep recycling the same ideas over and over again. A good brainstorm follows certain rules. These make the process smoother and give better results.

Don’t pre-judge any idea.
Start with a key word and keep associating words until the first idea strikes.
The more ideas, the better.
A bad idea can inspire good ideas.
Freewheeling is allowed (stepping out of the problem context).
Every idea is property of the group, not of an individual.
Try to keep the group small (between six and eight people is usually optimum, eventually split in two groups if you’re with too many people).
Limit your brainstorm in time (usually between 15-30 minutes)
Choose the brainstorm leader who will enforce the rules, report during the brainstorm and keeps an eye on the time limit.
The evaluation of ideas starts after the idea generation; this should occur within the same group.

Reminder: Dare to share your bad ideas.

Coffee cup on Dribbble

That’s all well and good, but what if you’re alone? In general you can attempt the same, you’d just limit the timespan even more. Sadly enough, an individual brainstorm won’t be as efficient or interesting as one in group. However, there are work-arounds. For example, have a coffee or lunch with another person. This is a great opportunity to both have a small brainstorm regarding each other’s problems. Multiple points of view greatly increase the quality of your ideas. Even if it’s just a quick Skype call of ten minutes, it will never be a waste of time. Short but productive brainstorms are commercially very interesting, especially for agencies, but the connection between business and creativity will be a specific topic later on in the session.

Attribute Listing

This method is great when you’re alone and want to take your time. Attribute listing is usually a creativity method specific for design and consists of making a list of the problem’s characteristics. For example, listing the client’s needs. Besides, you add your own lists which you believe are relevant (such as a list of current web design trends, design styles, your favorite colors, etc.) The challenge is to question the different characteristics of the problem and try to combine them with items on your list. This can give unusual, yet interesting links such as attempting a new design style for a corporate identity.

If you enjoy this method, I highly suggest keeping lists of trends, colors, tools, websites which inspire you and so on. You can consider this your creativity map, which you keep up to date. Whenever you open it, it can help you with finding solutions, or at least break the creative block when you have no ideas at all anymore.

Observation and Inspiration

The final method we’ll be looking into is not a real method. Instead, it’s a general concept which you as creative person should understand. Inspiration is everywhere and anything can inspire you. For example, the movie Inception inspired me for a color scheme. Certain music inspires me to write. Looking at nature gives beautiful color palettes. It’s a matter of observing the world around you in such a way that you can draw inspiration from it.

Diamantina on Dribbble

This isn’t a real conscious process, but you’ll notice quickly enough when inspiration strikes because of something you’ve seen or heard in your daily life. See how beautiful (or ugly) the world is. That’s the general idea: don’t just look, also see and it can be a source of inspiration for you.

Polishing the Diamond

Finally, we look into how to handle your generated ideas. Everything starts with good selection. There are three methods to decrease the amount of ideas you have by grouping them together.

Cluster
Merge
Selection

Cluster

The idea behind clustering ideas is to group the ideas by observing their characteristics. If your ideas have certain familiar characteristics then you can combine them into one group. This way you’ll end up with a small number of tangible idea-groups and one rest group (comprising ideas that fit nowhere).

The selection of a small amount of abstract concepts behind a group of ideas is easier than comparing idea by idea. Once you’ve made a selection, you look at the different ideas within that group and make the abstract concept more concrete.

Merging

The merging of different ideas to achieve the final solution is often the most difficult way to trim the amount of ideas. Fortunately, it’s also usually the best solution if you are able to combine different possible solutions.

Combining different elements from multiple ideas will often give the best results.

It’s also perfectly possible to combine different elements from one idea into a single idea. The challenging part of merging ideas is that you usually have to redefine an idea’s characteristics and combine those – it can be pretty challenging to find which the best combinations are.

Selection

When you are in a group and you have to figure out which idea is the best, you’re going to have a difficult time if you don’t have any method to make the selection process fair.

In group, a democratic voting system is preferred, even though discussion is necessary to help everyone understand why a given idea is better.

Everyone has a different opinion and view, but in general a democratic voting system works out the best. I personally like the following system: All ideas are written down on sticky notes and stuck to a wall. Then, everyone receives between three and five small stickers. Finally, you put the stickers on your favorite ideas. The beautiful thing about this method is that you can choose to either support one idea with all your stickers or spread them over multiple ideas you prefer.

What’s important to understand is that this method gives a general idea of what the audience wants. It’s preferable to have a discussion on the two or three ideas with the most votes to understand their positive and negative aspects. The first choice may not always be the best, so this is why discussion in a group is quite important.

NAR-method

It’s better to wait with the NAR-method until you’ve selected a couple of ideas using the methods listed above. Very simply, each idea receives a score out of ten for the following characteristics: new, attractive and realizable. The idea is that you analyze every idea on each individual characteristic, instead of counting them together. After all, great ideas will achieve good score on each component.

Innovate on Dribbble

This method is also great for analyzing which ideas are, for example, very innovative (high score on new) but where you’re perhaps missing resources to make it happen (low score on realizable). This isn’t necessarily bad news; it’s an idea you can hold on to and use at a later date when you have the actual resources.

Conclusion

In general, creativity techniques are a process which will become part of your subconscious. However, if you’re completely new to creativity and need some help with defining how and what, our diamond metaphor could give you a great start for learning some techniques to help you with your upcoming project.

Jeet Framework; What’s New?

Cory Simmons — Mon, 13 May 2013 08:36:44 +0000

The Jeet framework is growing, so I thought I’d update you on some of the things which have changed or been added recently.

Amongst some of the changes you’ll find:

Jeet has been ported to SCSS (thanks to Oskar Zamorowski)
There’s now an NPM package available (thanks to Gabriel Manricks)

Let’s run through installation and setup of the new and improved Jeet..

Watch Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

TL;DW

Some of my tutorials can be a little slow, so if you want to get straight to the point, this is how fast Jeet can be..

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Couple O’links

Learn WordPress Plugin Development with Tuts+ Live Workshops

Joel Bankhead — Thu, 09 May 2013 15:58:02 +0000

We are excited to announce a fantastic new workshop led by Instructor Tom McFarlin: Introduction to WordPress Plugin Development

Are you an aspiring WordPress developer? Are you ready to take the next step and start building your own custom plugins for WordPress? Our newest Tuts+ Live Workshop is the perfect way to get started!

Tickets are a great investment at $99, but places are strictly limited so act fast to make sure you don’t miss out!

Introduction to WordPress Plugin Development

Learn more about Introduction to WordPress Plugin Development

Sign Up to Our Newsletter

If you’re interested in future workshops then definitely join the Tuts+ Live Workshops mailing list to stay posted on upcoming workshops and get notified as soon as they’re available, the Early Bird tickets for our previous workshops have all sold out, so it’s worth getting ahead of the game!

We’re really excited about new workshop, Introduction to WordPress Plugin Development, but places are strictly limited so act fast to make sure you don’t miss out!

Goodbye, Adobe Fireworks

Leigh Howells — Thu, 09 May 2013 11:28:18 +0000

The real world as we all know, is a place of hard knocks, bottom line economics and tough decisions. After one such decision, and a controversial one at that (see the number of comments), Adobe have this week announced that Fireworks, their unique product for web designers, will no longer be developed beyond the current version – apart from a few operating system updates and bug fixes (some long overdue).

Although Fireworks CS6 will continue to work today, tomorrow and in a year’s time, there seems little point for anyone to learn it as a new design tool. Fireworks has now left the real world and lies in a state of purgatory. No longer living, but not completely dead.

Those who have, like myself, been using it for many years may continue to use it to complete any current projects, or indeed new projects for the foreseeable future, but the reality is that I for one will be seeking new options and alternatives and slowly abandoning Fireworks completely as it is now officially non-sustainable.

It is always troubling when companies make decisions about their products that affect the workflow, businesses and ultimately lives of devoted users the world over. We have to get to used to the fact that nothing is permanent and find the time and courage to push on to the next new thing each time. In this instance products such as Adobe’s new Edge tools, including Reflow are being trumpeted as the future of responsive web design and prototyping tools, rather than those locked down to producing ‘pictures’ of websites. I mostly share this sentiment as it increasingly feels less and less appropriate to think in terms of static layouts.

So, no more Fireworks in the Real World tutorials, although what has already been shown has hopefully given a good idea of the power of the tool for those who wish to use it. Having followed Reflow’s development as part of the beta programme, I’m currently in the process of using it for my first real client situation to prototype and demonstrate a responsive design. Look out for Reflow tutorials coming to Tuts+ soon!

Filler Content: Tools, Tips and a Dynamic Example

Jim Nielsen — Thu, 09 May 2013 10:29:36 +0000

As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite helpful revolves around filler content. Currently, a variety of resources exist to aid designers who need filler content, whether it be text or images.

Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for ‘filling in’ a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all ‘filling in’ work for you?

We’ll cover your options for filler content in this tutorial. Everything from copying/pasting static text and images to dynamically generating them.

A Word on Filler Content

There are purists who recommend avoiding filler content at all costs. One argument is that filler content abstracts you from the ‘real’ experience of the website you’re building:

The goal here is to get as close to the real customer experience as possible. Don’t abstract yourself from the real experience. Every layer removed pushes you further and further away from the actual customer experience.

The fact is, sometimes you can’t imitate the real customer experience. If you have simple marketing websites with static content crafted by a content strategist, then by all means, use that content to build out the website’s design. The content should inform the design. But if you are designing a web application filled with user generated content, it’s often impossible to design around real content because you yourself cannot generate it; that’s done by your users. In addition, from a privacy perspective, it is likely that you aren’t allowed to use actual customer data to populate mockups. So you’re prevented from getting as close to the user experience as possible because of legal or privacy issues.

There are, however, steps you can take to stay close to the real customer experience:

If your site or application requires data input, enter real and relevant words and type the text, don’t just paste it in from another source. If it’s a name, type a real name. If it’s a city, type a real city.

If you use the right type of filler content, it’s possible to closely resemble the final user experience. Say, for example, your design calls for a list of names. Instead of using:

Lorem Ipsum
Sit Amet
Faucibus Eros
Carin Pulvinar

You can use real names:

John Stalewood
Jessica Alley
Stan Norwood
Trevor Singley

Once again, the goal here is to get as close to the real customer experience as possible. And if you can do that using filler content, go for it!

Because we care about our craft, our discussions about tools and techniques are often based on best practices and perfect solutions. Because we care, our workflow and expertise are improved with each project. However, perfect solutions do not often exist in the real world. This is why pragmatic alternatives (such as filler content) help finish projects in a timely manner. I believe this is perfectly fine, as long as we don’t compromise our principles.

Mockups

A preliminary mockup, as we all know, is no where close to the final, real customer experience. Your design will likely change drastically between the first and final iterations. Filler content can still be a valuable tool in seeing how text flows down the page, around images, and through breakpoints. It can help you get a feel for the placement of design elements, the balance of the page, and the use of negative space.

Doing away with it completely makes no sense. Filler content can be a critical tool in the initial design phase for rapid prototyping and iteration of design concepts. Once you move past the early stages of design, it would be very helpful to be using content which more closely resembles what the user will eventually see.

Conclusion

Where you draw the line on using filler content is up to you. There is no definite “yes, use it!” or “no, it’s a disgrace!”. The answer to “should I use filler content?” is, as it always seems to be, “it depends”. Sometimes talk of not using filler content is more about an ideal world and not the real world. You’re a professional, you decide. In the end, you’ll learn whether or not you made the right decision and the next time you face the question “should I use filler content?”, you’ll better know how to answer that question.

Filler Images

There are a number of hosted solutions for inserting images in your HTML document, allowing you to specify various image attributes through a URL. For example, to use placekitten simply put the image size you need after their URL. Then, use that URL as the src of your <img> element:

<img src="http://placekitten.com/200/300" />

If you don’t like Kittens (why are you on the internet?), here are some similar services which offer different customizations (see this roundup for more options):

Filler Text

There are a number of reasons why you would need to generate filler text. Perhaps you need to generate entire paragraphs for conceptualizing a blog design. Or, perhaps you need to generate categories of text, such as emails and names for styling a table design. Whatever your need, there are a variety of solutions for generating text in your designs.

Copy/paste text

There are numerous filler text generators on the web. As web design often deals with lists, tables and other data structures, many generators offer more than Lorem Ipsum paragraph filler. Below is a (small) list of filler text generators. Each one offers a variety of text configurations such as generating different languages, enclosing text in HTML tags, lacing text with headings/subheadings, adjusting text length and bolding or italicizing words.

For more comprehensive lists of text generating websites, here are a few roundups:

Dynamically generate text

You can dynamically generate filler content in your HTML documents using a JavaScript library such as:

As designing in the browser becomes more popular, the old copy/paste technique for filler content can become inefficient. Why not let the computer handle that job? Let’s cover this technique more in depth.

Putting it all Together, Dynamically

Let’s try putting some of what we’ve covered so far into practice by creating a design mockup. For simplicity’s sake, let’s imagine we are tasked with creating a basic website design which showcases excerpts of someone’s favorite articles from all over the web. We’ll call this person Franky and we’ll call the design “Franky’s Fav Five”.

This little example should help showcase the usefullness of dynamically generated content when designing a mockup in the browser.

Step 1: Basic HTML and CSS

First, let’s outline our basic HTML.

<html>
<head>
    <title>Franky's Fav Five</title>
    <link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

As you can see, we’re including three additional resources into our page: a CSS reset, a custom CSS stylesheet (which we’ll write later) and a link to Google’s hosted version of jQuery. Now, in our styles.css file, let’s include some basic styling rules for our mockup:

/* General
============================== */
body {
    font: 1em/1.45 Georgia, serif;
    background: #e9e9e9 repeat;
    color: #222;
}
img {
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: bold;
}
.wrapper {
    width: 95%;
    margin: 0 auto;
}
.content {
    padding: 0 2em;
}
a {
    color: #9c0001;
}

Step 2: Create and Style the Header

Now let’s create a simple header for our page. Again, nothing too sophisticated as this is just an example mockup.

<header class="header">
    <h1 class="header-title">Franky's Fav Five</h1>
</header>

Now we’ll add some simple styling to our header

/* Header
============================== */
.header {
    padding: .5em 0;
    background: #333;
    color: white;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.header-title {
    font-size: 1.25em;
    font-family: helvetica;
    font-weight: bold;
    text-shadow: 0 1px 0 #000;
}

Now we have a simple page with a header, like this:

Step 3: Main Article

Now let’s create the markup for our article excerpt. The point of this article is not to show CSS and HTML coding techniques, but rather how to work with filler content. Therefore, we will cover these steps very quickly with simple copying and pasting. First we’ll setup a wrapper and main article.

<section class="wrapper">
    <article class="article">
    </article>
</section>

Note: I appreciate a class name of “article” on an article element may seem a little absurd – remember this is purely a demo..

Article Image

We’ll use the lorempixel image placeholder service for placing images in our markup. As our article containers are set at a max-width of 600px, that’s the image size we’ll grab from lorempixel.

<img src="http://lorempixel.com/600/200/" />

Article Text

Now we’ll place all of our article text in a div. Our simple mockup will use the following repeatable pieces of content:

Article title
Meta information about the article
- Author’s name
- Source of the article
Article excerpt
Read more link

<div class="content">
    <h2><a href="#" class="article-title">Article Title Here</a></h2>
    <ul class="article-meta">
        <li><strong>author</strong>: Author Name</li>
        <li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
    </ul>
    <p class="article-paragraph">This is where all the paragraph text will go&hellip; <a href="#">read more &raquo;</a></p>
</div>

Essentially, this is our template for showcasing excerpts of Franky’s favorite reads. Now let’s style it!

Style the Article

We have our basic markup, so we’ll begin by styling the content.

    /* Article
============================== */
.article {
    max-width: 600px;
    padding: 0 0 2em;
    background: #fff;
    margin: 3em auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.article a {
    text-decoration: none;
}
.article a:hover {
    text-decoration: underline;
}
.article img {
    border-radius: 5px 5px 0 0;
}
.article-title {
    display: block;
    font-size: 1.125em;
    line-height: 1.2;
    color: #222;
    margin: 1em 0 0;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: capitalize; /* faker won't output the right capitlization, but CSS can handle it! */
}
.article-paragraph {
    color: #555;
    font-size: .875em;
    line-height: 1.5em;
}
.article-paragraph:first-letter {
    text-transform: uppercase;
}
/* Article Meta */
.article-meta {
    color: #777;
    font-size: .75em;
    font-family: arial;
    margin: .25em 0 1em;
    overflow: hidden;
}
.article-meta li {
    float: left;
    margin-right: 1em;
}
.article-meta li:after {
    content: '\00B7';
    margin-left: 1em;
    color: #ccc;
}
.article-meta li:last-child:after {
    display: none;
}
.article-author span {
    font-style: italic;
}

Now you’ll have a rather simple template for showing article excerpts which looks something like this:

Step 4: Introducing a Little PHP

So far we have one article excerpt (out of five, as this is “Franky’s Fav Five”). Rather than copy/pasting the markup four more times we’ll use a for loop in PHP. Doing so will will maintain a single template of our article excerpt while editing, but multiple article excerpts when viewing in the browser. This makes for easy maintenance; if we ever want to tweak our article excerpt template, we won’t have to do it multiple times.

Let’s wrap our article element in the following code:

<?php for($i=1;$i<6;$i++) { ?>
    // <article> element here
<?php } ?>

Notice our for loop starts with the variable $i being equal to one and will run until it’s less than 6 (so it runs 5 times).

NOTE: Be sure to rename your file to with the extension .php if you haven’t yet.

Now you should have something like this:

Notice how our image from lorempixel is the same in every article? To achieve a more realistic mockup, we’ll slightly modify the image’s src so we get a different image for each article excerpt.

Getting Different Images Using LoremPixel

LoremPixel allows you to slightly customize the type of image you’re retrieving. Here’s the customizations they allow in their URL structure:

http://lorempixel.com/400/200
- Requests a random picture of 400 x 200 pixels
http://lorempixel.com/400/200/sports
- Requests a random picture of the sports category
http://lorempixel.com/400/200/sports/1
- Requests picture no. 1/10 from the sports category

Currently we are using the URL http://lorempixel.com/600/200. What we’ll do is choose a category, such as sports, then use our PHP count variable $i to modify the URL so each article excerpt requests a separate image from the sports category.

To do this, find the <img> element and modify its source like so:

<img src="http://lorempixel.com/600/200/sports/<?php echo $i ?>" />

Now, as the php count variable $i increases with each for loop, our image URLs will request a different image each time. The HTML markup output by PHP will now look something like this:

    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/1" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/2" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/3" />
        .
        .
        .
    </article>

Now we should have something that looks like this:

Step 4: Dynamically Inserting Filler Content

Now that we have our basic template in place with a different image for each excerpt, we want to have different filler content for each article. This will help us better visualize the end product.

This is where a filler content library like faker.js comes in handy. Using the API of faker.js along with a little bit of jQuery we can dynamically fill up our HTML template on page load. Using the faker.js API is rather simple. You can find the whole API on the faker.js github page. Here’s the usage example:

<script src = "Faker.js" type = "text/javascript"></script>
<script>
    var randomName = Faker.Name.findName(); // Caitlyn Kerluke
    var randomEmail = Faker.Internet.email(); // Rusty@arne.info
</script>

As you can see, by including faker.js in our page we then have access to its API which can generate filler names, emails, addresses, content and more. Simply invoke the Faker object with one of its corresponding methods.

Implementing Faker.js in Our Own Page

First, let’s add faker.js to our page. We’ll add the <script> for it at the bottom of the page, after our call for jQuery. Here’s the link again: faker.js.

<script src="faker.js"></script>

Now, let’s try generating fake content titles using faker.js and jQuery. If you look through the API of faker.js, you’ll notice there are methods for generating sentences, paragraphs, and words of Lorem Ipsum content. Since we want something similar to an article title, we’ll want a sentence of Lorem Ipsum: Faker.Lorem.sentence(). This will spit out a single sentence such as “praesentium est alias dolor omnis sequi voluptatibus”, which will be good filler content for an article title.

Note: faker.js won’t output a capitalized sentence. By using the CSS rule text-transform: capitalize we can force the sentence to be capitalized; thus bringing us closer to proper formatting.

We’ll start by adding a class of faker-sentence to our article title template. This will act as a hook allowing jQuery to find all elements that should have their content replaced with sentences of lorem ipsum.

<h2><a href="#" class="article-title faker-sentence">Article Title Here</a></h2>

Then, using jQuery, we’ll cycle through each of the faker-sentence elements output by PHP and replace our static filler content “Article Title Here” with a randomly generated sentence of Lorem Ipsum.

$('.faker-sentence').each(function(){
    $(this).html(Faker.Lorem.sentence());
});

Now we should have something where each of our article titles vary in content and length and more closely resemble the dynamic content of our site.

Step 5: Filling the Entire Page

Now that we’ve replaced all of our article titles. Let’s think about the other content on the page we want to replace. We still want to fill in the following template pieces:

Author name – such as John Williamson
Online source – such as domainname.com
Paragraph text – such as a lorem ipsum paragraph

Rather than write out jQuery for each and every template piece we want to replace, we’ll abstract out the generating and replacing of content and then simply pass in what we want replaced as arguments.

Determine What faker.js Will Generate

First, let’s figure out what parts of faker.js we will use to generate the filler content we need. As mentioned, we need a person’s name, a domain name and paragraph filler content. Faker.js has the following methods we can use:

Faker.Name.findName() – gives us a name, such as John Williamson
Faker.Internet.domainName() – gives us a domain name, such as eldridge.co.uk
Faker.Lorem.paragraph() – gives us a paragraph of Lorem ipsum content

Add HTML Classes Where We’re Putting Filler Content

Now that we know what content we’re generating, we need to add an element and class where we’ll be putting our filler content. As we did above, we’ll prefix each class with “faker-”, that way when we move beyond creating a mock and stop using faker.js we can easily find and remove the filler classes we don’t need.

Note: make sure the filler content classes match the faker.js method names. So Faker.Name.findName() will need the HTML class faker-findName and Faker.Internet.domainName() will need the class faker-domainName etc. This will be helpful when we automate the finding and replacing of filler content in jQuery.

First, let’s handle the author by adding a span element with the appropriate class:

<li><strong>author</strong>: Author Name</li>
<!-- should become -->
<li><strong>author</strong>: <span class="faker-findName"></span></li>

Now we’ll handle the source by adding a the appropriate class to the source link:

<li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
<!-- should become -->
<li><strong>source</strong>: <a href="#" class="faker-domainName">onlinesource.com</a></li>

Lastly, let’s handle the article excerpt by adding a span element where our filler lorem ipsum will go:

<p class="article-paragraph">This is where all the paragraph text will go &amp;hellip; <a href="#">read more &amp;raquo;</a>
<!-- should become -->
<p class="article-paragraph"><span class="faker-paragraphs"></span>&amp;hellip; <a href="#">read more &amp;raquo;</a>

Now we just write a little jQuery that will find all our filler content elements and fill them with filler content generated by faker.js.

Let’s create a variable called args. This will be where we define the faker.js API methods we’ll be using. Remember, our HTML classes map to the faker.js methods and are simply prefixed with faker-.

Note: we’re adding Faker.Lorem.sentence() to our arguments, so you can remove the JavaScript we created earlier in step 4 to find/replace the article titles.

var args = {
    'Lorem'         :   ['paragraphs', 'sentence'], // maps to Faker.Lorem.paragraphs() and Faker.Lorem.sentence()
    'Name'          :   ['findName'],               // maps to Faker.Name.findName()
    'Internet'      :   ['domainName']              // maps to Faker.Internet.domainName()
}

Now we just loop over each of our arguments. The key in the array becomes the faker.js object while the value in the array becomes faker.js method. The value in the array maps to the HTML class so jQuery knows which element to look for.

// loop over args
for (var key in args) {
   var obj = args[key];
   for (var prop in obj) {
        // jQuery finds the appropriate elements and fills them
        $('.faker-'+obj[prop]).each(function(){
            // Faker.Lorem.paragraphs()
            // Faker.Internet.domainName()
            $(this).html( Faker[key][obj[prop]]() );
        });
   }
}

That’s it! Now you should have something like this:

Abstracting out our filler content process in this way makes adding/removing new types of filler content really easy. Now in the future, if you want to add a new filler content type from faker.js, such as an email Faker.Internet.email() all you have to do is add it to the args variable and then create an HTML element with a class of faker-email wherever you want a fake email generated.

Conclusion

We’ve built a simple mockup in the browser, showcasing a design example of five article excerpts.

Our template for each article excerpt is only 13 lines of PHP/HTML, while the resulting HTML would be much more than that. This makes for fast and easy prototyping. At this point, we could easily test the responsive nature of the design and see how content and text reflows. We could tweak any CSS that requires it, or we could very easily add more design elements with corresponding filler content. Dynamic filler content makes for quick prototyping of designs. Perhaps you’ll find a need for it in a future project!

Other Uses

As you might possibly see, this type of prototyping could be useful for many other web design tasks – especially data-driven ones. For example, if you needed to design a table of contacts with names, addresses, emails, phone numbers, and more, you could use faker.js to easily generate any filler content you need. This allows you to more easily focus on the design of the table rather than having to copy/paste tons of data into your HTML just get a feel for how it looks and responds.

Typographic Readability and Legibility

Jeremy Loyd — Wed, 08 May 2013 12:18:25 +0000

When using typography on the web, there are many things to keep in mind in order to create a page that provides clear access to the content and presents it in a legible way. Typically this can be broken down into two buckets: Readability and Legibility. Readability refers to the way in which words and blocks of type are arranged on a page. Legibility refers to how a typeface is designed and how well one individual character can be distinguished from another. For the sake of this article, I’ll talk a bit about both, suggesting some specific techniques to improve your typography.

Legibility

Let’s talk legibility first. It’s important to understand what makes one typeface more legible than another. When choosing a typeface, it all depends on how you plan to use it. Ask yourself some basic questions: What size will the text be used at? Will it appear as body copy or a headline? Does it need to be a workhorse or will it be used more as eye candy? Will it be paired with another font? Does the appearance of the typeface complement the subject matter?

It’s also important to keep in mind that different typefaces were designed for different uses. For example, the original Garamond was designed to be highly legible when printed in a large body of text. Some also say it was the most eco-friendly font of its time, conserving ink usage. Bell Centennial is a typeface commissioned by AT&T in the 1970′s, designed to be used in telephone directories. These directories were made from cheap paper and for this reason Bell Centennial was designed in a way to accommodate ink spread during the printing process. On the digital side, there are fonts that have been designed specifically for the screen such as Georgia and Verdana. Azura is a relatively recent font designed specifically for reading text on screen.

In short, it helps to know the intended context of the typeface you are considering using. Some fonts are indeed quite flexible, include several weights and they can be used in several ways. Others are more constrained, designed to be used very specifically.

This leads us into the first of a few things to remember concerning a typeface’s legibility:

Display vs. Text

Some typefaces were designed to be used large, such as in headlines. Usually these typefaces are less readable at smaller sizes and should not be used for body copy. These are called display faces. The typeface shown below, Knockout, is one of my favorite display faces.

Other typefaces are designed specifically to be used in large areas of smaller body copy. These are called text or body faces.

There are many variations in between. Typically, what I do is find a face that I think is appropriate for the task, keeping in mind that I plan to pair it with another font, and try it out. I’ve already filtered out all of the fonts that I don’t think are appropriate for the task, but if you’re just beginning, it may take some trial and error.

Serif vs. Sans Serif

So which is more legible: serif or sans-serif typefaces? History tells us that serif faces have always been regarded as more legible, as they were almost always used in print for large passages of text. The serif faces allow the eye to flow more easily over the text, improving reading speed and decreasing eye fatigue.

That said, there are many readable sans-serif faces. Online it seems sans-serif faces are being used more for body text than ever. I think there are several reasons for this. The simpler letterforms seem to work better with current design trends and can feel more modern. Also, we typically don’t read large passages of text on a website, so sans-serif fonts do just fine in shorter chunks of copy.

It should be noted that there is debate on this subject – one viewpoint is that serif faces don’t reduce well on-screen essentially decreasing legibility. Others believe that there’s no difference. The position I always take is, does it feel right? Would I read a section of type set the way I designed it?

x-height

Another characteristic to note is x-height. This typically applies to using type at body text sizes. The x-height is, well, the measurement of the height of the lowercase “x” in a given font. It doesn’t take into account the height of the ascenders or descenders. You may be surprised to know how much difference there is in x-height from one face to another. When used small, typefaces with larger x-heights are typically more readable.

Readability

Readability is about arranging words and groups of words in a way that allows the readers eye to access the content easily and in a way that makes sense. It’s really an art form that is honed over time as successful combinations are found.

In my experience this tends to be one of the hardest concepts to grasp for beginning developers and designers alike. Even seasoned designers sometimes struggle with how to best arrange typography in a layout. Now that those two designations are starting to merge when it comes to web design, it’s important to begin to grasp the concept of readability. Here are a few things to keep in mind:

Spacing/Line Height

One of the most common typographic “mistakes” I see on the web today is improper type spacing. What I’m referring to here is instances where a block text isn’t given enough margin, subheads and correlated body text which aren’t visually grouped together, and so on. Proper spacing (combined with hierarchy) allows the reader to scan the text and access it at the desired points.

It’s not a hard-and-fast rule, but it seems to me that the relationship of paragraph spacing (additional spacing placed before or after a paragraph), the space around a block of type, and letter spacing can be related proportionally to the line height of a paragraph. Line height is defined as the vertical distance between lines of text. So for instance, if the line height of one paragraph is set to 2em and a paragraph with the same size text is set to 1.5em, the first paragraph will require more paragraph spacing and probably more margin around it.

Much of this is done by eye rather than an exact formula, but I do use a good rule of thumb when it comes to the relationship of paragraph spacing to line height. I typically make my paragraph spacing (which on the web translates to margin or padding placed at the top or bottom of a paragraph) around half of the line height. This tends to help passages of text “hold together” rather than using a full hard return between each paragraph, creating large amounts of space between paragraphs.

Size

Obviously, care should be taken to make sure that text is not presented too small. It’s also important to remember that the age of your audience may vary, hence the quality of their eyesight. Generally, it’s good to stay around 13px or .813em at smallest. Currently, with the wider implementation of responsive websites, there’s a trend moving toward larger body copy. In RWD, it’s also important to keep in mind that different text sizes for different devices may make sense. For instance, it may make sense to increase body copy size on a mobile phone width as opposed to a desktop width.

Measure

Another common practice that hinders type readability is allowing the horizontal lines of type on a page to become too wide. This distance is referred to as measure (also sometimes line length). If a line of type is too long it’s a tedious read and a stretch for the reader’s eye to return to the left edge of the text block for the next line. It’s also intimidating to see a block of text arranged this way and some readers may not even attempt to read it.

So what’s the maximum width a text block should be? Well, it all depends on the size of the text. The larger the text, the longer the line can be (that whole proportion thing again). In my opinion, generally around 70 characters is as long as you want to be. On average, for body copy sized text, I try to stay within 45ems.

Letter Spacing

Letter spacing (also referred to as tracking) is the consistent increase or decrease in distance between the letterforms in a word or block of text. It’s not to be confused with kerning, which refers to adjusting the distance between individual characters. Letter spacing can be used to adjust the density of a block of text or an individual headline or subhead.

Obviously, letter spacing does affect the readability of text. Too much or too little and readability will be compromised. However, there are times when, in my opinion, letter spacing is needed. As you can see in the graphic below, I like to add generous letter spacing to subheads or phrases of uppercase text. I find it’s easier to read uppercase text when the characters have some additional space around them. Also, depending on the typeface used, I like to increase letter spacing slightly in body copy.

Contrast

It may sound obvious that good type contrast is essential for readability. The fact of the matter is designers (myself included) are always pushing the boundaries of contrast. It might be that we want a certain section of text to be less prominent, or to create “layers” of hierarchy in our design. Whatever the case, keep in mind that on screen contrast, especially when it comes to small, fine shapes like body text, vary greatly from screen to screen. It’s best to err on the side of a bit “too much” contrast.

Hierarchy

As we’ve already discussed in this series, hierarchy plays a big part in the readability of content. A successful hierarchy organizes the content into digestible parts and allows the reader to scan and access the text easily.

Start thinking about employing these legibility and readability concepts into your projects. The more you do it the better you’ll get.

The World of UX Anti-Patterns

Sarah Kahn — Wed, 08 May 2013 07:47:51 +0000

As a user of the web, from time to time you may find certain things which are really annoying. Perhaps something about a login form, navigation, or a web application in general, makes it difficult for you to complete a given task. Why has someone designed and built something in this way?

The answer is complicated. The first and foremost problem is that those responsible may have neglected to test their design with real users. Often, when this is the case, they likely thought they knew of a good way to handle that interaction. After all, they’d seen it on other websites, and surely those designers tested it? Why reinvent the wheel?!

The problem here is that sometimes the competition may not be as smart as you give them credit for. So while we’re all busy visiting CSS galleries and copying each other’s work without testing it, we’re inadvertently building up a library of patterns.

Some of those patterns work, but some do not. If the wheel you are copying is actually square (hey, it works if you push really hard!), then yes Virginia, you actually do need to reinvent the wheel.

Consider the following:

Your users are not necessarily Amazon’s users, or Google’s users, or even your competitor’s users. To find out whether a design pattern will work, you really need to test it with your unique users. Maybe your users are all sailors from Dubai (a use case that actually occurred in my organization recently). Your users have different needs than the users of other websites.
But aren’t there certain known things about the way the human brain interacts with information?

Yes. But again, that is a spectrum. There are very few absolutes. Take, for example, this recent study by Harvard University, which resulted in a game that could guess your age by your mouse clicking speed (I took it, it was spot on!)

Users have different needs by age, physical ability, culture, and more. That’s why canned solutions can so often backfire.

What is an Anti-Pattern?

An anti-pattern is a frequently used design pattern that either outright doesn’t work or is counter-productive. You’ll see them in web applications and websites, anywhere where a user needs to perform an action in some way, whether it’s logging in, providing information, or reading information in order to make decisions.

How to Identify Them

As a web designer, you’ll probably have an easy time recognizing when something is blatantly ineffective (for example, a hover-over menu that closes before you can click a menu item). However, anti-patterns are often more subtle. A determined user will get past them, but not without a certain amount of pain.

To identify them, it’s best to turn to your web metrics. If you aren’t using metrics on your site, get started yesterday! Google Analytics is a great choice to start with, since it’s free and easy to set up.

What are you looking for in your metrics? Some things that will indicate the presence of a problem (and possibly an anti-pattern) include:

Users dropping off of pages.
If many users navigate to a certain page but then suddenly disappear, you perhaps need to have a closer look at what’s going on on that page. Do they need to complete an action to proceed? Are they unable to find where to go next? Is the whole page a flashing animation? You won’t know until you investigate. Flag this area for further analysis and real live user research.

Random clicking.
If users are clicking all over, that means they don’t know what they’re actually supposed to click.

Repeatedly scrolling up and down.
If users are scrolling up and down, it means that they can’t find what they’re looking for, or what they’re expected to do.

Some Common Anti-Patterns

A usability problem does not necessarily equate to the presence of an anti-pattern, but it could be a clue. Many anti-patterns have been studied and shown to be inefficient often enough to be generalized as a bad idea. Here are some of them:

Clickable elements which don’t appear clickable

Instances of this include:

Buttons which are too small.
Text links which aren’t visually distinct (blue is best!)
Buttons which are too flat to cue users that they are in fact buttons (for more on usability problems with the flat design trend, read this article.)
The absence of hover states can also be problematic, including failure to use {cursor: pointer;}.

Hover and cover

It’s convenient to declutter interfaces by hiding information behind hoverable objects such as buttons or captions, but be sure that the information doesn’t hide again too quickly. Users can’t read as fast as you think they can. It’s pretty annoying to have to keep mousing to keep information visible.

Inconsistent context

For example, the presence of three different kinds of links on a page. One type returns the user to the homepage, one type takes the user outside of the site, and the third opens a popup. This could be confusing and frustrating.

One at a time

In a complex list where users perform actions such as adding, deleting, or changing the state of list items in some way, provide a batch option! Being forced to make edits one item at a time is tedious and painful.

Tons of content crammed above the fold

Studies have shown that users do in fact read below the fold. Yet somehow, the myth of keeping content above the all-important fold persists. Space out your content!

Pogo stick navigation

Pogo stick navigation is when the user is required to go down a level or two to perform an action, come back up to the top, then go back down again. The name was coined by Jared Spool and describes the jumping action of having to navigate down, up, and down again.

Erasing information on error

An example of this could be any form where a user saves, triggers an error, and is then forced to re-enter all or part of the information they entered previously.

The wrong destination

This is when an action is completed and the user is taken to a different page than they were expecting. A common occurrence of this is on eCommerce sites, where a user is required to sign in to complete a transaction. However, when they sign in, they’re taken back to the front page instead of to the page where they were ready to enter their credit card information.

Homework

Take a look around your current project, with an eye for some of these patterns. Have a friend or uninvolved coworker walk through, and watch what happens. Do they become frustrated anywhere? Places where things don’t seem to go smoothly could be a sign of an anti-pattern.

These are just a few! What anti-patterns have you noticed around the web? Have you fallen into any of these pitfalls on your sites?

Try Tuts+ Premium, Get Cash Back!

Joel Bankhead — Tue, 07 May 2013 18:00:33 +0000

Try Tuts+ Premium and get cash back on a monthly subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you! For a limited time, we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal.

If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides, there’s never been a better time to join up and dive in.

But this offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member to take your creative and technical skills to a new level.

With Tuts+ Premium you learn from expert instructors in every field, such as:

Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
Illustrator Russell Tate (McDonald’s, Coca-Cola)
Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Designing a Modular User Interface Kit in Photoshop

Suhail Dawood — Mon, 06 May 2013 11:32:42 +0000

The role of Photoshop in web design is becoming more modular. Instead of composing a pixel-perfect layout of an entire web page, it’s perhaps more sensible these days to concentrate on general styles, color schemes and specific interface elements. Today we’ll be looking more closely at designing UI elements, pulling together our own UI kit in the process.

Learning by Example

Before we get started designing our own collection of UI elements, let’s take a look at some websites which are doing a great job with their interface. It certainly doesn’t hurt to get some inspiration!

Exhibit A: Flow

Flow’s UI

Flow does a great job with their user interface. It’s totally clean, vibrant – and just by looking at it you instinctively know what do do and where to go. Notice the great use of colors and icons which are incorporated into the web application.

Exhibit B: Gumroad

Gumroad’s UI

Gumroad has a great vibe going on with their interface. Not only is the interface fun, it does a great job of presenting information in a clean, concise and simple manner. Notice how the call to action buttons really leap out from the page.

Exhibit C: Squarespace

Squarespace’s UI

Squarespace takes minimal and clean to the next level. Without the use of colours, the interface still allows users to easily navigate through the dashboard. Notice how even though theres a lot of content, the smart use of shading makes all those numbers less intimidating.

Exhibit D: GoSquared

GoSquared’s UI

GoSquared‘s UI shows that content-heavy web applications can also leverage great design. With the use of modules the interface becomes clean and consistant. The great use of color accents also add to the UI. Notice how this type of interface lends itself well to customization; users can easily shift, remove, add or edit modules.

Creating Our Own Design

Now that we’ve taken a look at some existing user interfaces, it’s time to take a crack at it ourselves!

We’ll begin with the header.

Color Scheme

As we saw earlier, colors are very important when it comes to a web application; a color scheme helps define the atmosphere and makes the app easy to identify. Different colors also provoke different moods or themes (for example, Gumroad’s playful colors suggest the web app is stress-free and easy to use), and they can be used to target different demographics (for example, bright and vibrant for a young audience, neutral and simple for an older audience).

Keep in mind that it might be best to choose a modest color scheme with colors that are easy to look at. Also, make sure you use contrast and different shades, as this helps define visual hierarchy and makes the content a lot easier to filter through, as seen in the examples above. As we don’t really have a purpose for this app, we will be modest and choose a sophisticated, blue-gray color scheme:

Eight main colours we’re using for our design

Style

Being unique in terms of style is important for a web application; like colors, style is one way to make your application recognizable and stand out from the rest. Today, our focus will be on modern and simple. Although gradients are great on their own, adding textures and patterns can make elements stand out and create a more tactile experience. To achieve that effect, we will be using a noise pattern on the navigation bar and the buttons. Check out the difference:

Notice the difference the noise makes on the left? Simple, but effective!

In addition to the patterns, we’ll use layer styles to tweak the buttons so that they not only stand out, but their states are also distiguishable. In the image above, you can clearly see that the ‘Home’ button is active.

Step 1: Setting up the Design

Without any further delay, let’s fire up Photoshop! Start off by creating a new file that is 600px wide and 350px high (default web settings). Create a rectangle shape that fills the whole canvas and rename the layer to ‘BG’. Since we have a background now, delete the default ‘Background’ layer. Next, change the fill color to #dde3ec.

Now, create a new rectangle shape that is 600px wide and 70px high, and align it to the top of the canvas. This will be our web app’s navigation bar. It is important to keep dimensions in mind when designing, in this case, we don’t want a navigation that is too big and intrusive to the rest of the app, so 70px is ideal.

Note: In a browser situation we may well be using ems to size our page elements, but when using Photoshop we need to stick to pixels.

Rename that layer to ‘Nav Bar’ and change the fill color to #303844. It’s important to choose a contrasting color for your navigation element and make it stand out from the background. In this case, we have a light blue background and a dark blue-gray navigation bar. Lock the positions of both layers, just so they don’t shift accidentally. Here is what you should have at this point:

Step 2: Creating a Noise Pattern

Before we start adding styles to our navigation bar, we’ll simulate the noise pattern that I mentioned before.

Create a new file that is 100px wide and 100px high (default web settings). Create a new layer, select the whole canvas (cmd/ctrl + a) and fill it with any color (cmd/ctrl + backspace). From the menu, navigate to Filter > Noise > Add Noise. Set the noise amount to 400%, the distribution to Uniform and make sure Monochromatic is selected. Here is how it should look:

Once you have that, go to menu, Edit > Define Pattern, name the pattern ‘Noise’ and click ‘Ok’. Now, you have a noise pattern that you can use to style elements! There are a lot of great resources online that provide patterns for web use – try experimenting with them to create a unique look!

Step 3: Navigation Bar

Returning back to our web app UI PSD, go to the layer style options for the ‘Nav Bar’. Using some layer styles, it is easy to add some great effects this simple shape.

We will start off by adding a 1px stroke outside the layer, with the fill color #000000 and the opacity at 100%. This will give us a defining line separating the element from the background.

Next, we will add a drop shadow to the layer: blend mode as normal, color as #000000, opacity as 58%, angle as 90 degrees, distance as 1px, spread as 0px and size as 5px. This drop shadow will lend a nice effect highlighting the navigation bar and making it more prominent.

Next, we will add a inner shadow: blend mode as linear dodge (add), color as #ffffff, angle as -90 degrees, distance as 1px and choke and size as 0px. This linear shadow adds a 3D effect to the navigation bar and just adds a bit more to the design.

Our navigation bar looks a little flat (nothing wrong with that, bny the way!), but let’s add a gradient: blend mode as overlay, opacity as 20%, default black to white gradient, style as linear, and angle of 90 degrees. To help our gradient out let’s add the pattern we were working on earlier: blend mode as overlay and opacity as 1%. Here is what you should have:

Step 4: Buttons

Active Button

Now that our navigation bar looks great, it’s time to add some items into it. The design of the buttons is quite important to an interface’s design – they are used a lot and need to be both distinguishable, functional, and representable of the brand.

Distinguishing between different button states is also important – the user needs continual feedback, so by altering the layer styles a bit, we can create various states. We will start off by creating the active button.

Create a new layer ‘Nav Button Active’ with a rounded rectangle shape: width of 100px, height of 40px, and a border radius of 4px. Again, dimensions are very important. The width and height of the button relies on many factors such as the dimensions of their parent elements, the amount of text and the size of text. Position it vertically centered, with respect to the navigation bar and 40px from the left of the canvas.

Set the fill color to #90a2c3, the fill opacity to 25% and open up the style settings for the layer. Once again, create a stroke that is 1px outside the layer, has an opacity of 100% and has a fill color #000000. Next create an inner glow: blend mode normal, opacity of 13%, color of #000000, choke of 0px and size of 4px. This inner glow gives us the ‘pushed in’ effect.

Now, for the drop shadow: blend mode of normal, color of #ffffff, opacity of 10%, angle of 90 degrees, and distance of 2px. This drop shadow adds further to the pushed in effect.

Next, add a gradient: blend mode normal, opacity of 6%, default black to white, linear, and an angle of 90 degrees. Just as we did with the navigation bar, add a noise pattern with the blend mode overlay and opacity of 2%.

The result is a button that has an intuitive quality to it; without even looking at the other button states, a use can immediately recognize that whatever text in that button is referring to content that is actively on the web page.

Button Text

Text is equally important on a button; keep in mind that it requires breathing room based on the size of the button you choose as well as the amount of content you wish to display in the button.

Create a new text layer named ‘Text Active’. Set the color to #f3f5f9, font size to 12px and font family to Helvetica Neue.

Note: Helvetica Neue is present as a system font in many versions of OS X, bu not so for Windows. You may prefer to use Arial for this UI kit, as it’s more widely available to the end user.

Add a drop shadow: blend mode as overlay, opacity of 35%, angle of -90 degrees, distance of 1px and spread and size of 0px. The sans-serif text now looks like it is pushed in with the active button. Finally, center the text with respect to the button. Here, what we have is a rather simple text inside the button, but using a color that is consistent with the theme and a simple drop shadow, it enhances the content and makes it a lot easier to read.

Normal Button

Now, let’s create a normal styled button for items in the navigation bar that are not active. It’s important to maintain the theme of the other button state, but also change the styling so that it is suitably different from the active state.

Duplicate the ‘Nav Button Active’ layer as ‘Nav Button Normal’ and the text layer ‘Text Active’ as ‘Text Normal’. To make the normal state button look different, we will inverse that pushed in look and style the button so that it looks like it is pushed out of the screen. This not only makes it stand out, but lets the user know that it can be selected. Start by changing the button fill color to #c2dcff and fill opacity of 5%.

Also, change the drop shadow: blend mode of normal, color as #000000 opacity of 10%, angle of 90 degrees, distance of 2px. Next, change the inner shadow: blend mode of normal, opacity of 25%, color as #ffffff, distance of 1px. Now, add an inner glow: blend mode of screen, opacity of 7%, color as #ffffff and size of 3px. Finally, change the gradient opacity to 13% and remove the pattern overlay. The result will be a button that’s a bit lighter than the navigation bar, standing out with the help of the drop shadow and stroke.

Differentiating the text color and styling is another way you can make states look different. Change the text color to #e8ecf3 and the drop shadow so that the opacity is 50% and the angle is 90 degrees.

Power Button

Instead of giving the user a boring ‘Login’ button to click on, why not change things up and have a power icon instead? Doing this will add something creative and unique to the design, whilst also allowing users to quickly distinguish the login button from everything else. Start off by duplicating the ‘Nav Button Normal’ Layer to ‘Nav Button Login’. Adjust the size of the shape so that it is a 40px by 40px rounded square. You can do this by using the direct selection tool, selecting the 4 points on the right side of the shape layer, and shifting them to the left so that the width changes to 40px (shift + <). Use this method rather than transforming the shape layer, as that distorts the rounded edges.

To create the power icon, create a series of shapes on one layer named ‘Power Icon’. First, make a 16px by 16px circle. Next, subtract a 12px by 12px circle in the center of the larger one. This should give you a 16px by 16px circle that is 2px thick. Next, subtract a square 6px wide aligned to the top center of the circle. Finally, add a 2px wide, 8px high rectangle centered with respect to the subtracted square and aligned 1px above the highest point of the circle.

At this point, you should have one shape layer with the power icon. Change the color of the power icon shape to #ffffff. Open up the layer styles and add a drop shadow: blend mode of overlay, color as #000000, angle of 90 degrees, distance of 1px and spread and size of 0px. Then add a gradient: blend mode of normal, opacity of 10% and default gradient of black to white.

Finally, align the login button icon to the center of the login button and align the button 40px from the right of the canvas. Here is how the finalized navigation bar should appear:

Even though we used the same styling for the this button as the other one, replacing the text with an icon enhanced the overall design.

Step 5: Login Dropdown

We’ve established a great base for our web application’s UI, but so far we’ve only designed buttons and backgrounds. Let’s try to expand the UI by adding a dropdown login interface. This will give us a chance to create some form elements and buttons styled for different backgrounds.

Base Design

Let’s first make a new rounded rectangle (4px border radius as before for consistency) that is 300px wide and 200px high, naming it ‘Login Dropdown BG’. Next, add a triangle that is 14px wide and 7px high to the ‘Login Dropdown BG’ layer and align it 13px from the top right of the rounded rectangle. This will create a tooltip effect to the dropdown and represents a connection between the login button above it.

When we change the color of the login drop down to #ffffff, it doesn’t exactly stand out from the canvas background. To make it stand about more we will add a drop shadow: blend mode of normal, opacity of 25%, angle of 90 degrees, distance and spread of 0px and size of 4px. This gives us a subtle shadow to the drop down, making it not only more prominent, but also giving the effect that it is hovering over the background. If you were coding this, it might be a good idea to add a short animation to add to the floating effect. Align this drop down shape 40px from the right of the canvas and 13px from the bottom of the navigation bar. Here is what we have so far:

Notice how the alignment of the dropdown is flush with the button? Consistency with position and padding makes the cleaner, and it is easier to code within a container.

Text

Now, add a text layer with the text ‘Log in to your account, or create a new one.’. Change the font size to 12px, font family to Helvetica Neue (Regular) and the color to #92969b. To represent a link, change the color of the ‘create a new one’ to #5c6f91.

With respect to the ‘Login Dropdown BG’ layer, align the text 14px from the left and 20px from the top. We don’t want to make the text stand out too much as we want users to focus on actually logging in, which is why a relatively smaller font size and lighter colors is a good idea.

Text Field

It’s important to remember that our text field should fit with the theme of the design, but also stand out enough so that the users can recognize it and fill it in. Create a new rounded rectangle (3px border radius) that is 270px wide and 30px high and name it ‘Text Field’. Notice that instead of a 4px border radius, we are using a 3px border radius for the text field. The reason for this is because the text field is within the dropdown and it would look awkward if the radius size was the same.

Change the fill color of the layer to #f9fafc and add a 1px stroke outside the shape that is the color #d3d8e1 (100% opacity). To add a bit of a highlight to the text field, add an inner shadow: color of #ffffff, opacity of 100%, angle of -90 degrees, distance of 1px and spread and size of 0px. I chose to change the color of the text field so that it stands out and doesn’t blend into the background of the drop down.

Add a text layer with the text ‘Username’ (12px font size, Helvetica Neue Regular, color of #727d88) and align it vertically centered and shifted 10px left with respect to the text field. Align the text field 14px from the left of the drop down background and 18px from the bottom of the text layer. To create a password field, simply duplicate the text field layer and text layer and align it 12px from the bottom of the first text field layer. Here is what you should have at this point:

Notice how the sizes and positions of all the text and text fields look natural; you don’t want to keep too much or too little space, but rather just enough for the content to fit comfortably.

Login Button

It’s time to add a login button for our form drop down, but the button we created for the navigation won’t exactly fit in with the design. This is because now, we are dealing with a light background and the styles used on the navigation bar will not stand out against the white background of the dropdown. Contrast is very important for an accessible interface.

We will create a secondary button style, one that can be use for the main content of the app and which also works well on light backgrounds. We will be using similar styling from the navigation buttons to style the login button, so that our style is consistant.

Start off by creating a new rounded rectangle shape (3px border radius) that is 90px high, 35px wide and name it ‘Login Button’. Change the fill color to #a3b2cd and add a 1px stroke outside the shape layer that is the color #7b8da4 (100% opacity). Next, add a gradient overlay of 25% opacity, with the default black to white colors. Finally, add a normal inner shadow with the color #ffffff, 45% opacity, angle of 90 degrees, distance of 1px and spread and size of 0px.

For the textual content, create a new text layer (12px size, Helvetica Neue Regular, color #ffffff) with the text ‘Login’, and add a drop shadow: blend mode of overlay, color #000000, distance of 1px, and spread and size of 0px. Align the text layer to the center of the login button.

Just like Gumroad’s design, we want our users to know exactly where to click after they fill in their login details.

That’s it with our foundation UI design!

Expanding the UI

After a couple of layers and a couple more layer styles, we have completed the design for the foundation of our web app’s UI! With what we have, you can get a feel for the theme, style, colors and elements of the user interface.

Building Further

With all the ground work we’ve done, it’s relatively simple to continue designing more elements. We have laid out the color scheme and style of our design, so all that is required is to make more shapes and tweak the colors/layer styles. Essentially, once you have foundational design elements, you can lay out significant modules from your application.

The best part about creating a ‘sample’ UI is that it doesn’t require as much effort as if you were to create a complete UI set. Let’s say you aren’t happy with the direction the UI is going – it’s better to walk away from a small collection of elements rather than throwing hours of work down the drain. This workflow approach also allows you to explore a bunch of different UI themes and choose the one that’s perfect for your app.

Fireworks in the Real World: Vectorise All the Things

Leigh Howells — Thu, 02 May 2013 18:18:35 +0000

This is the last episode during which I’ll be going over generic tools and capabilities, but it’s simply not possible to go any further without covering the vector tools within Fireworks! Vectors are becoming increasingly relevant in web design; pixels are less reliable than they were just a couple of years ago and designs are becoming more and more flexible.

As with many features in Fireworks, precisely how powerful the vector tools are will only become clear to you once you dive in. So let’s do that!

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Intellectual Creative Block

Sven Lenaerts — Thu, 02 May 2013 14:52:26 +0000

Beating any form of creative block is difficult, but hopefully this creativity session has helped so far. Today, we’ll conclude our coverage of creative block, discuss some creativity techniques and prepare ourselves for becoming more creative.

Rehearsal

Before we look at the final type of creative block, let’s first summarize the content in the session so far. Are you still trying to be creative every day? Do you notice you’re getting better at it? Keep it up! By the end of the session you have a wonderful habit.

The creative thinking process

First Look: Define the exact problem
Saturation: Collect information, gain knowledge
Incubation: Think of possible solutions
Relief: Your sudden stroke of genius
Verification: Test your solution in reality

This knowledge is important in defining why exactly you’re struggling with a creative problem. In other words, recognizing in which phase you have your creative block helps you find a solution. Once you have identified creative block, you can define what type of creative block you’re suffering:

Observational block: Problems with seeing and understanding the problem or the information for solving the problem
Environmental block: Problems which are caused by your environment
Emotional block: Problems which hinder your freedom our intervene your personality
Intellectual block: Problems with strategy, persuasion and expression (more on this shortly..)

Defining what’s caused your creative block is your biggest help in defeating it. For example, you might realize you’re having trouble during the incubation phase because of an environmental block and that you’re focusing too much on left-sided (creative) thinking.

Recognizing this, you take a break and later focus on logical thinking to solve the problem. Keep using these different terms, become familiar with them and they will absolutely help you with your day to day creativity.

The Intellectual Block

Alright, so far we’ve rehearsed the essentials of this session. Let’s explore the final type of block; intellectual block. This type is often quite challenging to combat as it requires practice and refinement. Whenever we speak about intellectual block, we mean that someone has a problem with their strategy (the way a person works), their persuasion (the way a person sells his idea) or their expression (the way a person acts and talks).

As you’ll notice, these can be issues which aren’t specifically related to creativity, but they can influence your creative process none-the-less. Let’s look at some solutions.

1. Choosing The Right Language

By “the right language” I mean the kind of “thinking language” we use. In general, our culture has an emphasis on verbal thinking. For analytic and logical thinking, that’s pretty good, but for creativity other methods of thinking can be very helpful.

Sketchnotes on Dribbble

Remember in the first article, that the way we perceive the world is important as a creative person? Creative people are efficient observers, they have a great visual mind and they are able to put their visual thinking into analytic context. They not only look, they also see.

Naturally, this isn’t the only way we think. For example, some people are great at mathematical thinking. Important for this specific problem is that you shouldn’t be too focused on one specific form of thinking language. Verbal is great, but most probably you also need visual thinking to be able to solve the problem. Finding the right thinking language isn’t an easy job and depends on the problem you have to solve, but some logical thinking to start with is never wrong. After all, you always need to start from a context before you can get creative.

If you’re interested in different kind of thinking approaches, Edward de Bono has a wonderful theory called the Six Thinking Hats which offers a different perspective on how we think.

2. Flexibility in Your Strategy

I’m as proud of what we don’t do as I am of what we do.

- Steve Jobs

One of the most important lessons you can draw when it comes to strategy is that we simply lose too much time in making a strategy choice. The great thing about selecting a strategy is that our intuition often does the right thing at the right time.

Whether you work in group or as individual, understand that finding the perfect strategy is difficult and often time-consuming (and time is precious in industry). That’s why you’d be well advised to go with your intuition, but try to remain flexible in the choices you make. Flexibility is one of the key aspects of being an excellent designer and an excellent manager (even if it’s just managing yourself).

If you ever find yourself in a situation where you notice that you have trapped yourself, it’s important to remain rational and see what your possibilities are. Write them down and list the good and the bad aspects of each solution. Naturally, it’s better to avoid trapping yourself. This is why flexibility in your choices are good during the creative thinking process. Never completely throw away a possible solutions and don’t cut too many possible solutions in the very beginning. It’s smarter to narrow down during the relatively late phases of a project.

3. The Right Information

This is something we’ve emphasized a couple of times during the session, but it’s smart to repeat.

People, Projects and Bugs on Dribbble

The majority of creative blockages are caused by a lack of information or bad communication. For this reason, defining the exact problem is very important. When some of the information you receive is incorrect, everything you design can be put at risk. Some designers work with a brief the client has to fill in, this can work to always have certain questions answered or to force the client to be more specific about what they want.

Bad communication won’t only happen between you and clients, but also between team members and you. Time you spend sitting with other people discussing a project is never lost time. Always finish conversations by questioning whether everyone understands what the expectations are. After all, mutual understanding reduces the risk of errors.

4. Bad Communication Skills

Take advantage of every opportunity to practice your communication skills so that when important occasions arise, you will have the gift, the style, the sharpness, the clarity, and the emotions to affect other people.

- Jim Rohn

One of the worst possible blocks to experience is that you have trouble with communication. Often, language is inadequate for expressing an idea properly. This is why mock-ups, wireframes, moodboards and so on are important when pitching.

It’s not just about designing great products, it’s also about being able to sell your great idea, hence the importance of being able to communicate with clients. A great way to practice speaking (in my opinion) is to fake the conversation with a client while looking in a mirror. Formulate tough questions and offer adequate answers. If you have an important pitch coming up, it doesn’t hurt to practice with a friend or another designer.

Speaking in public and improving your expression and persuasion skills is something you can learn by practicing. In fact, it’s just like creativity and design – the more time you spend doing it the better you get at it. Communication skills are as important as designing.
Acquired

Using Your Newly Acquired Knowledge

This has been an extensive introduction to dealing with creative block! The question which remains now is how you can use this knowledge to combat the next block you come across.

Brainstorm on Flickr

Well, to make it easy, I usually take a piece of paper and write down the following:

I write down the phases of the creative thinking process I’ve been through so far and summarize what the results of these different phases were.
I try to figure out in which phase I’m stuck and what possible type of creative block I’m suffering.
Once I’ve figured out the type of problem, I make the problem as specific and concrete as possible (eg. I’m completely out of inspiration and I have no ideas anymore).
Afterwards I write down all possible solutions which spring to mind (eg. taking a break, find inspiration, get back to the saturation phase, …).
I figure out what the best solution is to attempt first. If that works? Great. If it doesn’t, I try another approach.
I repeat the process until I’ve defeated the block. If I’m in a position where nothing seems to work at all, I usually stop with the project for a day or two then afterwards I analyze my creative thinking process step by step to figure out what went wrong. A fresh mind is usually the best solution when you’re completely stuck.

Concluding Creative Block

This concludes an extensive introduction in combatting a creative block. If you have any further questions or remarks, feel free to comment. This knowledge should be the perfect start when facing your personal creativity problems.

The next step, and probably the most important step, is actually increasing and improving your creativity and merging this with a business perspective. This will be the context for the following articles in our creativity session.

Create a Quick, Sticky Menu

Erol Mujak — Tue, 30 Apr 2013 12:12:06 +0000

During this quick tutorial we’re going to implement a sticky menu with CSS, toggling its visibility with jQuery. It’s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.

Step 1: Setting up the Page

Let’s start out by making a basic HTML page. We’ll load CSS into the <head>, then jQuery (at the bottom of the document) for the toggle animation.

<!DOCTYPE html>
<html>
<head>
	<title>Sticky Menu</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
	<!--js-->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>

Step 2: Filling up the Page

Now let’s create some structural elements.

<div class="toolbar-wrapp">
	<div class="sticky-toolbar">
		<ul>
			<li class="glyph" id="support">
				<a href="#" data-icon="&#128227;"></a>
			</li>
			<li class="glyph" id="help">
				<a href="#" data-icon="&#59272;"></a>
			</li>
			<li class="glyph" id="settings">
				<a href="#" data-icon="&#9881;"></a>
			</li>
		</ul>
	</div><!--/ sticky-toolbar-->
	<div class="popup">
		<div class="arrow"></div>
			<ul>
				<li><a href="">List Item 1</a></li>
				<li><a href="">List Item 2</a></li>
				<li><a href="">List Item 3</a></li>
			</ul>
	</div><!--/ popup-->
</div><!--/ toolbar-wrapp-->

We will use the data-icons attribute to specify our font icons. The font icons will be used to effectively decorate our main menu items. Font glyphs can be scaled and colored without loss of resolution, whereas using bitmap images offer less flexibility. We will talk about this more as we progress.

Step 3: Adding Filler Content

To highlight what’s going on, let’s add some dummy text and a logo. Make sure that there is enough content for you to scroll if you want to see the final result in its full glory..

	<div class="wrapp">
	<img src="img/logo.jpg" class="logo">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
	</div><!--/ wrapp-->

Step 4: General Styles

First we will load up Eric Meyer’s Reset CSS, placing it at the top of our css file above others selectors:

	body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-size: 1.1em;
    color: #34495E;
    background-color: #ECF0F1;
}
div.wrapp{
	width: 70%;
	margin: 0 auto;
}
p {
	margin-bottom: 4em;
}
.logo{
	max-width: 100%;
}

You’ll notice I’ve made the div.wrapp 70% wide, plus I’ve stated that images should be a maximum of 100% wide. This is a solid start when building a fluid layout.

Step 5: Styling the Toolbar

Next up, we’ll add some toolbar styles – first by fixing the wrapper to the side of the page, effectively removing it from the document flow.

	div.toolbar-wrapp{
		position: fixed;
		display: block;
		top: 30%;
	}
	div.sticky-toolbar{
		position: relative;
		top: 30%;
		padding: .1em;
		background-color: #2C3E50;
		float: left;
		-webkit-border-radius: 0 .2em .2em 0;
		-moz-border-radius: 0 .2em .2em 0;
		border-radius: 0 .2em .2em 0;
	}

Note: It’s very important to declare position: relative for div.sticky-toolbar as it will allow us to position other elements properly against it.

Step 6: `@font-face` Load

As mentioned earlier, we won’t be using bitmap images for our icons. Instead, we will use @font-face to pull in font files for use in the browser.

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

- font-face.com

We’re going to use Entypo; an Open Source bundle of free icons for commercial and personal use. It has a PSD, EPS, PDF, OpenType, TrueType and various other files, so let’s download them for use in our project.

Here are our @font-face declarations, which we paste into our CSS file. Make sure that the paths correctly point to the font files within the project, otherwise they won’t show up.

		@font-face {
	    font-family: 'Entypo';
	    src: url('../font/entypo.eot');
	    src: local('☺'),
	    url('../font/entypo.woff') format('woff'),
	    url('../font/entypo.ttf') format('truetype'),
	    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
	}

We now select all elements within our markup with the data-icons attribute, tacking a :before pseudo element onto each one and filling that pseudo element with whatever characters are held within the data-icons value.

	[data-icon]:before {
		font-family: 'Entypo';
		content: attr(data-icon);
	}

For example, this is our first anchor:

<a href="#" data-icon="&#128227;"></a>

and our CSS will use the value 📣 to fill its :before element.

Step 7: Styling the Toolbar Elements

Let’s add some cool looking effects to our icons..

	div.sticky-toolbar ul li a{
	display: block;
	width: .8em;
	margin: 0.2em;
	line-height: 80%;
	font-size: 2.2em;
	text-align: center;
	color: #fff;
	background-color: #16A085;
	-webkit-border-radius: .1em;
	-moz-border-radius: .1em;
	border-radius: .1em;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-webkit-font-smoothing: antialiased;
	}

Note: To maximize crisp and clear webfont icons (at least in webkit browsers), include a -webkit-font-smoothing: antialiased; to this section. You could also apply this to everything using the global selector: * { -webkit-font-smoothing: antialiased; }

Now add some hover effects, and you’re done.

	div.sticky-toolbar ul li a:hover{
	background-color: #1ABC9C;
	}

Step 8: Styling the Pop-up Menu

That’s dealt with our menu bar, now let’s add some styling to the pop-up menu:

	div.popup{
	display: none;
	float: right;
	position: relative;
	left: 5%;
	background-color: #2C3E50;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

Note: In its default state we have to hide this section with display: none;. Later on we’ll toggle the visibility with jQuery. You can leave the display value empty for now, until you finish the styling, but don’t forget to bring it back later.

Step 9: Styling the Pop-up Menu Elements

Onwards! Let’s add some styling for the menu elements:

	div.popup ul li a{
	position: relative;
	display: inline-block;
	font-size: .85em;
	color: #fff;
	padding: 0 2em 0 2em;
	margin: .4em;
	text-align: center;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

and a simple :hover effect:

	div.popup ul li a:hover{
	background-color: #1ABC9C;
	}

Step 10: Create an Arrow With CSS

Instead of creating a transparent .png arrow image, we’ll use a nice trick creating the same effect (though completely scalable) with CSS borders. It’s possible to use pseudo elements for this too, if you’d rather not muddy your markup up with additional elements:

	.arrow {
	position: absolute;
	top: 10%;
	left: -.4em;
	width: 0; height: 0;
	border-top: .5em solid transparent;
	border-right: .5em solid #2C3E50;
	border-bottom: .5em solid transparent;
	}

For more details on how this is achieved, check out this CSS Triangles quick tip by Joren Van Hee.

Step 11: Creating a Toggle Function

For the last step we will use a jQuery snippet, allowing us to toggle our pop-up menu. Add the following <script> section to the bottom of our document, underneath the call to jQuery itself.

Within the $(document).ready function (to make sure all our page content is loaded and ready to go) we apply jQuery’s fadeToggle() method to the .popup, on the #support's click event:

<script type="text/javascript">
	$(document).ready(
		function(){
        $("#support").click(function () {
        	$(".popup").fadeToggle(150);
        	return false;
        });
    });
</script>

Note: Please make sure you’ve included the return false statement, which will prevent you returning to the top of the page every time you click on the icon.

Conclusion

An easy and quick approach to create something cool and functional in your next project. You can change it in any way you like, I look forward to hearing how you use it in the comments!

Webdesigntuts+

Win a Ticket to Our New Tuts+ Live Workshop

Introduction to WordPress Plugin Development

Subscribe and Win a Ticket!

Quick Tip: Switch Over to Photoshop Swatches

(S)Watch Screencast

Any Old Icon: All Wrapped up!

Quick Hat-Tip to Icomoon

Get it. Use it.

Download

Files

Installing the Fonts on Your System

The Web

Or..

Lastly..

Changing the Character Mapping

One Last Time

Learning from Historic Web Archives

What are the Internet Archives?

How can we Learn From These Records?

Step 1: Choose a Website

Step 2: Follow From the Very Beginning

Step 3: Analyse the Progression

2003

2007

2010

2013

Step 4: Gather Your Results

Bringing it all Together

Don’t Jump to Conclusions

Case Study: Disqus

The Old Design

The New Design

Conclusion

Dunked: Launched, but Hardly Finished

Why I Like Beta Launch

Monitoring and Gathering User Feedback

Using User Feedback

The Limitations of a Beta Release

Summary

Tuts+ Premium Cash Back Offer: 3 Days to Go

Super Simple eCommerce With Gumroad

Watch the Screencast

Read the Tutorial

Why Gumroad?

What’s the Trade Off?

Yes

Try it Out

Create a Product

Inventory, Shipping Rules, Customizable Checkout Forms, Coupons and Variants

Receipts

Buyers

Email Customers

Setting up Payment Options

Selling Your Product

Sharing is Caring

Adding Products to Your Site

Tracking Your Sales

Customizing Your Profile

Conclusion

Taking the “Erm..” Out of Ems

Size is Everything

Problems with Pixels

Our Typographic Scale

Enter the Em

Conversion from Pixels

Issues with Cascading

The Fix

Rems

What About Using Ems Elsewhere?

Structural Elements

RWD

Exceptions

Conclusion

Further Reading

Polishing up Your Creative Process

Creativity is Like a Diamond

Mining the Diamond

Association

What Defines a Good Brainstorm?