The definition of minimal design has never changed, and probably never will. It is truly a timeless technique.

Having said that, minimal design does seem to have evolved ever so slightly over the last few years, especially within web design. Trends, techniques and user demands have changed, and quite remarkably has resulted in alterations to the look and feel of what we would typically define as a minimal site.

Those boundaries that had previously existed between all mainstream web design trends have become blurry, resulting in a blend of styles, where only the best parts of each have been wisely selected to create a whole new minimal style.

This is the modern web.

To help understand what we mean, take a look at these 50 minimally designed sites:

Kerem Suer

Daniel Benneworth-Gray

More Air

Ale De Carvalho

Another Pony

Control Films

Andrew McCarthy

Yaron Schoen

Scytale

Rachel Gant Jewelry

Shaun Dona

Gavin Potenza

Eone

Happy Studio

Erik Ford

Kyle Thacker

Hover Studio

Neue Yorke

Hatch Inc

Jim Ramsden

Ada Blackjack Shop

Oak Street Bootmakers

Find & Form

Refryed Design

Alistair Lane

CO OP

John Sparrow

Ada Blackjack Shop

OCHO

Shadow

Northbound Design

ECC Lighting & Furniture

Cedric Vella

Instrument

Dan Edwards

Maier & Maier Photography

The Clocksmiths

Belancio

Teehan+Lax

Jean-Maxime Brais

Sketchin

Dumbo Townhouses

TriplAgent

Studio Mister

Brault & Barnes Design

Rype Arts

Tonic

I Think I Might

Bondfire Inc.

Pierrick Calvez Studio

You might also like…

• Examples of ‘Flat’ in Web Design →
• Creative Depth in Web Design →
• 30 Clean Web Design Agency Homepages →
• 20 Websites with Original, Non-Standard Geometry →
• 30 Innovative and Creative HTML5 Sites →
• 25 Beautiful Content Heavy Websites →
• 50 Web Sites with Pastel/Washed-Out Color Schemes →

Not only do the feature-rich responsive HTML5 templates we have for you today offer a fantastic platform for building your site upon, they also give you a rare learning opportunity to delve deeply into each of the templates code, allowing you to learn some of the latest responsive and HTML5 techniques. As well as their beautiful code, each of the templates has been built by using some of the most popular current design trends, meaning they that they will not look out of place wherever you choose to use them.

Here they are:

Strongly Typed

Strongly Typed is a free responsive template with a minimal, semi-retro feel (it has been inspired by old instruction manuals) and, as you might guess from its name, it has a strong emphasis on type. It's fully responsive, built on HTML5/CSS3, and includes styling for all basic page elements.

Strongly TypedView Demo

Codester

Codester is a free responsive portfolio template built upon the Bootstrap framework. It does come with all of Bootstraps many add-ons and plugins making it interactive, easy to customize, upgradable and flexible enough to extend it to any level.

Codester

Brushed Template

Brushed is one page responsive HTML template based on the Twitter Bootstrap Framework. It has been optimized for Retina Displays ( iPhone, iPad, iPod Touch and MacBook Pro Retina).

Brushed TemplateView Demo

Escape Velocity

Escape Velocity is a free responsive HTML5 site template designed in a flat style.

Escape VelocityView Demo

Parallelism

Parallelism is a responsive site template for creating a gallery-style web site. Simply drop in your thumbnails and the template will not only resize them to create nice, uniform, masonry-like rows, but also adjust the number of rows to fit the viewport size.

ParallelismView Demo

Dopetrope

Dopetrope is a free responsive portfolio templates with flat and minimalistic styling.

DopetropeView Demo

Miniport Template

Miniport is a fully responsive and free single-page portfolio template.

Miniport TemplateView Demo

Legend Responsive One Page Template

Legend is a multi-purpose responsive one-page template built upon the Bootstrap framework. It does come with all of Bootstraps many add-ons and plugins making it interactive, easy to customize, upgradable and flexible enough to extend it to any level.

Legend Responsive One Page Template

Obscura HTML Template

Obscura HTML TemplateView Demo

Liquid Gem

Liquid Gem is a clean, fully responsive portfolio template. It also includes an image carousel, a fully working PHP contact form and a sample works page.

Liquid GemView Demo

Serendipity

Serendipity is a free and responsive single column blog template.

SerendipityView Demo

Varna Template

Varna is a free responsive and feature-rich personal portfolio template that has been designed in a flat and minimalist style.

Varna Template

Striped

Striped features a simple, fully responsive design, styling for pretty much all basic page elements (blockquotes, tables, lists, etc.), a sidebar you can position on either the left or right with just a single class change, and carefully crafted HTML5/CSS3 to make customizing it as quickly and simply as possible.

StripedView Demo

mnml Lightweight Template

MNML is a starting point for responsive HTML5/SASS projects with its focus on mobile readability.

mnml Lightweight Template

Agency

Agency is a clean responsive HTML5 business portfolio template built upon Twitter Bootstrap.

AgencyView Demo

Fashion Template

Fashion TemplateView Demo

Century

Century is a responsive HTML5 template with working portfolio sorting and audio player.

Century

Responsive Wedding

Responsive Wedding is a feature-rich HTML5 responsive template that uses jQuery Waypoints & Scroll To for a fluent single-page layout.

Responsive Wedding

Mori

Mori is a dark, minimalistic and responsive HTML5 free blog template.

Mori

You might also like…

• 20 Free Responsive HTML & CSS Templates (2012)
• 25 Fresh and Professional CSS and HTML Templates (2011)
• CSS Form Templates, Tools & Services
• Bootstrap Toolbox – Tools, Utilities, Generators and Templates
• 15 Even More Responsive Frameworks Worth Considering

As a creative freelancer, I’ve seen a peculiar trend among other freelancers more times than I’d like to recount. I’m going to bring some attention to it, and hopefully persuade at least a few out there to reverse it. The trend is this: many freelancers tend to post things on their blogs that go into the dense particulars of their field and their personal philosophy and take on the issues relevant to the community.

There’s absolutely nothing wrong with expressing your opinion – if your main objective is to instruct other designers. However, I’m guessing that the majority of freelance designers out there have a more prosaic goal: to get more clients! Today, we’re going to explore three ways designers, when marketing, often drive the wrong kind of traffic to their personal blogs, and even drive the right kind of traffic away.

Going Window Shopping

Freelance designers often devote far too much time and energy to courting the kinds of people who will never, ever pay them. It’s okay to want to do work pro-bono sometimes and contribute to the greater design community, but too much pandering and showing off for other designers can be detrimental if you’re trying to find new clients.

Clients don’t care about the particulars of design, and they certainly don’t want to find a bunch of complicated design-related jargon when they’re in the market for someone to do the work for them. Freelancers who spend too much time teaching other freelancers how to freelance risk driving away potential clients who think ‘this website is not for me.’ Examples include: excessive or complex tutorials, industry-specific technobabble, and not bothering to break down the specific process in simple terms non-insiders can understand.

Always remember what your target audience is searching for on your site. Chances are, it’s not what you’d be searching for as a designer. Put yourself in their shoes as a “shopper” – even just a window shopper. What do you look for? A satisfying experience that caters exactly to the needs you have as a paying consumer. Your prospective clients deserve the same courtesy.

Missing Your Mark

Let me be clear: interacting with your peers and contributing to the creative community is always a wonderful thing. But when your main goal is to get clients and grow your freelancing business, it’s important to think about how a client will see your personal site’s content. Again, remember to put yourselves in their shoes. When you go online to buy something – let’s use a book as an example – you’re probably led through a simple, straightforward process that allows you to select your item, choose a shipping method, and pay without getting a headache and wanting to punch your screen.

What you probably don’t get is something like this: a beautiful display of books, complete with a collection of highly opinionated blog posts about the state of the publishing industry, and maybe a few tutorials about how you can write, bind, and publish your own book. If you think this example sounds a bit out there, I’ll tell you that I personally know a freelancer who does almost exactly this, except for their own particular industry. This person is constantly complaining that they never get any clients from their website. Hmm – I wonder why!

Just Too Much

I don’t mean to pick on designers exclusively here (in fact, I think freelance writers are the most guilty of this kind of thing – I should know, being one myself). But the non-logic in this practice needs to be pointed out. If you were subjected to this kind of customer experience, you’d hit the back button so fast you’d leave skid marks on your mouse pad. Yet, dozens of freelancers believe it’s perfectly okay to do something similar to the people who are trying to buy services from them.

Too much information can confuse clients and make them afraid to meet with you. On your professional website or blog, it’s better to stick to elemental basics that the majority of potential clients can relate to. Remember that prospective clients have less experience, and won’t be able – or willing – to follow along with too technical information.

You might think what you’re telling clients is informative and useful for clients to know, but more than likely it’s just boring and off-putting. The worst part is that most people won’t even bother to tell you this – they’ll just leave your site and never return.

In Conclusion

All in all, remember this one important bit of advice: 99.9% of potential freelance clients who are put off by your website or blog are never, ever going to email you telling you what you’re doing wrong. They will simply move on to the next freelancer. This is why testing your website is so very important.

I don’t mean simply testing its functionality and making sure your links are all working (although that’s important too). I mean testing things like the readability of your copy, the simplicity of your images and navigation, and the strength of your calls to action. Use non-designers for this task – your friends, family members, or anyone who will be honest about their experience on your site. If they can’t figure out what’s going on, chances are a potential client won’t be able to either.

Image Source: Open and Closed Signs via Shutterstock.

You might also like…

You could read more posts from Addison Duvall, or you could browse our Freelance or Design categories.

Pricing isn’t an art anymore. It’s a science with some well-documented and researched principles on how people think and compare when offered multiple options. Here’s the good news: although pricing has become a science, it certainly isn’t rocket science! It’s actually quite easy to learn. And one of the most important principles to help you learn pricing is learning about decoys, or the “why is this here?” effect, a phrase contained by me (smart face).

A Brainy Company Has Some Brainy Pricing

Meet Lumosity, a company focused on “improving your brain”, which raised some serious money to develop their product. Since their business model is focused around selling a subscription for playing the games, getting the pricing right is crucial.

Here is the Lumosity pricing model:

Here’s a question for you: Out of the 4 options above, which one are users most likely to purchase?

The second one seems to be clearly the winner. Lumosity even highlighted that option by marking it as the “most popular”. But why is this the most popular choice? One reason only: context.

Why Is the First Option Even There?

If there has to be a least popular option out of those 4, I would guess it’s the first. The first option serves its purpose of making the second option as popular as it is now.

Lumosity has used the first choice as a point of comparison to help increase the sales of their “most popular” package. What do you think users would have chosen when they looked at those two pricing tiers at the same time (assuming people were interested in purchasing)?

“I could get the first one, but geez, the second one is twice, almost three times as cheap.” The first option is clearly the worst and the second is clearly much better than the first one. If you do the math, you have $72 vs. $15, which means that if you continue with the monthly payment, when you reach your 5^th month you would have paid $75, more than if you chose an annual subscription right now.

My immediate reaction when I saw an option like the first one was: Why is this option even there in the first place?

Now, of course in this example it would be weird if they didn’t provide a monthly subscription, so a better question to ask is: why does this option have this price in the first place?

The Most Blatant “Why Is This Here” Example You’ll Ever Encounter

The below picture shows the study results of participants who were asked to choose between two subscription options for the Economist. 68% chose option 1 and 32% chose option two.

Now, what would cause this preference to radically shift to the point where only 16% would choose the first one and 84% the second option? This:

Now, why the heck would anyone choose the second option? Why is it even there? Clearly most people saw that the second option was definitely the worst choice and, in practice, 0% chose it. But what happened as a result of it is a radical shift between the first and the third choice, as you can see from the percentage points on the previous picture (68% > 16% and 32% > 84%).

As you can see, adding such an irrational choice had really rational results.

How Making a Pricing Option “Irrational” Helped Make the Middle Option Better

A company named Usabilla offers the following packages:

Notice the third “small” option which costs $49 a month. Most people chose the “middle” option, resulting in 47% click through rate. But let’s focus on the ‘small’ option for now which was later tweaked. See the picture below:

Notice the subtle difference in pricing? Everything is the same, except now the ‘small’ option costs $79 instead of $49.

This was a deliberate attempt by Usabilla to “nudge” visitors into clicking on the second option, and it did work (47% vs. 58%).

In the pricing plan above, many people probably asked themselves: “Why is this small option even there? It’s a no brainer choice that for $10 more I can get 3 times more active tests and have twice the participants. Duh!”

Getting the pricing right can have a profound impact on your conversion rate and click through rate, as we’ve seen from the three examples above.

The next section will focus on how you can use the “why is this even here” effect to your advantage. One thing before we get to that though…

One Caveat: Make Sure Each Option Has Its Price!

Psychological research (read Dan Ariely and his best-selling book Predictably Irrational) has shown that the “pain” from getting something for FREE and getting it for, say, $1, is much greater than the pain of going from $1 to $2. Many people will simply ignore your paid options if you offer a free one.

It’s ultimately up to you to decide whether you want to include a free package, be aware, however, than many people will simply choose the free package without even evaluating the paid ones. That’s why I think it’s best to put a price point, even if it’s $0.01, so that uesers don’t have to go from “totally free” to “paid”.

Do You Have The “Why Is This Here” Pricing Effect In Your Product/Service?

The ultimate goal of adding an “irrational” package to your product is to help you boost sales. Here are a few examples of how you could implement this:

Example #1:
Let’s suppose you’re offering people various web design services and your hourly rate is $40. You can set things up so people would get various discounts depending on how many hours they purchase. Set your hourly rate for 1 hour to $50, while your hourly rate for 3 or more hours can be $35 (or a total of $105)

You can even make the first option more “irrational” by charging $70 per hour and $105-120 for 3 hours! Now this is a no-brainer. Be your own scientist and tester, try both of the options on a sample of your potential clients and see which one works best.

Example #2:
Say you’re selling your own themes and have a price for each theme. Why not take your best-selling theme and add different ‘packages’ for it? Let’s suppose you’re selling all of the themes for $39 and want more people to purchase it. From previous purchases, you’ve determined that most people will stay with one specific theme after buying it. Why not offer a bundle option where for each of your other themes purchased, people can buy your most popular theme for 50% off? You can feature this immediately after people purchase on the thank you page.

Or you can simply add a “downgraded version” of your template for a ridiculously expensive price. For example, you can sell a license for using the themes on only one site for $25 while for $39 they can use it on unlimited sites. You get the idea, for only a small upgrade price they can go from 1 to unlimited!

The key point is: Be prepared to add an option that (almost) nobody will buy. The sole purpose of that option will be to serve as an anchor to “nudge” people to go to your preferred package.

Example #3:
Let’s suppose you’re selling an icon pack for $15. The way to sell different packages is to deliberately ‘downgrade’ your product. A brilliant article written way back in 1998 in the Harvard Business Review introduced a concept called “versioning”. The author predicted that the economy for selling digital goods would be quite different than selling physical goods.

Unlike physical goods, where manufacturers spend hundreds of hours trying to make something better and to sell a better package, with software developers and web designers it’s often a different story. They sometimes produce their best option at first and deliberately downgrade their product to offer a ‘lite’ version as part of their package. Think of it as the lite version vs. the full version, where they only offer limited features in the lite version.

In the icons example, you can sell your original pack as “high resolution” icons and sell a lower-resolution alternative for a comparison. You can also make the price so that the high-resolution package is the obvious choice, selling the low-res for $12 and the high-res for $15.

Do you have your own ideas on how to implement this in your business? Be generous and share them with your follow designers in the comment section! It’s time for brainstorming.

You might also like…

• Why Best Practices in Conversion Rate Optimization Aren’t Always Best
• Getting Smarter: How Changing Your Mindset Can Help Your Web Design Goals
• What Marketing Can Teach Us about UX
• Does the Web Design Work?

This is our weekly design news column where we share our favorite design related articles, resources and cool freebies from the past week. Enjoy :)

If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

iOS 7 by Matt Gemmell

Why We Need Responsive Images by Tim Kadlec

CSS: Reset or Normalize? by Oli Studholme

Chromatic Typefaces and Flat Design by Ben Moss

How to Design Responsively by Krasimir Tsonev

How to make a Responsive Newspaper-like layout

IE 10 Specific Styles by Chris Coyier

What You Should Know About HTML Email by Nicole Merlin

Creative Button Styles (Tutorial)

Digital Clock with jQuery and CSS3 (Tutorial)

Flat UI Login Form With Horizontal Scroll (Tutorial)

Horizontal Portfolio Layout with CSS3 Animations and jQuery (Tutorial)

Designing ‘Swipe to Ope’ Mobile Menus and Best Practices (Tutorial)

Hopscotch – A Product Tour Framework

Hopscotch is a framework to make it easy to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Excolo-Slider – Simple jQuery Slider

Excolo-Slider is a simple jQuery sliding plugin, supporting responsive design, keyboard and touch navigation

jVanilla Menu – A Lightweight and Simple jQuery Menu

A Library for creating beautiful mobile shelves in Javascript (Facebook and Path style side menus).

Cikonss – Pure CSS Responsive Icons

Freebie: iOS 7 GUI (PSD)

Freebie: iOS 7 UI Kit (Sketch)

Freebie: Template for iOS 7 App Icons (Fireworks)

Freebie: iOS 7 Icon Template (PSD, SVG & Sketch)

Freebie: iOS 7Tab Bar Icons (PSD, AI & EPS)

Freebie: Nexus 4 GUI Template (PSD)

Freebie: Social Icon Set (PSD)

Freebie: 60 SEO Services Icons (AI, EPS & SVG)

Freebie: GitHub UI (PSD)

Freebie: Open Source Microframe Template (PSD)

Last week on Speckyboy…

• Best Open Source CSS3 and jQuery Image Captions
• Deal of the Week: Thirsty Rough Font Family – only $9!
• The Principles of Typography: Back to Basics
• The Best Freebies for Designers (May 2013
• The Best Time to Ask for Client Testimonials
• Free Ebooks for Designers and Developers
• 25 Popular Website Concept Redesigns

View the Weekly Design News Archives →

]]> http://speckyboy.com/2013/06/16/weekly-design-news-resources-tutorials-and-freebies-n-189/feed/ 0 http://speckyboy.com/2013/06/16/weekly-design-news-resources-tutorials-and-freebies-n-189/