Design Resource Box

I’m happy to announce today that Design Resource Box is now an integrated part of Design Your Way. Maintaining two sites with the same target audience is quite difficult when you want to keep a certain level of article quality so I had to take the decision of merging the two sites under the name of the bigger one, Design Your Way.

So, what does this mean?

The subscribers that DRB has at the moment through RSS will receive the notifications from DYW, where all the new articles will be published. Other than that, nothing is changed.

There are further changes that will be made in the following weeks, starting with having the same responsive layout on DYW and DRB. I’m working on the new theme for a while and I hope I’ll find the time to finish it soon.

I want to thank the subscribers and people who have shared the articles through social media and on their websites and who have kept the site alive till now.

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/eXtJAwpn670/

Design Resource Box

When browsing we often find various designs that others have created with a certain font and we think that we can use that font for a project that we are working on, but can’t figure out which font that is. It’s really frustrating when you know that exact font can look great in your project.

I found that a really good way of handling this issue is by using WhatFontIs. Its name is self-explanatory, the website is a font identifier and it’s really easy to use, having to take only three steps in order to identify your wanted font. If somehow it doesn’t recognize the font from the image that you are testing, it will find a similar font from its library of over 280.000 fonts.

The process of finding a font is easy and you will find guidelines on the site to make the experience as easy as possible. The technology isn’t exact and I believe that’s something that you should take into consideration when using it. If you will be testing an image with a custom font or one with an indecipherable one, it will return fonts that are similar to the one you provided.

The steps

I used an image with Lucida Sans to test the tool. This is my image:

1. Upload the image

2. Select the characters

3. The result + similar fonts

As you can see, the tool works great and is a very good solution for finding those pesky fonts that you don’t recognize in various images.

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/6cD9L5JjG_Q/

Design Resource Box

A landing page is one of your pages where you send traffic in order to prompt a certain action or result. Everyone knows that. The problem is that not all people know how to create a landing page that converts and delivers the desired results.

I’ve had partnerships with advertisers for over 5 years and I’ve seen in this time frame all sorts of marketers. The ones that are from big companies take advertising seriously and they have really beautiful and effective landing pages, almost making you say “shut up an take my money”. Others, however, especially from small companies with people who haven’t got experience in online marketing and user experience are using landing pages that have so many wrong doings in them that I’m surprised they make money. Most of the times, they don’t.

I learned to appreciate landing pages after I saw a lot of small companies going bankrupt over the years just because they paid an insane amount of money for advertising and just a few dimes to a designer for creating a landing page.

But why should we use a landing page?

Most websites are filled with information and there are a lot of distractions to the visitors. Entering a website who has a lot of buttons, titles, links and pictures will confuse the visitors and they could click on a button that isn’t the call to action one, which will lead to paying for visits to your site, not for customers and that is really stupid.

Usually, a visitor spends roughly 5 seconds on a page before making the decision of closing the page or reading further. The best way to pass over these critical five seconds is by using a clear and concise headline that is related to your ad message. This way the visitor will have the feeling that he has made a good choice of clicking the banner and will stick around to see what the page is all about.

A lot of companies have made their homepage look like a landing page for this very reason mentioned above. There’s no point in distracting the visitors from what they are looking for.

Look at mailchimp homepage, for example. They removed all the unnecessary items on the page and they only kept what the customer might want. A title which satisfies the curiosity that made them click the advertising banner, a visual explanation of how their service works and a call to action button which is easy to notice and is also placed in two locations to increase convertibility.

Focus on call to action

Call to action is often given less importance and that hurts the results that a page could return. A good call to action button will make the visitors do what you want them to do, and that is to sign up, add to cart, contact us etc.

The message of the call to action should be clear and simple so avoid putting any unnecessary information near it because it might distract the visitors’ attention. To avoid repetition, I’ll just summarize the content of the article about well designed call to action buttons.

Make sure you know about these tips before designing the call to action button:

• Good copy increases conversions


• Position it well within the page


• Use contrasting colors


• Size is good, but it could backfire


• Be careful when using secondary alternative actions


• Make the action seem simple and easy

Creating a good landing page

Creating a good landing page isn’t easy if you don’t know what you are doing, but at the same time, it can be a piece of cake if you take into consideration certain factors or information like the one presented in this article.

Don’t complicate the layout with graphical elements that you think are cool. The visitors are most likely of different ages and different backgrounds which means that, most likely, they don’t have the same taste for graphical elements like you do. Besides this, everything that could be a distraction must be removed from the page.

The visitors should only see the information about the product and the call to action button. Other links which would offer more information that is not equally important to the call to action should not be made ostentatious.

Don’t limit the visitors’ experience. I’ve seen landing pages that have popups and I don’t know if I waited for that third second until I closed the page. Using popups is the fastest way to lose customers on any page.

Keep it simple, stupid. There’s a lot of information which you should avoid putting in a landing page. You will have to make sure that everything you put on the page is relevant to the visitors and is exactly what they want to know about your product or service.

Keep everything transparent for the visitors. Putting yourself in the shoes of your visitors is the easiest way to improve your conversion rate. Think of what they would want to know about the product or service that you are selling, what features and benefits it has, what they would be interested in and why they should give their money for it.

Pay attention to your headline. Use simple language and be concise about your message. People want to understand quickly what it is about.

Add social proof. Social proof, which is also called informational social influence, is the concept that people will follow the actions of others under the assumption that those actions are considered the correct behavior. A more simple way to describe what this does is that it adds a third party credibility to what you are offering on your landing page.

You could provide social proof by adding testimonials, retweets from people who bought your product, companies that are using your product or the number of customers that you have.

Social media

I’ve read a few articles about including social media in your landing page. While the idea behind this is interesting and you might think that besides buying your product, the visitors will also share your page, the reality is different than this utopian conception.

Social media buttons are call to action buttons. They ask the visitor to retweet, like or share, which is distracting the visitor from what you want him to do, and that is to buy your product, to register, to give you his email etc. You can’t have both. Adding social media buttons to your landing page will kill it. If a person buys your product and likes it then he will talk about it and share it online.

It is true that the implications of social media are huge and besides the visitors that you could get from a retweet on Twitter or like on Facebook, you could also rank higher in SERP, but you should focus on what’s most important, and that is your call to action.

Conclusion

The landing page experience is what a person’s user experience is when getting on your landing page. There are many things that can affect it so the best way to avoid the lack of conversions is to stay documented and follow the instructions that you are learning.

After reading a few articles, ebooks or even books about landing pages and user experience, you might get information from one source that contradicts the other. To avoid following a bad advice you should always test your landing page before launching. In this way, you will see if the user experience is the one that you want and the one that gets you results.

In the last part of the article, you will see examples of good landing pages which were designed properly and followed the general guidelines of creating a landing page.

scriptogr.am

dunked.com

prevue.it

grooveshark.com

unroll.me

spendeeapp.com

get.hike.in

plover.co

madebyminimal.com

podio.com

easel.io

spacebox.io

dcovery.com

weekdone.com

hull.io

proto.io

zendesk.com

touristeye.com

getpocket.com

evr.st

.

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/EUy69C01qjA/

Design Resource Box

LESS and Sass are the two preprocessors that everyone is talking about these days and people are even starting disputes over them in the so called LESS vs Sass battle. If you are new to this discussion, I’m going to try and inform you what the big fuss is around these two and I’ll start today by writing about LESS.

Even if you didn’t think it was possible, a moment comes when CSS shows its limitations, especially the really annoying part when you find yourself repeating the same code lines over and over again, wasting time doing so. When working on a small project, this doesn’t bother you much and you aren’t even that disturbed when the client asks you to change the font size for every paragraph because there are probably just a few lines, but when you are working on a big project with a huge CSS file, things get complicated.

CSS processing is a method of extending the features of CSS by writing your style sheets in a new language, then compiling it to plain CSS so it can be read by browsers. It may sound difficult in theory, but it makes coding really easy.

How it works

First of all, you have to download less.js from the LESS website. After that, include it in your HTML along with a .less stylesheet which is the same as a .css one. What the .js file does is transforming your LESS code in CSS so that the browsers can read it. Make sure you include the .less file first and then the .js if you want something to actually happen.

What you have to remember is that less.js is for testing purposes so that it will make the development easier. When you actually put the site online you will have to transform the .less code into .css code. To do that, you can use one of the following apps:

Less.App (OSx)

Crunch

lessphp

SimpLESS

Mixture

Koala

Prepros (Win)

WinLess (Win)

Plessc (Linux)

Nesting

Instead of creating long selector names to specify inheritance, with LESS you can just nest selectors inside other selectors. This way you are avoiding the creation of long selectors that repeat the same lines of code, makes inheritance clear and style sheets shorter.

/* LESS */

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Mixins: what they are

The most interesting thing about LESS is represented by mixins. They allow you to embed the properties of a class into another class just by including the class name as one of its properties.

/* LESS */

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Having understood what they are and how they are used, here is a set of CSS3 LESS mixins:

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
        text-shadow: @string;
}
.box-shadow (@string) {
        -webkit-box-shadow: @string;
        -moz-box-shadow:    @string;
        box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
        -webkit-box-shadow:     @x @y @blur @spread rgba(0, 0, 0, @alpha);
        -moz-box-shadow:        @x @y @blur @spread rgba(0, 0, 0, @alpha);
        box-shadow:             @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
        -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
        -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
        box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
        -webkit-box-sizing: @type;
        -moz-box-sizing:    @type;
        box-sizing:         @type;
}

.border-radius (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius:    @radius;
        border-radius:         @radius;

        -moz-background-clip:    padding;
        -webkit-background-clip: padding-box;
        background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
        -webkit-border-top-right-radius:    @topright;
        -webkit-border-bottom-right-radius: @bottomright;
        -webkit-border-bottom-left-radius:  @bottomleft;
        -webkit-border-top-left-radius:     @topleft;

        -moz-border-radius-topright:        @topright;
        -moz-border-radius-bottomright:     @bottomright;
        -moz-border-radius-bottomleft:      @bottomleft;
        -moz-border-radius-topleft:         @topleft;

        border-top-right-radius:            @topright;
        border-bottom-right-radius:         @bottomright;
        border-bottom-left-radius:          @bottomleft;
        border-top-left-radius:             @topleft;

        -moz-background-clip:    padding; 
        -webkit-background-clip: padding-box; 
        background-clip:         padding-box; 
}

.opacity (@opacity: 0.5) {
        -webkit-opacity:        @opacity;
        -moz-opacity:           @opacity;
        opacity:                @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
        background-color: @startColor;
        background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background: -webkit-linear-gradient(top, @startColor, @endColor);
        background: -moz-linear-gradient(top, @startColor, @endColor);
        background: -ms-linear-gradient(top, @startColor, @endColor);
        background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
        background-color: @startColor;
        background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
        background-image: -webkit-linear-gradient(left, @startColor, @endColor);
        background-image: -moz-linear-gradient(left, @startColor, @endColor);
        background-image: -ms-linear-gradient(left, @startColor, @endColor);
        background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
        -webkit-animation: @name @duration @delay @ease;
        -moz-animation:    @name @duration @delay @ease;
        -ms-animation:     @name @duration @delay @ease;
}

.transition (@transition) {
        -webkit-transition: @transition;  
        -moz-transition:    @transition;
        -ms-transition:     @transition; 
        -o-transition:      @transition;  
}
.transform(@string){
        -webkit-transform: @string;
        -moz-transform:          @string;
        -ms-transform:           @string;
        -o-transform:            @string;
}
.scale (@factor) {
        -webkit-transform: scale(@factor);
        -moz-transform:          scale(@factor);
        -ms-transform:           scale(@factor);
        -o-transform:            scale(@factor);
}
.rotate (@deg) {
        -webkit-transform: rotate(@deg);
        -moz-transform:          rotate(@deg);
        -ms-transform:           rotate(@deg);
        -o-transform:            rotate(@deg);
}
.skew (@deg, @deg2) {
        -webkit-transform:       skew(@deg, @deg2);
        -moz-transform:          skew(@deg, @deg2);
        -ms-transform:           skew(@deg, @deg2);
        -o-transform:            skew(@deg, @deg2);
}
.translate (@x, @y:0) {
        -webkit-transform:       translate(@x, @y);
        -moz-transform:          translate(@x, @y);
        -ms-transform:           translate(@x, @y);
        -o-transform:            translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
        -webkit-transform:       translate3d(@x, @y, @z);
        -moz-transform:          translate3d(@x, @y, @z);
        -ms-transform:           translate3d(@x, @y, @z);
        -o-transform:            translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
        -webkit-perspective:    @value;
        -moz-perspective:       @value;
        -ms-perspective:        @value;
        perspective:            @value;
}
.transform-origin (@x:center, @y:center) {
        -webkit-transform-origin: @x @y;
        -moz-transform-origin:    @x @y;
        -ms-transform-origin:     @x @y;
        -o-transform-origin:      @x @y;
}

Making it easier

The only way of making it easier than it already is so far is by using Mixing libraries. A few developers took it to the next level and created these mixin libraries.

LESS Elements

Bootstrap

LESS Hat

ClearLESS

Lots of Love for LESS

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/E7kvGIcLizE/