Tag Archives: design

Practical Guidelines for Using Background Videos on Your Website

When to use background videos on your websites

Nowadays, as a web developer you can use background videos as a great way to improve your website’s look. Moreover, it will also make your videos more enjoyable for visitors. Why? Because good videos can tell the story of a business which each business will surely have their own story that can be told better. So, now you are interested in making background videos, but don’t know how to start? Let us guide you! All you have to do is just keep scrolling and reading.

Best Practices for Adding Background Video

The best reason why you use a background video is because when you use it, your website will look better. Therefore, it is tempting to use any video that looks shiny and interesting without considering its impact. Even though those shiny things may contribute you a lack of minimal advantage, in most cases, they are also the biggest factors that contribute you a slower site. Therefore, trading a static image for video must be worth it.

Below are some things to consider:

  • Select a short length video that loads quickly.
  • Don’t use sound. Sound adds the file size and gives little value.
  • Use a placeholder. This is used to anticipate if the video is stopped or can’t be played.
  • Replace the video with an image for the mobile experience. You can hide the background video element at mobile breakpoints to reveal the background image. Besides, it will give the best experience for the mobile visitor.

When You Shouldn’t Use a Background Video

For some reasons, a background video is good at grabbing attention. However, instead of focusing on your copy, a background video might take up all the attention on them.

On the other hand, if you are too aggressive with your background video, it will overpower the important content. When you want to present complex ideas, like sales-related content to read, videos can be distracting. In terms of explaining, words are still the best. So, don’t run the risk of distracting or losing visitors with a video.

Choose Useful Over Complex

When we are deciding whether or not to add an element, you have to think about the mistakes that it might cause. For instance, it’s easy to make the mistake of thinking you’ll enhance an experience by sprinkling in some fun animations or by hiding and revealing elements, but you might actually be adding an obstacle.

So, the simplest way to keep thing simple is to make it as simple as possible. Your background video should reinforce the content message, eliminate barriers, and complement the rest of your site’s content. In other words, it should bring out the aesthetic element of the website, not stand alone or get in the way.

The Smarts behind Adding a Background Video

A best-case scenario is when background videos supplement or enhance the CTA.

  • Make It Personal

Generally, people want to see other people. It will be easier for users to decide whether they have to take an action, like signing up, making a purchase, or getting in touch once they see a person. Therefore, adding a short video will allow people to visualize themselves working with you.

  • Make it Pop

Most of the case, people want to have text layered on top of the background video, so make sure it’s easy to read throughout the entire video loop. Furthermore, you can aim for a strong light/dark contrast between the background video on the copy.

You can also apply a solid, monochromatic filter on top of the video to ensure full, legible contrast. This technique will not only make this look super professional, but the color contrast also makes the text, form, and landing page CTA look impressive. Other method that you can also try is by including a text shadow, or a semi-opaque color block behind the text.

  • Keep It Short

It is important to keep the video short. Therefore, it is better to make a video with the length no longer than 10 seconds, but make sure that this short, looping video should be enough to get the point across without impacting the load time.

Sometimes, creating a loop can be challenging, the loop will appear out of place or incomplete if the video is too short. On the other hand, if the video is too long, your visitors can easily click away from the site or to another page before the video’s had a chance to do a great thing.

If you can’t produce your own video, you can search for other places to get stock video clip. Double check the copyrights associated with any video before you use it. However, we would recommend you to always produce your own video to make it more personal.

  • Make It Unstoppable

Be confident, as long as you give a good quality and on brand video content, your visitors will likely press play or pause. The best way that you can offer is to play the background videos automatically. This will surely grab the visitor’s attention and keep them interested, as soon as they see the video element.

Don’t Forget the Analytics

It’s important to run a test, such as an A/B test to compare how your page performs with a background video compared with a static image. Just to be safe, you can start by pushing a small portion of your traffic towards the page. However, most usability specialists lean on experience, gut, and personal opinion when deciding what design brings customers satisfaction. This method is, of course, not right as you can use data as a great way to know what your customers actually think, as opposed to what they say they think.

So, have you tried background video in your website? It’s worth trying the method that will surely make your site look more sophisticated and smart. Good Luck!

How to Create an Empathetic Design: A Method to Design for Users

Are You Actually Designing for the User A Case for Empathetic Design_YWF

Some web designers might see projects as a form of self-expression, another notch in a portfolio that reflects our personal philosophy and goals. However, this approach is wrong, as designers should understand that they not only have to display their creativity to the world but also solve a customer problem. Unfortunately, many designers often ignore this concept. However, if you want to be a better web designer, you have to meet the business goals of a client by applying empathetic design. Before we discuss about how to produce empathetic design, first you have to know the meaning of user research, since both of them are related closely.

What is User Research?

User research is used to collect information about a potential target audience. There is a lot of information that can be used, but the goal is the same, to collect and analyze information about real users.  Then businessman can use this information as solutions that make the end product attractive and intuitive to the target user.

In order to create quality user research, you have to understand user needs, wants, and even psychological makeup. In fact, the information will help designers extrapolate the best colors, stylings, and interactions based on the emotions and experience of the target group.

Therefore, it is important to put empathy when designing websites, only by this can you understand what a user wants and needs from their experience.

Why is Empathetic Design so Difficult?

During project, designers and users have to work together, but in most cases, it happens that the teamwork damages user experience. Each party is so focused on getting their own opinion across; they don’t take time to absorb what the other person is saying. If this situation is so you, as a solution, you can design the most attractive and intuitive end-product in the world, but it won’t matter unless your target audience receives the intended experience.

That is why design takes practice and hard work, since you have to combat the bias and take the time to incorporate user research thoughtfully, but you will see that it’s well worth the effort.

How to Become a More Empathetic Designer?

As explained above, empathy is the ability to understand and connect with someone else’s emotions, goals, and motivations. It doesn’t mean that you have to feel what other people feel. In fact, it’s the process by which you apply user research to your own thinking and execution in your web design projects. The ultimate goal of these exercises should be to increase open-mindedness, reduce self-as-user bias, and collaborate. Dorothy Leonard and Jeffrey Rayport outline an “empathetic design process” that proceeds as follows:

  • Step 1: Determine your target users, this means you have to know who must be observed and which behaviors we must observe to create a better product.
  • Step 2: Collect user research which is often qualitative in nature and establish the actions, behaviors, methods, as well as approach the target population uses to identify and solve problems.
  • Step 3: Analyze the data. Team members discuss what they learned from the user research and attempt to understand and identify with their target customer’s needs and wants.
  • Step 4: Brainstorm solutions. Using the data, designers can create innovative solutions that address problems for the user.
  • Step 5: Prototype. As the last step, you will put your solutions into implementations where you apply your empathetic design to the test.

If you’re struggling to apply empathetic design to your products, try the following simple suggestions:

  • Listen Consciously

You can hear what your users say, but that doesn’t mean that you are listening to them. You may appear smiling and nodding to every words they said, however listening what the other person is saying is something that you must hone. This is because listening is the essential legwork to practicing empathy in everyday life.

  • Get Rid of Distractions

It is easy to get distracted nowadays. Maybe, you find yourself understanding nothing to what they are saying, because you are busy surfing the web or checking your social media while talking with your users on the phone. If this thing always happens, you have to learn how to be fully present when collecting and analyzing user information. Staying focused will result in a better end product.

  • Don’t Make Assumptions

Whether we realize it or not, we all make assumptions about many things. In product design, we might make assumptions about a user based on age or income level. However, your preconceived notions will take you away from a target user and will cloud your interpretation of data. Therefore, as a solution, you have to approach your user research with an open mind and leave your own ego out of it.

Hopefully, by following some simple tasks above, you can learn how to design for users by arousing your empathy towards them. This will surely make your design process better as well as your end product.

How to Create a Big Impact with Minimalism Design

web design

Today, minimalism has become popular among web designers as it is known as one of powerful techniques in modern web design, especially when many designs become more complex.  Besides, many studies have revealed that a clean design may result in lower bounce rate since it produces more benefits to websites, such as faster-loading times and better compatibility between screen sizes. One of the most well-known sites that utilize minimalist web design is Google search.

Visual Characteristics

You can assume that a page is a minimalist when they leave these significant details:

  • Flat Texture

Minimalist interfaces often have flat textures, icons and graphic elements. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients or other textures that would make UI elements look glossy or 3D.

  • Vivid Photography and Illustration

Image is one of the most important elements in minimalist design. Through images, your user can experience emotional connection and set an atmosphere. However, not all photos are considered good for minimalism design. In fact, many photos negate the benefits of the surrounding minimalist interface and ruin the integrity of the layout. Therefore, you need to learn how to select or capture a photo that follows the principles of minimalism.

  • Limited Color Scheme

Color also plays a very important role in minimalism design; it is good to set both informative and emotional connections between the product and the user. Besides, a color can add a visual interest or a direct attention without needing any additional design elements or actual graphics. If the designers understand how to aim for minimalism, they will tend to squeeze the maximum from just a few selected colors, and it’s not that rare to use just a single color.

  • Dramatic Typography

Another important element that has a big impact to your design is typography, if you wish to have an immediate focus to the words and contents, while helping to craft a much larger intriguing visual.

  • Contrast

Not many elements you can use in minimalism design, that’s why applying high-contrast copy or graphic elements can be a good choice. With high contrast, you can direct the user’s attention to the important elements and make the text more readable.

Best Practices

Minimalism focuses on clarity and functionality; therefore, for some designers, minimalism design is truly a challenge since with fewer elements, you have to be able to explain more. If you are wondering  how to put minimalism design into practice, you can learn from the following points.

  • Have a single focal point per screen

In a minimalist design, content is king and the visual layout salutes the king. The aim is to put away distractions from the message and keep focusing on what’s important. This is why a strong focal area is important as minimalism involves stripping away elements that are unnecessary.

  • Set great expectations with the top area of the screen

To encourage users to explore the website, make sure that you provide contents that keep them interested. You can place high-level contents with ample negative space at the top of the screen, and then increase the content density as the scroll deepens.

  • Make Crisp Copy

Since you are working to create a minimalism design; therefore, you have to omit needless words in your copy to include only the bare minimum needed words. This technique will help you explain your message adequately.

  • Simplify but don’t hide the navigation

Minimalism design should make users easily accomplish tasks without distraction. Therefore, you need to have intuitive navigation as the biggest contributing factor to this kind of simplicity. However, navigation in a minimalist interface brings a significant challenge. Many designers even choose to hide some or all of the navigation to remove all the unnecessary elements and streamline the content which can result in lower discoverability of navigation items. Therefore, the best way is to design minimalist websites that ensure visitors to find what they need easily.

  • Incorporate Functional Animation

Don’t forget your animation; it should also follow the principles of minimalism. It should be meaningful and functional. For example, you could use animation to save screen space. Aside from its functionality, animation also makes your site look a bit more fun.

  • Use minimalism for landing pages and portfolios

Remember that not every page is suitable with a minimalist aesthetic. Generally, minimalism is appropriate for portfolio websites and landing pages which usually have fairly simple goals and relatively little content. Furthermore, you may also find difficulties when applying minimalism effectively to a content-rich website.

The bottom line is, if you choose minimalism design as your choice, you have to consider many things before applying it on your design. At the end, what makes a good website is always the good combination of usability and great aesthetics.