Archive for the ‘Graphic designing’ Category

Anticipatory Design- The Next Level of Designing

The designing advancement has introduced a new designing pattern called ‘Anticipatory Design’. It is a pattern which is one step ahead of the user. The design pattern within the field of predictive user experience (UX). The idea behind it is to reduce the cognitive load of users by making decisions on their behalf.

anticipatory-design   It is different as compared to other patterns. The main difference is that these decisions are made without any input from the user at the time. The goal of creating this pattern is to provide a seamless experience to the user.
In simple words, the Anticipatory design is a design that knows what the user is looking for beforehand. It takes them to their destination smoothly and efficiently. In fact, tech giants like Facebook, Amazon, and Google are using it to enhance the user experience by showing them what they want to see.

Automation is on its way!

It can be seen as the automation of our thought process. Internet of Things has changed our way of life, and anticipatory design is one of its product. Our data is interpreted by machine learning algorithms to provide us the best experience. 1-7L5dA1Cqb8Jz5aU1X900BA The anticipatory design is a mixture of three things- learning (Internet of Things), predicting (Machine Learning) and anticipation (UX Design).

How is it evolving UX?

UX designing is a craft which is changing rapidly; interactions, increasing responsibilities, and forms influence the user’s mindset. User interfaces take different forms according to different users. UX designers are trying to get into user’s head to increase the engagement. But along with this, experience designing and automation requires discussions and design practices to reduce the forecasted design challenges. Anticipatory Design Image 1

Wrapping up

Predictable UX is an increasingly growing field of expertise. The UX designs are changing with the time. It is shifting toward the Artificial intelligence that is meant to make things easier. Though it could be the next big thing for the generation, you should be aware of what could go wrong when the user has to choose between forceful action and anticipated action.

Essential Rules of UI Design

In the era of technical advancement, we focus too much on design. We hardly realize that functionality is as important as designing. If you are also planning to develop and designing an app, website, or software, just keep in mind that a balance of designing and functionality will be the reason for your success. But designing itself has a world of its own. We almost forget the essentials in order to achieve the best. The evolution in designing is constant, and there is always something new to learn. One should focus on bringing out function and aesthetic at once. And to stay on the top of the game, here are essentials you have to follow-

1. Focus on Usability

One single design would never work in different type of devices. With the downfall in desktop usage, a designer has to be very careful while designing UI. So, a designer is supposed to make UI that fits in all the screen sizes. Image result for focus on usability ui In the past, developers were highly concentrated on creating a good UI for desktop. But mobile usage has increased in 2014. So, it is important to pay attention on mobile UI and making responsive designs which increases user engagement.

2. Be clear

Image result for clear ui Users nowadays don’t have enough time to pay their full attention to one task. So, the designer is required to keep the design simple and easy to understand. Use simple language, so that they can understand it all at once. They don’t have to do a second guess. Avoid using technical terms and focus on a familiar language and font style. Make call-to-action as easy as possible.

3. Prevent errors

Image result for human errors Humans are prone to make mistakes, but if you make mistakes on websites, they would become roadblocks to your visitors. If something goes wrong while loading a page, it distracts the customer. When designing, a designer should focus on eliminating the possible errors as well. Though this problem is 80% solved during the testing phase, a designer should try to rectify those errors in advance.

4. Consistent interface

Image result for consistent user interface Designing consistency is important as it makes UI & UX better. Here, consistency refers to making things continuous, predictable, and within expectation. Try not to surprise the customer with unexpected results. It make users second guess their decision, and they ultimately move on to the next best option. Ensure consistency of processes, functionality, appearance, and terminology.

5. Context

Image result for context user interface If you are wondering what context is, here is the answer- “Context is how we are connecting new ideas together with the old ones, building relationships and meaning in our world”. You have to apply contextual design in your UI. It could be the location-based, time-sensitive and situation-based design of a website or the app so that it can deliver the most relevant data. Context is a key to human relationships and also a basic element of designing.

6. Defaults

Image result for default actions in UI Customizing things is what every designer loves. It allows customizing interfaces, wallpapers, ringtones, etc. Though people don’t bother so much about it, most devices and other consumer electronics purchased almost never get changed. People generally don’t fix you phone to factory set, until it is the only option. And this fact means designer should make sure that the default setting should be applicable to a large batch of users.

7. Guided Actions

Image result for guided actions in app You should count ‘guided actions’ as a core rule of designing. When you are designing an interface, always make sure that you tell your user what has to be done. They don’t take actions unless they are asked to. That is what we call ‘Call-to-Action’ tactic. If you know the purpose of your app, it would be the easiest task for you. Every business requires an action from the customer, so ensure that your user knows what they have to do next.

8. Feedback

Image result for feedback in app Whether you have a small business or a full-fledged firm, user satisfaction is an important thing. A feedback basically helps you to know what could be done to grow your business, or how to make an app or website better. It could be as simple as running a survey or adding a ‘Complete’ notification once a form is submitted. The system should be able to offer feedback that is relevant, fitting in importance and urgency, comprehensive and sensible and contextual.

CONCLUSION

Designing is an art, and you will grow only if you know how to experiment. But always ensure that you are not missing out on the smaller things to achieve bigger things. It could cause you a long term harm. Experimentation is the key become better with a dash of basics.

Mobile App Designing Principles

Business and technology go hand-in-hand now. The more technical advanced you are, the more business you would be able to get. Gone is the time when only a few people had mobile phones. Now, most of the people have mobile phones, and they are the ones who make or break your business. And this is the reason, mobile app development market is on the top. Mobile apps are the source by which user gets software in their hands and form their relationships with businesses. Mobile_App_UX_Principles_cove_A4_final But there are some ground rules or principles for mobile app designing. You cannot develop and design a random mobile app, and expect it to be successful. Designing and development should have a balance. And for this purpose, you need to know about these core principles-

1. Purpose of the app

Image result for mobile app designing principles Users should understand the purpose of the app right from the moment they see the name of the app. It should be clear from its name, description, UX, etc. In short, each and every aspect of the app should be apt. No matter what is its purpose, it should focus on a goal, and every aspect should have the power to engage the user.

2. Revenue mode

Well, most of the people think that high rank and most number of downloads can bring the money to the owner, but unfortunately it is absolutely wrong. Rank and numbers definitely bring some money, but it should not be the primary way to earn. It is almost impossible to earn money without a clear strategy. Though making money should not be the sole purpose of the app, but it should be on your list. The only way to make a good revenue model is by knowing your app properly.

3. UX, Color, UI

Image result for mobile ui and ux design The first thing that attracts a user to your app is its appearance. Poor UX can convert your potential customer into never returning user. The purpose of downloading an app is to solve a particular problem, and if your app is clumsy, it would have a major negative impact on the customer. The color psychology in design and commercial space is a topic that predates the digital age but its rules are timeless. The appearance of the app has to be on point.

4. Navigation or search

Image result for mobile app designing principles If it is difficult to find out one thing in your app, you will probably lose 60% of your customers due to this. Navigation is one of the most important aspects of designing a good app. If the app has a larger than normal set of functions or content, there should be a convenient search bar.

5. Well defined data structure and flow

Image result for we defined data flow and structure Mobile phones are the most powerful as compared to any other device, but they have certain restrictions such as processing speed and bandwidth. The designer must pay attention to the data flow of the app. There is no reason to add unnecessary information and the user doesn’t have enough patience to sit and wait for the app to respond.

6. Conversions

Image result for mobile app conversion This principle is majorly targeted for e-commerce apps. An e-commerce app is considered successful if it can convert a user into a customer. There are few things that need to be present in an e-commerce app for better conversion rates-
  • provide the previous search and purchase information,
  • allow user reviews to be viewed and filtered,
  • enable comparison shopping features,
  • provide multiple third-party payment options
  • make it easy to add and manage payment methods.

7. Stats & Analytics

Image result for stats and analytics of mobile app Tracking and analyzing is definitely the most important thing. How would you know whether your app is successful or not? How would you know what should be done to make it better? Well, the answer is by analyzing the data and information. You will get to know where, when, and how a user is engaging with our apps.

8. Product roadmap and upgrade model

Image result for product roadmap Roadmap and upgrade model are pretty much related to each other. Developing an app is one thing, but never updating it would surely ruin your business and work model. Analysis and product statistics basically give you an idea about what can be done to make your app better. But you should also decide and strategize what you are going to do next.
And the most important part of the designing and developing a successful app is “do one thing, and do it well”. Research, analyze, understand and then develop the app. If you are outsourcing your app development, then make sure to give the developer every possible thing to get good results.  

9 Ways to Enhance Mobile App User Experience

The success of mobile app depends on different factors, and the user experience (UX) is one of them. A good UX can completely turn over the tables. But an optimal UX can only be designed with a thorough understanding of your user base and psychological underpinnings. It is not a one-time task, the users nowadays expect more than just a regular app. A designer needs to be up to date on the latest technology trends. Let us outline the ways through which you can enhance the user experience for a mobile app-

1. Error-Free Functionality

According to the statistical report of Experience Dynamics, 90% of the users stopped using a particular app because of poor performance, and 86% of uninstalled the app due to functionality flaws. However it is difficult to have an app with perfect functionality, but a good designer can achieve 97% of functionality rate. Image result for error free functionality in app

2. Efficient Onboarding

The onboarding determines the success and failure rate of a product. And if the user is having trouble with it, they will end up uninstalling the app. The goal of onboarding is to demonstrate how the users can attain what they are looking for. Image result for efficient app onboarding

3. Usability

It is basically the layout of information, content, design and some other elements which help the user to achieve the goals. Help your user to understand the app. Image result for app usability

4. Reduce Search Effort

If there are many products on your mobile app, the user may end up getting confused. Using better search options like filters, barcode scanner, keyword search etc. It ultimately increases the conversion rates. Image result for search on mobile app

5. Limit User Input

Users hardly like to put a lot of information on a mobile app. Make the login task easier by adding signup via social media handles. Image result for limit user input in mobile app

6. Integrate Behavioral Gesturization

There are certain things everyone is comfortable with. Integrating gesturization refers to the actions the user perform while interacting with your app like swiping, scrolling, pinching, etc. Having some common behavioral gesturization makes the user comfortable using your app. Image result for app usability

7. User Assistance

User assistance is one of the most important things. Calling customer service to resolve a query should not be the only option. Add FAQs, personalized chat process to solve the customer’s queries. Image result for FAQ in mobile app

8. Personalized UX

Personalization not only means storing user’s previous actions but it also refers to the recognizing the user’s shopping pattern so that you can suggest some things to them. Image result for personalized ux in mobile app

9. UI Design

Lastly, a quality UI design is mandatory. Your UI should have a high glanceability rate. Glanceability refers to how easily the visual design conveys the information. Create visual consistency with the color palette, typography, and all other design elements.
Also Read:Essential Rules of UI Design
Image result for ui design User experience is one of the major aspects of a mobile app. Users are always attracted to simple, attractive, and sorted things. So, rather than making it complicated in the name of creativity make it simple. And make sure it looks refreshing and engaging to the user.

Struggling between hiring an agency or a freelancer? Here is a solution!

Choosing between hiring a technology firm and a freelancer is undoubtedly one of the most confusing things. Everyone go through this struggle. The website is a reflection of a company. It defines their work, and give the visitor a rough idea about the company’s profile. One cannot put the company’s reputation at stake to save a few bucks. In this article, we will try to make your decision easier. There are few things you need to know about project & company before hiring.  Let us check out-

1. Know the scope of your project

Image result for scope of project The first thing you need to know is the scope of your project. Evaluate the needs & requirements of your project. Analyze the team requirement and size. You need to decide what kind of website you want to develop. If your project requires a large team, then a freelancer would not be a good choice for you.

2. Hire the right skill set

The right skill set refers to the difference between designing and development. It makes a huge difference. If you are uncertain about these things, you need to go back to the scope of the project, and then decide.
  • Web Designer: The designer develops the look and flow of the site. They work on HTML & CSS most of the time.
  • Web Developer: They are programmers who are primarily focused on coding, mechanics, and functionality of the website. They work on different frameworks and languages.
Now you can easily select which one do you want.

3. Look at their portfolio & experience

Image result for company portfolio Before jumping into an agreement or contract, you need to check out if they are reliable. Check their previous work, portfolio, website, etc. If you are planning to hire a freelancer, then you should check his/ her work profile on those websites.

4. Get to know them

Image result for teamwork Narrow down the candidates, and get to know more about them. Know more about their previous work, check out their reviews on different platforms. Good communication is critical, especially if you’re working with a remote team. Do they reply to your emails on time? Would it be possible for them to provide templates on time?

5. Hire!

Now, you have crossed all four steps, you are ready to hire the team! Image result for hire! You need to be careful while hiring someone for your work. There will be advantages and disadvantages, but you need to evaluate the pros and cons of both, and then make the decision.  

Introduction to Sass for Beginners

Sass can be considered as CSS with superpowers. It is an extension to CSS that helps a person to write in more flexible styles. The world SASS stands for Syntactically Awesome Style Sheets which was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Image result for sass There are extended features in Sass in comparison to CSS. It helps to make larger and complicated stylesheets clearer to understand and easier to maintain. The new features include mixins, nesting, variables, inheritance, etc. Apart from this, the code is more organized and allows us to work quickly. Writing a code in Sass is not similar to writing it in CSS. For converting a Sass code into CSS code, you need to use a compiler. And you need to be very careful while coding.
Also Read:Anticipatory Design- The Next Level of Designing
  There are different compilers and apps that can help you to achieve your goal-
  • Hammer
  • CodeKit
  • Compass
  • Koala
  Before going forward, just make sure that you do not get confused by the two syntaxes of Sass. There are two different ways to write the code, though both of them produce the same result. The intended syntax and SCSS files are traditionally given the extensions .sass and .scss respectively. We will be using .scss syntax in this article-  

#1 Variables

Variables can change a code quickly. The concept is similar to other languages. It stores a certain value inside, acceptable values for variables include numbers, strings, null, lists and maps.   In Sass, it can be declared with ‘$’ symbol followed by the name of the variable. In the following case, ‘blue’ is the variable followed by ‘$’ symbol.
  1. /*
  2. // We define the variables.
  3. */
  4. $blue: #3498db;
  5. $red: #e74c3c;
  6. $background: #34495e;
  7. /*
  8. // We apply the variables.
  9. */
  10. body {
  11.  background-color: $background;
  12. }
  13. h1 {
  14.  color: $blue;
  15. }
  16. p {
  17.  color: $red;
  18. }
It compiles to this:
  1. body {
  2.  background-color: #34495e;
  3. }
  4. h1 {
  5.  color: #3498db;
  6. }
  7. p {
  8.  color: #e74c3c;
  9. }
These are just basic things, there are a lot of things which can be done with Sass.

#2 Nesting

Nesting concept is usually used in structured programming languages. It is related to the control structure enclosing into one another. There are different indentation levels in the code, but it is preferred that more than four levels of nesting should be done. Sass allows us to use CSS rules and keeps you from unnecessary repeating. Let us see the example to understand this feature more-
  1. ul {
  2.  list-style: none;
  3.  li {
  4.    padding: 10px;
  5.    display: inline-block;
  6.    a {
  7.      text-decoration: none;
  8.      font-size: 16px;
  9.      color: #333;
  10.    }
  11.  }
  12. }

#3 Extend/Inheritance

Inheritance, in general, is a very powerful feature in programming languages. This concept lets us share sets of CSS properties with one another. It helps to keep the code DRY. It is used when we need similar-styled elements that need some details. Let us understand this with an example by making two buttons- primary and secondary-  
  1. $blue: #3498db;
  2. $red: #e74c3c;
  3. $white: #fff;
  4. .btn {
  5.  display: inline-block;
  6.  padding: 6px 12px;
  7.  font-size: 14px;
  8.  text-align: center;
  9.  border-radius: 4px;
  10.  color: $white;
  11. }
  12. .btn-primary {
  13.  @extend .btn;
  14.  background-color: $blue;
  15. }
  16. .btn-secondary {
  17.  @extend .btn;
  18.  background-color: $red;
  19. }
It compiles to this:
  1. .btn, .btn-primary, .btn-secondary {
  2.  display: inline-block;
  3.  padding: 6px 12px;
  4.  font-size: 14px;
  5.  text-align: center;
  6.  border-radius: 4px;
  7.  color: #fff;
  8. }
  9. .btn-primary {
  10.  background-color: #3498db;
  11. }
  12. .btn-secondary {
  13.  background-color: #e74c3c;
Here Sass combined the selectors instead of repeating the same code. It saves our time and memory as well.

#4 Mixins

Mixins allow a developer to make groups of CSS declarations that could be reused for our websites. One can pass values as arguments that allow our mixin to be more flexible.
Also Read:Essential Rules of UI Design
The @mixin directive is used to define mixins and @include directive is used to use them. Let’s build a simple basic mixin border-radius that we can use for buttons.  
  1. /*
  2. // We declare the mixin.
  3. */
  4. @mixin border-radius($radius) {
  5.  -webkit-border-radius: $radius;
  6.     -moz-border-radius: $radius;
  7.      -ms-border-radius: $radius;
  8.          border-radius: $radius;
  9. }
  10. /*
  11. // We apply it on our button.
  12. */
  13. .btn {
  14.  @include border-radius(4px);
  15. }
It is compiled to this:
  1. .btn {
  2.  -webkit-border-radius: 4px;
  3.  -moz-border-radius: 4px;
  4.  -ms-border-radius: 4px;
  5.  border-radius: 4px;
  6. }
This is an efficient way of using mixins if a property requires prefixes to work in all browsers.
Also Read:9 Ways to Enhance Mobile App User Experience

Bottomline

So this is all as an introduction to Sass. There is a lot more in Sass. It is a powerful tool that helps us to design incredible things. Being an extended version, it definitely gives us extended functionalities.    

7 Mistakes Professionals Make in Design Usability

Giving tips on how to do things is easy, but giving tips about mistakes make things easy. A person always learns from mistakes. So, today we are going to talk about the mistakes professionals make in design usability. These mistakes can cause a long-term loss. Let us check out the mistakes-

– Imbalance of creativity and simplicity

Image result for creativity and simplicity balance There should be a good balance between creativity and simplicity. When it comes to designing website pages for a website, it becomes important to keep a balance. Users are habitual with things they see. Placing the usual things at different places could confuse the user. Creativity is not about messing things up, it is about creating something innovative. You don’t need to confuse the users to become creative.

– No search option available

Well, there are many things on one page of a website. There are chances that the user comes to the website looking for a particular thing, and could not find it, this is where search option helps. If search option is not available on every page of the website, there are chances that user might not return to the website. The website given above looks beautiful, but there is no search option which makes it difficult for the user to navigate.

– Navigation structure

Image result for navigational structure Navigational structure is one of the most important aspects of website design. Having a complicated navigation structure may confuse the user. Using breadcrumbs in navigation structure helps the users to know where they are on the website.

– Copied content

Image result for copied content Content makes a huge difference between you and other websites. Putting copied content on your website may not look good on your portfolio. So, content should be interesting as well as original.

– Dead links

Image result for dead links Like the content, one should also keep a track of links on the website. Sometimes old links do not work on the website which causes inconvenience to the user. Dead links directly affect the user engagement. You can easily find dead links with Google webmaster tools and other online software.

Not considering mobile users

Image result for go mobile or good luck Well, we all know that mobile users are the source of traffic on websites. Most of the people use internet on their phones, so if you are not making a mobile friendly website, you would end up losing a lot of customers.

–  Ignoring contact us page

Image result for no contact us page How would people contact you, if there is no contact us page? It is important as it is the first step toward clients commitment.

Summing up

Though these things were basic, but professionals make these mistakes. And the company sometimes end up losing customers because of this mistake. So, you need to keep a check on these things which getting your website developed.  

If You Are a Designer, Here are 7 Websites Where You Can Showcase your Talent!

Designers are going places nowadays. They are in the era where they are the masters of creativity. And if you are doing something creative, it is obvious to showcase it to become better, and getting recognition. There are many ways to showcase your talent. No, I am not talking about making a website for your work portfolio. Everyone does not know coding and cannot spend money for showcasing their talent. Then what is the solution? Well, now you don’t have to worry about it because there are many websites which can help the young talent to exhibit their talent.

First of all, why do a designer need to make profiles on different platforms? The reason is to get recognition. If you want to be a preference you should have something better than others to offer. But how will the clients get to know if you are the best choice? The answer is by checking out your profile or portfolio on different platforms.

So, here are 7 platforms for rising talent to showcase their talent:

1. Flickr

1   Flickr is now a venture of Yahoo!. However, there is a lot of competition on Flickr but getting recognition on Flickr is easy. Using Flickr as the mean to showcase your portfolio can get you the benefits made available by Yahoo! And your work could be easily crawled.

2. Wix

2 It is a free website builder. There are no coding issues.  You can build your website easily even if you do not have any idea about coding. It has essential tools that you may need to build a strong online presence.

3. Dribble

3 It is a networking community for designers, illustrators, and web developers.It allows designers to share screenshots of the current projects and other users will give opinions on it.

4. Behance

4 Behance is one of the easiest websites to showcase the creative talent. The website has million of visitors in a month which will increase your chances of getting hired by professionals.

5. Carbonmade

5 Carbonmade is another platform among the best ones. It comes with two options: free and paid. The free account has limited options which include- 5 projects and only 35 images to be uploaded. The paid version has better options.

6. Cargo collective

6 It is another networking website. You need to build a network with other designers which will help you get more traction and recognition via your work. If your work is really good, you would stand a chance to get featured on the platform. 

7. Adobe portfolio

7 It is a platform where you can build a responsive site for your creative work. Apart from this, it lets you connect with your Behance profile to import your existing projects and keep your portfolio in sync.
We are in the digital age, and we have a lot of opportunities to showcase our talent. If you are a designer, you should showcase your talent not only to get recognition, but also to improvise as a designer. Suggestions and opinions always bring out the best in you.