4 Ways of Boosting UI Design with Vibrant Colours

Ways of Boosting UI Design with Vibrant Colours

Colour has strong effects and impressions for almost everything. When you come into someone’s house, the first thing you would notice is the colour of their house and how it gives you different kinds of vibes depending on what combination of colours it has. That’s why; colour has the most powerful influence for all designs. Not only can it trigger different kinds of reactions, emotions, or moods, it can also boost the audience’s impressions upon seeing it.

The same thing applies to UI design too. For a web designer, colour in UI design is very important because it can draw attention and influence the reaction of the people who see it. Nowadays, designers use vibrant colours for their design. Vibrant is generally used to describe bright and intense colour, although vibrant isn’t a precise colour term, since people will use it differently. Bright colours with cartoonish designs are usually good for entertainment designs and elegantly minimalist colour and styles are well-suited for business designs. Therefore, vibrant colour is one of the biggest UI design trends of 2017.

What makes it unique is that vibrant colour can be applied in different ways and styles to design. In this article, we are going to explore the ways of boosting UI design using vibrant colours!

1. Monotone
Monotone is one of the most popular ways to use vibrant colours for a design. It is easy to create and makes text very readable. Monotone palettes come with a single colour with a mixture of shades and tints. Choose the colour that matches with your message. If paired with perfect typography, monotone colour schemes will create a really amazing look,.

2. Duotone
Duotone is an image created from two colours. It can be either two shades of the same colour, or two different colours. Duotone enables you to express an image with the emotional elements from the combination of any colour. Different colours can stir different kinds of emotions, depending of which colours and its combination you use. For example, the combination of soft and simple colour can represent business-like atmosphere, while the combination of bright colours can express happiness with a positive mood. It also adjusts the colour variations in an image. That way, the text can be placed anywhere on the image and is still perfectly readable.

3. Gradients
Gradients in the combination of the same colour that illuminates from light to dark can give the impression of modernism. It can also improve visual communication, whether it is a full gradient background or smaller places for the gradients. What makes smaller areas of gradient easier and more interesting is that you have more options to be creative with this technique, and when applied in smaller spaces, it can be visually attractive to play with multiple colour pairs.

4. Overlays
Overlaying is the application of semi-transparent coloured box covering an image or a video. It has been a popular design choice for a long time because it is easy to create. However, you have to be careful in setting the degree of saturation and transparency of the colour, because you have to make sure whether the text is still easily readable or not.

Now you know the ways of boosting your UI design using vibrant colours! Whatever you choose between these 4 types, make sure you put the text with the right colour combination so that the text is easy to read and the design is interesting to look at.

How to Scale your business on search engines internationally

How-to-Scale-your-business-internationally-on-search-engines

At some stages, mostly many online sites have a desired to expand. The only way to do it is by creating and offering more products to an international market.  This is not an easy or simple task by any means. Therefore, as a SEO services, web developer or online entrepreneur, you need to learn more about its risks, research and steps involved in expanding your business into an international market.

Considerations and Research
The first thing that you need to know is whether it is the right time to go international. This relates closely to the future and the current needs of the business. The only sign that you are ready to start implementing an international SEO strategy is when you see visitors increment from international locations. Besides looking for international visitors’ increment, you can take some questions below as part of your consideration:

  • Are you able to implement ALL technical fixes?
  • If targeting a different language, do you have somebody to translate?
  • Is the business ready to carry out international orders and process transactions?
  • Do you have the resources to carry out the work and manage each variation in the future?

After asking yourself some basic questions above, now you can move on to further research. As with any new website idea or build, it’s all about making sure it’s a worthwhile venture.

Moreover, conduct a keyword research will be one of the biggest researches to know if there is demand in the locations.

Website Structure
There are many types of different implementations of international, each having different pros and cons. One of them is by leaning towards using subdirectories, but it will depend on the type of targeting you will be using.

These are the main structure types:

  • ccTLD – Domain variations such as example. Fr, example.au
  • subdomain – fr.example.com, au.example.com
  • subcategory – example.com/au/, example.com/fr/

Below is an example of the set up for a website with the subcategory URL structure for the UK and France.  Place your main website on a .com as this tends to be the norm now, but this work the same with .co.uk.

You’ll see variations that include both language and location, but this can be done with just language or just location.


This would mean that we add the following code to our website:

<link rel=”alternate” href=”http://example.com” hreflang=”en-gb” />

<link rel=”alternate” href=”http://example.com/fr-en/” hreflang=”fr-gb” />

<link rel=”alternate” href=”http://example.com/fr-fr/” hreflang=”fr-fr” />

<link rel=”alternate” href=”http://example.com/en-fr/” hreflang=”en-fr” />

We can also add an X-default tag to this piece of code to be safe. This will tell search engines that if there is a URL that is not using this structure that it should default to the URL specified. This would change our code snippet to:

<link rel=”alternate” href=”http://example.com” hreflang=”en-gb” />

<link rel=”alternate” href=”http://example.com/fr-en/” hreflang=”fr-gb” />

<link rel=”alternate” href=”http://example.com/fr-fr/” hreflang=”fr-fr” />

<link rel=”alternate” href=”http://example.com/en-fr/” hreflang=”en-fr” />

<link rel=”alternate” href=”http://example.com” hreflang=”x-default” />

The above links are for our example website. Internal links reference the specific URL rather than the homepage, they use this code with the URLs changed. In fact, example.com should pass through a redirect if you were to change example.com to example.com/en-gb/.

Sitemap Implementation
They tend to be referring to implementing localization through the use of sitemaps, when people talk about using sitemaps and international SEO. In fact, this is another possible solution for different language and countries despite of hreflang. It works the same with hreflang, but sits within a sitemap rather than in the website’s source code.

Metadata & Content
Based on different languages, you can figure out where the demand is by conducting keyword research. This causes metadata needs to be used for each language variation. Moreover, targeting the right variation of the word is used is also important. For example, if the hreflang is aimed to say the page in Japanese, it should be written in Japanese. This is a basic thing that everyone must know, but still many people get it wrong. In-house resource or outside help are also other important factors to help you complete this all before launch.

Above all, do not translate directly from English; this will sound awkward and probably not understandable in another language. In fact, you need to take considerations on some cultural differences when writing new content or trying to sell a product in a different market.

International Google Local
This section will be very important if you have a physical location in the new countries. Moreover, you can create a listing giving full details of their company along with the location through Google My Business. This will be important in building up an organic search presence in a new location. Below are the main steps of local SEO that you can follow:

  • create the location here https://www.google.co.uk/business/
  • add as many details as possible
  • add the address to the most relevant page on your website
  • mark the address up with local schema
  • obtain links from relevant websites in the area or region

Summary
In the end, good preparation is the key to success before scaling a business to target an international market. Without good preparation, it will be impossible to achieve what you initially set out to do.

Best Practices for API Error Handling

Best-Practices-for-API-Error-Handling

As a web developer, we all don’t want to see Error codes in an API response, neither do you. When it happens to you, it can mean one of two things — there was something wrong in your request or your handling that the API simply couldn’t parse the passed data, or the API itself has so many problems. In either situation, traffic comes to a sudden end, and we start trying to discover the cause and solution for that.

Although being unpleasant, errors, whether in code form or simple error response, are incredibly useful. Error codes are probably the most useful diagnostic element in the API space.

Today, we’re going to discuss about the importance and the usefulness of error responses and handling approaches. There are some common error code classifications the average user will encounter, as well as some examples of these codes in action that you need to know.

The Value of Error Codes
As explained above, error codes are surprisingly, but incredibly useful. Error codes in the response stage of an API are essential in communicating failure from a developer to a user. This stage is a direct communication between client and API. It’s considered as the most important step towards informing the user of a failure, as well as boosting the error resolution process.

An error comes randomly and sometimes it’s beyond our knowledge. That’s why error responses are the only constant, consistent communication that we, as the user, can rely on when an error has occurred. Error codes can both clarify the situation, as well as communicate the intended functionality.

For example, an error code such as “401 Unauthorized – Please Pass Token.” You understand the point of failure in that response, especially that the user is unauthorized. However, you also figure out the intended functionality, which means that the API requires a token, and that token must be passed as part of the request in order to obtain authorization.

With a simple error code and resolution explanation, you have already identified the cause of the error, as well as the intended functionality and method to fix that error. It is very useful, especially for the amount of data that is actually returned.

HTTP Status Codes
Before we deeply discuss about error codes and what makes a code good, we need to sort out the HTTP Status Codes format. These codes are the most frequent status codes that the average user will encounter, not only in terms of APIs but also in terms of general internet usage. Although there are other protocols and have their own system of codes, the HTTP Status Codes dominate API communication, and vendor-specific codes tend to be derived from these ranges.

  • 1XX – Informational

The 1XX range has two basic functionalities. First, in the transfer of information concerning the protocol state of the connected devices — for example, 101 Switching Protocols is a status code noting that the client has requested a protocol change from the server, and that the request has been approved. The 1XX range also elucidates the state of the initial request. For example, 100 Continue, notes that a server has received request headers from a client, and that the server is waiting for the request body.

  • 2XX – Success

The 2XX range notes a range of successes in communication, and combines several responses into specific codes. The first three status codes excellently determine this range, like 200 OK means that a GET or POST request was successful, 201 Created indicates that a request has been brought to completion and a new resource has been created for the client, and 202 Accepted shows that the request has been accepted, and that processing has begun.

  • 3XX – Redirection

The 3XX range is all about the status of the resource or endpoint. When this kind of status code is sent, it confirms that the server is still accepting communication, but that the contacted point is not the accurate point of entry into the system. 301 Moved Permanently denotes that the client request did reach the correct system, but this request and all future requests should be managed by a different URI. This is very convenient both in subdomains and in moving a resource from one server to another.

  • 4XX – Client Error

The 4XX series of error codes is probably the most well-known because of the famous 404 Not Found status, which is a prominent marker for URLs and URIs that are formed in the wrong way. However, other more useful status codes for APIs are in this range.

414 URI Too Long is a common status code, indicating that the data pushed through in a GET request is too long, and should be changed into a POST request. Another common code is 429 Too many Requests, which is used for rate limiting to note a client is attempting too many requests simultaneously that their traffic is being rejected.

  • 5XX – Server Error

The 5XX range is reserved for error codes notably related to the server functionality. Whereas the 4XX range is the client’s responsibility (meaning that it is a client failure), the 5XX range explicitly notes failures with the server. Error codes such as 502 Bad Gateway, which marks the upstream server, has failed and that the current server is a gateway, further reveal server functionality as a method of showing where failure is transpiring.

Making a Good Error Code
With a strongly-built comprehension of HTTP Status Codes, we can start analyzing what actually makes for a good error code, and what makes for a bad error code. Quality error codes not only convey what went wrong, but also why it went wrong.

Excessively obscure error codes are very inconvenient. Imagine that you are trying to make a GET request to an API that manages digital music inventory. You’ve submitted your request to an API that usually accepts your traffic, you’ve passed the correct authorization and authentication credentials, and you think the server is ready to respond.

You send your data, and receive this kind of error code: 400 Bad Request. Without additional data and without more information, what does this mean? It’s in the 4XX range, so you know the problem was on the client side, but it doesn’t explain and solve anything, other than “bad request.”

This explains that a “helpful” error code is not as helpful as it should be. We could easily make that same response helpful and clear with less effort. Good error codes must pass three essential criteria in order to be functional, such as:

  • An HTTP Status Code, so that the source and realm of the problem can be confirmed with ease;
  • An Internal Reference IDfor documentation-specific notation of errors. In some cases, this can substitute the HTTP Status Code, as long as the internal reference sheet inserts the HTTP Status Code scheme or similar reference material.
  • Human readable messagesthat conclude the context, cause, and solution for the existing error.

From this discussion, we can conclude that error codes are useful if inserted with messages conveying what goes wrong and why it goes wrong, topped off with the human readable messages emphasizing the solution that we can take and do to handle it. That way, we can effortlessly handle it when future errors occur spontaneously.