Improve Productivity and Hack Your Life As A Web Designer

#EspressoMonday Episode Nr.17

You just have to admit it – that web designers, being creative people, are prone to distractions. Besides, science tells us that our brains only takes some number of minutes to actually focus.

It’s not okay to be distracted, but it’s okay to take a break. It’s foolish to drive yourself to death, but it’s wise to have or create a realistic time management. You don’t over-think as it will drive you to madness.

If you’re a super busy creative who has a tendency to get distracted or have difficulty making most of your time productive, we are more than happy to share some life hacks in this #EspressoMonday episode. So grab your cup of java and begin to spread the Monday happiness.

Everybody, no matter which industry they are in, aims for a high rate of productivity. Web designers are no different. However, we cannot escape the fact that we are affected by external forces, two of the most common are a poorly set up work space and the changing demands of your clients. While you cannot control the latter, you can do something with the first challenge and improve your workflow to free more of your time and earn more in a fast and efficient way.

10 Effective Life Hacks to Improve Your Productivity

Here are the 10 tips we prepared to help you improve your productivity.

1. How to Focus

Our brain can only focus for 90 minutes – that’s a fact. Try going beyond that and you will see that your brain automatically shifts its attention to something other than what you are doing. That’s because your brain can only take as much. So our suggestion is take a break every 90 minutes (we recommend every 60 minutes) to keep your focus as well as your energy higher than working straight through a project. A 15-minute break every 60 or 90 minutes will do wonders to your productivity. And when you take a break, get your eyes off the screen.

Another method is the Pomodoro, a time management technique developed by Francesco Cirillo, where you buy a little timer to break down your work into 25 minutes and have a 5-minute break in between. Again, when you take a break, you have to take your eyes off your computer screen.

2. Realistic Time Management

Every plan always has a contingency plan so that you have a back up just in case something unplanned or unpredictable happens. The same goes true with time management. When you’re plotting your time, you have to put at least 15 percent of contingency time because you do not know what will happen – it could be human error or it could be loss of data. No matter what it is, you will have more edge if you anticipate such things and have an alternate plan or extra time to keep you out of panic mode.

3. Don’t Over Think

This also means don’t over-design nor over-code. As web designers, we have the tendency to make everything excellent (to the point of perfection) just to satisfy our clients. However, you should not forget to balance things. Even if you have great design skills, your goal is to make the design simple, clean, and efficient. It doesn’t mean that you have to under-deliver but rather, don’t spend too much time on something when there is a better way of doing things more quickly and efficiently.

4. Dealing with Tasks

This comes from David Allen’s 2-minute rule of how to kill your tasks immediately. The principle is rather simple – you list your tasks for the day and when some tasks come up during the day, you ask yourself if it can be done in 2 minutes. If it’s longer than 2 minutes, add it to your to-do list but if it is doable in 2 minutes, like replying to an email, kill it immediately by doing it.

5. Feel Your Goals and Tasks

This tip comes from my partner, Dainis Graversi, who said that when it comes to tangible, physical tasks and goals, you need to “feel” them.  As a team, we use project management tools, such as Basecamp and Asana, but he also likes to write these tasks and goals on the white board. Once it’s done, he finds the ultimate satisfaction of crossing finished tasks off the board. He describes his feeling as orgasmic happiness or much better than that. So if you can physically remove or erase, or tick off finished tasks one by one from your board, do it and savor the feeling of being able to do it.

6. Automize and Systemize

This goes for the itty-bitty tasks you have, such as answering similar email. For example, I receive emails inquiring about guest posts. My answer is basically the same so what I did is I made a canned answer for such emails and copy-paste it. Saves a lot of precious minutes. On the other hand, if they are bigger tasks, you might consider delegating, outsourcing, or whatever system you have to make the task easier to do and faster to accomplish.

7.Share the Monday Happiness

Most, if not all, people simply hate Mondays. Why not? Just imagine you had a great weekend with family and friends enjoying and relaxing then Monday comes and BAM, you’re hit with the reality. The transition is so harsh – from relaxation and rest to a desk piling up with tasks and responsibilities. You don’t have to hate Mondays. In fact, your weekend can help you become excited with Mondays.

Before going to sleep on Sunday night, set aside at least 5 minutes of your time to have a sneak peak of what you’re going to expect or do on Monday. Look at your emails or your checklist to see what upcoming tasks you have the next day, this way you can condition your mind even before Monday comes.

In addition, there’s our #EspressoMonday episodes you can always look forward to.

8.Ambient Environment

Research have revealed that ambient coffee shop sounds can boost your creativity. We don’t really know how it works but science says that the sounds of people and other things going on in a coffee shop boosts your productivity. I’ve tried it and it works like a charm. There’s a website (they also have an app) where you can get these sounds. Try it and compare how it works for you.

9.Shrink Your Goals

This means that instead of setting a one-year goal, only create a 90-day goal. This is in fact logical because a lot of thing can happen in a year. Of course there are quarterly goals to evaluate these yearly goals but a 90-day goal is more feasible because it is neither too long nor too short. Moreover, you can change or adjust them after 90 days.

10.Stay Accountable

Again, this tip comes from Dainis who recommends that you get an accountability buddy to help you push yourself. It should be someone you trust and someone you resonate with. Have weekly Skype calls (if they are from another city or country) or meetings with them and discuss what you plan to do next week and vice versa. Then, you meet again after a week and discuss/evaluate whether you were able to do what you said you’re going to do. You also talk about the problems and challenges you encounter as well as give encouragement and insights to each other.


So there you are – 10 tips how to become more productive as a web designer. Write it if you want where you can always see it and be reminded just in case you are losing focus.

Once again, have a happy #EspressoMonday!

Powered by WPeMatico

What Is An Effective Web Design And What Makes Good User Experience?

The Podcast Episode with Christian Vasile

The Importance of User Experience

We live at an age and time where everything is accessible but also in an era where people’s attention span gets shorter. Therefore, in a race to attract prospective customers, companies of all sizes and shapes come up with ways and means to do that. In the process, the World Wide Web receives an abundance of things, both useless and useful. The sad thing, however, is the useless things grow in numbers ruining the whole user experience.

Ruin might be too strong a word according to Christian Vasile, a web architect and also one of our writers here on 1WD. For him, a good web designer is still able to turn it around and re-design into something better to enhance user experience. However, this process involves a lot of factors, which involves the cooperation of your clients. The greatest question, however, is how do you get that cooperation, and how does it contribute to the whole idea of user experience.

User Experience and Client Trust

Most, if not all, web designers understand and are aware what user experience is. They know how essential it is to conversion. Any good designer will not only think about how awesome a website looks like, but he will also consider other factors, such as functionality and user experience, when he creates a website.

Clients, on the other hand, especially those who have no background or idea whatsoever about web design (and there’s a great many of them), do not know these factors. What they want is for you to build them a website that’s good to look at, or a website they saw because it’s doing well. They will pay you to get the job done without worrying about the specifics.

Therefore, it is your job as a web design professional to sit with your clients and tell them about these specifics and make them understand why one element is necessary, while the other element is not beneficial.

For a web design professional who has already had a portfolio to show and the experience to back him up, this is not a problem. All you have to do is show them that portfolio and you won’t have a hard time convincing them. They might be a little hesitant at the beginning but knowing you have done similar successful projects in the past will encourage them to take risks.

The problem is when you are a new web designer who is just starting to carve a name in the industry with no portfolio or experience whatsoever. More often than not, clients will even think they are doing you some sort of goodwill for trusting you even without prior experience. Rarely does it happen, and it would be a very special case, that a client will take the risk and follow a newbie.

That can be pretty frustrating because you, as a designer, knows that the red button on the takeout field is a bad idea. So, poof! There goes what is supposed to be a good user experience had your client only listened.

The Important Element

Web design professionals have their bad days, but there are also good days and one of them is when your client decides to listen to you and follow your advice. When it happens, the challenge is to identify which element needs to be changed or improved.

There are many elements in a website, including speed, navigation, About Us page, space, contact information, and so on. Where do you begin and how do you even choose which is which.

The answer is simple – It depends a lot on the type of web page or the type of business your client has. For example, if you are working on an e-commerce website, the most important thing you have to look out for is their forms and their check-out process. How quick is that? How difficult is that? Are you asking for information that you don’t really need?

You can draw inspiration from your own experience. Remember when you go and purchase something in an e-commerce website, which one do you remember as a consumer – the form where you only have to enter two types of information or the long one where you have to provide a lot of information, some of which are even unnecessary to your purchase?

You, of course, will remember the one which gave you a convenient and favorable experience. Depending on how fast you write, you might even finish filling out the two-field form within 15 seconds. You not only remember the experience, but it is also the very same reason that brings you back to the website.

On the other hand, if you are working on a freelancer website, you have to pay attention to the content as well. Many times you will see a very awesome website in terms of the aesthetics but has awful content where the freelancer brand themselves as a jack-of-all-trades.

This is bad for business. You have to determine what you are best at and make it your brand. If you are good at design, brand yourself as that and not as a can-do everything designer. Brand yourself on your niche.

The Importance of Copy in Web Design

One of the elements often overlooked by web design professionals is the copy as well as how they structure the design in order to highlight the copy on that page. A lot of web designers are so consumed with the aesthetics believing that a good-looking website is the best website.

So what most designers do is spend a lot of their time building mock-ups and keep postponing until deadlines come and we just throw in any text that comes to mind to fill that beautiful website. The website is still beautiful, but the low-quality copy ruined it.

It is a fact that most, if not all, web designers have been programmed to be visual beasts blinded by the aesthetics. Little do most know that a low-quality copy will pull down and make the design suffer.

The truth is design and copy are two inseparable entities. When a user visits a website, they don’t just see the design or the copy, they see the website. And both contributes to the whole user experience, which can be good or bad. Unless you are creating a website for fun and not for something professional, your design should always make the message stronger and not the other way around.

The Importance of Communication

As mentioned earlier in the article, your clients are also a big contributing factor in creating a good user experience for the websites you build for them. That is if they do not want what you suggest is good for their website and they insist on what they want, then you cannot do anything. The old age adage is still true that the customer is still king – they still have the final say.

In order to do this, communication is very important. Communication is easy if your boss or client is just around the corner. However, if you are working remotely, that would be quite a challenge, especially of you’re working with several clients because each client are different. Some clients want you to report to them regularly while some will give you all the freedom and will not communicate until the project is finished.

What differentiates a great designer from a good designer is how well you’re able to communicate with clients and how well you’re able to manage your clients. This is also a big factor why clients will return to you because, for the first time, you did quality work for them and they feel that your collaboration with them went smoothly.


A good web design and good user experience does not just happen when a user visits your website and enjoys its aesthetics. It is not just what’s happening in the front end but also at the back end. It does not even start when you start putting those codes together to create a website. Instead, it starts with your client trusting you and how well you communicate with him. That is because when a client understands what you are doing and you clearly communicate why you’re doing it, he will trust you. Then, you can create something that you, as an expert, know will work and not just because your client tells you to do it.

Powered by WPeMatico

5 Web Design Best Practices For a Great Website

This is a guest contribution from Tomer Lermer. 


Dead website? There’s hope to that

Great websites do not happen by accident. A site is considered successful if it is useful, relevant, and well designed. As the Head of the UX department in a code-free web design platform, I spend a lot of time thinking about great design and how it can be used to create great websites. While different web projects each have different needs, there are some design principles and best practices that are universal to all sites. In this article, we will take a look at 5 Design Tips to Revive Your Dead Website.


Customers should find an actionable reason that will lead to conversion

1. Think About Conversions

Design goes beyond just the aesthetics. Yes, you want a website to be visually attractive, but you must also bear in mind that a website is not a work of fine art. Customers do not come to a site to admire the visual appearance. They are there for some actionable reason – to find certain information or to accomplish a particular task.

A successful website is one that understands these needs; thus, its design should lead people to do exactly what they are there to do. With this in mind, you have to keep in mind that the conversion potential of the website is an integral element of the website’s design.

Conversion means people transition from being just a casual visitor to becoming a paying visitor, becoming a member of the site, subscribing to receive additional information from you in the future, or even just completing an inquiry form.

Every aspect of a site’s design plays a role in driving customers to their destination and converting them.

  • Images – The images should be interesting, unique, and high quality
  • Color – Is the color scheme attractive and eye-catching?
  • Text – This includes the use for messaging as well as the descriptions, instructions, and labels
  • Navigation – How smoothly can people navigate through your website?

These are just some of the elements that contribute to successful conversions. Basically, if something is part of a site’s design, it is a factor in customer conversions. Consider the two websites used as examples below and decide which one will get higher conversion.


Device Magic has all the elements of a good conversion


Surprise! This is indeed a real website!

So how do you know if your site has made the right design choices from the perspective of conversions? You don’t want to just make a decision and hope for the best. No, you need to test your design decisions and be able to make the necessary adjustments.

A/B testing is a great way to compare the results between two variants of a design. For instance, you may have a large call-to-action button on your site’s homepage. You want to know which color, text, and even placement will be most effective for that button.

split test

A/B testing is necessary to see what works or not for better conversion

By running a test where some users see one option (A) and others see a different option (B), you can measure the results to see which configuration performs better and results in more customer conversions. You can then make changes and run additional experiments to try to find the best button option possible. That is the one that should make it in to your site’s final design!

white space

Adequate spacing between elements means a more enjoyable reading experience

2. Don’t Be Afraid of White Space

Another important property of a great website design is the effective use of white space. To non-designers, white space seems like the areas of the site where design has not been applied. For an expert web designer, however, each part of the space that they use around the images, written content, call-to-action buttons, and every other element of the site is deliberately designed. Prominent designer, Ellen Lupton, puts it best by saying:

“Design is as much an act of spacing as an act of marking.”

Too often, companies think of their homepage as if it was a newspaper. They strive to fill every available pixel with one kind of content after another, the same way someone laying out a newspaper would fill every inch with columns of copy. This aggressive use of space makes sense in terms of newspaper printing, but websites are not newspapers and people do not consume website content the same way they consume the printed page.

For website visitors, adequate spacing between elements on a page allows for a more enjoyable reading experience (more on that reading experience shortly). It also allows them time to focus on the individual pieces of a page without being overwhelmed by everything else around it. White space gives content time to shine without fighting for attention against all of its neighbors!

One very interesting way of using space is parallax scrolling. Parallax is an effect where the foreground images on a website move at a different speed than the background images giving that site a sense of depth and motion. This effect can be used very effectively as a storytelling device. Different page elements (images, text, etc.) can appear on screen at selected times as a user scrolls through the page. To make these elements have maximum impact as they appear, good use of timing and effective spacing is essential.

Many designers are intimidated by the technical demands of parallax scrolling because the website code needed to power that parallax scrolling can be daunting for non-developers. However, there are parallax scrolling plugins that are actually intuitive making it easier to add these effects, as well as the proper spacing between these animated elements, to your website – all without needing to write one line of code.


Never underestimate the power of fonts

3. Typography, Typography, Typography

While awesome videos and stunning photographs may get much of the glory online, the reality is that the Web is predominantly text content. If there is one area of your website where some extra design attention can go a long way, it is with that site’s typography.

For years, websites were limited to only being able to use a handful of “web safe fonts,” such as:

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Tahoma
  • Lucida
  • Impact,
  • many more

These were fonts that were essentially guaranteed to be installed on your computer (since this is where a website reads its fonts from). In recent years, however, font selection for websites has taken a significant leap forward with the introduction of @font-face (pronounced “at font face”).

With this method, font files can be included along with other resources, like images, that a website needs to use to display properly. Instead of getting fonts from a user’s computer, a website can instead use these included font files allowing that site access to a staggering array of font choices used in that design!

While having access to more fonts is great, how you utilize them is still important. In fact, with a big number of possibilities available to web designers nowadays, strong typography skills are more critical than ever before. Moreover, having a plethora of fonts to choose from is awesome, but you still need to make the right choice for your particular project. Understanding what type of font (serif, sans-serif, slab-serif, display, etc.) is appropriate is the key.

Typography is not just about font selection, but also about the size and color you use for the message as well as the weight of the letters, the spacing around those letters and words, and so much more. Above all, it is about text content that is easy and enjoyable to read. Here’s a good example:


Design Can Change is a good example of balance

Design Can Change

Design Can Change is a good example in using the right elements mentioned in this article. The black and white font in various sizes gets the message clear inside a background of bright red with enough white space that leads you to read the short but powerful message.

Remember, a website is not just a pretty picture meant only to be admired. If your site has text (and which site doesn’t), then it is meant to be read! It may be a content writer’s job to say the right thing with your site’s messaging, but great typography will ensure that the message comes through loud and clear.


A few well-meaning words are more powerful than a plethora of information if you want to make a point

4. Add Less, Not More

One of my favorite design-related quotes comes from Antoine de Saint-Exupery:

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

When designing websites, there is always the temptation to add “more stuff”. Clients request additional features to be added, they want more buttons squeezed into the navigation, or they make some other request to pile more into their new website.

Adding elements or content that is necessary for success is fine, but anyone who has even had these conversations can attest to the fact that everything being added is certainly not necessary. Too often, these additions add clutter to a design instead of clarity. Therefore, instead of contemplating what else you can add to your site, look at what you already have and determine what can be removed.

Take that aforementioned navigation bar, for example. If you have 10 links or tabs in that navigation, your visitors will take longer to determine which link is the one they need than if you only have 8 options. If you can whittle it down to 5 or 6 options, you are in even better shape!

Less is more in this case because the fewer options someone has, the quicker they can make a decision. With the impatience of most website visitors and the immediate access to content that they demand, the type of clarity achieved through the reduction of elements (in this case navigation links) can be hugely beneficial.

Another example of the “less is more” principle is when you are trying to emphasize something on your site. Think about the typical homepage for a minute. Many companies use this page as a platform to promote every possible piece of content that their customers may need. They add so much content to that page trying to emphasize all of it by making things big, bright, and bold. What happens when everything is emphasized, however, is that nothing is emphasized.

When every element of a page is screaming for attention, the message and purpose of that page become lost in a cacophony of noise. By removing elements, those that remain will automatically have more focus. Instead of trying to add visual treatments to a specific part of the page to emphasize it by making it bigger or bolder, try taking away the stuff that surrounds it and use the principles of white space that we covered earlier in this article.

Once the remaining element has broken free from the clutter that surrounds it, it will, by default, be more emphasized because it can now shine without competing with other page elements. This website is a good example of this principle.

5. Have Fun…but Don’t Go Overboard

One of the goals you most likely have for your site and for your online presence is that you want to make an impression on your visitors. You want them to remember your business. One of the best ways to achieve this is by adding some “fun” to the experience. After all, a fun experience is one that people enjoy – and if people have an enjoyable experience, that is also often a memorable experience.

Now, your initial reaction may be that you cannot have a “fun” website, but let’s define what we mean by “fun” here. Fun doesn’t mean silly. A website can be both fun and professional at the same time by also adding a layer of delight to the experience. It means taking what is mundane and replace it with something memorable!

Take “The Dangers of Fracking” site, for example. This is a site that is about the dangers of hydraulic fracking – definitely not a topic that you would think is “fun”, yet it becomes engaging, engrossing, and memorable because of the use of illustration, animation, and a parallax-style storytelling effect. This is a perfect example of “fun” being used on a serious website to make the message and experience more powerful.

However, you must not forget that there is a line you must be aware of when adding “fun”. It is easy to go too far and get distracted from your primary goals for a site. When using this approach, it is important to know where that line is to avoid going overboard. Just remember, there is always room for fun and delight in a website experience, but it is your job as a designer to find where the line between “too much” and “just enough” is and to help bring your site to that point!

We actually have a lot of resources here on 1WD where you can learn more of these things as well as how to apply them on your site.


1WD has a treasure trove of helpful resources about web design and beyond

First is the recently created Web Design Guide, where you can learn these things in depth,our #EspressoMonday videos, where you can find golden nuggets of practical advice to become a better web design professional, and a lot more from our web design blog.

In Closing

If your website is in need of a shot in the arm, then a healthy dose of design, including the 5 tips covered in this article, may be just what the doctor ordered. Talk to your web designer about your goals for the site and how design improvements can help you revive that dead website today!

About Author
Tomer Lerner is an award-winning designer and a UX Manager at Webydo – the code-free website design platform for professional designers – where he manages the UX development team to push beyond the limits of creativity.

Powered by WPeMatico

Is It Worth Paying For a Premium WordPress Theme or Not?

#EspressoMonday Episode Nr.16

Is It Worth Paying For a Premium WordPress Theme or Not?

There is no doubt about what WordPress can deliver in many ways in performance and flexibility. Being an open source tool, there is a lot to choose from and the possibilities are endless. However, the debate rages on whether or not buying a premium WordPress theme is worth it or not.

Before we get into the heat of things in this #EspressoMonday episode, grab your espresso and let’s do it the Brent Weaver way – one shot in an espresso cup.

As an open source tool, WordPress remains dynamic and progressive with the themes evolving regularly or sometimes, at a much faster pace. With all these choices available, a lot of people, not only web designers, think if it is really worth shedding a few dollars on a premium theme. Should you buy a premium WordPress theme or not?

Advantages of a Premium Theme

Buying a premium WordPress theme has always been a hot topic not only here on the 1WD community but among those who use WordPress. In fact, we have written a few articles which tackle this subject. You can find one of them here. Before we delve into the advantages of using a premium theme, we are not saying that you should not use a free theme because there are free themes that have awesome features as well. However, free themes have some limitations compared to their premium counterparts and here are the reasons why.

Premium Support

Because you pay, premium theme developers are bound to provide support 24/7 or risk losing precious customers. So if you encounter any problems or questions along the way, you can always expect that your queries will be answered promptly. You are always rest assured that, you will get prompt, excellent service through forums or email.

Regular Updates

Another reason for going premium is the regular updates. Since competition is tough, premium theme developers will regularly update the themes or they will lose to competition. Expect regular updates or get newer versions every 2 or 3 months including bug fixes. In addition, premium themes have extensive documentation to help you every step of the way.

Unique Features

One that’s never lacking in premium themes is the unique features because, as mentioned, competition is stiff. Premium theme developers will always strive to think, innovate, and add the newest and most unique features they can ever think of to make their theme much better than the competition.

Great Attention to Details

Premium theme developers are very detail oriented and have better tweaks, such as SEO. In line with SEO, premium themes come with a clean footer and support lowering your security risk as well as removing any annoying links from untrusted websites.

Easy Customization

Premium themes have been developed with their customers in mind; thus, themes are categorized to suit the needs of their customers. So whether you are a freelance photographer looking to showcase your portfolio or a new business owner with limited portfolio, you can always find something for you in a premium theme.

Unique Look

Premium themes are no doubt superior than free themes. What does that mean? That means it’s unique. So if you want a blog or website that stands out from the rest, you will never get it from free themes. Why? The answer is pretty simple – a lot of users are already using the free themes.

Fast Website Development Process

Premium WordPress themes have been developed with functionality in mind. Therefore, their tools are easy to use even for the not technologically savvy people. When tools are easy to use and deploy with just a few clicks, it is much easier and faster to create a website than when you use hard coding.

Disadvantages of Using Premium WordPress Themes

Just like any other issue, it won’t be fair if only the advantages are presented, so here are the disadvantages of using a premium WordPress theme.

Do Not Undergo Review

Unlike free themes that undergo a review process by WordPress before you can use them, premium themes operate independently. Because of this, some of the features they have might not be compliant to the WP standards in terms of licensing.

Not for Everyone

Buying a premium theme may not be a practical decision if you are just thinking of creating a blog of website as a hobby. There’s no need to shell out cash if you are not thinking of generating an income from it; otherwise, it will just be a waste of your money.

Too Many Unneeded Features

Premium themes, in their bid to be super awesome or super cool, might be adding features and plug-ins that are not necessary. Then, you’ll end up buying something that is useless, which defeats the purpose of why you bought a premium theme in the first place.


Premium themes are definitely awesome but before you think of purchasing one, look at the factors whether or not you really need one. If you want a blog or website for a personal hobby, there are a lot of free themes which you can use to showcase your hobby. However, if you want to showcase a service, a product, or a business which you hae plans to monetize or profit from, then a premium theme is for you. So depending on your needs and goals, assess them first before opting for a premium theme.

Another point to consider before buying a premium theme is to to buy them from a reputable source, such as ThemeForest, otherwise, you will find yourself with a big headache. We also have an article where we featured some of the best premium themes in 2015 as well as some reviews of premium WordPress themes, like the X Theme.

Have an awesome #EspressoMonday!

Powered by WPeMatico

Learn to Create Forms That Improve User Experience

Most applications, either for mobile and tablet or beyond, rely on input from the user at least once. Actually, most of them rely on input from the user most of the time. These users can only give us input via forms and although they have been around for some time now, the majority of designers are still not able to design them properly.

forms header

There are not many things that annoy me more than forms added to an application just for the sake of it and done poorly on top of all. Let’s delve into it and learn the suitable way of putting a set of input forms together.

Ask only for what you need

If there’s a thing you can do right away that is more important than anything else, this is it. I rarely fill in a form and think “this is spot on”; too rarely for a world in which UX designers pretend to be on top of their shit.

The shorter your forms are, the lower the drop-off rate. I know we’re not here to discuss conversion rates and how to improve them, but put your expectations aside for a while. This is important to know.

Endless studies show that the more information you ask from your users, the less likely they are to give it to you. This is why Facebook, Twitter and G+ created APIs that allow people to log in on different websites through their service. It is called social login. I’m sure you’ve seen the “Log in with Facebook” button more than once. Different sources mention that conversion rates improve with between 20 to 60 percent when signing up can be done a single click.

Don’t get me wrong. I am not implying this is what you should do. Actually, MailChimp advises against it but the point is still the same: a single click sign up button can be up to 60% more effective than filling in lots of details about yourself. It is similar to the 1-Click purchase on Amazon, which is clearly worth billions.

Back to the point. The less information you ask for, the higher your chances will be that users will sign up. What’s the most frustrating is that most of the time you don’t even need that much information. Are you selling a digital product? Don’t ask for my physical address, you don’t need it. Are you selling a pair of shoes? E-mail for order confirmation, address for shipping, and credit card information for payment – that’s it. You don’t need anything else.

Spring app sign-up

If you want to join Spring on the iPhone, they only ask you to fill in four fields. Quick and easy.

It’s frustrating to see how many e-commerce experts just don’t get it. If you rather risk losing me for some extra piece of information (which you might use later to upsell me), you should drop off this design career of yours. Once you lost me as a potential client, not only am I not coming back, but I will buy from your competition, which in the end will harm you. Don’t drive me away by asking for more information than you need.

In case you would like to have more information about me, but you don’t really need it to sell me something, ask for it after I’ve signed up or ordered a product. When you already have my money in the bank, you can ask me for whatever you want. I may not want to give you any further information (some will, though), but at least you didn’t lose a sale.

This is a step that you can go and do right away. This should be the starting point for improving your forms: ask only for what you need.

Stick to a single-column layout

If you want to keep your customers off confusion, make sure you stick to a single-column, vertically aligned input fields. This way the users will not be confused about which field is to be completed next. If you have a two-column form, they could either complete it by column or by row. Which is the right way? Nobody knows.

If you only have an input field per row, there is no confusion. The speed of the process will be higher and the confusion, hence the frustration of the user, will be lower. This also reduces eye movement because users don’t need to do any jumping and only need to look one way: down.

Fine-tune your labels

Labels are also a crucial factor. Without them we would not be able to understand what needs to be filled in and this would clearly render our forms useless. There are several ways of showing the labels, but there are also some guidelines you need to stick to.

First, always keep your labels outside of the input fields. This is an issue when labels are inside the user fields and disappear whenever the user clicks on a field. Users should always be able to see what needs to be filled in. The fact that the label disappears whenever the field is active does not make it easy for users.

If you don’t have a lot of vertical space, keep the labels to the left of the input fields, otherwise you can always have them on top of each field. When you have the labels on the left, always align them to the left. This makes it easier for the human eye to quickly scan the form. If you are designing for the Western world, keep this in mind. We read from left to right, so it is clear that we prefer hard edges along the left.

Web form with labels

In this case, the designer chose to keep the labels on top of the field.

Separate related content

Although your form is long, you can make it look better by using colors and other visual elements. This is what the principle of proximity refers to. Several elements that are placed close to each other indicate to the human eye that those elements are somewhat related. This makes sense in forms that are longer than your usual 3-fields sign-up process.

If you structure your forms in this way, it will make them look organized and clean. Whenever you have a group of input fields that can be grouped together, make use of a thin horizontal line to unite related data. You can also use a light background color to create the same effect.

Indicate primary & secondary actions

In forms you always have a primary action, the one you want the user to take, and a secondary one, which can be a “cancel” or a “back” button. That’s the one you don’t want your users to click on unless they really have to, but it still needs to be there. You can’t give both buttons the same weight and importance.

The solution is to design the two buttons in a different way so that the visual impact of the secondary action is minimized. The “cancel” button should not be given equal status to the primary action because it is not as important. This also guides the user towards what you consider the successful action.

Primary and secondary buttons

The primary action is in focus here. The human eye is drawn by it and not by the “Cancel” button.

Optimize for mobile

Although there are countless web forms on the web and lots of UX designers out there, there is a frighteningly high amount of forms that are not optimized for mobile. This is a biggie in a world where mobile takes over. Optimizing forms for mobile means reducing the effort the user has to put in. Even a change as small as indicating the type of keyboard you want to pop up for each field can make a huge difference. What’s frustrating about this is that optimizing for mobile only takes a few lines of code in some cases, but developers don’t always do it.

mobile responsive form

Indicating the type of keyboard that matches each field is a good starting point. If you have to fill in credit card digits, don’t make the standard keyboard appear, but the digital touchpad. You might think “Yes, this is common sense, why do it differently?”, but most designers tend to ignore this detail for whatever reason.

During check-out processes, it’s important to note that I, as a user, have the credit card in my hand. I am on the brink of handing you my details and giving you access to my money. This is a place where your system can’t give me the slightest sign of weakness, because the probability of me dropping off is huge. When the user has a credit card in his hand and is willing to pay, the experience has to be flawless. This is what differentiates the big fishes from the small ones.

Many times, system automation is the solution to user frustration. You can quickly develop some “hacks” that will make my experience ten times easier. Luke Wroblewski from Google explains in the video below how easy it is to reduce my effort as a user. Take a look.

Luke Wroblewski on improving forms for mobile

Reduce errors

There is a lot you, as a designer, can do not only to reduce errors, but also to handle them and guide the user through when they happen. There is a number of interaction design patterns that can be taken advantage of for better error handling.

Validation is a key word for reducing errors. If you validate inline, you don’t give users many chances of being wrong. A good validation will automatically indicate to the user that he only wrote 15 digits instead of the 16 a credit card has, that the email address ends in “.xom” instead of “.com” and that not all the required fields have been completed. The system will therefore not allow the user to click on “next” or “submit” unless he rights the errors. The advantage of using inline validation is that feedback is instant. The user will immediately know something is not right and will fix it. If you first return the form with errors after it is submitted, you risk frustrating the users.

Inline validation – how?

Inline validation has its own guidelines. You always need to be good at handling errors and giving users spot on feedback, but it is even more crucial when you validate forms instantly.

Letting the user know something is wrong can be a tricky one, but nothing good code can’t solve. Showing “error” as a message and highlighting the field with red is not enough anymore. Error can mean anything nowadays. Is the formatting wrong? The email? The length of the password? Did I forget to fill in a required field? Let me know what the error is if you want to reduce my effort. As Steve Krug said in his famous book, don’t make me think. Let me know what the specific error is and I will be able to fix it without any effort. If you make it easy for the user, the user will be more willing to go past the mistake and still give you his information, whatever information that is.

Forms with real time feedback score better at completion rates and customer satisfaction and decrease errors with up to 22%.Luke Wroblewski

Input masks are also something that you might want to make use of. They are most of the time used successfully on portable devices, but this is not an excuse for not taking the same approach to desktop forms too. Input masks don’t only prevent errors, but indicate what the correct format for an answer looks like. You can quickly indicate what the valid formatting looks like via input mask and you can keep the formatting consistent by letting users know they are formatting the input right.

Input masks also help collecting only the information needed. If an input mask is correctly added on a field where the user has to type his credit card information, the mask will force the system not to collect any other input than digits. This means that if you, by mistake, tap on “space” or “slash”, the field will simply ignore it.

Inline validation error handling

This is how an error should look like. Moreover, it also has a bit of a personal touch to it.

Reformatting the input from the user is also something you could do with a few lines of code. This means that regardless of how the user fills in his credit card information (with spaces or not), the system will (re)format it the right way.

This is the right way to implement inline validation and, trust me, sticking with it will only improve the experience you offer via your mobile website or apps. As mentioned earlier however, don’t only do this on mobile. Inline validation is something you can make use of on all devices regardless of their screen size.

If you choose not to validate inline, that’s fair enough. Keep one thing in mind though: when on the error page, always prefill the fields that I’ve filled in correctly. Just because the email address was wrong you can’t make me write everything all over again. That’s just laziness on your side.

Helping hints

If you want to further ensure that users have minimal chance for mistakes, use helping hints either to the right of the field as a secondary label or in the field as a placeholder. This is okay to use as a placeholder because it is not critical (as the label is), so it can disappear when the field is active without it feeling uncomfortable. This way you can guide the users to filling in the correct information. This will not only decrease the number of errors, but will also increase the completion speed by a reasonable margin.

Wishlistr sign up form

Wishlistr shows labels to the left and helping hints to the right of the field.

These helping hints can be shown in different ways, including as tooltips. This is also a good way of doing it, especially if you have limited horizontal space at your disposal.


I know this might sound weird. Why would you drop a feature that should decrease spam? Because it’s annoying. I will not delve too much into it, but there are few things on the web I hate more than captchas. There are forms in which it makes sense, but not all the time. As long as users have to fill in credit card information, you don’t need captcha. If there’s a credit card involved, it’s not likely that robots are involved.

Wrap up

Forms are one of the web elements that can constantly be improved. When discussing forms, all bets are off. It depends so much on the audience and every set of forms you design has to match your audience and their needs. But in every single case there are a few tips and tricks you can implement in order to offer a better experience. As a starting point, you should always optimize according to these tips. If you think you need to go more in-depth, I can recommend two great books to you.

The first was written back in 2008, but many of the aspects are still very relevant today. Steve Krug wrote the foreword for it, so it must be something about this book that smells of quality. It’s Forms that Work.

The second book is a personal favourite of mine, written by Luke Wroblewski in the same year, 2008. The book is called Web Form Design: Filling in the Blanks. If you think you need even more inspiration, these two books will provide you with it. As a start, though, always go through with these tips that I wrote – they are always the starting point for successful web forms.

Powered by WPeMatico

Chris Coyier Shares Web Design Opinions That Might NOT Be for You

The Podcast Episode with Chris Coyier

Chris Coyier is a man who wears many hats. This might not sound very surprising as there are a lot of people who can do the same. However, not all people can look good in different types of hats and that’s where the comparison ends because Chris Coyier manages to look good wearing each one of them.

The hats in question are, of course, the things Chris is involved in – that of a designer at CodePen, as a writer at CSS-Tricks, and as a podcaster at ShopTalk. You can also include in the list as that of a ukulele player. Oftentimes compared to Jeffrey Zeldman, Chris is considered as one of the top guns in the web design industry. For a lot of web designers, he is the modern-day web design god whose very path they unabashedly worship.

Worship might be too strong a word to use and Chris Coyier might not like the description, but you cannot deny the significant impact he has made in the web design industry. Evidence of it was the reaction of community members had when they heard that 1stWebDesigner is going to have a podcast interview with him.

On Themes and Frameworks

One of the most talked about topics in the web design community, especially in the 1stWebDesigner community, is WordPress. And when the subject of WordPress is brought out, you cannot avoid talking about themes and frameworks.

So, we asked Chris which is better in delivering custom solutions to clients in the fastest way possible – themes or frameworks?

Every web designer or web developer knows the difference between these two – the framework is used to develop the theme while the theme allows you to customize the base. To simply put it, the framework is the base while the theme is the finished product.

However, even though web designers know the differences, it seems that it stopped their understanding to the definition; thus, the debate. The key that every web designer should bring to heart is – DIFFERENCE. Therefore, there should not be any comparison because there is nothing to compare. Moreover, one cannot exist without the other. And even if you can use each separately, you won’t be able to achieve the same results as when these two meld together.

As Chris Coyier said, it is irresponsible to give your client an incomplete answer without trying to know every aspect of your business, your talents, and your clients. There is too much missing information in this conversation to ever prescribe a solution.

The most important answer rather is what does the framework do or what kind of functionality does it bring to the table. No matter what kind of things it offer if you think it will help your client, then you can use it.

Why WordPress?

Aside from the fact that WordPress powers some of the big-name websites, there is a lot going on in some websites that only WordPress can handle. Yes, there are other amazing platforms out there but there are specific features that can only be delivered by WordPress. A good representation of what WordPress can do is CSS Tricks, which is both a blog and a forum.

As a forum, CSS Tricks use the plugin bbPress which is powered by WordPress. Then, there’s also Restrict Content Pro, a membership content log in area which works well for both blog admin and community members. This plugin enables you to control which posts can be accessed by what type of readers you have. It also help you create and track subscription level members.

Aside from this, it also has an authentication and user rights features which allows you to  manage the site, editors work with content, authors and contributors write that content, and subscribers have a profile that they can manage. This lets you have a variety of contributors to your website, and let others simply be part of your community.

I agree with some people saying that a static site generator is much better than WordPress because there’s nothing for hackers to hack in there. Security is the main strength of static generators because no matter how badly designed it is, it does not affect the security and performance of the site. However, just because I have trouble once every six months is indicative to move platforms.

On Building Themes and Frameworks

When asked why he doesn’t build his own theme since he has the expertise and experience to build a really great one, Chris said that he feels envious of people who make a lot of money and running their own company selling these themes on ThemeForest. However, it doesn’t feel right for him to do so. He doesn’t have anything against people who let people sign up so they can have as many themes as possible but how many themes do people really need?

It is a given that when you designed a theme loaded with features it will sell more. Simply, the more it can do, the more money it could make. On the other hand, the most ideal thing to do is create a performance-focused WordPress theme but it won’t sell as much as the theme loaded with features.

There is a lot of debate going on about this issue. It is probably a hot-button topic in the web design community but it happens – those themes who make a lot of money usually makes money for the wrong reasons. It is easier to make money for the wrong reasons.

Also, most features-loaded themes tend to slow down the site. However,  you can still make a performance-driven theme with lots of features without slowing down the website by offering 50 features with back end codes that know which features are enabled at the moment. There is a trade-off when you’re talking about performance – the number and size of the request. The size of the request will be bigger but at least we are only loading a single resource but Jetpack also have these issues.

Chris Coyier can surely build a performance-driven site for the right reasons but that would become his full-time job because it will consume all his time from the coding to the marketing aspect. However, he doesn’t want to give-up all the things he’s doing now because he loves what he’s doing now.

That is also the same reason why he doesn’t build a framework. He is more than happy to build a performance theme or bare bones which people can use for their  mobile first website, or create an artist theme with artist-like features, like carousel or store.

For Chris Coyier, he simply wants to build something that would help people solve their specific problems.

3 Must-Haves in 2015

Aside from WordPress, we also asked Chris what his 3 must-haves are for 2015 aside from performance and technicality. They are – https, SVG, and front-end arhitecture

HTTPS is very important for websites first and foremost for  security reasons. The longer your website exists on the Internet, the more people will view it in a screwed-up way, like snooping into your topic and hacking into your database. HTTPS protects you from all these risks because it runs on SSL and for people who try to get into your system must have a code in order to decrypt it.

Another item that should be on your radar is SVG or scale vector graphics which makes the file size smaller and renders crisper.  Nowadays, most of the solutions that exist to fix resolution-based issues, such as retina screens, involve either a large amount of unnecessary data downloaded or compromise for one browser or the other. This makes us rely on the speed of the data download-speed bottleneck to bring higher resolution images to devices that are often on wireless data networks. Not a very ideal solution. This is where SGV comes in because it offers a way to do full resolution graphical elements, no matter what size screen, what zoom level, or what resolution your user’s device has.

If you want to know more about SVG and what it can do, visit CSS Tricks and read Chris Coyier’s article called, A Compendium of SVG Information. Here you can learn precious nuggets as well as tips and tricks about SVG.

The third is front-end architecture, such as BAM, OOCSS, and more. This has become a trend because every time you mention it, comments on forums just flare up. It is also important when you’re thinking long-term as you build your website without it ending as a disaster. The answer- you have to make the right decisions when you’re designing your front end. Therefore, if you don’t understand the front end stuff, you’ll end up with a disaster.


Web designers, in reality, are a little “mono-cultural.” Just look at the conferences for web designers and everybody is using Macs and Chromes. This has to change and see people developing an IE on Windows to give us a wider perspective.

Powered by WPeMatico

Is There A Science To Picking Colors That Work Well in Web Design?

#EspressoMonday Episode Nr.15

Is There A Science To Picking Colors That Work Well in Web Design?

When you think of color, the first thing that comes to mind is crayons, paints, and makeups. In short, it has something to do with arts and the aesthetics. Surprisingly, though, colors and how you blend them together has a science, or should we say, a psychology behind it.

Getting more and more curious about this #EspressoMonday episode? What are you waiting for? Grab your espresso shot for another few minutes of knowledge and be inspired.

Colors are everywhere. Colors are a part of life. Some colors inspire us, while some seem depressing. Colors play an important role in almost every aspect of life, even in web design. Therefore, it is very important to get the right colors together if you want to make the right first impression.

To use the title of this episode, is there really a science behind picking the right colors? It is not really science but psychology and according to psychology, our brains react differently to different colors. Moreover, statistics say that 90% of snap judgments on purchasing a product have been made based on the color of the product. That’s how powerful color is!

The Right Colors, The Right Tools

Although it would depend on your clients to pick the colors for their website, you, as a web designer, are also expected to share your valuable input to make the website look good. After all, your work will reflect your skills.

While there is no clear-cut set of guidelines for choosing the right colors for a website, there are very helpful tools which can make the job much easier and faster for you. So in today’s episode, we present you different palette generators to help you choose the right colors or color combinations.

1. Colllor

Colllor (

2. Colour Code

colour code

Colour Code (

3. Color HailPixel

color hailpixel

Color HailPixel (

4. Color Blender

color blender

Color Blender (

5. Material Palette

material palette

Material Palette (

6. Paletton


7. Coolors


Coolors (

8. Colour Lovers


Colour Lovers (

9. Contrast-A

contrast a

Contrast-A (

10. Adobe Color CC

adobe cc

Adobe Color CC (

11. Color Munki

color munki

Color Munki (


Colors are one of the vital elements of a successful website as well as a formidable force in influencing the consumers’ buying decisions. But no matter how crucial the color combinations are, picking each of them and combining them should not be difficult with the help of these useful tools.

Powered by WPeMatico

What Are Web Designers Best Sources For Inspiration?

#EspressoMonday Episode Nr.14

What Are Web Designers Best Sources For Inspiration?

If inspiration is as easy as drinking a cup of coffee or you can easily find inspiration in a cup of coffee, then a web designer’s life is a breeze. However, like their art and all the codes that go with it, there are times when inspiration seems hard to come by. So where do you get inspiration as a web designer?

Well, you still need your shot of espresso and dive into this dilemma with us for this #EspressoMonday episode. Who knows? Coffee might just be what you really need…and this video, of course.

Artists, no matter what medium they specialize in, need inspiration. These two always go together and an artist who doesn’t need inspiration isn’t an artist at all.

Inspiration plays a very vital role for an artist in order to create his or her masterpiece. The inspiration might come from an experience, an object, or a person, it doesn’t really matter. What matters is that it spurs the artist to go on making something complicated look easy and simple.

Unfortunately, inspiration can’ t be found on trees. With the exception of Newton, of course, who was inspired what made the apple fell on the ground, thus discovering gravity.

The process is also not as simple as squeezing the juice from coffee beans and producing a little cupful of aromatic espresso. Inspiration, for web designers, are simply complicated. Or is it?

You Don’t Need to Squeeze the Juice

Inspiration can be quite tricky for a web designer because what works for you won’t most probably work for me and vice versa. At least, that’s what web designers often think. However, Austin Kleon, an artist and New York Times bestselling author, thinks differently. In his book, Steal Like an Artist, he said that “all creative work is iterative, no idea is original and all creators and their output are a sum of inspirations and heroes.”

So in this #EspressoMonday episode, we present you different websites where you can draw not only inspiration from, but get a lot of ideas from for your next project.

1. Site Inspire

SiteInspire ( )

SiteInspire ( )


2. Awwards

Awwwards ( )

Awwwards ( )


3. Favorite Website Awards


Favorite Website Awards ( )


 4. WebInspiration.Gallery


WebInspiration.Gallery ( )


 5. 8 Gram Gorilla


8 Gram Gorilla ( )


6. Chrome Experiments


Chrome Experiments ( )


 7. Very Nice Sites


Very Nice Sites ( )


8. HTML Inspiration


HTML Inspiration ( )


 9. Nice One I Like


Nice One I Like ( )


 10. Admire the Web


Admire the Web ( )


 11. CSS Winner


CSS Winner ( )


 12. Unmatched Style


Unmatched Style ( )


 13. Style Boost


Style Boost ( )


 14. BestWebsite.Gallery


Best Website Gallery ( )


 15. Design Fridge


Design Fridge ( )






 17. One Page Love


One Page Love ( )


18. Siiimple


Siiimple ( )


 19. The Best Designs


The Best Designs ( )


 20. Web Creme


Web Creme ( )


Hope you are able to find these websites a source of inspiration that will spur you to create websites that not only please the eye, but also meet the needs of your clients.

Till next #EspressoMonday, have a fruitful weekend ahead.

Powered by WPeMatico

What Are Top 7 Graphic And Web Design Trends in 2015 To Look Out For?

We’re finishing up the first quarter of 2015 and have seen many predictions for the web design scene already.

While most of these predictions make a lot of sense based on what we have seen being used lately, I’d like to dig deeper into these trends and analyze the top 7 web design trends while providing some tools and resources in achieving the desired look.


What trends you need to watch out for this year?

 Find Out In This Article If You Know The Latest Web Design Trends of 2015

For every trend, I will provide you some data and research that supports the fact followed with examples of real websites utilizing it. I will also recommend some tools, resources and services for implementing the trend into your project.

Brave People

Brave People uses a slideshow of full-width genuine photo backgrounds that create an impression of a humanistic brand.

1. Imagery Web Design Trend: Large Background Images

Stock photos still play a major role in digital communication, whether it’s an eCommerce store, portfolio or blog. People use images to engage more with users and illustrate the message they are trying to send. For a long time, the web has been suffering from cheesy and fake looking stock photography with super happy people wearing perfect smiles and suits.

Thanks to communities, like Unsplash, Picjumbo, Death to the Stock Photo because designers now can utilize beautiful and, most importantly, natural looking photos for their web designs or blog posts. We’ve seen many websites using photos from Unsplash and it simply looks amazing.

“Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to “jazz up” Web pages.” – Nielsen Norman Group

The Nielsen Norman Group eyetracking studies have shown that people generally ignore cheesy and artificial looking photos. However, 2015 is the year of genuine imagery and you should take advantage of using real photos to connect with your audience in a genuine way.

Examples of Large Background Images in WebDesign

Grain & Mortar

Grain & Mortar is another great example of beautiful imagery in web design.

Grain & Mortar

Natural and real photography resonates with people, instead of using cheesy stock photos. Grain & Mortar used an informal shot of their team that connects with the visitors very well.


Grovemade has a beautiful, product-focused approach when it comes to their website.


People make purchases based on their emotions. Grovemade utilizes high-quality photos of their products that definitely add a feeling of trustworthy organization and awakens a desire to buy the product.

Free Stock Photo Websites:

  • Unsplash is a great place for getting great looking photos of various objects including people, technology, nature, and more. You can use photos for personal or commercial purposes without any attribution.
  • Raumrot is a collection of free handpicked stock photos for your commercial and personal works.
  • Gratisography provides free beautiful high quality photos with a creative spin for your personal and commercial projects.
  • Life of Pix has a huge variety of natural looking stock photos that are free to use for any project without any attribution.
  • Death to the Stock Photo is an exclusive membership that sends free stock photos that you can use any way you wish to your inbox once a month .
  • Picjumbo is an ever-growing collection of free stock photos that don’t require attribution.
  • Jay Mantri exceptional quality stock photos that you can use for free for both personal and commercial projects.

Premium Stock Photo Websites:

  • Stocksy offers a tightly curated collection of high-quality stock photos to anyone seeking modern, relevant, authentic images.
  • 500px Prime provides super exclusive stock photos. Most of the photos on 500px Prime have never been used in commercial campaigns before.
  • Refe focuses on providing high-quality imagery of people interacting with technology for your projects.
  • Snapwire connects mobile photographers with businesses and brands that need creative imagery. They also have a huge database of stock photos.
  • Offset is a truly unique collection of images from award-winning artists.

Airbnb takes advantage of beautiful videos in order to complement their ‘Belong Anywhere’ campaign.

2. Video Background WebDesign Trend

Websites generally are storytelling tools and storytelling can be more effective when visuals and motion are involved so the ideas and emotions can be transferred to the visitor easier. We’ve seen businesses implementing video in their websites. In 2015, this trend will grow even more with the endless possibilities of 3D graphics and HD quality videos to build that impression of real life experience.

According to ClickZ people love video as statistics show mind blowing numbers of video consumption online.

Users prefer content in a visual format, which explains why online content video views have finally topped 50 billion views each month.

The exponential growth of YouTube proves the fact that old school TV is dying and people prefer to choose what they want to see. SocialTimes infographic reveals surprising numbers of how US millennials are abandoning TV.

YouTube reaches more US adults aged 18–34 than any cable network. Users upload 100 hours of video to YouTube every minute.

The downside of this trend, however, is extended load time. Many websites solve this problem by beautifully designed loading screens but it doesn’t change the fact that people still have to wait for the full experience to load.

Examples of Video Backgrounds in Websites

A Bloom of Ruins

A Bloom of Ruins is a great example of subtle video being used as a full website background.

A Bloom of Ruins

A Bloom of Ruins creates a memorable experience by utilizing mysterious light and blurred imagery in the video background and loads super fast making a magical overall look and feel.

Bloomberg Media

Bloomberg Media uses video to demonstrate the diversity and capabilities of their work.

Bloomberg Media

Bloomberg Media is a media company whose focus is large amounts of information and breaking news. Utilizing video that is activated by hovering your mouse over add this feeling of being a trustworthy and technology savvy company.

3. Personal Branding Trend In WebDesign

Personal branding exists whether you focus on it or not. Your identity and your image (how you are perceived by other people) are very different. The main focus of personal branding is to align vision and mission so you are perceived as you’d like to be instead of people speculating and having different opinions about you.

“Your brand is what people say about you when you’re not in the room” – Jeff Bezos, Founder of Amazon

I highly recommend you check Neil Patel’s “The Complete Guide to Building Your Personal Brand” to better understand the importance of personal branding and actionable steps to get where you want to be.

Examples of Personal Branding in Websites


An1ken Group website isn’t yet another faceless organization. Nicely used profile photo and a simple description says it all.

An1ken Group

Founder of An1ken, Jacques van Heerden makes sure people get to know him, his company values and what his company is all about. No hiding online – visit the website now and tell me does this company look and sound trustworthy to you? It totally does for me.

Dale Partridge

The Daily Positive is highly associated with Dale Partridge personality.

The Daily Positive

Having a human behind the brand or organization makes people trust it and help them make a decisions easier. Personal photo along with a combination of  high number of followers as a social proof ensures people that it is worth following.

Tobias van Schneider

Tobias van Schneider has a very memorable portrait photo accompanied with bold typography and straightforward facts.

Tobias van Schneider

Bold, straightforward and effective. Tobias uses lots of negative space to draw attention to his personal brand and make communication clear with concise facts.

WordPress Themes Focused On Personal Branding

When designing a personal brand focused website consider including your vision or mission statement. Use personal photos, add some credibility, such as list press, interviews, published content, and achievements.

Rosemary is a light & bright blog theme, tailored to showcase your content in an effortlessly timeless style.

Rosemary is a light & bright blog theme, tailored to showcase your content in an effortlessly timeless style.

Rosemary WordPress Theme ($38)

Rosemary is a perfect blog theme for anyone willing to build a personal following. It has a clean, content-focused layout and specific widget designed to sell yourself by using your profile photo, description and all the social networks you are in.

Readme is a responsive WordPress theme focused on readability with a minimalist design and optimized for mobile.

Readme is a responsive WordPress theme focused on readability with a minimalist design and optimized for mobile.

Readme WordPress Theme ($48)

A trendy and minimalistic blog theme with a strong focus on the author, this theme offers a designated area for your photo, short elevator pitch, and call to action button.

Vanity is a recasting of the business card. Made with creative professionals in mind.

Vanity is a recasting of the business card. Made with creative professionals in mind.

Vanity Tumblr Theme ($49)

People are interested in other people. People buy from people, not from companies. This theme has been designed to help you make that human connection with other people so you can brand yourself better.

It's Nice That combines beautiful visuals and elegant typography to build a pleasant mobile reading experience.

It’s Nice That combines beautiful visuals and elegant typography to build a pleasant mobile reading experience.

4. Web Design Trend – Mobile First Websites

Web usage patterns are changing and statistics cannot be ignored if you want to succeed in today’s market. Every third website visitor now uses a mobile device and websites that do not offer mobile optimised versions are causing an unpleasant experience and eventually losses money as users tend to abandon the website if it doesn’t render well on mobile device.

“The number of people using mobile devices outstripped people on desktop computers in 2014.” – Jim Edwards, Business Insider, April 2014

Adopt a mobile first approach when designing or redesigning your website to ensure that you maximize your potential and reach more of your target audience. This means you have to be brief, focused on the content and performance which takes advantage of advanced features, like mobility, GPS, touch screen and more, that desktops aren’t able to offer. In 2015, we’ll be seeing the continuous growth of mobile web design development and spectacular innovations based on the ever changing market behavior.

Read more about Mobile First, an adaptive, future-friendly solution for website design.

Examples of Websites Built Mobile First

The Verge is a perfect example of tapable space and finger friendly buttons, read post titles with illustrations.

The Verge is a perfect example of tapable space and finger friendly buttons, (read post titles with illustrations).

The Verge

The Verge is a super visually heavy news website with lots of colors and imagery. However, they have done a great job on optimizing it for mobile devices with a clean layout and close relation to the desktop version.

Newsweek is a great example of heavy content website that looks organised and lightweight on mobile device.

Newsweek is a great example of heavy content website that looks organised and lightweight on mobile device.


Keep it simple is the design approach the Newsweek design team has taken to form their mobile version with loads of white space and clean typography and accompanied by relevant imagery.

Responsive and Mobile Friendly WordPress Themes

The responsive or mobile-friendly version of your website can easily double your traffic as people will be empowered to access your website any time anywhere. The themes below are suitable for various projects and are responsive already.

BeTheme is extremely advanced, customisable and responsive WordPress theme with built-in Drag&Drop tool that gives unlimited possibilities.

BeTheme is a responsive template with nice imagery and clean flat design.

BeTheme WordPress Theme ($58)

In 2015, responsive is a must, not just a nice to have.  The BeTheme is an extremely advanced, customizable and responsive WordPress theme with built-in drag & drop tool that gives unlimited possibilities.

Salient is a responsive and retina ready WordPress theme with unlimited customising possibilities that will look stunning on any size device.

Salient delivers great graphics and sleek look and feel on any screen size.

Salient WordPress Theme ($58)

When designing a content heavy website you always need to take care of how mobile devices will display it. Salient is a responsive and retina ready WordPress theme with unlimited customizing possibilities that will look stunning on any type of device.

The Blocks - iPhone App Website Template is a responsive 1 Page iPhone App HTML website template which looks great and is super easy to update and use.

Blocks looks great on both, desktop and mobile devices.

Blocks HTML Template ($20)

Most of app websites don’t require multiple pages to sell the idea. The Blocks iPhone App Website Template is a responsive 1 Page iPhone App HTML website template which looks great and is super easy to update and use.

A lot of white space combined with strict grid and rectangle shaped content blocks look very balanced and trustworthy.

A lot of white space combined with strict grid and rectangle shaped content blocks look very balanced and trustworthy.

5. Modular Design (Grid Based) WebDesign Trend

Modular or grid based design, also known as cards/tiles design approach, is not new in the web design scene, but it started to get more traction as it is reusable and very responsive-friendly with the tiles stack nicely on different screens and form a flexible layout that looks nice and clean on any screen size.

Modular design, or “modularity in design”, is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems. A modular system can be characterized by functional partitioning into discrete scalable, reusable modules, rigorous use of well-defined modular interfaces, and making use of industry standards for interfaces. – Wikipedia

One of the best known examples of modular design is the Microsoft Metro style which doesn’t seem to be very successful, though. However, many web apps like Pinterest, Instagram, Designspiration are utilizing the grid based design very successfully.

Website Examples of Modular Design WebDesign Trend

A nice and clean example of how tiles are used to lay down the content of the website.

A nice and clean example of how tiles are used to lay down the content of the website.

Anthony John Group

Anthony John Group has a clean, image based grid with just enough of white space to make things look balanced and trustworthy.

Well Made Studio combines pastel color palette with clearly defined cards for content pieces laid out in an organised grid.

Well Made Studio combines pastel color palette with clearly defined cards for content pieces laid out in an organized grid.

Well Made Studio

Well Made Studio has a harmonious combination of pastel color palette with authentic typeface and balanced spacing.

Grid Based WordPress Themes

Grids are great for displaying galleries but also can work well with written or multimedia content. Themes below have unique and creative take on grid based layout.

Vienu is a nicely designed magazine theme with beautifully executed modular design approach in mind.

Vienu is a nicely designed magazine theme with beautifully executed modular design approach in mind.

Vienu WordPress Theme ($43)

It is hard to find a visually appealing magazine theme as they are always overloaded with information, Vienu, however, has a balance between tiles and list blocks that simply work together creating a pleasant experience.

Trim is a notably sleek and tidy WordPress blog and portfolio theme built using grid.

Trim is a notably sleek and tidy WordPress blog and portfolio theme built using grid.

Trim WordPress Theme ($58)

Trim is an elegant theme that utilizes grid layout in a very artistic and visually appealing way. Whether you have an image based post or just text, you are covered. Everything you publish on this theme will look great.

Mindig is a flat & multipurpose ecommerce theme for WordPress that utilises the modular design approach.

Mindig is a flat & multipurpose eCommerce theme for WordPress that utilizes the modular design approach.

Mindig WordPress Theme ($63)

When building an e-commerce store you should think of ways to lay your products in a way that appeal to your potential customers. Mindig has a nice grid based layout with a professional use of white space and powerful typography.

Apple MacBook has designed a super long page to represent its new product emphasising beautiful shots of the product accompanied with smart copy. The goal is simple, convince user to buy by the end of the page.

Apple MacBook has designed a super long single page to represent its new product emphasizing beautiful shots of the product accompanied with smart copy. The goal is simple, convince user to buy by the end of the page.

6. One Page (Single Page) Web Design Trend

It simply makes more sense from the UX perspective – Rebecca Gordon’s research “Everybody Scrolls” shows that users love scrolling.

Research conducted by Huge shows that despite the layout structure nearly 90% of visitors will scroll until the bottom.

Research conducted by Huge shows that despite the layout structure nearly 90% of visitors will scroll until the bottom.

Scrolling is winning over clicking due to the changing web browsing patterns. As mentioned earlier, mobile device usage growth has influenced the way websites are designed nowadays. With smaller screens and super natural touch scrolling movement, people prefer to scroll around instead of clicking on the links and waiting for the content to appear.

One pagers gained momentum a couple of years ago but now it has started to make even more sense and people seem to enjoy it as it presents huge chunks of information at once in a nicely designed step by step flow.

Examples of Single Page Websites

One page layouts are popular among yearly reviews like Spotify's Year in Music as it allows a natural timeline of the year in an easy to browse manner.

Spotify’s Year in Music allows a natural timeline of the year in an easy to browse manner.

Spotify’s Year in Music 2014

One page layouts are popular among yearly reviews like Spotify’s Year in Music. Large amounts of data and statistics digested for mass consumption with a visual and interactive approach.

Brandon Gore is a great example of the previously discussed Personal Branding trend combined with One Page design philosophy.

Great example of the previously discussed Personal Branding trend combined with One Page design philosophy.

Brandon Gore

One page design philosophy starts to get traction among individuals building personal portfolios, Brandon Gore being one of them. He includes a personal portrait photo to better connect with the visitor and provides some essential information about himself, his work, and his contact numbers.

One Page (Single Page) WordPress Themes

As you already know, people don’t mind scrolling but loading a lot of content in one page might take longer than splitting content to different pages. However, you expose your users more to all of your content at once.

Supernova is a multi-purpose theme with innovative and state-of-art techniques and design features such as transparent menus and elements, parallax effects, motion backgrounds and more.

Supernova is a nicely designed layout that can be easily customized and used as an impressive one page website.

Supernova WordPress Theme ($45)

Supernova is a multi-purpose theme with innovative and state-of-art techniques and design features such as transparent menus and elements, parallax effects, motion backgrounds, and more.

Appster is an elegant one page WordPress theme perfect for promoting your application.

Appster is an elegant one page WordPress theme perfect for promoting your application.

Appster WordPress Theme ($43)

With an ever-growing market of mobile apps, one page app websites prove to work and produce positive results, such as getting followers and downloads. Appster is a sleek one page website layout with a focus on your app.

Obsession is a flexible and highly customisable multi & one page WordPress theme.

Obsession is a flexible and highly customizable multi & one page WordPress theme.

Obsession WordPress Theme ($43)

This theme has all the popular features a one-page website should have, a full-width slider with clean copy and clear call to action button and a customizable content area that delivers everything you may need on your website.

Strong focus on key brand color and loads of negative space with an emphasis on the product.

Strong focus on key brand color and loads of negative space with an emphasis on the product.

7. Material/Flat design Web Design Trend

Flat design was quickly adopted by designers and  big tech companies like Apple that basically killed skeumorphism very quickly.

Some of the advantages of using the new paradigm are that flat design forces designers to focus more on content, pick the right colors to help users navigate through designs, and use white space with care.

68% [of web designers] think that flat web design will still be around five years from now.

The popularity of Google Material Design philosophy is being embraced by many designers and developers that lead to cleaner and more organized digital products which can be used without the users having to learn the complex curve. Research conducted by Usabilla shows that web designers are in favor of the flat design movement.

Examples of Flat Web Design Trend Websites

Format has a lovely combination of stunning image combined with sleek flat graphics in a balanced composition.

Format has a lovely combination of stunning image combined with sleek flat graphics in a balanced composition.


The main function of the flat design  is to put emphasis on content while design has to serve as a communication tool. Format has mastered flat design by combining clean type with flat color scheme and stunning imagery.

Flat design in action - clean layout with unusual color palette and loads of white space.

Flat design in action – clean layout with unusual color palette and loads of white space.


Neo has a balanced website design with dozens of negative space that makes reading very pleasurable. Also thanks to perfectly chosen typefaces. Flat design also works very well with minimal approach. for example, Neo delivers essential information with nothing to add or remove.

Flat Design Trend WordPress Themes & Templates

Flat design is extremely trendy these days and and I’ve mentioned the reasons why above. Themes below will get you on the trend train in no time.

Rock Group is a unique and highly customisable flat design infographic style theme for WordPress.

Rock Group is a unique and highly customizable flat design infographic style theme for WordPress.

Rock Group WordPress Theme ($58)

Infographics generate 37.5% more backlinks than a standard blog post, says marketing expert Neil Patel. This theme is basically a huge interactive infographic that used with care can make wonders for your campaigns, not to mention the trendy flat look.

Beautifully designed and super clean flat admin dashboard template.

Beautifully designed and super clean flat admin dashboard template.

SlickLab Admin Dashboard Template ($21)

SlickLab admin dashboard template has a clean and clear structure with all potential widgets designed that any platform would require. White space, contrast, and typefaces all work very well together in this template.

Mies is a very clean and simple flat WordPress theme perfect for creatives.

Mies is a very clean and simple flat WordPress theme perfect for creatives.

Mies WordPress Theme ($58)

People are visual creatures – the more visual your storytelling is online, the better chances of you being remembered. Mies theme has a nice flat look and feel with oversized typography, obvious call to action buttons, and some sleek interactions.


Flat UI Pro kit offers clean pre-designed elements for quick prototyping in trendy flat style.

Flat UI Pro (from $39)

Bootstrap based UI kit with loads of pre-designed elements from buttons to forms to various multimedia assets will save you a lot of time when prototyping or designing your website in a clean and trendy manner.

Summary and Conclusion About Web Design Trends in 2015

If you’ve been following the web design scene for some time you may have felt what is coming next. There are no significant changes in 2015 but some trends that started getting traction in 2014 will continue growing and affecting more people while others will slowly fade away. However, web design is evolving very quickly and, most importantly, it adapts to people’s behavior and technology advancements.

In this article I’ve touched some trends that will be on the spotlight for the rest of the year and the resources I’ve provided will help you to quickly get into the game.

What do you think is the next big thing in web design?

activate javascript

Powered by WPeMatico

Pricing Strategies: How Paul Jarvis Was Able To Charge High Prices For Web Services [Podcast]

The Podcast Episode with Paul Jarvis

The Real Investment

Awesome seems to fall short when you use the word to describe Paul Jarvis although, of course, he won’t use that word to describe himself. However, all you need to do is just take one look at his accomplishments and you will concede that “awesome” indeed sounds feeble.

Let’s enumerate some of those accomplishment to give you a clearer picture of what Paul has done. If you use the abstract description he uses for himself, he is a web designer, a best-selling author, and a gentleman of adventure.

However, if you use the more concrete description, the ones used by his clients and the people he has worked with, you will hear words, such as genius coder, designer of my dreams, and even the holy trinity of website design.

These are not empty, flashy words because Paul is everything any web designer dreams of becoming. He is a regular contributor for a lot of trusted and popular online publications, like Forbes, INC, Huffington Post, Smashing Magazine, and more. Among his clients are big name companies, such as Yahoo, Mercedes Benz, and Microsoft. He also has a string of bestsellers to his name as well as an online course for freelancers called the The Creative Class. (get 100$ discount, use code: firstweb)

If you’re not impressed, here’s the real whopper: Paul Jarvis’ web design projects start at $9,000 up and never below that budget. What more – he does not accept new projects until mid-May.

Now, you might be wondering already how on earth was he able to do that?

Paul himself is going to tell you how he was able to do that. However, you might be surprised that there is really no magic formula from the Hogwart’s School of Wizardry that brought Paul to where he is right now.

The Road to Success

The quote above was from an article Paul wrote for the Huffington Post entitled, “How to Be Rich as an Artist.”  The article was about someone who preaches the illusion that you can get wealthy as you pursue your art. While this is true, this truth – earning millions by churning out  bestseller or a hit – only applies to a mere 0.1 percent of artists or even lesser than that.

Paul was speaking from experience when he wrote that.

What people would only see was the glamour or the figures – that he was doing $9,000-worth of projects. What they didn’t see was the process how he got to that place. As Paul himself said, people didn’t see the numerous times he made mistakes, the trial and error phase, and the hard lessons he has learned along the years while freelancing.

Paul started as a freelance designer way back in the 90s working in different industries, making his experience in the business extensive and spanning around or more than a decade. After trying out several industries, he realized that he needed to specialize in a certain industry or a group of audience.

For Paul, that audience were the people who focus on the Internet. The choice is logical – he also has his work tied mostly to the Internet, even the tools he use revolve around it.

Branding and the Target Audience

One of the factors that seem so obvious among the success stories that we have featured here in our podcast series is being able to find your target audience or your specific niche.

This seems to be a no-brainer because not having a target audience is like shooting for the moon and missing it. It becomes a futile effort because it’s like losing your way in a complex labyrinth. The saddest part to this shooting for the moon part is that you won’t land among the stars. Why? Because you are shooting into the vast expanse of space and what you know, no matter how good it is, has its limitations.

Being able to find your target audience will help you save a lot of time, money, and effort into your marketing. It will also be easier for you to know how to reach them. Above all, as Paul mentioned in the interview, focusing on a certain industry or target audience will help you make a name for yourself or, in other words, it helps your personal branding. 

Once you identify who your target audience is, you have to know what their pain points are – their needs and wants. If you want to strengthen your personal brand, you have to know those pain points and the unique way how you can solve them. In Paul’s case, his personal brand is that of someone who gets things done.

In fact, this is one thing in common among some of the successful web designers in the industry – being able to solve the problem or meet the need and delivering what is expected. As Paul Jarvis mentioned in the interview, clients do not want and do not care whether you know HTML or use the latest tools, what they care about is you were able to help them fix their problems. And part of that fixing, on Paul’s part, is by teaching his clients how to use the website he has designed for them.

Your Clients, Your Sales Force

Another interesting thing which Paul mentioned in the podcast interview was that despite his experience and expertise, he doesn’t care much about titles and only advertise himself as a web designer. For him, people are looking for what they need and what they need at that moment is a website. Thus, the next thing that they will look for is a web designer.

Moreover, clients will not hire you based solely on the titles you have but because of what you can bring to the table. Then, when they see what you can do anything more that you have to offer will just follow. When they see that you deliver, they become your fans and, eventually, they become your sales force. You don’t even have to tell them to promote you but they do so in order to share you to others.

As Paul has experienced, most of the clients he has are just through word-of-mouth. One client was satisfied so he recommended him to another who has the same need. Paul further added that you don’t even need to promote yourself. Instead his encouragement is just to focus on doing a great job that is valuable to his clients and, at the same time, is also valuable to him. Even the testimonials your clients have of you should focus more on what you have achieved and less on who you are.

Tapping into the Buyer’s Instinct

This is a simple yet sobering truth that every web design professional should remember – People will not open their wallets unless they trust you. In simple terms, they won’t be willing to pay more unless they see the results.

How do you do this?

By constantly behaving towards your clients best interest first. This means that you give them the best solution and not just any solution. This can be achieved by having a discussion with your client and taking the time to listen. It also means being honest whether you are a good fit or not and when you aren’t, you tell them immediately in a professional manner. Whatever business values you have displayed will never go unnoticed.

Another way of generating trust from your clients is to do what you say you would do. So when you say you’re going to deliver the project on that date, be sure that it’s ready on that day. This also sends the message that you value your time and in so doing, they will begin to value your time.

Your clients will just mirror the actions you have shown them.

You have to position yourself in a way where clients see you as an expert and not just another laborer. An expert who is so in-demand that your clients have to wait until  before they get booked.


Being able to get to a place where you receive $9000 worth of project offer like Paul is a dream come true. However, like all successes, it’s never an easy ride. There are systems and practices that you need to follow in order to achieve success and Paul Jarvis has an online lecture called The Creative Class. (get 100$ discount, use code: firstweb) which helps you how to be a creative freelancer and make a career as a freelancer who charges more.



Powered by WPeMatico