Typography In Mobile Design – Beginner’s Guide

Typography in mobile design

As we all know the use of mobile phones are rising every year. Each year new innovations are brought to the market and they are all widely accepted too. This raises the importance of typography in mobile design and mobile friendly websites too. Because mobile phones are the new way of reaching out to people, typography can never be neglected. The challenges faced by mobile typography are the small sizes of mobile screens and the bright light conditions that they are used in. If used wisely, typography can be used to express ideas without being tied to the challenges listed above.

One of the crucial terms about typography is readability. It is the amount of effort a user spends to read and understand the text. A major part of usability is comprised of readability. A user will be interested in the content only if the content is readable. Otherwise it will be neglected even though how much valuable it is holding. The main components of typography are;

Font size and spacing:

The font size for mobile design should not be too small. It’s true that every mobile device is capable of zooming. But that is not something you should make them do. When the users are forced to zoom in order to read, they won’t be feeling so good about it. It will be a wise choice to use text size that is bigger than on a typical website. Other than text size, number of characters used in a line too matters.  If there are too many words in a line it will be hard to follow the lines. This will affect the reader’s rhythm of reading. Even though how big the letters are, it would still be hard to read when letters are kept too close.

Contrast:

Creating good contrast is very important. One of the main differences between mobile and desktop is the places at which they are used. A desktop screen will be used indoor, where the light is always controlled. But mobile phones are supposed to work in multiple lighting conditions. They will be used in the scorching sun as well as in no light conditions. Because of this reason a good contrast has to be used to increase readability. Font with light colors should not be used over background of light color; a darker color will do fine. The idea is to make the font stand out by using colors.

 Also Read: How To Use White Space Effectively In Design

 

Typefaces and text styles:

A single typeface with few font variants and sizes are the most preferred. While using lot of different typefaces, the app will look fragmented and clumsy. Usually, an app or brand has its own default font. Nokia Pure is the name of the font used by Nokia, Apple uses San Francisco and Google uses Roboto. Using the built-in text styles is more preferred. They will help in displaying content with maximum legibility even when expressed in ways which are visually distinct. Extra care has to be taken to keep the UI as simple as possible. The design should be clear and the navigation should be easy.

Hierarchy:

Visual hierarchy is a technique used to organize content in interfaces. This helps users to distinguish layout objects based on their physical differences. Some of those physical differences are size, color, contrast, alignment, etc. Hierarchy in mobile typography is smaller than web interfaces. Normally web interfaces are of three layers, but in mobiles it is limited to two layers. This is because of the limited screen space of mobile phones. By using just a heading and a body, a clean mobile UI design can be made which can maintain contrast and hierarchy.

 

Fonts:

The common view in print typography is than serif fonts provide better readability by helping the eyes to slide over them in horizontal direction. In fonts, as we all know the main classification is serif fonts and sans serif fonts. Serif fonts will be having small lines at the end of each stroke and sans serif fonts don’t. Lot of studies examining the practical differences between these two fonts have taken place, but the results are mostly inconclusive. No font can be called as the best font for mobile devices because the selection of font is completely based on the feel of the content that you are offering.

 

You would have heard this multiple times that “you should be very careful with text while designing user interface”. But the real trick is to treat text itself as UI. They say good designers treat text as content, the great ones treat text as UI. Sometimes the text will be placed over an image and there are multiple ways to do that.

The most common method is applying the text directly to the image. Before applying this technique, you have to make sure that the image in background is dark. Because the only font color which look clean in this technique is white. This white font will only be legible if the image in background is dark. While using this technique testing them in different screen size for legibility, will be a good idea. If used carefully, we can create beautiful effects with it.

Another method is to overlay the whole image. This is one of the easiest methods to place text over image. Overlay is used over images which are not dark enough; overlaying these kinds of images with translucent black makes them more acceptable and readable. This method can also be used on thumbnails and small images. The same logic is used in text-in-box method. In this method the overlay is not applied to the whole image, it’s only used around the text. So the overlay will feel like a box kept behind the text.

Blurring the background image is an alternative method used to accomplish good UI typography. By blurring the portion of the image where the text has to be placed, legibility can be achieved. The text can be placed on the blurred side of the picture to achieve this but the chances for it to move off the blurred space is high when user view through devices of different screen sizes. The method that you would have seen many times will be floor fade. A subtle fade towards black is used at the bottom of the picture. The text is written in this black space.

Generally it can be said that typography is one of the main ingredients of web designing.  Typography cannot be learned quickly, but it is a fun journey to experiment with new and strange ideas. Like the old saying ‘practise makes perfect’. This is how the best practices of mobile typography took shape through mobile apps. Keep on doing, and you will master it.

ColorMean is one of the top digital marketing and web design agency in Dubai. Our services include designing websites and mobile applications. We can help u create the best website for your needs. Contact us now to know more about our services.

How To Use White Space Effectively In Design

white space

 

What is white space? Well, it is one of the most vital parts of an interactive design. It is the space surrounding elements of design, enabling them to stand out. It also includes the space inside each design elements and the space between typography glyphs.

Even though the name says white, white space is not always white. It can be of any texture, pattern, color or even a background image. It is also known as negative space. A well balanced white space will subconsciously insist a person to read the content.

The balance will provide improved visual communication experience. The psychological factor about white space is the calmness it provides to the viewer, which gives them space to breath.

White space is classified into two; micro white space and macro white space. The space between design elements are called as micro white spaces and the large space between important elements and the space surrounding the design layout is called as macro white spaces.

Micro white space plays the major part in content legibility. Marginal white space surrounding paragraphs are capable of influencing the viewer’s reading speed and comprehension. Unlike micro white space, macro white space is like a container of the overall design.

One of the most successful examples of macro white space design is the home page of Google itself.

Also Read:  Best Ways To Design Sites Faster In Photoshop

From another angle, white space can be divided to active and passive. Active white space is the white space used to intensify the page structure so that the content would provide a better guidance for the user.

On the other hand, passive white space is used to improve the aesthetics of the design. This does not guide the user through a definite content order. An example would be the white space between font glyphs and paragraph lines.

Why is white space important in graphic design? Basically, whitespace is the fundamental ingredient of good design which helps to increase content legibility. When users are being able to see where they are going, they will feel comfortable and they will keep on reading.

This provides a good user experience. This also increases the interaction by preventing distractions.

Another function this offers is the ability to highlight call to actions. A way of highlighting something is by making them bigger, this can be achieved by using whitespace as well. This method is also just as effective as the other one. Whitespace is the central part in creating certain mood and look, especially luxury and sophistication.

If you refer anything associated to a luxury brand, you can see lot of white space inside them. Adding too many graphic elements will cheapen the overall look. Our brains tend to give more priority to stuff surrounded by white space, because the whitespace is giving the brain visual clues about where to look.

This feature can be used wisely to add emphasis and invoke imagination. White space makes the imagination to roam free, which can turn out to be a strong emotional response.

The white space doesn’t always points on to a specific thing, so it could turn out to be anything. Also it doesn’t matter what the mind thinks of it. The only thing that matters is, whether it is capable of making the mind think of anything.

Because it can be only done by engaging the user and if the user is engaged, we can conclude that the design succeeded in creating a good first impression. Because of all these factors, white space is not only important in graphic designing but also in documents.

White space combined with typography and photography is the sign of luxury. This technique is extensively used by cosmetic brands to express they are sophisticated, high quality and expensive. It also helps in proper organization. It has the capability of breaking content into separate pieces without lines in an attractive manner.

White spaces help users to make logical sense out of the information presented. Objects placed near to each other appear to be similar. This is one of the highly practiced principles of design. This logic is used to create logical grouping of layout elements, through margins and gutters between grids.

Two of the most familiar sites using white space very efficiently are, Google and Apple. While looking at Apple’s site, you can see most of the space is filled with white space. Other than white there will be a picture of the product and a light description explaining the details of the product.  This style is a tradition that they have been following for years.

Likewise, Google has also been using this technique for a very long time. At the time of Google’s launch, people weren’t familiar with the idea of white space and people thought that the page was not completely loaded even after the home page of google is fully loaded. Google’s homepage is something that they have retaining in same style for all these years. That is how strong white space is.

For most people, white space is a doubt. For them, this space is an opportunity to include more details or information. It’s a hard job to make people understand that this space holds more value than information.

Another problem while using white space is paper in print design projects. While leaving more white space, more space will be required to cover the content.  More space means more paper and more paper means more expense.

At times like these, it is the duty of the designer to prioritise features and content and then create a balance between content and whitespace. Maintaining ideal level of white space in designs and establishing balance will only come by practice and experience.

ColorMean is one among the leading web design company in Dubai offering various kinds of services including seo, smo, ppc, content marketing email marketing etc. Contact colormean now to know more details and to avail our valuable services.

Digital Marketing Trends To Follow In 2018

digital marketing trends

 

As time pass by we are evolving, so does the technology. The rate of that growth is increased every year. These constant changes have made us adaptable to new trends and now ‘change’ is more like a day-to-day thing. Next year, that change is going to touch new heights in digital marketing. Here are the top digital marketing trends of 2018.

Personalisation

This is the biggest trend that each and every brand is trying to achieve. The urge to create contents which are engaging and customized for each individual is on the rise. The satisfaction of a customer when they are provided with best customer experience is priceless. Lot of companies are now investing in this area. To provide personalization to a customer, you have to know the customer well. There are lot of benefits for personalization. Personalizing messages will enhance user engagement and results in increased quality leads. Personalised sales circle helps in shortening of sales cycle. Sending personalised non-sales messages to customers make them feel you care and are willing to offer value for no financial gain, and increases retention rates. This is a new face of online marketing.

Machine learning

Machine learning is the process of using the massive power and objectivity of computers to determine insights from big data which humans cannot find, and use these data to accurately predict results. It is a combination of statistics, science and computer codes to find out patterns in bulk data. These discovered patterns will be the reference for further decision making of the system. In other words, the machine itself will learn and adapt. This result in low communication cost, as Majority of customers can be kept updated on offers via automatic emails, scheduled social-media posts and online ads. Machine learning helps to pinpoint the right quantity and use the most effective channels for marketing.

Read: How To Grow Your Business With Content Marketing

Mobile and smartphones

In the recent year we all have seen the reports of mobile internet usage surpassing desktop internet usage. Mobile internet usage is reaching out for new heights. In marketing it is very important to know where your customers are. So concentrating in those areas will get you more results. With every year the amount of time people spending online is growing, thanks to the technology they have lot of devices to choose from. This makes it important to decide which mind-set you have to adopt. Because people rely on their phones for all their needs, mobiles are becoming more like an extension of themselves. Every advertisement has to feel like a personal experience. This will help in creating a bond between the customer and the brand which will lead to brand loyalty.

Augmented reality

This is the combination of digital data and real-world interface. A digital projection of information on real time experience. With augmented reality interactivity of online marketing can be transplanted into real world. Lot of brands have already started using this technology. Some examples are virtual fitting rooms used by clothing retailers and furniture stores using this to let customers view how their homes would look like, even before placing the furniture of their choice. This helps them in reducing the physical space of the showroom. Social media companies are planning to add augmented reality into their platforms. This is expected to be the integral part of marketing process in the years to come.

Micro-moments

Micro moments are those moments when a person turns to a device while in need of going somewhere, knowing something, doing something or buying something. These moments are the crucial moments in decision making and they can be influenced. Mobile phones are the key in this approach, because people carry them everywhere they go. Micro moment marketing is the idea of utilizing every micro moment when a customer reaches for his/her device, by providing what he/she needs. People feel more convinced when they feel special and emotionally connected. If these moments are used wisely, marketing opportunities can expand in large scale.

SEO and content marketing integration

These days, how google search used to take place is changing. Now, what you speak is directly transformed into search. This is a great opportunity for industry to learn more about their customer so that they can understand what the customers need and then the content can be analytically and creatively optimized for search. Paid ads industry is one of the biggest rivals of SEO. Pay-per-click is like the smog in front of the view. In the olden days marketers used search engines to drive traffic into their sites. But since google stated displaying search engine result pages, the trend changed. Now the content has to be truly valuable and engaging to readers. SEO and content are converging into a single objective. The process is challenging but the possibilities are enormous as well.

Brand participation in messaging platforms

Studies have shown us messaging platforms are used by more than 2.5 billion people globally. In the years to come we can see brands investing time and money in connecting with customers through messaging platforms. Relying only on social media trends isn’t going to cover the evolving new ways of digital media trends. Offering personalized experiences through messaging applications like WhatsApp and Messenger will influence customers on their terms. Even though a brand is not providing a service of personalized information to a customer, they can still use messaging apps to build brand awareness through entertainment. Another way of accomplishing this is by using a chat bot. It would be a fun experience for the customers. This is a platform for customers to talk back and so brands know what they really want.

Digital transformation

Digital transformation is the change in aspects of human society, present and future shifts in mind, in association with the application of digital technology. It is a journey with multiple goals towards optimization. It aims to bring possibilities and opportunities of latest technology in an innovative way in the future. This is a way of modifying or even creating new business models using digital technologies. Digital transformation makes it possible to understand the changing looks and needs of customers and this can bring the brand into customer’s attention. In other words it can be said as a combination of using every digital possibility available for understanding customers and modifying strategies to provide better service.

2018 is a year for lot of possibilities and surprises to look forward to. In terms of digital advertising and digital marketing, these are the possibilities which are anticipated by the world. While generalizing, there is always room for exceptions. The possibility for anything to appear out of nowhere and top the curve in a blink of an eye can’t be neglected. But for now, to adapt to this fast moving pace, marketers need to consider these rising trends because the potential of the results are endless and larger than imagination.

ColorMean is one of the top digital marketing agency in Dubai offering various kinds of services including seo, smo, ppc, content marketing email marketing etc. Contact colormean now to know more details and to avail our valuable services.

How To Use Animations In Web Design

How to use animations in web design

The trend of moving pictures which we call animation has been on its rise even since its origin. And surprisingly its curve is still growing up through different platforms. The beauty it creates while used in a website is mesmerizing, which explains the increase in usage of animations in websites. A loading screen can be made very entertaining using motion graphics. If used properly it will have the capability to engage people and make them stick longer in the site.

While designing, the first priority should be the feel, and then comes the purpose. Both of these are crucial decisions because this decides how the viewer views the website. Every website is judged within the first three blinks of the eye. There are three common ways to use animation online:

  • State change: This is used for softer transitions. When a user have moved over a selection or clicked, this animation will reflect user’s interaction.

 

  • Emphasis: These are used for high consideration zones of the site, highlighting a specific peace of information or call-to-action. This will help the user to engage more.

 

  • Reveal: This method helps in keeping the information organized and clear. They hide information at the side or bottom of the site and they will appear when they are called.

 

All of these plays a crucial part in the feel the site create .Every animation used should reflect the brand’s personality. One of the best things about living in this decade is the internet. Lot of website animation tutorials can be found online. The website can be reinforced by using movements.  Smooth animations can be used in multiple ways for this purpose. Two of the most popular motion techniques are ‘Parallax’ and ‘Dolly and Zoom’.

Parallax is scroll based animation. In this technique different elements will be moving at different rates. This helps brain to separate content from ambient or supportive content. This is used to emphasis objects of high priority in a subtle way. Zoom and dolly is a style adapted from films, this refers to the movement of objects relative to a camera. Apart from these, there are much more regularly used motions. They are;

  • Easing
  • Offset and Delay
  • Parenting
  • Transformation
  • Value Change
  • Masking
  • Overlay
  • Cloning
  • Obscuration
  • Dimensionality

 

Website animation effects are the next thing to keep in mind. There are 12 basic principles of animation. These are from “The illusion of life: Disney animation” in 1981.

  • Squash and Stretch: This effect is used to create a sense of physical mass. Even the changes created in shape are small it is capable of making eye-catching effects’

 

  • Anticipation: In real life movements doesn’t happen suddenly, some sort of preparation is created just before it. Just like a person bending his knee before jumping. If this is added to every transition, the whole animation will feel more life-like.

 

  • Staging: Making an object in focus. Either it is done by placing the main action in the important place or by masking other elements, so the attention will be drawn to what is remaining.

 

  • Straight-Ahead Action and Pose-to-Pose: When every frame of an animation is draw, it is Straight-ahead action. Pose-to-pose is when a series of key-frames are defined and the intervals are filled in later.

 

  • Follow Through and Overlapping Action: when a moving vehicle stops it doesn’t stop its motion suddenly, the passengers will tend to move forward even after the vehicle have stopped. These details are examples of follow through and overlapping actions.

 

  • Slow In and Slow Out: Every movement will be robotic if they don’t have an acceleration and deceleration. This effect is used to create that feel.

 

  • Arc: Objects also doesn’t move in straight lines, they follow curved arcs.

 

  • Secondary action: A secondary action is used to enhance the primary action. An example will be the dust kicked up by a bouncing ball.

 

  • Timing: How long an animation takes to complete is the timing of the animation. This can be used to make objects feel heavier and add character to movements.

 

  • Exaggeration: It is used to make actions more dramatic.

 

  • Solid drawing: People are used to seeing things in three dimensional world, so rules of perspective must be followed by animations too.

 

  • Appeal: This is the character of the work. It is an appealing feeling created by combining details and movements altogether.

 

We don’t have recommendations for website animation softwares but we have a list of free and trial tools to integrate animation into your website.

  • Bounce.j – A free library that lets you create and embed animations into CSS.
  • Animatron –  A web based animation software for editing animations and creative content.
  • Animate.css –  A module that allows animation of HTML document elements using CSS.
  • CodePen – This is for front-end designers and developers. It provides a social development environment.

 

Lot of three dimensional animation website templates are available in the internet. Most of them are paid but you can also find free templates to let you start with something. If you are looking for some inspiring 3d website animation examples, give a google search for that too. Google have an amazing collection. If you are interested in looking at website animation tutorials, these are the basic things you need to know.

  • Input effects
  • Notification Styles
  • Motion blur Effect
  • Jump loader
  • Click impulse
  • Animated Text fills
  • Wobbly Slideshow
  • Motion Basics
  • Elastic Elements
  • Page Loading Effects
  • Responsive Transitions
  • Parallax slider

 

Most of the time animations are saved as GIF, CSS, SVG, WebGL or video. Animations could be as simple as an underline or a full screen video or a background image. Animation effects can help you in attracting user’s attention to the important details in your website. Animations can also be used to categorise options to improve the UX.

The idea of material design was inspired from this art of motion. In its Guidelines to Material Design Google states that motion can tell users that an object is light, heavy, flexible, and big or small. This provides a better understanding for the user. It’s all about using the right move to set the priority, so every move has to be justified. And if everything is placed correctly, just wait for the magic to happen in every eye laid on it. After all it’s just another art form.

Are you confused about animations for your website? We have professionals to help you with. We are ColorMean Creative Studios, one among the leading web design agency in Dubai. Do contact us today for further details about our services.