Wednesday, 23 May 2018

What We Can Learn From Redesigns of Iconic Food Logos

How can you tell if your brand is working for you? And what does “successful branding” even entail?

Branding is tricky in that it’s generally difficult to assess ROI. Done well, and it can breathe life into a struggling company. Done wrong, and it can ruin the perception of even the most well-established brands. While there are many aspects of successful branding, perception often starts with the logo. It’s the face of your brand, appearing everywhere from billboards, business cards, packaging and even the product itself. This is why companies spend a great deal of time and money into creating and often times re-creating the perfect logo.

So what is it about branding that burns itself into a collective memory? In an effort to better understand the most important parts of a logo, this design study of over 8,000 people in the United States gave participants a multiple choice test to see if they could identify the real logo of eight iconic food brands when it was placed in a line-up with imposters. It explores elements like color, font and tagline to see what was remembered most by consumers.

The idea was to gauge which parts of a logo left an impression on individuals and which were fungible. Looking at the survey results, you can see what individuals recognized most about the logos of iconic food brands like Arm & Hammer, Chicken of the Sea and French’s. See how the rebranding efforts and food logo redesign of these major companies have impacted their brand image among consumers.

Arm & Hammer

food logo redesign

food logo redesign

Chicken of the Sea

food logo redesign

food logo redesign

Check out more iconic food logo redesign stats here.

The post What We Can Learn From Redesigns of Iconic Food Logos appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/food-logo-redesign/

Monday, 21 May 2018

Best Practices for Designing Push Notifications

Notifications are a crucial part of any app. Not only are they a key part of keeping users engaged with your application: many apps require notifications for their basic functionality. You won’t have much of an email app, for example, if you don’t have notifications. But the line between good notifications and bad notifications is fairly clear. What can you do to make sure you stay on the good side of that line when designing push notifications and desktop notifications?

This post will focus on push notifications for mobile devices. However, the same rules apply to desktop notifications.

Ask at the right time

Some apps ask users to enable push notifications at first launch. As a user, how likely do you think you would be to say yes? Unless you’re an auto-clicker, you’re unlikely to accept that. This will only work when the requirement for push notifications is immediately obvious (see food delivery and ride-sharing apps). Otherwise, users don’t want to open the door to potential notification spam. They don’t yet know what your app does, if they like your app, or if they even want to keep in on their device. Why should they give your app special permissions before they can even evaluate it?

Wait to ask for notification permission until the user can understand what they’re for and why you need them. Let’s say the user just ordered a delivery. At this moment, throw up a popup to ask if they want up-to-the-second updates on their orders. Explain that they’ll need to enable notifications for this functionality. You’re far more likely to get affirmative permission this way.

designing push notifications

The same goes for asking users to turn on notifications during your app’s onboarding process, as Hopper does. The copy explains why the notification will be useful to the user, and what they’ll gain as a result of enabling them.

You can also store a settings toggle, but that’s less likely to draw user attention. This is the best move for apps that really have no explicit need for notifications. Take Overcast, a podcast app. It allows you to set notifications for new episodes, but there isn’t much a situation where the app could prompt the user. So, since Overcast respects its users, the notification settings are stored in toggles.

Restrain yourself!

Notifications are not a mandatory component of your app. Sometimes notifications are a bad idea. Before designing push notifications for your app, you should be absolutely sure that they’re either necessary or valuable to the user. If they’re not, any smart user will disable notifications.

user push notification analytics

And users are already wise to the notification spam game. Research conducted by Localytics shows that 52% of users view push notifications as “an annoying distraction.” Other data from Kahuna shows that many users choose to disable push notifications. Classified by app type, the data show that nearly ever user opts out of social media and news push notifications, likely due to notification spam. Ride-sharing is more successfully, but that’s mostly thanks to the functional requirement for push notifications. The user wants to know when their ride arrives, so the notifications serve an obvious, useful purpose.

user push notification desktop notification disable

User’s disinterest in push notification was created directly by our industry. Developers weren’t careful about push notifications. They pummeled users with an avalanche of desperate “look at me!” notifications, begging for any strategy to drive user engagement. User’s hate that. You must earn permission to annoy the user: it is not when they install your app.  So before you default to push notifications as a tool to drive engagement, consider whether you’re being annoying, or whether you’re providing a truly useful functionality to your users.

Transactional and engagement push notifications

designing push notifications problems

A perfect example of terrible engagement notifications. Image via Reddit.

Transactional push notifications are used to deliver information to the user at a specific time. When you get notifications about an order shipping, your driver arriving, or a flight delay, these are all transactional notifications. They’re the most useful and practical notifications. Users see the value in this type of notification.

Engagement notifications are used to get the user to open your app. These are generally the most irritating for the user. They bug you to open the app, with a prompt that’s supposed to gin up your interest. The problem is, most of the time, the content isn’t interesting. Engagement notifications are typically a transparent attempt to get you to buy something or open the app. And users hate that.

If you’re designing push notifications to improve engagement, you must be judicious. Use them with great care and precision. Make them practical and useful. Allow users to customize the types of things they’re bothered about, or use user data to guess what the user would like to hear about. Provide toggles to select the types of sales they’re notified about, or alert users to things they’ve shown interest in.

Steam, for example, pushes a notification when an item on your wishlist is on sale. This encourages the user to open the app, since they’ve already shown interest in the product, and it’s useful: who wants to miss a sale? The notification could be improved by informing the user about the specific game on sale, or taking the user directly to that game’s page instead of their general wishlist. But it’s a good example of a more useful engagement notification.

Make microcopy useful and direct

Explain the value of the notification in clear, direct language. Image via Braze.

Every push notification has two main parts: title and text. Make sure both of these things are useful. The title is like an email subject line: it should grab the user’s attention and encapsulate the content of the notification. The text below that is the body text. This is where you flex your microcopy muscles. Use active, punchy language that clearly explains why the user will be happy to receive this notification. “New sale items available” is bad, since it’s generic and vague. “Men’s Khakis on Sale Now” is better, but only actually useful if the user is a man that would buy khakis.

Personalizing notifications is the best way to improve engagement and clickthrough rates. Remember that personalization means more than just the user’s name. With marketing automation, you can slice users into small segments and send notifications that are especially relevant to that segment. If you improve usefulness, you’ll improve user engagement.

Provide notification actions (if relevant)

Both iOS and Android provide a framework for interacting with notifications in custom ways. Users can swipe on notifications to reveal other options. If you have the coding chops, make sure you provide relevant, useful actions. Replying to a message or archiving an email can both be done directly from the notification. If a notification enables a meaningful interaction, users are more likely to appreciate it.

As with all user experience design, you’ll need to create a narrative for your user interaction. What do they want to do at this point? What should be available as a pull down action, and what should show up on a swipe? Will tapping the notification simply open the app, or go to a specific page?

Not every push notifications will have relevant contextual actions. Some types of notifications, especially engagement notifications, simply want to the user to open the app. Provide actions when relevant, but don’t kill yourself trying to come up with something that runs counter to your goal.

Designing push notifications with respect

designing push notifications

User experience design starts with respect. You need to respect the user’s goals, time, and intellect. Spamming users is ineffective and counter-productive. Designing useful push notifications is hard, but the effort will be rewarded with a positive user experience. Don’t make trash because someone says it’ll push up engagement numbers.

You might also like the following posts:

Best (And Worst) Practices for Collecting Email Addresses

Your Guide to Developing Microcopy Like a Pro

Microcopy Tips to Improve Your Site’s UX

Image credit: designed by Freepik

The post Best Practices for Designing Push Notifications appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/best-practices-designing-push-notifications/

Friday, 18 May 2018

Simple Bootstrap Powered Login and Signup Form

These days, the bulk of the traffic to websites originates from devices other than desktops. A small portion of it is from laptops but the major portion is from mobile devices of various screen sizes.

Gone are the days when businesses used to create separate desktop and mobile versions. In addition to being cost inefficient, maintaining two versions is a recipe for disaster. This is an important reason why frontend frameworks have become an essential part of the web developer toolkit.

Bootstrap is an open-source framework that uses HTML, CSS, and JavaScript to enable developers build awesome web applications. Bootstrap can be used to build applications for both desktop and mobile platforms. Bootstrap is particularly popular for building app frontend that scale to fit all screen sizes. With Bootstrap, developers ( and designers) could easily change all aspects of the frontend to fit the design and the UX requirements. For this reason, Bootstrap enabled themes have become mainstream in the recent years.

Login/signups are an essential component of all applications. In many cases, these forms are often the first thing a user encounters. If the design of these forms is inadequate or inconsistent with the UI design of the rest of the app, the user will have a hard time using the app.

In this short tutorial, I will demonstrate how to create a Bootstrap based component for the app UI. I will start with the signup form because it is the first form a new user sees. I will then show the code for the login form for the app.

Why Use Bootstrap?

A simple reason behind the Bootstrap’s popularity is the fact that it offers simple solutions for the common issues faced by the web developers. In many cases, Bootstrap is the ideal tool for creating headers and footers, responsive navbars, glyphicons and fonts, jumbotrons (banners), galleries, slideshows and other dynamic components.

Developers could use Bootstrap without worrying about integrating components into pre-existing frontend. The developers could build the components using the framework and then style them through custom CSS that confirms to the existing design requirements of the app. In many real world projects, developers often plugin pre-written snippets to add desired functionality in minimum time   

Several common use cases of using Bootstrap in frontend projects include building complex layouts on a 12-column grid, creating device-specific layouts (that focus on responsive design) and ensure cross-browser compatibility (testing to check if the code works in popular browsers including Chrome, Firefox and Edge).

Prerequisites

For the purpose of this tutorial, I assume that you have PHP powered stack (a LAMP stack would do)on your web server.

To make sure that I don’t get sidetracked by server level issues, I decided to host my app on Cloudways PHP 7 hosting because it takes care of server and app setup and offers a powerful dev stack right out of the box.

Include Bootstrap Files via CDN

Content delivery networks (CDN) are files hosted on the web that you can include in your project. Using a CDN is the fastest way to setup Bootstrap within your project.

MaxCDN hosts the latest version that you could include in your code by using the following lines:

   <!– Latest compiled and minified CSS –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css“>

Later, I will implement Bootstrap features that depend on Bootstrap JavaScript as well as jQuery, so add them to the head element now. Add two script tags below the link tag:

   <script src=”https://code.jquery.com/jquery-3.1.0.min.js”></script>

   <script src=”bootstrap-3.3.7-dist/js/bootstrap.min.js”></script>

 <!– Latest compiled and minified JavaScript –>

   <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

Setup Bootstrap

First, download Bootstrap Framework and then exact the folder by using  command line or file manager. Next, copy the newly unzipped bootstrap-3.3.7-dist folder to the project’s root folder. Once done, you will see the following folder structure:

bootstap-powered form

Create Signup Form View

The following code will create the view for the signup form:

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

 <link rel=”stylesheet” href=”main.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

</head>

<body>

 

 <div class=”container”>

 <div class=”row”>

   <div class=”col-md-3″></div>

   <div class=”col-md-5″>

<div style=”background: #00cb82;color:white; text-align:center”>  

<h3><i>Sign Up</i></h3>

   <p>Please fill in this form to create an account.</p>

</div>

   <hr>

<form>

 

<div class=”form-group”>

       <label for=”inputName”>FirstName</label>

       <input type=”text” class=”form-control” id=”inputName” placeholder=”Name”>

   </div>

<div class=”form-group”>

       <label for=”inputLastName”>LastName</label>

       <input type=”text” class=”form-control” id=”inputLastName” placeholder=”LastName”>

   </div>

   <div class=”form-group”>

       <label for=”inputEmail”>Email</label>

       <input type=”email” class=”form-control” id=”inputEmail” placeholder=”Email”>

   </div>

   <div class=”form-group”>

       <label for=”inputPassword”>Password</label>

       <input type=”password” class=”form-control” id=”inputPassword” placeholder=”Password”>

   </div>

 <div class=”form-group”>

       <label for=”inputrePassword”>Retype Password</label>

       <input type=”password” class=”form-control” id=”inputrePassword” placeholder=”Retype Password”>

   </div>

   <div class=”checkbox”>

       <label><input type=”checkbox”> Remember me</label>

   </div>

   <button type=”submit” class=”btn btn-primary” style=”width:100%”>Register</button>

</form>

<div class=”hint-text”>Already have an account? <a href=”index.html”>Login here</a></div>

</div>

</div>

</body>

</html>

The following screenshot shows how the above code would look in action. As you can see the form is very simple. The good thing is the easy extension of this form by adding/removing fields. For this, you could simply modify the HTML template.

 

bootstrapped-powered sign up form

Create Login Form View

Bootstrap offers several classes to create beautiful and creative looking forms, button, and other UI elements.

Create a file named index.html file and paste the following code in it:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

 <link rel=”stylesheet” href=”main.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

</head>

<body>

<div class=”container”>

   <div class=”row”>

       <div class=”col-sm-6 col-md-4 col-md-offset-4″>

           <h1 class=”text-center title-log”>Sign in to your Application Portal</h1>

           <div class=”account-wall”>

               <img class=”pro-image” src=”photo.jpg” width=”120″

                   alt=””>

               <form class=”signin-fo”>

               <input type=”text” class=”form-control” placeholder=”Email” required autofocus> <br>

               <input type=”password” class=”form-control” placeholder=”Password” required>

               <button class=”btn btn-lg btn-primary btn-block” type=”submit”>

                   Sign in</button>

               <label class=”checkbox pull-left”>

                   <input type=”checkbox” value=”remember-me”>

                   Remember me

               </label>

               <a href=”#” class=”pull-right need-help”>Need help? </a><span class=”clearfix”></span>

               </form>

           </div>

           <a href=”#” class=”text-center new-account”>Create an account </a>

       </div>

   </div>

</div>

</body>

</html>

Styling the Login Form

The above code creates a blad looking form. Next, I will use custom CSS to style the form. For this, create a file named main.css and paste the following code in it:

.signin-fo

{

   max-width: 330px;

   padding: 15px;

   margin: 0 auto;

}

.signin-fo .signin-fo-heading, .signin-fo .checkbox

{

   margin-bottom: 10px;

}

.signin-fo .checkbox

{

   font-weight: normal;

}

.signin-fo .form-control

{

   position: relative;

   font-size: 16px;

   height: auto;

   padding: 10px;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}

.signin-fo .form-control:focus

{

   z-index: 2;

}

.signin-fo input[type=”text”]

{

   margin-bottom: -1px;

   border-bottom-left-radius: 0;

   border-bottom-right-radius: 0;

}

.signin-fo input[type=”password”]

{

   margin-bottom: 10px;

   border-top-left-radius: 0;

   border-top-right-radius: 0;

}

.account-wall

{

   margin-top: 20px;

   padding: 40px 0px 20px 0px;

   background-color: #f7f7f7;

   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

.title-log

{

   color: #555;

   font-size: 18px;

   font-weight: 400;

   display: block;

}

.pro-image

{

   width: 96px;

   height: 96px;

   margin: 0 auto 10px;

   display: block;

   -moz-border-radius: 50%;

   -webkit-border-radius: 50%;

   border-radius: 50%;

}

.need-help

{

   margin-top: 10px;

}

.new-account

{

   display: block;

   margin-top: 10px;

}

Here is how the signup form looks like after the custom CSS is applied. If your forms are part of a larger project, I recommend using the CSS for other screens of the app as the guideline for the custom CSS used with the form.  

bootstrapped-powered login form

Wrapping Up

This short Bootstrap tutorial was about creating a simple signup/login form component. As you can see, Bootstrap makes it increadly easy to develop forms that easily fit the project’s requirements. To give finishing touches, I used custom CSS for styling the form. If you need help in understanding the code, do drop a comment below.

 

Author bio

Pardeep is a PHP Community Manager at Cloudways – A Managed PHP Hosting Platform. He loves to work on Open source platform, Frameworks and working on new ideas. You can email him at pardeep.kumar@cloudways.com. Follow him on Twitter and LinkedIn.

The post Simple Bootstrap Powered Login and Signup Form appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/simple-bootstrap-powered-login-signup-form/

Why Fonts Matter: Serif vs. Sans Serif

The debate between serif and sans serif is still an epic one. There are pro and cons that people bring up all the time when arguing why one is better than the other one. But can any of the two teams own the absolute truth? No way! It’s like debating your Pepsi preference with a Coke lover. You’ll never get to an end. In order to give you a few hints on how you can best use any of the two, we invite you to take a pen and a notebook and write down the following important ideas.

Serif Fonts

The serif fonts have been around since the Roman Empire and they originate in the Roman alphabet invented back then. The Trajan’s Column is a classic example using serif letters, dating back to 113 a.o. In “The Origin of the Serif” study, Edward Catich affirms that the serif font is a remnant of the painting process of the letters on stone, a technique used before the stone carving. This fact takes us to the meaning of the word Serif which, according to the Oxford Dictionary, is closely related to the Dutch word “schreef” and it means “line” or “sign made by a nib.”

 

A short classification of the Serif Fonts:

Old Style

Dating back to the 15th and 16th century, during the Renaissance, these fonts are legible and elegant. Later in the 16th century, the fonts develop into a wider range of lines, creating a stronger contrast. The arched serifs become popular. Examples: Garamond, Minion, Goudy Old Style, and Bembo.

Fonts

Transitional

These fonts date back to the 17th century. As the name suggests, they “were born” between the Old Style and the Modern periods. Their contrast is amplified vertically, making the fonts harder to be read than the Old Style ones. They feature a neutral design and a triangular serif. Examples: Times New Roman, Baskerville.

Serif Font

Modern

Created at the beginning of the 19th century, the modern fonts have a high contrast between the thin and thick lines. Due to their lack of curved lines and arched corners, the fonts have a rigid look. Examples: Bodoni, Didot.

serif fonts

Sans Serif Fonts

The name was given by Vincent Figgins in 1832 and comes from the combination between “sans,” which is French means “without,” and “serif.” Some may consider it inappropriate because it implies a negation, a lack of something. Recently, in England, they recommend the word “linear” instead, but not many have adopted it yet.

A short classification of the Sans Serif Fonts

Grotesque and Neo-grotesque

Dating back to the beginning of the 19th century, the name “grotesque” has been given to these fonts to accentuate their incondite esthetics compared to the popular serif fonts of that time. The most representative fonts are Vincent Figgins’s “Two-line great primer sans-serif” (an only capitals font), and William Thorowgood’s font (the first one that included lowercase letters). The latter introduced the term “grotesque” from the Italian “grottesco,” meaning “in the cave.” Other examples: Univers, Arial, Franklin Gothic.

Geometrical (1920-1930)

Inspired from the Bauhaus current (less is more), they are characterized by the lack of contrast, the minimalist look, and by the geometrical aesthetics. The letter “G,” for example, contains two elements: a curved line and a horizontal line that closes up the arch described by the curved one. The letter “a” is formed by a circle and a vertical line.

Humanist

These fonts are characterized by fluidity, inspired from the hand-writings. Until the beginning of the 20th century, the sans-serif fonts haven’t suffered any improvements. The one who brought a new look to the sans serif fonts was Edward Johnston who created Johnston Sans. This font was used on the Londonese tube. A more famous font during this period was Gill Sans, created by Eric Gill for Monotype Corporation. It was the first sans serif font that had an Italic version, as well. Other fonts: Optima, Verdana, Tahoma, Myriad.

Sans serif

So what do we choose?

Sans Serif, Serif, or both?

The classic answer would be: sans-serif fonts for titles, headings, and serif fonts for the content. Used as a pair, the two types of fonts ensure the needed contrast. But even so, you must be very careful so that the result doesn’t look odd or exaggerated. Imagine a combination between the Old Style and a geometrical Sans. Total failure! Why don’t you try a combination of a transitional serif font and a neo-grotesque sans serif? They would make a much better pair; even an Old Style font combined with a Sans Humanist would look good.

fonts

The personality of a font must be understood very well, otherwise, we take the risk of making unsuccessful combinations of fonts. The Sans Serif fonts are simple, they have a clean and clear aspect, and they look much more modern. These fonts hook the reader’s attention faster. On the other hand, the Serif Fonts look much more formal, more traditional, and, although they have more personality, generally speaking, they distract the reader’s attention. Their look is more refined and well balanced. In these conditions, we don’t recommend you to use an elaborated font for titles, and an equally detailed font for the content. They will both claim the reader’s attention. There are a few supplementary aspects that you have to keep in mind when choosing a combination of two fonts: the physical attributes of the fonts, meaning the color, the size, the weight, and the common origins.

Read more: 20 Hipster Fonts You Can Download For Free

Read More at Why Fonts Matter: Serif vs. Sans Serif



from Web Design Ledger https://webdesignledger.com/sans-serif-serif/