I’ve never been a fan of color theory. I think it’s because I’ve always been a bit hopeless at it. I’d love to be able to sit there, color wheel in hand, and pick out complementary, split-complementary and triad color schemes, impressing all of my friends, family and clients in the process.

But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it.

The post A Simple Web Developer’s Guide To Color appeared first on Smashing Magazine.

You’ve heard the saying before, “The money is in the list.” This is true, but exactly how much money is in the list? A lot, apparently: The guys at Monetate analyzed over 500 million shopping experiences and found that email beats search and social media combined as the biggest driver of conversions. Compared to 1.95 percent average conversion rate for search and 0.71 percent average conversion rate for social media, email resulted in an average conversion rate of 3.19 percent. This fact was further bolstered by data from the Direct Marketing Association that revealed that marketers can expect a ROI of $38 for every $1 they invest in email marketing.

Now that it’s been established beyond the shadow of a doubt that email outperforms pretty much every other channel, how do you ensure that email works for you? It is by having the right tools. Here are 15 must use tools for email marketers; these include some less-known tools that are helping people get amazing results, so enjoy.

1. GetResponse

If you want to succeed at email marketing, you need a reliable email service provider; going with the free Feedburner, or a cheap email service provider, is not recommended. GetResponse has the basic features – such as the ability to send an email, view subscriber info, etc – that most email services have, but they take things up a notch with the ability to split test any part of your email. Their “Email Intelligence” feature also lets you see how your emails are performing at a glance, and their “Inbox Preview” feature allows you to see how your emails will look in pretty much any email service (Gmail, Yahoo! Mail, etc.).

2. ConvertKit

Many people are familiar with GetResponse and Mailchimp, and all the popular email service providers out there, but the big boys now have to keep looking over their shoulders; ConvertKit is new to the game, but it is different. ConvertKit separates itself by focusing on two things: Simplicity and automation. It boasts of allowing people to setup their list in five minutes; it is marketed towards professional bloggers, but it can serve anybody that needs a reliable email marketing service.

3. Optin Monster

Optin Monster is probably the most well-rounded plugin out there for capturing more email subscribers; some of their features include a Full Screen Takeover (this takes over your site, putting your optin offer front and center in front of your subscribers – in the process boosting subscriptions), a Popup feature, an Exit Intent popup and, more importantly, the ability to split test your opt in forms. Several big name bloggers rely on this plugin for their list building.

4. SumoMe

SumoMe is one of the most popular, all-around free giveaway plugins available today; unlike most list building apps that only come as WordPress plugins, SumoMe can be used with any website. Their Welcome Mat feature allows you to use full screen takeovers to build your list, and people have reported getting thousands of extra subscribers as a result. They also have scroll triggered opt in forms, popups, and opt in forms that can be inserted directly into your content.

5. Kingsumo Giveaways

You’ve probably witnessed one or more of the WebDesignLedger giveaways? For a more recent example, you can take a look at the Jupiter Business WordPress Theme giveaway to see a WDL giveaway in action. These giveaways are powered by the KingSumo Giveaways app, and if done right they can be a good source of email optins.

For example, a notable example of someone who tapped into the power of the KingSumo app is Josh Earl, who was able to add 200,000 extra subscribers to his email list in just 11 days.

KingSumo Giveaways allow you to turbocharge your list building by running viral giveaways. The plugin has a lot of features, including the ability to schedule the start and end dates of your giveaways and the ability to run unlimited giveaways.

6. AWProTools

If you use AWeber, you’ve probably been frustrated at a point due to their lack of automation features. While they are slowly introducing automation into their service, they are not yet perfect. AWProTools handles automation for AWeber, by giving you the option to move subscribers from one list to another depending on which part of your follow up sequence subscribers are in, by allowing you to segment your list based on clicks, etc.

7. Litmus

It can be frustrating to send emails that look perfectly okay at your end only to start getting emails from people who use different email clients, complaining that your email to them is broken. Litmus helps solve this problem; they let you test and see how your email will look in over 40 different email clients. They also make it easy to know when fans print and forward your messages, as well as how long people spend reading your messages.

8. InterSpire

If you don’t want to pay the expensive monthly subscription fees that most email service providers charge, then you might want to go the self-hosted route: This way, you have the software that manages your email hosted on your servers. InterSpire Email Marketer is one of the best solutions for this; it features includes analytics and tracking, the ability to enable double vs single optins, ability to use an autoresponder, the ability to schedule emails, etc.

9. SendGrid

If you self-host your email platform, it can be risky sending emails directly through your servers; in no time, your IP could be flagged and you’ll find yourself shut down by your hosting provider. The solution to this is to use an email delivery service, and SendGrid does a perfect job of this. More importantly, it offers a lot of basic features for free. SendGrid comes with easy integration via API, real time analytics, and encrypted email delivery.

10. Benchmark

Benchmark is an email service provider with a focus on responsive, mobile-friendly emails. They also offer real-time reports that show you how people are interacting with your emails. More importantly, if you are big on media, they have an email editing tool that allows you to edit images in their dashboard without the need for you to have Photoshop. They have a free plan with limited features.

11. OptinSkin

If you find the default opt in forms of your email service providers ugly, OptinSkin is for you. OptinSkin allows you to create dozens of beautiful optin forms to be strategically placed on your blog, and they make it easy to integrate these forms with any email service provider.

12. MailMunch

MailMunch also allows you to create beautifully-designed forms that you can place on your website to capture leads; this includes pop ups, slide in forms, and header bars. Their forms are mobile optimized, and they make it easy to split test your forms for conversions.

13. Thrive Leads

Similar to OptinSkin and MailMunch, Thrive Leads allows you to have beautiful opt in forms on your website; their drag-and-drop editor makes it easy to customize your optin forms to your look and feel, and their advanced targeting features are second to none. They also offer A/B testing and actionable reporting.

14. Route

Many email service providers are slowly realizing the importance of email automation and are making it a part of their features. Route, however, focuses solely on automation and works in a way where actions trigger reactions. It can be powerful for boosting sales and following up with subscribers depending on what action subscribers take.

15. MailChimp’s HTML to Text Email Converter

If you have HTML email/content that you’d like to convert to plain-text version before sending, MailChimp’s HTML to Text Email Converter is the tool you need. It does exactly what its name implies, and you do not need a MailChimp account to use it.

Conclusion

What other email tools would you like to add to the list? Kindly let us know by commenting below.

Read More at 15 Must Use Tools for Email Marketers

I’ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to looking to implement or level up your usage, part 3 will be about using them in a React environment.

What are CSS Modules?

According to the repo, CSS modules are:

CSS files in which all class names and animation names are scoped locally by default.

So CSS Modules is not an official spec or an implementation in the browser but rather a process in a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped (i.e. kinda like namespaced).

What does this look like and why do it? We’ll get to that in a sec. First, remember how HTML and CSS normally work. A class is applied in HTML:

<h1 class="title">An example heading</h1>

And that class is styled in CSS:

.title {
  background-color: red;
}

As long as that CSS is applied to the HTML document, the background of that

would be red. We don’t need to process the CSS or the HTML. The browser understands both those file formats.

CSS Modules takes a different approach. Instead of writing plain HTML, we need to write all of our markup in a JavaScript file, like index.js. Here’s an example of how that might work (we’ll take a look at a more realistic example later):

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;

During our build step, the compiler would search through that styles.css file that we’ve imported, then look through the JavaScript we’ve written and make the .title class accessible via styles.title. Our build step would then process both these things into new, separate HTML and CSS files, with a new string of characters replacing both the HTML class and the CSS selector class.

Our generated HTML might look like this:

<h1 class="_styles__title_309571057">
  An example heading
</h1>

Our generated CSS might look like this:

._styles__title_309571057 {
  background-color: red;
}

The class attribute and selector .title is entirely gone, replaced by this entirely new string; Our original CSS is not being served to the browser at all.

As Hugo Giraduel said in his tutorial on the subject:

[the classes] are dynamically generated, unique, and mapped to the correct styles.

This is what is meant by styles being scoped. They are scoped to particular templates. If we have a buttons.css file we would import it only into a buttons.js template and a .btn class within would be inaccessible to some other template (e.g. forms.js), unless we imported it specifically there too.

Why would we want to mess with the CSS and HTML to do this? Why on earth would we want to work this way?

Why should we use CSS Modules?

With CSS Modules, it’s a guarantee that all the styles for a single component:

1. Live in one place
2. Only apply to that component and nothing else

Plus, any component can have a true dependency, like:

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

This approach is designed to fix the problem of the global scope in CSS.

Have you ever been tempted by a lack of time or resources to simply write CSS as quickly as possible, without considering what else you might affect?

Have you ever slapped some random bits and junk at the bottom of a stylesheet, intending to get around to organizing it but never do?

Have you ever run across styles that you weren’t entirely sure what they did or if they were even being used?

Have you ever wondered if you could get rid of some styles without breaking something? Wondered if the styles stood on their own or depended on other things? Or overwrote styles elsewhere?

These are questions that can lead to big headaches, bloated project deadlines and sad, wistful looks out of the window.

With CSS Modules, and the concept of local scope by default, this problem is avoided. You’re always forced to think about the consequences as you write styles.

For instance, if you use random-gross-class in HTML without applying it as a CSS modules-style class, the style will not be applied, as the CSS selector will be transformed to ._style_random-gross-class_0038089.

The `composes` keyword

Let’s say we have a module called type.css for our text styles. In that file we might have the following:

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

Wwe would declare one of those classes in our template like so:

import type from "./type.css";

element.innerHTML = 
  `<h1 class="${type.display}">
    This is a heading
  </h1>`;

This would result in markup like:

<h1 class="_type__display_0980340 _type__serif_404840">
  Heading title
</h1>

Both classes have been bound to the element by the use of the composes keyword, thus avoiding some of the problems of similar solutions, like Sass’ @extend.

We can even compose from a specific class in a separate CSS file:

.element {
  composes: dark-red from "./colors.css";
  font-size: 30px;
  line-height: 1.2;
}

BEM not required

We don’t need to use BEM when we’re making a CSS module. This is for two reasons:

1. Easy parsing – Code like type.display is just as legible for developers as the BEM-y .font-size__serif--large. Likely even easier to mentally parse when the BEM selectors get long.

2. Local scope – Say we have a class like .big in one module where it changes the font-size. In another we use the exact same class .big that increases padding and font-size in a different amount. It simply doesn’t matter! They won’t conflict, because the styles are scoped very deliberately. Even if a module imports both stylesheets, then it has a custom name which our build process makes specifically for that class.

   In other words, specificity issues disappear with CSS Modules.

Cool, huh?

These are only some of the benefits of writing CSS Modules.

If you’re interested in learning more, Glen Madden has written extensively about some of the other benefits to this approach.

The next article in this series will look at how to get a project up and running with Webpack and CSS Modules. We’ll be using the latest ES2015 features to do this and looking at some example code to guide us through the process.

Further reading

• CSS Modules: Welcome to the Future
• Hugo Giraudel’s CSS Modules tutorial on Sitepoint
• Understanding ES6 modules
• Let’s Learn ES2015
• Brief overview of ES6 Module Syntax

---

---

What are CSS Modules and why do we need them? is a post from CSS-Tricks

Jeremy Keith’s talk from last year’s ColdFront conference is all about the fragility of the modern web. Jeremy talks about languages, such as Javascript, that have a “fragile error handling model” and why simple markup is much more resilient and error prone in comparison.

He has three principles for being a good citizen of the web:

1. Identify core functionality of your website.
2. Make that available using the simplest technology.
3. Enhance!

Bonus conference talk! Our own Sarah Drasner at ForwardJS Summit with SVG and GreenSock for Complex Animation.

Direct Link to Article — Permalink

---

Resilience is a post from CSS-Tricks

Prototyping, as a concept, has been around since before the Internet. Typically, people developing a new physical product would first build the thing, and make sure that it worked as intended. The first version would be patented, perhaps, and shown to potential investors. If the inventor had access to their own means of manufacture (if they worked in an existing company, for example), they’d just go right ahead and work out the bugs until they had a production-ready model.

Remember those old demo disks? You know, the ones that came with programs with limited functionality, or the first level or two in a game? Prototypes are a lot like those demos, only even simpler.

Their purpose is not so much to get prospective customers to buy a product, as to help you make a better one. You build a prototype of a website or app to make sure that the concept will work as intended. You also use it to show your clients, or potential investors, how it’s supposed to work.

Recently, we’ve been seeing a lot of apps geared toward building prototypes for the web, and for mobile apps as well. Now, Adobe Experience Designer has been released, combining the functionality of a web-and-mobile-specific “design app” with that of a prototyping app. Given Adobe’s reputation, and their market share in the professional sector, it stands to reason that a lot of people who have not done a lot of prototyping in the past might now take that step.

So, like most other ultimate guides, this one is for beginners. It’s for people who are just starting to build prototypes on a regular basis, whatever their previous experience (or lack thereof) in the design industry.

In this guide, we’ve tried to cover the basic principles above all. After that, there are links to guides with further information, and, of course, a big long list of apps and tools that you can work with.

Wireframes & mockups vs. prototypes

Now, and designer who’s been around for a while has probably already worked with wireframes, and/or designed mockups in some image editor. Are these not prototypes?

Nope. Not always, anyway.

The problem with wireframes and static mockups is that they are…well…static. There is a lot of information that they simply cannot convey about the functionality of a thing. This can lead to misconceptions in the minds of clients, or even your developers, about how the thing is supposed to work. For this reason, prototypes are usually interactive in some way.

The most common exceptions are conceptual prototypes, and exceptionally well-documented static prototypes. What makes the difference is not interactivity itself, but the conveyance of information about a product’s intended functionality.

That said, wireframes and mockups are often used in making prototypes, so no one is abandoning them.

When do you need a prototype?

Whenever you need to show how something is supposed to work. That’s it.

The obvious example is that of a web or mobile app. Apps tend to have a fair bit of functionality that may not be easily seen or deduced from a mockup. However, even fairly static, content-driven websites may require a prototype.

For one thing, I’ve had clients look at mockups for a simple business site and ask “Okay, so if they click on those things at the top, ‘About Us’, ‘Services’, and stuff, that takes them to other pages?”, or “When they click send on the contact form, I get an email?”

Even simple browsing tasks are often fraught with uncertainty to some users, and prospective clients, so prototypes can help take out some of the guesswork from the sign-off process.

Additionally, they’re always useful in user testing. After all, if you’re going to do user testing at all, it’s best to start with an early preview of the project. The last thing you want is to have to make big changes after most of the work has already been done.

4 kinds of prototypes

Before you start prototyping, you’ll want to determine what kind you’ll want to use. You can always use more than one kind in any given project; most designers do, at some point.

The kind of prototype that you choose will need to be right for you, your client, the project, and even the specific stage of the project that you’re in. Now, that might sound complex, but it’s really not that bad.

Each of these are intended to be used at different stages in the design phase. The rest is up to your preference, and how good your client is at understanding abstract visuals.

Clients who are less experienced with modern design processes might expect to see something that looks more “polished” so they can tell you to make the logo bigger, move that line an inch to the left, and that their site won’t be in Latin, so could you put some English in please?

If you have trouble with that, more detailed prototypes—and a lot of coffee—are your best bet. If not, then you can use something a bit more vague, and focus on mocking up the intended functionality.

1: Conceptual prototypes

These often don’t look anything like the finished product in any way shape or form. With conceptual prototypes, the details and layout of the interface don’t matter. The only things you’re working on are interactions and processes.

The goal of any prototype is to show how something works, or will work. In that sense, this is prototyping in its purest form. It’s literally all about the function, and form doesn’t even come into it.

They can look like just about anything, at this stage. You can use a flow-chart, post-it notes, a PowerPoint presentation, a video explaining the process with crude icon-based illustrations, or a recording of yourself speaking into the camera and flailing your arms wildly. Anything that gets the point across will do.

Conceptual prototypes are typically used at the very earliest stage of any project. Your project may not even have a name. It’s just an idea for an app or a web site, and you’ll be saying things like: “Yeah, I think it should sort of work like this…”

2: Low-fi prototypes

Low-fi prototypes are where you start to include things like the layout and screen size, and other more tangible concerns. They are typically made fast, and discarded faster.

They are intended to provide the fastest possible way to iterate your ideas until you and/or your client are happy with the basics. So don’t get attached. Most of these won’t be around long, and that’s a good thing.

As previously mentioned, the term “low-fidelity prototypes” is often interchangeable with “wireframes”. Indeed, this stage often takes place on paper.

When it’s done in an app, it’s advisable to use one that has basic prototyping functions like linking to other screens, annotation, etc. Wireframing apps do have the advantage of enabling easier collaboration over the Internet, but they’re often a bit slower to use.

These are also used at the beginning of a project, but you probably have a business model and an idea for a name by now. It’s time to sort through the myriad ideas floating around your head, and iterate until you have something that you’re pretty sure will work.

3: Medium-fi prototypes

Sometimes a low-fidelity prototype just won’t get the point across well enough, and a high-fidelity is too much work for the moment. Maybe you haven’t completely refined the style guide, or not all of your graphical assets have been made yet.

In any case, this is the kind of prototype you can use in the beginning-to-middle of the design phase. They’re often made with prototyping apps, which make heavy use of simulated interaction. They can also be built with HTML and CSS, usually with the help of a CSS framework.

Yup, Bootstrap and Foundation are probably two of the biggest prototyping tools out there right now.

You should use branded imagery for these if you have it, but stock images will do. Stock UI elements are typically used to build out the simulated interface faster. Many prototyping apps come with libraries of these elements to make your work faster.

These kinds of prototypes are great for the more literal thinkers who need to see a close-ish approximation of how it will look and work. It’s easier for them to ignore a header that’s “not finished yet”, than a sketchy-looking shape that doesn’t look anything like a website header as they know it.

For these clients, you might want to wireframe out your ideas fast, and never show those to the client. Then make a medium-fidelity prototype that makes it easier for them to see where you’re going.

4: High-fi prototypes

Well, we’re here. And so is your project. You have your mockups for every screen, and everything looks great. It’s time to show people how this is going to work, in all of its glory, when someone finally integrates it with the back-end code.

High-fidelity prototypes are usually used for getting a final sign-off on the design from the client. But you can’t just send them the PSDs. This stuff has to be interactive.

This is typically accomplished in one of two ways. Some use static HTML and CSS to put the finalized visuals together in a way that’s semi-interactive. Others use apps that import images, or even raw PSD files, and add pseudo-interactive features to mimic the final functionality of the app.

Depending on the app, you can even demo these prototypes on the web (or on a mobile device, if you’ve been working on an app).

Prototyping methods

Now that we’ve gone over the main kinds of prototypes you can make, it’s time to cover the tools used to make them. I mentioned most of these in the previous section, and their basic usage; but I’d like to go into a bit more detail.

Again, the method you choose should depend on what both you and the client are comfortable with.

Video or presentation prototypes

These are often made to sell an idea before any concrete work has been done. Thus, they’re usually directed at potential investors. They can be used for clients too; but there are often more efficient ways of communicating with a client. Your mileage may vary.

The video and presentation-based prototypes that are made for sales pitches usually follow a commercial-style formula:

1. Introduce a problem that the viewer might identify with.
2. Demonstrate how your product will solve that problem.
3. (Optional step) a digitally rendered corporate mascot does a happy dance while shouting a catchphrase.

Some of these prototypes just use icons, text, and illustrations. Others have animation; and still others use live action to get the point across. And that’s, well… the point. As long as you sell your idea, you’ve done it right.

Here’s an awesome example that mixes video prototyping with paper prototyping.

Wireframes

Wireframes can be done on paper or in apps. They are nearly always considered low-fidelity prototypes, though they can be upgraded to medium-fidelity if you put enough time into them. It’s rarely worth the effort, though.

Usually, wireframes are designed to be both drawn and discarded quickly. This is one of the things that makes drawing them on paper so attractive. Apps can be far more precise, and you can easily edit existing wireframes; but nothing beats the speed of a sketch that no one is supposed to see but yourself… ever.

However, as previously mentioned, App-based wireframes do have the advantage of more easily mimicking the functionality of an interface. Tapping on a paper wire-frame will just make a pleasant thunk-thunk-thunk sound.

That can be fun, but it may not convey your meaning.

You might choose to use both: paper to nail down the most basic concepts, and an app to flesh it out, and share it easily.

Paper prototypes

These differ from wireframes in that they are a lot more than drawings. In this kind of prototype, paper is used to make a physical, if still rather flat, model of the interface. You can see one of these in the video above.

Interface elements are usually drawn, cut out, sometimes copied to make extras, and then assembled on another piece of paper. This gives them the advantage of flexibility. Where you might throw away an entire sheet of paper with a wireframe, you can just re-arrange the elements of a paper model until you’re satisfied. Got an element that’s the wrong size, after you’ve re-arranged things a few times? Just cut a new version out.

They also tend to feel a bit more “real” than a wire-frame. Even though nothing interesting will happen, a client can touch a paper model. They can feel it. That tactile sensation can sometimes explain more to a client than anything you could ever show them.

Everyone needs physical contact to achieve a better understanding of any object. Half of UX design is about re-creating the feeling of physical interaction with a digital interface.

Medium and high-fidelity prototypes made with apps

These have a lot in common with paper prototypes. Prototypes made with an app like Invision, or one of the many other options out there (see the list below), are typically made from pre-designed interface elements, and then pieced together to mimic the final product.

The difference is, of course, that everything is done on the screen. Oh, and you can do it with the final graphics and branding, making the prototype look exactly like the finished product. Then, as I mentioned earlier, some apps can demo the product in the browser and on mobile devices.

This brings the tactile feeling back into play, and you want this. If you can give your clients that feeling, and they like it, you’ve basically gotten their final approval.

Code

Of course, if interaction is what you want, then building interface prototypes with code is a good way to get it. Now, you might choose code-based prototypes for one of several reasons:

• it just fits your workflow better (like if you design in the browser anyway);
• your site or app has a lot of buttons and other things to interact with;
• you can use prototype code in the final product, saving you time;
• you want to demonstrate interface functionality in the browser without bothering with an app;
• you like pressing keys and hate clicking.

Prototyping in the browser can be a bit slower, especially if major revisions are still being made. I would not recommend it for the early stages of a project, so it’s best for medium-to-high fidelity prototypes.

Still, it’s one of the best ways to show off a nearly-finished project, if you already like to work with HTML and CSS.

Prototyping with frameworks

It should be noted that using a framework to build prototypes can speed up code-based prototyping considerably. As a bonus, if you use the framework that is intended to be used for the final product, there’s less coding to do overall.

As a side note, some people have built drag ‘n’ drop web page editors based on more popular frameworks, like Bootstrap and Foundation. Using these, once could conceivably create everything from the low-fidelity prototypes to the final product with code.

However, some people just use them to build prototypes fast, and then use custom code for the final project. It works either way.

Prototyping tutorials and guides

Now that we’ve covered all of the basics, it’s time to really get into details. As with almost everything else in design, and in life, there is no one right way to build a prototype. There’s only the way that works for you. That said, successful design processes tend to have a few things in common.

Here are a few different guides to prototyping that focus on different methods and fidelities, just to get you started. Take from them what works for you, ignore what doesn’t.

(We will not be including app-specific tutorials because there are simply too many.)

Design Better and Faster With Rapid Prototyping

This guide from Smashing Magazine focuses on a methodology for building prototypes fast, and iterating often.

How I Rapidly Prototype Websites

This is a more personal article by Nick Pettit on the Treehouse blog that outlines his own approach to prototyping.

How to build websites fast, with the rapid prototyping workflow

Here’s a third article on rapid prototyping. It seems to be popular. This one’s right here on Webdesigner Depot, and it outlines a few tips for, and pitfalls inherent in, the process.

The Skeptic’s Guide to Low-Fidelity Prototyping

Another article by Smashing Magazine, this one goes into greater detail about low-fidelity prototyping.

How We Prototype

In this in-depth, and quite frankly fascinating article the Newfangled agency describes their process in-depth. It revolves around browser-based greyscreen prototyping, and they make a convincing case for trying it out.

How to test the usability of prototypes like a pro

Another one here on WDD, this article is all about making sure that your prototyping has a point. If you only do your usability testing after you’ve completed the final project, then you’re probably doing it wrong.

Free ebook: The Ultimate Guide to Prototyping, by UXPin

You’ll have to give over some of your personal information (or just lie) to get this ebook, but hey, they’re not asking for money! it includes more information on popular prototyping methods, app-based tutorials, and best practices from major companies like Google, Apple, Zurb, and more.

Now, it is made by the people behind UXPin, a prototyping app, so they may be slightly biased about which app you should use. Still, it’s got lots of good information.

Prototyping tools and apps

Okay, so you’ve got the theory. It’s time to get cracking on building prototypes. Assuming that you’re not going to stick to paper models or code, you’re gonna use an app at some point.

The good news: there are lots of great apps to choose from. The bad news: there are lots of great apps to choose from.

Once again, it’ll all come down to the way you work. Do you need the ability to demo mobile apps? Do you need to sync your files with Google Drive, Dropbox, or some other service? How about Github integration? Low-fi, medium, or high-fi? Advanced scripting?

The apps listed below will feature some or all of those options. I’ll list the most relevant features for each one to give you an idea of where to look.

It should be noted that many of these are primarily known as wire-framing tools. It’s common for wireframing software to integrate the features needed for interactive prototypes. Your mileage with these apps may vary.

Adobe Experience Design CC

This is the newest offering on the market right now, and it’s poised to deliver some serious competition to a somewhat saturated market. It’s not just a wire-framing or prototyping app; it’s a design app. It’s like Sketch, or the now-dead Fireworks, but it takes things a step further by allowing you to make prototypes out of everything you just designed.

It’s currently Mac-only, and in the preview stage at that, but a Windows version is due before the end of the year.

The pre-release version is free, once the final version ships it will be part of Adobe’s Creative Cloud subscription plan.

Presentation software

Microsoft PowerPoint, Apple Keynote, LibreOffice Impress, and Google Slides can all be used to make prototypes. Mostly, these prototypes would be of the conceptual variety. You can mimic a certain amount of interactivity, though, by just linking slides together.

It could work just as well for prototyping content-driven sites, and chances are that you’re already using at least one of these programs. If not, Impress and Slides are free.

Invision

Invision is another one of the “big names”, with more high-fidelity prototyping. It emphasizes version control, and prides itself on its real-time collaboration and feedback features. Like Marvel app, it also has animation, prototype embedding, in-device demos and more.

In addition, they just recently bought Silver Flows, a tool that integrates prototyping functionality with Sketch. They intend to use it to integrate Sketch with their online software.

There’s a free plan, but you can only make a single prototype. After that, you can start at $15USD per month.

Justinmind

Justinmind seems deliberately geared toward creating high-fidelity application prototypes. The site also mentions prototyping responsive websites. There’re also in-app demos.

Pricing currently starts at $19USD per user, per month, if you pay annually.

Marvel App

Marvel App is a huge app (one of the “big names” in prototyping) with a free plan, and moderate pricing for all upgrades. Notable features include: support for Photoshop and Sketch, syncing with Drive and Dropbox, embedding prototypes in web pages) and features that turn your prototypes into animated presentations.

This one is about high-fidelity prototypes for sure.

Axure

Axure is a bit of an oddity with features for both low-fi and high-fi prototyping. it’s even more odd, because it’s a desktop app with a one-time price. It’s designed for enterprise users and large teams, with features for writing your own documentation, project management, and more.

The standard editions comes in at $289USD per license.

HotGloo

HotGloo is all about the low-to-medium-fidelity wire-frames and prototypes. It started out as primarily a wireframing app, primarily, but the functionality for more advanced prototypes is there.

Where other apps focus on prototyping apps, HotGloo got its start with web designers. So, you can do either, really.

Plans start at $14USD per month, and that plan can include up to 10 people collaborating.

Proto.io

Annnnnnd we’re back to the the high-fidelity prototyping with Proto.io. It’s got complex interactions, animation, exporting, printing, embedding, and device demonstrations all built in. Prices start at $24USD per month, but there is a 15-day free trial if you want to give it a whirl.

Solidify

Solidify is brought to us by Zurb, the same company that makes the Foundation framework. It’s designed to handle (and get feedback on) everything from sketches to high-fidelity prototypes and mockups.

Instead of focusing on animation and other presentational tools, Solidify offers an abundance of user-testing features. You can run tests in-person or remotely, and share the results with your team.

POP

POP distinguishes itself from other apps by helping you make a hybrid of wire-frame sketches and digital prototypes. You start by taking pictures of your sketches with an iPhone, Android phone, or Windows phone, and turning those sketches into an interactive prototype.

If you do most of your work on paper, it could be a great way of sharing the results. The service is free for two projects, and then plans start at $10USD per month.

Flairbuilder

Flairbuilder is another desktop app, though it has an online viewer for projects. It seems geared toward medium-fidelity wireframes and prototypes. It’s got features that allow you to add interaction, it can do in-device demos, and it puts a special emphasis on grid-based design.

It’s priced at a one-time fee of $99USD. That’s steep, sure, but a lot cheaper than Axure.

Flinto

Flinto actually has two versions: there’s a Mac app, and a web-based Lite version. The difference? The Mac version brings more complex animations, features, and interactions to the table. It also allows you to import your assets from Sketch, which the web version can’t do.

It costs $99USD as a one-time purchase. Interestingly, the Lite version (which costs 20USD a month) includes a license for the desktop version, giving you the best of both worlds.

UXPin

UXPin is a medium-to-high-fidelity prototyping app with all of the features that we’ve come to expect. Like a few of the others, it also has real-time collaboration, built-in usability testing features, and project management.

Unlike other apps, UXPin aims to be a one-stop design shop. As in, you can skip Photoshop, Sketch, or what-have-you, and turn your wire-frames into mockups. This is ambitious to say the least, but if it works as promised, I can see that being useful to a lot of designers.

Pricing starts at $19UD per month, per user.

Exclusive Mega Bundle: 2100+ DesignElements (including 11 fonts) – only $29!

Source

JavaScript is extremely popular nowadays, and with the right set of tools and expertise, there is no limit to what you can achieve. Speaking of tools, JavaScript frameworks are really handy and useful for developers, as they can lessen the burden and make the development process easy. Some of the JavaScript frameworks are truly popular, such as AngularJS, React, and so on. However, there are many out there which are not so popular, but still powerful and useful. In this roundup, we take a look at some minimal, nimble and lightweight JavaScript frameworks.

11 Minimal JavaScript Frameworks You Need To Know

1. min.js

min.js is minimalism personified, at least in the world of JavaScript frameworks. It is an extremely tiny JavaScript library that lets you execute simple DOM queries and hook event listeners. Min.js also lets you work with raw DOM nodes directly by using HTML5.

2. AuraJS

AuraJS is a component framework that lets you build fully functional web applications with ease. In AuraJS, everything is a component — “An Aura component represents a unit of a page. An independent block of reusable code, wrapped up so that it works well on its own or together with other components.”

AuraJS comes with its own custom set of extensions as well. You can use it in assonance with other popular MVC frameworks, such as AngularJS.

3. Kraken

Kraken is ideally meant for front-end developers working with JavaScript. It is a lightweight boilerplate, with full support for mobile-friendly design and development. Kraken is style agnostic, and comes with a responsive grid and a fluid typographic scale.

Kraken is powered by Gulp.js and is both flexible and modular.

4. Stapes.js

Stapes.js is a lightweight and extremely nimble JavaScript framework meant ideally for developers looking to build mobile applications. It is style agnostic, works with MVC frameworks, and supports custom events and data methods.

Stapes.js is just 2 KB when minified and barely 600 lines of code.

5. Spine

Spine, as a JavaScript framework, likes to keep it simple with its tagline — “build awesome JavaScript MVC applications”. There is not much else to talk about this framework — it is simple and lightweight, and comes with support for CSS grid systems, responsive handles, CSS shortcuts and can be extended by means of custom plugins.

Spine has also been well-documented, and is backed by screencasts to help you get a better idea of its working.

6. Skel

Skel is a lightweight JavaScript framework that lets you build responsive and mobile-friendly websites or applications. It has zero dependencies, and you can extend its powers by means of DOM or MVC.

Skel is flexible, and also has an SASS based implementation of itself.

7. Responsive

The name speaks for itself — Responsive is a framework that you will use for building, well, responsive websites. It is accessible, flexible, and can be extended to suit your needs and requirements.

Responsive is simple and lightweight — the final minified file is just 23 KB in size, and it is not bloated like many other frameworks out there. Responsive, as a framework, gives you a skeleton-approach to your projects, with all the bloated fluff removed and leaving you with a no-nonsense framework.

8. scaleApp

scaleApp is a JavaScript framework meant purely for building scalable single-page applications. It is free from dependencies, is barely 8 KB when minified, framework agnostic, and can be extended by means of plugins.

scaleApp also supports server-side scripts such as Node.js

9. Chibi

Chibi is a tiny JavaScript micro-framework that lets you work with essential elements. It is just 7 KB when minified, and supports all the major web browsers, including Internet Explorer 6 and even Firefox 3.5 and as such, this is one library that you should turn to if you really want your code to work across old and obsolete as well as modern web browsers.

Chibi is not something you might be able to use for complex projects, such as animations (though you can make it work in assonance with CSS transitions).

10. Sammy.js

Sammy.js is a RESTful and extendable JavaScript framework that is 16 KB when compressed. It supports classes, events and custom plugins, and follows a modular approach.

11. Tupai.js

Tupai.js is a JavaScript MVC framework. It is flexible, minimal and can be used for building for complex and simple applications.

Tupai.js supports packages, functions, variables and classes, and comes with an MIT License.

Got any JavaScript framework that I missed? Share it in the comments below!

One of the most popular tools for screen design and illustration in the last couple of years has undoubtedly been Sketch, which became an important part of many designers’ responsive web design and mobile design and prototyping workflows.

However, an increasing number of other tools are becoming available. In this article, I will explore the first browser-based app to be viable in the vector illustration and UI design space: Gravit.

The post Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit appeared first on Smashing Magazine.

Arunoda Susiripala:

With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components.

Like a pattern library for stated React components.

Direct Link to Article — Permalink

---

Introducing React Storybook is a post from CSS-Tricks

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Animation in Mobile UX Design

How to Be a Responsible and Badass Developer

Redesigning the Times Website

How Workplace Design Influences Productivity

26 Years of Web Design: Lessons Learned

Webfont Drama – March 2016 Edition

Front-End Style-Guides: Definition, Requirements, Component Checklist

How Gamification Improves UX

Are There Colors You Should Avoid?

Are We all UX Designers?

A Dozen Fresh Sources for Free, Legal Images

Vintage Type Experiments with CSS

People are Really Pissed About Instagram’s Timeline Update

A Hands-On Guide to Color Correction

OS X to Be Rebranded ‘macOS’ at WWDC?

Mesmerizing Infographics Stitched Together from Millions of Snapshots

These Photos Show the Secret Tricks of Food Photography

5 Essential UX Rules for Dialog Design

Relive the Moon Landing

A Labor of Love: Reimagining Our Iconic Logo

All of Apple’s Products Ever, in One Glorious Infographic

Slack Raises $200M at $3.8B Valuation

Google Pulls Ill-advised ‘mic Drop’ April Fool Joke from Gmail

How to Design Happiness

Heretical Plan to Turn Open Source Code into Cash

Google is Finally Redesigning its Biggest Cash Cow: AdWords

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Create Responsive Forms Without Programming – only $13!

Source

The first thing visitors of an unknown website see is the design. If it meets the visitor’s expectations after the first couple seconds, they will stay on the website for longer. But here comes the decisive factor: the design can’t compensate poor coontent. If the visitor doesn’t find what he’s looking for, he’ll soon leave the website, and that is just what you want to prevent in any case. Thus, good content is necessary, as it convinces your visitors to stay and return to your website. That way, visitors turn into customers, and increase the conversion rate. It all just proves once more: Content is King

But what exactly is good content? What sets it apart from others and how is it created? I want to try to clear up any confusion on that with the following five factors of good content.

1. Searchability

No matter how good your content is. If nobody finds it, nobody will read it. That’s why you need to consider some essential factors when it comes to the searchability of your content. Some of them being:

• An h1 headline (including the main keyword)
• At least two h2/3 headlines (Sub-headlines with relevant keywords)
• Meta data (Title tag, meta description)
• Links to related topics (internal links)
• Alt tags for images (Alternative texts are used to describe an images and thus, support a barrier-free website)

2. Readability

Is your text well-structured and easy to read? Then you’ve done everything right. However, if you doubt it, you should first check whether your text follows the principle of the inverted pyramid. This principle is also referred to as funnel structure, and is often used in journalism. Here, the topic’s core makes up the biggest part of the text, and is presented right at the beginning. In contrast to print media, web visitors tend to jump between sources quicker if they don’t see that the text contains what they are looking for right away. Cut to the chase quickly! In the core, six questions are answered (Who did what, when, where, how, and why). Next up is the source of information (7th question = from where), as well as further details. At the end of the text, go into detail on backgrounds, causes, or connections.

After checking for the principle of the inverted pyramid, and adjusting your text if needed, you should bundle content. Content that belongs together should be summarized in one paragraph. If content is based on previous content, it is only natural that it is added right afterwards. Also make sure that you integrate enumerations, numerations or graphics to lighten your text. Nobody will read your content when it is pure text without paragraphs or other reliefs. Thus, always view from the reader’s perspective when creating your text and question the readability!

Last but not least, you need to consider the style requirements, if there are any. If you can choose them yourself, you should stick to them for future texts as well. Once you decided to be on first name terms with your readers, stick to that! Did you display your first article in justified text? Then, you should present your next article in that format as well, and so on.

In conclusion, you should consider the following for the readability:

• Principle of the Inverted Pyramid
• Bundle Content
• Integrate Enumerations, Numerations, and Graphics
• Consider Style Requirements

3. Comprehensibility and Added Value

Aside from general readability, your content also has to be comprehensible and offer the users added value. For that, first think about who you want to appeal to with your content. What is your target audience? Does it have any knowledge on what you report about? Does it know about technical terms or should you explain them?

Once you’ve answered all of these questions, and figured out your target audience, make sure that your text’s context is available. If your text is based on information from a previous text, put a link in the beginning so that the reader can connect to that information. Of course, your text should never be completely ripped out of context, as your website will never be able to cover all topics, thus, always keep the goal of your website in mind, and only write texts that fit this context!

Not only your written content, but also an integrated video that is used to loosen up your text needs to be comprehensible, and suitable. Thus, also question integrated graphics or videos. Is the connection between text and video evident? Is the video of high quality, as well as well explained? If you are unable to directly answer these questions with “yes”, you should explain the connection as well as unclear questions on the video. Generally, the following applies: Introduce videos and graphics in the text, so that the reader knows what to expect.

The added value is an important factor of good content, which is why you should always treat this aspect with high priority. Write about themes that you are interested in, or that you know a lot about, as only then, you’ll be able to make sure that you won’t bore your readers.

Always remember: A text that answers the questions of a “random” visitor in an interesting and diverting way, will be read, accessed a lot, and even shared.

4. Action Orientation

Action orientation serves the purpose to determine, whether your text is designed to allow your readers to become active or not. To turn a passive reader into an active one, it is important to directly adress him, and express your appeal to action. A comment option is also a good way of starting a conversation with the reader.

The internal links described in criteria no.1 (searchability) also serve the purpose of becoming active. That’s because there are internal links to other topics that are only briefly adressed in the current text, and provide further information. The reader will click them if he is really interested. Another option is placing social media icons below the text, which the readers can use to share the text via social networks.

In conclusion, these paths can be chosen when it comes to an action-oriented text:

• Appeal to Action
• Comment Option
• Internal Links
• Social Media Icons

5. Recommendation

Your text should not only be able to make your reader get active, but also make him recommend your article. To do so, you need to provide some good reasons, and directly ask him to share the content. This way, you remove worries of not being allowed to share it. The mentioned social media icons also serve the purpose of recommendation, as they provide an easy option to share your content.

(dpe)