Web Design Trends 2016 infographic

No doubt, fashion is quite transient. The same can be said about the fashion for web design: many of the trends that have been at the peak of popularity 2–3 years ago, no more exists. Yet it would be foolish to say that trends are unpredictable at all. Actually, they can be predicted if one closely monitors the needs of the audience along with the latest technical developments and progress in general.

So let’s move on to the main design trends, which will be in the foreground in 2016.

"Old" is in Fashion Again

Good news for fans of retro: vintage will be one of the central design elements in 2016! You’ll be able to feel the unique atmosphere of 70s and 80s…era of airbrushing and stencils along with pale colors is reviving!

“Almost Flat” 2016

One of the key advantages of a flat design is that simplicity makes the interface more intuitive for visitors without distracting attention to details. Flat design suits modern frameworks perfectly, as well as looks amazing by itself.

Now and in the near future, there will be the further expansion and development of flat design that is sometimes called Flat 2.0. Trying to keep the best of what is in the style of flat, designers presented a balance between completely flat and art design. The first is effective, the second is attractive: it seems the balance is found!

We can name 2016 as not completely flat, but "semi-flat", or even "almost flat design" year.

Readable Typography

It’s natural that the typography in a flat design will remain simple and easy to read. Sans serif fonts, equal in width, will be in favor in 2016. The emphasis on readability ensures that flat typography is becoming popular among the other types of web design.

We should also note the popularity growth of simple and pleasant fonts with meaningful and easily readable writings. The font size will also increase in order to focus audience’s attention on what’s the most important. With the exception of fonts used in logos, most of the modern design text is published the same or similar type. 

image credit: Tutsplus.

So the main point in 2016 is to focus visitors on content that worth rather than on the letters.

Creative Icons

Being one of the most important elements of the website, icons are in the need for more attention from the visitors. Thus, they will become an increasingly important element of the art website: they’ll grow in size to include more details and give greater expressiveness and originality to the entire site. 

Ghost Buttons

Although this is not an absolute novelty, "ghosts" are in trend. The transparency of these buttons allows you to use them almost anywhere, without prejudice to the overall design. They do not distract visitors’ attention, but at the same time they are easy to recognize. 

Accent Colors

To compensate lack of visual effects, flat design uses dynamic colors, especially bright ones. Exciting colors contrast with one another, and only a few such elements do not allow the site to be boring. Bright colors, unlike the muted colors of background and surrounding elements, give the designer more control over what should and what shouldn’t be seen.

Although bright palette will never go away from the flat design, it seems that the standard palette will be in trend in 2016, while bright colors will be used just to make accents.

Background Videos

In 2015-2016, the background video will be a central point of the entire design strategy. It’s expected that this feature will be a new and very exciting tool that will be used to create a specific atmosphere on the page and will help to convey the basic idea of the brand.

The presence of background videos evidences of the high quality and value of the site, which in turn creates a positive brand reputation. Current technologies allow the use of not only videos on the background, but on the main image block as well.

The fact that the majority of modern smartphones, not to mention the existing browsers, easily copes with such a background video encourages web designers to use it in the design. 

HD Images

Flat design allows you to significantly reduce the weight of the website pages. This advantage allows the use of static pictures of high quality in hero shot. And it seems that in the near future this trend will not disappear. After all, a good quality image across the entire width of the screen can create a good mood and affect the internal psychological mechanisms of a visitor to force him to the target action. 


If you find it difficult to decide whether to use photo or video, then maybe you will give preference to the rising trend of animation

image credit: Sproutsocial.

A moving picture is much more expressive than a static one; moreover, it does not weigh as much as video and it can revitalize the background of your site and facilitate the perception of the text content.

According to the researches, animation keeps the visitor on a website 15% longer than usual. In addition, there’s a steady trend of the broader use of animation, e.g. in such site elements as icons and parts of infographics.

Card Design

The popularity of Pinterest throughout the world attracts many web designers to its typical card design. Although today we are seeing the classic card design, it is expected that in the near future it will grow and develop rapidly. This contributes to wide popularization of card design through Facebook, Twitter, and some other social networks.

Like the flat design, the card design not only looks good, but it is also highly functional. Its specific structure is ideal for call to action of any type, as well as for dissemination of information, advertising and sales of goods and services.

Adaptive Design

As mobile gadgets have filled the universe, the task of designers now is to adapt their products to the needs of users. Sure, it’s much easier to interact with adaptive websites. This technology means easy navigation, intuitive page elements, clear and understandable content structure. Actually, there’s no need to convince you that the adaptive design is a trend not only for 2016, but for the distant future.

Graphic courtesy of: ernestoolivares.

By the way, forget about high ranking in Google if your website hasn’t passed the check on easy viewing on mobile devices: Google penalizes websites that are not adapted to mobile devices.

Interactive Stories

People love stories. Moreover, they want to be participants. We tend to curiosity and, therefore, from early childhood to old age we’re longing to get an answer to the question of what will happen in future. 

Therefore, try to tell the story of your brand, which will lead to the advertised product. Use the interactive tools for engaging and intriguing questions to entice visitors to read, to scroll, and to click. Let them to get satisfaction from the fact that they’ve learnt something useful. Kindle the inner desire to get more!


The success and effectiveness of card and flat designs is in their simplicity and ease. And what goes hand in hand with the web design styles is minimalism. It’s a modern trend, but you need to have some reasons to use it. The main of them are ease of perception, high functionality, and suitability for landing pages. 

Advantages of minimalism are evident when using the adaptive design, since simple website structure is much easier to adapt to different screen sizes. But one can mistakenly conclude that minimalism is not a big deal. In fact, you may need a lot more efforts to include a set of options required into the small. You should clearly understand that each element and its location must be perfectly crafted and must be of absolute perfect.

Bonus Infographic:

Design Trends 2016

Courtesy of: CoastalCreative

What’s the TOP Advice for 2016?

Summing up the review of upcoming and already existing trends, we can say that the main focus in 2016 will be made on interesting and useful content along with functionality and intuitive navigation. Try to stay simple, but fun.

Want to know more trends, visit these website and blogs Design ContestCanva Design SchoolCreative BloqAwwwards.
Top image credit: shutterstock.com

A Web Designer's Toolkit for 2016 and Beyond

Web design is a very dynamic niche. Every year, dozens of new tools get released and updated. Their purpose is to reduce the use of code and make web design more suitable for users. In this article, we reviewed some of the top web design tools for 2016.

Visual Composer

If WordPress is your CMS of choice, you definitely need to try the Visual Composer. This is one of the most popular page builders that allows you to create richer pages that will definitely stand out. Currently, the Visual Composer is powering more than 1 million websites. The reason for its popularity is the use of drag and drop features that completely eliminate coding from web design work.

Visual Composer’s regular package can be bought for $34 (additional $10 for prolonged support), and it contains more than 40 premium content elements, 60+ predefined layouts and more than 150 third party add-ons. All this is complemented with SEO friendly page building environment and standard WordPress text editor. One of Visual Composer’s most important feature is the easy shift between its front- and backend editor.

Contact Form 7

This WordPress plugin helps you to create contact forms and scoop visitors’ orders and data. It comes with many pre-made forms and ability to add contact form input fields with the use of short tags. Contact form customization takes place on admin screen page and when you finish, you can insert it into a page layout by pasting a simple line of code into your page editor. All other customization can be done with the use of HTML and CSS in admin screen or on the spot, which enables admins to completely unleash their creativity, and create outstanding forms.


Many web designers have troubles with transferring their designs into code. Avocode is very helpful for frontend developers, since it helps them to transfer their visuals into code snippets. This code generator comes with many helpful features, including:

Conversion into CSS- converts content and design elements into CSS and supports Less, Suss and Stylus.
Finding color codes- converts colors into codes. Web designers just need to pick a color and this Avocade feature tells them it's HEX or RGBA code.
Customization of Code Output- easily changes code variables, including: fonts, distances, aligns, gradients and colors.
Retina Graphics- scales imagery to satisfy retina pixel density. It can work with several different photo formats.
Easy Files Import- imports files into software with the use of ’drag and drop’ feature.
Photoshop Support- Avocode supports PSD files and preserves all of their layers.


It is a web design tool that allows you to write HTML and CSS code, by creating, editing and positioning graphic elements. By using this web designing tool you will easily learn how to make a website. It is a perfect for web designers who are more accustomed to graphic elements and photo editor surroundings. These are some of the Macaw main features:
Stream- it is a layout engine that calculates margins, clears and floats and enables designers to add different elements to static document.
Alchemy- tool that converts graphic elements into HTML and CSS code.
Responsiveness- helps designers with optimizing their website for tablets and smartphones.
Typography- comes with wide variety of different fonts.
Styling- changes various elements in front-end surroundings.
Components Storage- stores all graphic elements in a media library and allows designers to use them for different projects.


Antetype is a UX design app. It is equipped with all tools UX designers need for creating high-end prototypes. Antetype widget library contains more than 400 pre-designed widgets that can be added or customized to satisfy user’s needs. It also allows designers to create their own widgets and export them as pixel- or vector- based graphics. Like several other apps we mentioned in this article, Antetype can also generate CSS code and make designs responsive and retina-ready.

Web designing process starts from an idea. This is the most important part of website creation, so before you start using great tools we listed above, think about innovative features that can make your future website different and unique.

AdWords Email Database Targeting & Gmail Ads Creatives CrashCourse

A few weeks ago Google launched Gmail ads in the AdWords interface, shortly after that they pushed out the ‘Customer Match’ feature allowing advertisers to upload email databases into their accounts – arm yourself and learn email marketing via adwords skills to add it to your advertising options or service solutions in under 5 minutes below.

Uploading Email Databases To AdWords

Phenomenal addition to the AdWords front-end from this month on wards. It was once allowed on the old Gmail ads beta (GSP), but as of whenever Google decided to slip it into our inventory of options – almost any adformat can be triggered by your email database. Here is how Google described it:

Customer Match is a new product designed to help you reach your highest-value customers on Google Search, YouTube, and Gmail -- when it matters most. Customer Match allows you to upload a list of email addresses, which can be matched to signed-in users on Google in a secure and privacy-safe way...more

Here are some random ways you could use these lists (and one way you should not):

Similar Audiences upload a list of your current customers, and AdWords will multiply the list with other users, who match your customers.

Thank You, Come Again upload a list of your buyers and offer them discounts that only those who can see your ads can see.

Close Deals upload a list of email addresses from loyalty schemes, newsletters, other sources and control advertising cost by only paying for those you want, to see your ads.

A New Voice you CAN NOT create a bespoke, personalised ad message for someone and indicate you knew you were targeting them. Ha, the thought of it is funny though.

Find Customer Emails Option Under +Remarketing List

Upload Your Emails, Save And Treat It Like Every Other Remarketing List

Additional Email Database Upload Points To Remember

Customers Matched: emails will be matched to Google accounts, cookie ID's will then be created for those users.

Cookie Lifespan: cookies for search can be collected for a max of 180 days only (the work around is to send user to a page and optimize an independent remarketing list to re-collect customer matched traffic).

Hashing: apply the SHA256 algorithm to email list; remember to set to lowercase and remove any additional spaces beforehand.

Limitations: only attempt to upload files in .csv file format with max file size of 17MB.

Don't Mess About: if you breach any of the customer match policies you might bump into a Google Compliance Review, and if your a multi-account manager - your other accounts might also then get contact to be reviewed! Point being - 'big brother' won't let you get away with using a database of users that you bought or collected using dodgy methods.

Uploading Multi Call To Action HTML Gmail Ad Format

Finding the custom HTML ad format option is easy (it's in the ad gallery), but working out how to get hold of someone who can design it for you, can be tricky for some. My faorite generic thing these ads is the ability for users to save the ads for later or even forward to friends,

Try this, find any HTML email and view the web version of that mail, right click and copy the source code - I will show you where to paste it after the next step.

Get Started With Google Gmail Template Ads

Visit the Rich Media Gallery for a list of templates that you can edit inside tools like Photoshop and GIMP.

If you are anything like me, editing ads in Photoshop and GIMP is really good for some - but I was only curious to know how ads are create in photo editing tools, which you can do in the this build guide - I was not interested in learning how to create them myself.

At this point you would need a proper graphics designer or opt for one of the other ad formats provided in the ad gallery - but we have three minutes left now, so go ahead and quickly download one of the gmail templates from the rich media gallery, or right click and grab the source code from the web version of a HTML mail sent to you.

We can catch up at the next step when you get back.

Gmail HTML Ad Creative Editor

By now, you should know where to upload the ad at point of completion in AdWords ad gallery, skipped passed all the jibber jabber on other gmail adformats, downloaded a template from the link I gave to you or about to toying with a HTML source code that is ready in your clipboard. 

The both of you need to click link below, one will go for 'upload a zip file' and the other will pick 'build ad online' to paste their code:


Before previewing the file, you will need to click on validate ad, at which point the tool will clean up your source code, point out errors or successfully allow you to see how the ad will look. The creative editor will then proceed to walk you through the components needed to build a full Gmail ad and push out a zip file ready for the adwords ad gallery.

Instructions for CSS and actual no-test versions of HTML ad creatives are available online for you to use or send to design teams.

Additional Gmail HTML Points To Remember

Click To Call & Form Submit: both options are disabled until you contact Google who hapilly unlock it for you.

Targeting Options: do not yet include remarketing and in-market audiences. Contextual options, demographics and affinity audience do work (i.e. so you can target conversations and domains if you wanted).

White Spaces: if you keep seeing white spaces between images, add this [style="display:block;"] to all the images.

Limitations: 15 destination URL's, 5 forms, 5 click to calls.


Hopefully you now have some idea on how easy it is to upload email databases, or use the new HTML ad format for Gmail ads - alternatively you should bookmark this page for another day and I hope you will thank yourself for it at the point of needing to get started with email advertising via adwords.

Essentials Tips to Set up Engaging Email Drip Campaign

Your drip campaign is a “customer journey” you send your perspective clients/customers on so that when they are ready to invest or make a purchase you are top of mind.

There is no doubt about it email campaigns are the best way to sell online. 

Here are some mind-blowing stats:

Email is the No. 1 activity people use on their Smartphones. Not to mention 4 out of 5 smartphone users check their phone within the first 15 minutes of their day.
Currently 50% of the population use a Smartphone an estimated 68% will by 2017.
Worldwide email accounts is expected to increase from almost 3.9 billionin 2013 to over 4.9 billion by the end of 2017.
Knowing how to effectively communicate to your audience is essential to growing your profitability because 72% of consumers preferred communication from businesses is via email.

Just like a leaky faucet, email drip campaigns can quickly become annoying. However, when you follow these 8 tips you can set up a killer email drip campaign that leaves your readers thirsty for more and primed to purchase.
Navigate through this Drip Campaign tips and set your first or next drip campaign up for huge success.

1. Set Your Goal for your Drip Campaign
2. Diagram the flow
3. Lead with value
4. It’s not about you it’s about them
5. Write one cohesive story
6. Create compelling headlines for Drip Emails
7. CTA Tips for Drip Emails
8. Set it and forget it

1. Set Your Goal for your Drip Campaign

• Educational
• Promotional

Your email drip campaign should always lead with value (see tip No. 3), because the ultimate goal is to build and nurture a relationship with your customer. For the sake of a killer campaign you’ll want to reverse engineer your strategy.

Ask yourself:
• Where do I want my customers to end?
• Is it a paid signature offer?
• Is it a free workshop?
• How am I going to get them there?
• If your goal is to nurture your content will be more educational and if you are doing a launch orcountdown campaign you’ll want to mingle both education and urgency.

Always keep your end goal in mind so that your drip campaign has a steady engaging flow.

2. Diagram the Flow for your Drip Campaign

Now is the time to start plotting your course of action.
Once you reverse engineer your goal, grab a pen and paper or do it digitally. It may look something like this from Rob Walling of Drip:


Check this campaign: Autopilot of Simple Green Smoothies:

3. Always Lead with Value

Nothing says “ick” like an email that shouts BUY MY STUFF.

Time is money and you want your emails to be worthy of someone’s time. When you provide value you show your customers how much you value them. This also builds your trust factor which is key in people’s buying decision.
Simple Green Smoothie’s “The 30-Day Green Smoothie Challenge” is a stellar example of a welcome email combined with practical advice. 

Here are 5 engaging templates you can use to personalize your next promotional campaign:
  1. A warm welcome
  2. Transparency = Trust
  3. Share a personal story
  4. Case study
  5. Soft sell offer

Check out 6 engaging emails you can use to personalize your next nurture campaign:
  1. Welcome
  2. Practical Advice
  3. Theory
  4. Actional Tips
  5. Case Study
  6. Follow up

4. It’s Not About You It’s About Them

• 72% of consumers are frustrated when they receive generic emails.
• 55% are more likely to buy when they feel a personal connection to the sender.
• CTRs improve show a direct impact on emails that are personalized.

Always make sure you are writing to ONE person. Your email is intended for each and every reader who places their eyes on it and not to an audience as a whole. Write from your heart to get into theirs.
Speak directly to that person through the words in your email as if they were in a room standing in front of you.
Research shows that people respond to their name and is why you should personal your emails with your customers first name.

5. Write One Cohesive Story

• Open up a document in google drive and draft your entire email sequence as if you are telling a story to one person. You don’t have to do this at one time just make sure you create it as one document.
• Find natural breaks in the flow and segment them into individual emails.
• Help Scout recommends following the “one email, one goal” rule and that each email should contain one desired outcome.
• Pull out compelling headlines from your “story” to create subject lines.
• Write like you speak.

6. Create compelling headlines for Drip Emails

• Your customers will read your headlines even if they don’t read your emails
• Emails sent out “Daily” and “Weekly” and “Video” perform very well
• This report of 2.2 Billion email subjects found:
  1. “Alert,” shows +38.1% opens and +61.8% clicks. Gives the impression of “breaking news” (same with the word “Bulletin”)
  2. Avoid using the words “Cheap” or “Free”
  3. “Sales” and “Savings” still works
  4. “Early Bird” can have a positive affect on open rates and negative on unsubscribe rates
  5. “Prizes” and “Free Stuff” have a lower open rate but higher click through rate

I scanned my inbox and the following email subject lines grabbed my attention:

• I’m done with having to prove myself
• I feel like a fool
• Can we talk?
• Julia I am closing my business…
• Patient Story: Katie and Ed
• [24 hrs left]
• Welcome to My Partyyyyy!
• Do you want to live happier?
• Special Announcement: MIA Alum Only!
• To Feel, or not to feel
• Can I help you?
• 5 big mistakes I made last year
• Stepford Life ends… and The Story Begins
• I didn’t want to have these business regrets
• How to get a traditional book deal
• A wake up call
• Create your own economy
• Sale ending in 24hrs, tick-tock
• Doing your taxes bum you out?
• The business tool that saved me
• Why they aren’t buying
• The Beyonce effect
• How to make your small list win big
• An elevator pitch case study
• We royally screwed up this launch and I need to explain
• “One day” is here, Julia!
• The Truth About Money & Being a Heart-Centered Entrepreneur {vlog}
• (Webinar Replay) OMG, I can't believe I dropped the F-Bomb
• the one thing EVERY successful entrepreneur does…
• Oh la la! You’re a VIP!
• What I do when my business is stuck (videos included)
• ♥ What if your good idea is already taken?

7. Call to action tips for Drip Emails

• Make it short
• Tell people what you want them to do
• Ask for urgency i.e.) NOW
• One call to action per email for better results
• Make it “pop’
• Keep testing and tweaking

This email has a CTA to check out “Flight School”:

8. Set it and forget it

Choose a service provider like where you can create your automated email sequences. I recommend Get Response.
Take the time to set your drip content up right it will help you build relationships in your business.
When you have a private all-access pass to someone’s inbox the sky really is the limit on what you can achieve in your business!

Bonus infographic:

Drip Email Marketing: How to Nurture Your Leads & Drive 3X The Clickthroughs

Click image to enlarge+.
Courtesy of: Emailmonks.

MARI themes

Powered by Blogger.