Sunday 31 December 2017

Popular Design News of the Week: December 25, 2017 – December 31, 2017

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

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

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

HTML 5.2 is Done, HTML 5.3 is Coming

 

How Developers will Work in 2018

 

A Study of Homepages Over Time

 

Ether – A Modular Base for any Design System

 

25 Free HTML Website Templates for Zero-Cost Websites

 

4 Key Web Navigation Principles

 

Beautiful Map Visualization

 

From Concept to Reality – A Guide to Logo Development

 

Text-only News Sites are Slowly Making a Comeback. Why

 

The Rise of the Butt-less Website

 

Pantone Colors for Designers

 

Designing Better Design Documentation

 

10 Most Awesome Hi-fi Prototypes of 2017

 

Resourcy – An Index of Sites that Help You Discover Resources

 

UI/UX Case Study : A Brand New “Get Taxi Experience”

 

Our 10 Favorite Open Source Resources from 2017

 

Hiiistory – Museum of Web Design

 

Re-thinking Reading on the Web

 

Component-Based Design

 

Site Design: This Year in Books by Amazon

 

Apple Plans Combined iPhone, iPad & Mac Apps to Create One User Experience

 

GIF my Year – A Lil Holiday Hack to See your 2017 in GIFs

 

The 5 Biggest Typography Trends of 2017

 

Fictional Logos

 

How to Design a Remarkable Logo?

 

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



Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/popular-design-news-of-the-week-december-25-2017-december-31-2017/

Saturday 30 December 2017

Comics of the Week #421

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Gray or color

Working vacation

 

Happy New Year!

Can you relate to these situations? Please share your funny stories and comments below…

Mysterious One-of-a-Kind Mysteria Typeface – only $9!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/comics-of-the-week-421/

Friday 29 December 2017

8 Tips for Designing Awe-Inspiring Conversational Interfaces

UX Design is almost synonymous with conversational interfaces, which are used left, right, and center from natural language messaging to voice-based action.

Biggies like Google, Facebook, Microsoft and Amazon are neck-and-neck when it comes to taking conversation as a platform to the next level with their virtual assistants, that make it easy for users to take the next course of action. It is no different than talking to the next person beside you. One-on-one.

Sample these scenarios: Need to buy a product? Ask a bot to guide you. Want to download an app but need to know more about its features? A bot will answer all your queries. Looking for a discount code during checkout? Fret not, as the bot will help you search and apply the best deals!

As more number of sites, apps and other platforms go conversational, it becomes mandatory for web designers to know how to make the most of it. Those of you who are just getting started in this direction will benefit from these eight tips for designing awe-Inspiring conversational interfaces.

1. Pay Attention To User Reactions

When you want to design a conversational interface, the first thing you need to take into consideration is the target users and how they are most likely to react in specific situations.

Getting this perspective is mandatory before you start working on conversations that fit their interests and requirements like pieces of a puzzle. Address their issues in the first screen itself and take it from there.

2. Provide a Unique Personality

One of the major characteristics of conversational interfaces is that they are as different as chalk and cheese. If you take the example of Alexa, Siri, Cortana and OK Google, you’ll find that each of these speak to the user in a different manner and yet, serve their ultimate purpose. It is the best way to humanize them even if they can never replace a human. It will not only set your interface apart from competition, but also hook the users.

3. Break the Ice

Everything will be futile if you leave the users playing the guessing game about the features and functionalities your bot is about to serve. You need to make it clear to them at the very beginning itself, maybe as an introductory message, animation or speech bubble. Let your creativity do the talking! The more you work on the onboarding, the easier it will be for them to interact with the interface.

4. Use Conversational Text

Make your chatbots as human as possible. On a virtual level, this is possible by using conversational text.

It should be as seamless and as natural as possible. Even for questions as random such as “are you a bot or a real person?” the bot should be able to handle the query like a human and take the conversation further.

Ergo, make the tone of the conversation as informal so that it gives incentive to the reader for responding back. If they don’t understand the conversation in the first place, the chances of them replying back are bleak.

You’ll need excellent copy for this as the main purpose is to increase user engagement with colloquial language. For instance, if your target audience includes Millennial and Gen Z, you may use phrases or abbreviations like On Fleek, Lit or SMH, which they can easily relate.

5. Write Short Texts

Say goodbye to long strings of information and use short texts to retain your target audience’s attention span. The texts should be easily skimmable and if the reader wants, they can directly take a call-to-action without having to go through large chunks of text using smartly designed buttons. One of the best ways to do this is to take the help of visual feedback, which is the next point.

6. Offer Plenty of Visual Feedback

Web designers cut down on text and include whitespace on the websites to improve readability for visitors. Something similar also applies to conversational interfaces. In this case, the whitespace is replaced by visual cues.

Use several graphics, charts, images, GIFs and maps to relay bite-sized information. Alternatively, you can even go a step ahead and add infographics, slideshows or videos to explain features and functionalities of a product or a service and even to guide them to a physical store. If they ask for a recipe, maybe you can give them recipe cards straight from the website.

These are the best options to reply to the queries put forth by the users. You get the drift!

7. Don’t Forget The Emojis

Emojis are used for a reason. Various chat-based applications have their own emoji sets to assist users in expressing a varied range of emotions, which are difficult to pen down in words. In this digital age, emojis are an integral part of our lives and it’s a given that emojis or emoticons need to be a part of your conversational interface.

8. Give Users Plenty of Choices

If you don’t want users to leave midway from a conversation, give them plenty of choices, which include but are not limited to buttons, shortcuts, quick reply options so that they can reply/respond speedily.

Remember the automated replies by LinkedIn messenger? Work on something similar and make them type less. Give them the option to select from sending texts, attachments, stickers, videos, photos and so on and so forth.

Conversational interfaces have skyrocketed and there is no coming back. To keep up to speed, use these tips to offer the best AI experiences to your users on a design level.

Timelines Meet Kanban Boards with Timelinr – only $37!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/8-tips-for-designing-awe-inspiring-conversational-interfaces/

Thursday 28 December 2017

​Find Your Creative Freedom Online with Wix

What kind of website would you create if you had total creative freedom online? If you had the same kind of comfort level that you have in your sketchbook? If you weren’t hampered by inflexible design tools, and code you don’t understand?

That’s the freedom that Wix gives you. The freedom to tell your story online exactly the way you envisioned it.

Wix is the most advanced website builder available. With hundreds of design features, you can create without limits, and feel confident the results will be stunning, unique, and totally personal.

Total Creative Freedom

Wix gives you the power to create anything online. With its innovative drag and drop website builder you can create a site that looks great on any device – desktop or mobile.

Start with one of the beautifully-crafted templates, or a blank slate if you prefer, and build your design. Text, images, even video can be dropped into place, and grid markers make it easy to move elements into neat ordered positions. Choose from hundreds of different font styles, or upload your own to match the look and feel of your brand. And that’s not all, when you build your site with Wix, everything on the page is fully customizable.

From a beautiful photography portfolio, to a successful online store, you can build anything you like. The only limit is your imagination.

Low on time? Then try out Wix ADI (Artificial Design Intelligence) – the first ever artificial intelligence that can design a stunning website for you. After learning about you, and your preferences, Wix ADI applies this knowledge to design a unique site for your specific business needs.

Take Control with Code

You don’t need to know any code to get the most out of Wix. You can design in any grid or layout you want with drag and drop. However, if you are interested in code, you can use the stunning visual components of the Editor to create your own web applications and robust websites. It’s serverless, hassle-free coding for all levels, from notice to advanced builders. Designed to help you take full control of your site functionality, its advanced features, and intuitive interface will have you programming web components before you know it.

Not a coder? No worries, you only have to use it if you want to. Otherwise, it’s all drag and drop.

A Design Tool for 2018

You can even add advanced design features like parallax scrolling, animation and hover effects. Because Wix is constantly pushing the limits of the platform, you can be sure to find emerging design trends right inside the Editor.

Video and animation both look huge for the coming year, and Wix already makes it simple to add both to your site. Their revolutionary video player allows you to upload, share, and even sell videos or video subscriptions right on your site! You can add your videos from anywhere – YouTube, Vimeo, and Facebook. And grab your visitors’ attention by adding beautiful autoplay video backgrounds to your site. Use your own videos or explore the free Wix collection.

Want to add a specific effect to your images, but don’t have Photoshop or Lightroom? Edit your images right inside the Editor with around 40 filters to choose from. Once you’re happy with how your images look, add them to the Wix Pro Gallery to create a professional looking portfolio with text, images and videos.

You’ll be amazed by what you can create online – all with one website builder. You won’t have to open a million tabs to create a site that will impress your visitors.

Wix for Business

Wix was built from the ground up for professional web designers. You’ll find all the essential features you need to help you create beautiful sites for your clients.

Reliable hosting, custom domain names, professional mailboxes and best-in-class SEO, Wix takes care of all the heavy lifting for you.

You can even ask for feedback from clients, team members or friends before publishing. Then when you’re ready, share your website on social in a click.

Wix also has innovative SEO features that ensure your website will get found on search engines like Google. Follow your own personalized SEO plan to help you choose the right keywords and track your success.

The Total Website Solution

Wix is by far the most technologically advanced site builder in the world. Their drag and drop website builder and advanced design features, combined with Wix Code, and Wix ADI, belies a wealth of features that enables anyone to create the website they want.

Whether you need a portfolio, a business site or you’re designing a website for a client, Wix gives you the creative freedom online to create the exact website you want. So, what kind of website will you create?

 

[— This is a sponsored post on behalf of Wix —]

LAST DAY: Easily Build Websites with Blocs For Mac – only $39!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/find-your-creative-freedom-online-with-wix/

Wednesday 27 December 2017

9 Consumer Psychology Tactics to Improve Conversions

When it comes to first impressions, design is everything. From colors, copy on buy buttons, to the layout of a website.

Tapping into what makes brains tick is important for this, and certain aesthetics as far as design goes are much more persuasive if you want the visitors to take some kind of action on your website.

When you combine behavioral and brain science with practical experience, you will get a much deeper insight into how and why humans behave like they do, and what you can do to get them to do what you want on your website.

What is Consumer Psychology?

Understanding why and how individuals evaluate objects and events is one of the main aims of consumer psychology.

Numerous studies have gotten us to an understanding that those choices and evaluations aren’t only driven by the value and quality of an object, but by internal factors, such as subjective perceptions, as well.

People may abandon a website due to numerous reasons. If you’re lucky, they will come back and finish whatever they started, but this seldom happens and people just forget about it. Abandoners can actually be hot prospects, and you’ll find that companies spend a lot of money to re-engage them, in order for them to come back and finish what they started.

1. Use Psychological Distance

The way we construct an object, cognitively, is impacted by our conceptual distance from that object.

Low-level construal will relate to the specific, concrete features, such as price, function, color, and size, while the high-level construal will relate to the experience one has with that object, as an abstract concept.

If you describe a broken link as unclickable, that is low-level construal. However, if you describe that the interaction leads to frustration, that is high-level construal.

2. Understand the Primacy Effect

The primacy effect tells us that whenever we have a choice between a list of things, our brains will remember the first couple of things more than the ones later on.

Things that are at the beginning of a list are regarded to be more important. One of the major reasons this works is because an individual will pay more attention at the start, and later on drift off, because their brain is either bored or tired.

3. Design for Humans

One often overlooked concept when building your website is to design for humans first. More importantly, design for your specific target market first.

Does your product, be it an app, or a website, or software, engage your audience?

Does it push people into taking action?

If something makes sense to you, that doesn’t necessarily mean that it’ll make sense for a visitor, or your business. Your visitor’s behavior on the page is directly related to how their body and mind respond to the combination of copy and design you have placed in front of them.

4. Color Influences Shoppers

You will find it fascinating that certain colors can actually convey different actions and emotions.

Mostly due to the fact that personal preference, history, and other things, can influence the meaning of certain colors, has led to there being a lot of theories about color.

Red might mean one thing to me, and a completely different thing to you, so understanding the color theory fundamentals is pretty important.

5. Decision Making Can be Simplified with Contrast

Two of the biggest enemies of our brain are complexity and ambiguity. If a visitor has too many options, that can stifle their process of making a decision, and lead to them abandoning your website simply because they had too overwhelming a decision to make.

Some services or products are complicated by themselves, and you should go with a softer approach that will support the process of making a decision, instead of focusing on pushing the sale.

Our brains love clear contrast and simplicity, and that knowledge can be used to push your visitors towards taking an action.

Hick’s law dictates that too many options mean no decision

Have you ever found yourself at the grocery store, trying to decide which kind of chocolate to go for? That same thing happens to your visitor when he has far too many options.

This can be too much for a visitor to handle, regardless of whether you have too many products, or too many images, or too many shipping options.

They will leave, not complete a purchase, and not take the desired action.

6. Informational Social Influence

This (aka social proof) is a phenomenon that dictates that in order to conform to their choices, people will adopt the actions of others. Social proof has a lot do to with a herd behavior.

You’ll find that our brain goes where other people are going, and the decision-making center of our brain has a direct link to the area which is responsible for rewards and social learning.

Seeing what choice someone else made, will activate that center and cause us to follow their lead.

7. Nudge Visitors Toward Making Smaller Commitments

A visitor will often abandon your site because they aren’t ready to buy yet. Over half of online shoppers actually use the shopping cart to see how much the total costs are. And, the same number of shoppers actually add items over several visits before they check out.

Although they may convert later, you’ll find that the Foot in the Door technique can help their decision to buy from you. This will involve you asking for small commitments first, before moving on to things that require a larger commitment.

8. Faces are Sincere and Humanizing

Who doesn’t want to see a smiling face?

It is most likely one of the most pleasant, familiar things in the world. It is one of the rare things that everyone understands, regardless of their background or the language they speak.

Our brains actually have cells that only respond to faces, a part called the Fusiform Gyrus, and there isn’t a single other object that can get this part of the brain to spark.

So, if you have a picture of someone that is looking directly at what you want your visitor to pay attention to, that may very well help you.

9. Encourage Visitors to Complete with the Illusion of Progress

You might’ve seen frequent buyer cards that have a few items pre-stamped on them, and you may be wondering what is the psychology behind that.

A study has actually shown that people who get pre-stamped cards actually buy more frequently than those with empty cards.

The existing stamps will give your customers a feeling of being closer to their goal. This will motivate them to complete their card, and reach the goal. This same principle can be used to get your abandoners to come back and finish their purchase.

Final Thoughts

Now that you have a few design tactics to implement, you can go ahead and get started with them, putting them into play.

When you’re looking at your website data and the abandonment history, you’ll find some visitor journeys a little illogical. However, psychologists have actually shown that a lot of consumer behavior tendencies aren’t only explainable, but also predictable.

If you understand these tendencies, you can easily develop a strategy that works with these mental processes, instead of against them. If you know what will make your visitors tick, that is the key to developing a remarketing message that will make them click.

9 Minimalist Responsive Themes by MeridianThemes – only $27!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/9-consumer-psychology-tactics-to-improve-conversions/

Tuesday 26 December 2017

8 Contact Page Mistakes That Are Costing You Conversions

Landing pages are probably one of the first pages you think about when it comes to creating conversions. But what about the contact page? It is after all the bridge between you and the outside world.

As this page will probably be one of the most viewed pages on your site it is also one of the best areas to gain your conversions. Unfortunately you’re probably making a mistake that is costing you a convertion or two without you realizing it.

Of course some mistakes are more obvious than others. Not sure if you’re contact page is a conversion failure? Check out the 8 contact page mistakes that can cost you conversions and how to fix them.

1. MIA Contact Page

The biggest mistake you can make is one of the most obvious yet you’d be surprised how many sites lack a contact page. There’s a surprising trend for portfolio based sites that forgo the contact page.

In lieu of a contact page, some site owners are now opting for simply throwing social icons up at the top of the page. While this is a great way to let people know you are socially available it does nothing for people who, like me, don’t have any form or social media or those of us who are trying to touch base or inquire over a matter regarding your product or service.

The Fix: Get yourself a contact page. There’s no excuse to not have one especially when you have spent your time pimping out the front page with HD video and parallax scrolling. Your users can’t contact you and they are likely to think you don’t quite care about actually doing business.

The site for Badass may not actually feature your traditional contact form but they still make a point to provide contact information in order for you to get in contact with them if the need should arise. Extra points for offering two separate phone numbers and email addresses to make sure you can get in touch with someone on the team. If that for some reason fails you can also try their social media accounts for a possible quicker response.

2. Hide and Seek Contact

Many of us have played the never ending (and annoying) game of “where the heck is the contact page”. This game entails—you guessed it—searching for the contact page so you can query the site owner for one reason or another.

Usually if you can’t find the contact page in the navigation menu you are likely to find it in the footer navigation. While this is all well and good, it isn’t very intuitive to users. What’s worse is when instead of finding it in the footer you have to locate the contact page via Google query to find the secret page link.

The Fix: Your contact page should always be in the navigation menu. Avoid putting it in the footer menu as a frustrated user is likely to turn tail end and leave your site. That means one less convertion thanks to bad UX.

Kickpush makes their contact page easy to find by displaying it directly in their navigation as opposed to some sites that prefer to place their link in the footer. By placing their link in the navigation and using the simple word of “contact” they are taking the guesswork out of finding how to get in touch with them.

3. Inadequate or Intrusive Contact Forms

The art of the contact form is a sacred and trying practice that it takes a while to get right, but only a second to get wrong. Contact forms usually fall under two spectrums, either not enough fields or so many that it includes inputting your grandmother’s mother’s maiden name and of course the dreaded phone number request.

People want to be able to tell you what they need to tell you but if you don’t give them the opportunity you can be losing out on a convertion. The same could be said that not everyone has the time or patience to fill out eighteen fields just to ask you if their discount code will work. You could also be losing a convertion by not explaining what each form is for or the correct way to input their information.

The Fix: Construct your contact forms based on your site’s purpose and on the site’s target audience. If a user feels like your form doesn’t adequately allow them to address their needs then it isn’t a good form. If your form takes more than two minutes to fill out then you’re asking way too much.

Forefather’s does a great job when it comes to creating a contact form based on the needs of their potential customers. Instead of going for the standard contact form that requires name, address and message they get into specifics. This ultimately allows them to craft a tailored response based on individual needs as opposed to a generic response. The form’s questions are adequate for them to gauge your wants and needs without being too intrusive.

4. Not Analyzing Submissions

This may not deal with the actual contact page but failing to analyze the type of submissions you generally receive will affect your contact page design, form and detail information. Analyzing your submissions will give you a good idea of why people are contacting you and therefore you can make the needed changes to better address those issues.

If the majority of your users are contacting you on three different issues constantly you might want to consider designing a subject dropbox so they can select the topic closer to their inquiry. Analyzing can also help bring awareness to any other problems your site might have depending on the number of submissions you receive and the frequency.

The Fix: Don’t just respond to submissions and move on. Keep a record of them because chances are if one person is contacting you for a reason there will be four more who have the same inquiry or issue.

SpicyWeb has clearly taken the time to analyze passed submissions if their “How Can We Help?” section is indication. With this it allows not only SpicyWeb but also the sender to better categorize their message. Offering topics can better the response of the site and gives senders the confidence that their inquiry will not only be received by the right person but also be answered appropriately.

5. Form Only Options

Forms are great but sometimes they aren’t the most convenient way for a user to get in contact with you for one reason or another. Usually if a person is trying to get in contact with you it is probably for something important so you don’t want to limit them. Offering more than one venue makes you seem more accessible.

Look at Moo’s Contact Us page for example. While they don’t have a standard form they have three other viable options of chat, call or email (which is in form format if you choose that option).

The Fix: You don’t have to put your phone number on your page, but there should be more than one way for users to get in touch with you. If you don’t want to add a physical or electronic address you can always use your good ol’ social media icons.

If you think that the simple contact page on Wonder’s website won’t be enough to cover what you need they make sure to offer multiple other options for you to get in touch. Right below the form you are given social media accounts, multiple email addresses and even an actual address to mail letters to the author if you so wish to.

6. Mandatory CAPTCHA

CAPTCHAs are not disability friendly (visual or developmental) which should be a good enough reason to scrap them from your forms in the first place. If limited usability isn’t enough to convince you, how about the fact that only 71% of the time will three users agree on the CAPTCHA image contents.

While the reason behind using a CAPTCHA at the end of your contact submission forms is a good one it isn’t worth it when users can spend minutes refreshing the code to find a visual they can actually discern. Most users, myself included, will probably end up saying “forget it” and not finish.

The Fix: Thankfully there are now more viable alternatives to the annoying CAPTCHA that are less problematic to both disabled, non-English speaking people, and the “I don’t know what this says” users.

When you contact a site you want to get in and get out within five minutes or less. Thankfully Sila Sveta knows this. There is no silly CAPTCHA here which allows you to send your message without the constant refresh because you deciphered the scrambled words wrong.

7. Unmonitored Submissions

Just because there is a form that is filled and submitted doesn’t mean that a reply is guaranteed. I have filled out numerous forms in my life and have never received a response which largely boils down to no one was is actually watching what comes in.

Not watching your submissions is a great way to blow a potentially important opportunity. It also doesn’t speak very well about your site’s management and your relationship with your users.

The Fix: Link your contact forms to an account that you are sure to check on a regular basis or assign the task to someone responsible. There is no point in having a contact form if you’re not going to bother to respond to the people who contact you.

You need to make an effort to answer all incoming inquiries to your site. To help instill confidence that a user’s message won’t just be dismissed you should try writing positive confirmations like the all girl design trio of NJI3 does on their contact form. They let you know from the get go that if you send them a message Dina will get back to you before the day is over. This compels users to take the plunge and actually fill out the contact form.

8. Broken Forms

Things break every now and again on a site, it’s just part of the territory but it doesn’t mean that it should stay broken. Forms can be broken in various ways. From submit buttons that don’t work to forms that don’t acknowledge you have all the fields completed and continues to send back an error message. Forms can break for strange reasons.

While it probably isn’t your fault that your form breaks, especially if you’re using a third-party application, your user is unlikely to think like that. They will see it as an excuse to flee your site and take their conversion with them.

The Fix: Depending on your schedule and the influx of submissions you receive you should always test your contact form once a month especially if you haven’t received any submissions lately. This will allow you to catch any form hiccups as they develop before your users does.

One way for your users to know that your form works is by having some form of confirmation message pop up after you have hit the send button. The site for designer Dani offers a simple confirmation message after you have submitted your contact form to let you know you have successfully completed the form.

Keep the Momentum Going

Even if you have corrected the above mistakes don’t think that your contact page is finally perfect. There are other pitfalls that you are likely to get stuck in when it comes to your contact conversions. Other areas you want to pay attention to are A/B testing, your use of language with your contact buttons and reducing form friction.

650+ Travel Photos from Cruzine Design – only $9!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/8-contact-page-mistakes-that-are-costing-you-conversions/