By now, you probably know the importance of website loading times and page speed. The internet has been abuzz with news about how loading times impact your bottom line and Google has been pretty clear about favoring fast loading websites and blogs. While there are many ways to optimize the speed of your website, one of the first places you…. Continue Reading
Okay WDD readers, this one is going to get real conceptual. I’m here to talk about leaving two-dimensional user interfaces behind. Ditching the screen. Going 3D in the real world. Well, you know what I mean. You know, the stuff of science fiction that always ends up looking sort of fun, but really tiring and impractical. And that’s before the holo-deck malfunctions and Picard starts shooting the Borg with hard light.
Anyway, everything I’m writing about here has little to no practical application outside of VR… for now. Most of this won’t be applicable to web design for a little while. We’ll get there. And in the meantime, it’s fun to speculate on what it will look like…
We don’t have true 3D user interfaces right now, because the tech just isn’t there yet. It’s getting there, but we don’t have anything commercially ready for UI designers to obsess over. Holograms are getting better, and easier to produce. Motion input is also getting better and better, but it’s not as precise as we’d like it to be, yet.
This is because holograms usually require multiple sources of light. The ones that don’t use reflective surfaces to simulate those sources. Both of these restrictions tend to work against the free form physical interactions people want out of a hologram. Basically, we’re waiting until we can form holograms from particles that are easier to manipulate.
The closest we can get right now is VR. But, well, it’s virtual. It’s a simulation of a 3D interface on a pair of flat screens. So it only half counts. That said, VR will probably end up being our 3D UI mockup tool of the future.
Okay, everybody watched Tony Stark in the Iron Man movies wave his hands around and yell at Jarvis to do stuff, and it looks awesome. The only problem is that waving your arms around like that for long periods is actually really tiring. Ask any actor who has to pretend to interact with these systems. It’s not practical for long work sessions.
The part that the movies got right was the inclusion of voice input. Sure, we don’t have AIs yet, but voice commands are coming along. Any interface that would otherwise require us to stand and reach across the table is going to get a lot of use out of voice commands.
People don’t even use really big touch screens if they don’t have to. Small ones, yes. Big ones only get used if they’re lying at a semi-horizontal angle for drawing purposes.
Organization of Information and Buttons
Technical diagrams and blueprints may look great in 3D. Maybe even movies, too, one day. However, plain old two-dimensional text is still one of the most efficient ways of conveying a lot of information. It’s cognitively efficient, and byte efficient. We may develop a 3D language one day, but as of now, text looks best on a 2D plane.
Look at VR. Look at the menus in apps and games. They’re all represented on 2D planes. So are most of our buttons. I mean, I don’t want to walk across the room to press a button either.
The mouse is still the most precise input tool we have, for now. The keyboard is still the fastest way to input text with minimal editing required. I don’t think they’re just going away. In fact, a sort of 3D mouse that turns small movements of the hand into a cursor that moves about the larger 3D interface might make more sense than stretching your arms the whole width of your projector-screen-thing to manipulate information.
Those sorts of peripherals would also get us around the problems that prevent us from taking a literally hands-on approach, such as light emitters, reflective surfaces, and so on. The actual visual part of the UI might look something like the one featured in Iron Man, but with more context for the information presented.
In the Iron Man examples, all information being presented to the user is brought to the fore by Jarvis, on request. It’s also organized with lots of (completely transparent) white space, with a noticeable lack of a window metaphor. Without Jarvis, we’ll need a more deliberate way to contextualize everything we see in a UI.
For 2D information, the window concept might very well remain in play. For information displayed in three dimensions, it might simply become a “box” metaphor, with translucent lines showing where one 3D app ends, and where the next one begins. Input will have to be contextual, with the cursor constrained to two dimensions when editing text, and freed up under other circumstances.
Going beyond anything possible with today’s tech, another good example of a practical holographic interface is the Omni-tool from the Mass Effect franchise. Goodness knows how they get the holograms to work when the device is implanted into you (usually in the non-dominant wrist, like a watch), but let’s ignore the science for a bit.
The Omni-tool is a purely practical device, used for communications, data analysis, and interacting with unfamiliar hardware. Oh, and stabbing people. Look, we’re ignoring the science!
The point is, it’s a practical interface because the UI is entirely contextual, and adapts to whatever it is you’re doing. It’s also operated with the fingers of one hand. No huge gestures required. Note that every other UI in the Mass Effect universe is either on a flat surface, or activated by voice.
Hollywood artists like to envision a world of completely unusable interfaces. Real 3D UIs will probably look more familiar than most of us seem to want to believe.
And I haven’t even touched on accessibility. How do people who can’t speak, or easily move their arms due to arthritis, interact with a huge holo-table UI? What if multiple people try to interact with it at once?
These are the kinds of questions we’ll have to answer before we embrace arm-waving as the future.
SaaS Customer On-boarding is the process that users have to experience while initiating their journey as a customer on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience.
Long story short, special emphasis should be given to make the on-boarding process as flawless as possible.
The SaaS customer on-boarding process is based on 6 comprehensive aspects:
- Sign up Form
- Welcome Email
- Drip Campaign
- First Login & Product Tutorial
- Data Import & Notifications
- Check up calls & Swag
All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process. I will be discussing the first step to the on-boarding process, the sign up forms, in detail today.
Sign up forms are the first point of contact between an application and a customer, which is why I will be discussing them before the rest. By providing tips which can improve the experience at the customer’s end, I will be providing start ups with 6 useful techniques to make the process smooth and convenient.
Keep the Questions Limited
If you ask the customers to fill a large amount of fields on the sign up form, there is bound to be some discontent at their end. You have to limit the questions you ask, to increase the rate of conversion from the sign up form to the other parts of the process. By decreasing the amount of questions you initially ask, you can ensure a higher conversion rate.
Having understood the importance of keeping the questions limited, it is imperative that you know which questions to cut out and which you should include. Anything that can directly initiate your relationship with the customer should be asked. An email address is good enough for a subscription, so it should be your priority.
Shopify’s sign up page is an example of keeping it precise and to-the-point.
Ask whatever is necessary to initiate your relationship and make the customer proceed to the next step. Necessary questions include the email address of a user, so that there is a mode of communication. Besides the email and user name, other questions regarding the personal information of the user should be left for later, in the ‘Complete Your Profile’ step. Let’s continue using Shopify’s example. Once a customer signs up with Shopify, they are directed towards completing their profile:
Back Your Sign Up Form with Strong Social Evidence
One noticeable thing about the current generation is their infatuation towards joining the bandwagon and keeping up with the fads. So, if you are able to put up interesting figures regarding the people who have signed up on your website with success, you can be guaranteed of a positive response from the customer.
Salesforce is an excellent example of a company that does this. Right below the signup form, a customer can find the benefits that customers of Salesforce have received.
SingleGrain decided to create their social proof by displaying on the sign-up page logos of their clients.
InVisionApp took and advantage of the authority principle displaying on the sign-up page testimonials from people like Mike Davidson (Vice President of Design at Twitter) or Andy Law (Manager of Mobile Product Design at Netflix)
Make the Email Sign-up a Beneficial Deal For the Customer
If you are able to sell the sign up to the customer, you have aced the first step of the SaaS customer on-boarding process. You need them to sign up on your website, and the customers need something for doing that. To be fair, the customers want as much as they can get, for giving as little information as they can. This is where a conundrum arises.
The confusion can be solved by creating a deal for the customer. Get the customer to perceive they’re benefiting from the deal. This can be done by offering the customer something in return, something which motivates the customer to move into the sign-up process. The value proposition should be clearly visible for the customer to comprehend. Many SaaS companies like Convertize.io come up with a brilliant motivation argument—the free trial period that often motivates individuals to sign up. Convertize gives your 14-days trial as an opportunity to test their product.
The offer you make to the customers plays the role of the main attraction and serves as bait. If the offer is viable and good enough for the customers, it will help in attracting them to the brand. If it is not, then customers won’t be attracted to your brand. Thus, the offer you make to the customers is your lead magnet or core attraction. All other details just complement the lead magnet into initiating the perfect deal with you.
Design is Important!
The design of the form is as important as anything else, which is why great detail should be given to this aspect of the deal. A design which is aesthetic is bound to get more customers sign up for your website than before. The importance of design should not be neglected at all costs. Furthermore, a website with a better design than the other websites will garner more trust from the users. Accordingly to Dr Coker, from the University of Melbourne’s Faculty of Business and Economics, users are found to trust website with prettier designs more than others:
Internet consumers are 20 per cent more trusting of websites than they were five years ago
Coinbase’s signup form is an excellent example. The design is simple and user friendly without compromising on looking sleek and elegant.
Manage User’s Expectations
Let customers know what’s going to happen next. Don’t leave them quizzical as suspense is not the feeling you want to create here. Make the customer trust you from the word go, by letting them know what they’re signing up for.
If consumers have to submit the form feeling uncertain about what is going to happen next, there is bound to be friction. The best way to go about this is to have your submit button say something other than just ‘submit’. You can write whatever is going to happen next on the button. This way there will be less uncertainty and the users will be more in control.
Leanplum’s signup page is a good example of this, with the promise of instant access after signup.
Social Media Signup
Giving users the option to sign up using social media accounts can drastically speed up the process for the user and increase the probability of conversion. Common social media sign-in options include Facebook, Twitter, Google Plus. Clicking on a social media button for access looks far more appealing to the user, as compared to filling in a number of information fields.
There are a number of advantages and disadvantages of using social media signups.
The advantages include:
- No need to worry about an additional password. People with an active online presence are usually members of a lot of websites. Remembering an additional password can be worrisome and can deter a user enough to not sign up for your website. A social media sign-in option eliminates this deterrent.
- Faster registration. Signing up via a social media account is far faster than the tedious process of filling out an online form
- Market Research. A social account sign-in can grant you a wealth of information about your user, ranging from personal preferences to birthday, where they live, their friends etc. This can allow you to better assess your target market.
- Engaged Users. According to online research, users that log in to other websites via Social media accounts stay longer. This research was conducted by Facebook. Users can Like / Share and since their friends are right there, this can increase the market reach for your website.
Disadvantages of using Social Media Sign up:
- Anxiety from too many options. If you offer multiple social media sign-in options your user could become flustered and then decide to “come back to it later”.
- Would it affect your brand? Giving a social media sign-in option is creating the presence of another brand alongside your own. Will the option really result in a greater conversion rate? Also, if a user’s social media account is hacked, their account on your website may suffer too.
- Relying on a third party. If a social media server crashes, it could restrict your user’s access to his/her account with you. You would need a backup for that eventuality.
- Accessibility. Some workplaces have blocked social media websites. Therefore, if your users log in through social media, they would not be able to.
- Privacy. Some users are extremely privacy conscious and would rather create an account with you rather than use their social media.
We’ve talked about how it’s important to have a signup page that is concise and enticing by way of its content and design. However, the signup page is part of something called the “sign-up flow”. The signup flow refers to the steps in the process that the user has to take to go from signing up to using the product / service. We encounter another term in this regard, which is “friction”. Simply put, friction represents the amount of effort that the user has to invest in completing the signup process.
Let’s talk a little bit about friction and then we’ll go on to discuss common signup flows that companies use.
The amount of friction encountered by users can’t really be objectively measured. However there are three things (according to Totango) that can, to an extent, allow for gauging how much friction an average user might encounter:
- Information Cost. Total number of fields to be filled in by the user.
- Steps to Completion. The number of steps / pages the user has to pass through to get to access the application.
- Effort investment. Number of decisions that the user has to make and extra activities to be completed.
3 Common Signup Flows
Signup flows can be designed in innumerable ways. The flow is dependent on the product, the target market and many other variables. However there are three broad based signup flows that we’ve observed, and usually other signup flows are more or less derivative of these.
Flow 1: Access to App After a Number of Steps
This is the most commonly used sign up flow that companies use. Users are familiar with this process and consequently don’t have to think much about it. However there are a lot of steps that the user needs to take before getting to the app.
Flow 2: Setting Up of Account After Accessing the App
Being able to instantly access the app after signup is the reason why a lot of friction is eliminated in this approach. However this way you could get a lot of users who just want to try the app out, without any intention of completing the signup process.
Flow 3: Immediate Access to the App
A signup flow that goes one step further than the second approach, this is absolutely frictionless.
p class=”p2″>Sign-up forms don’t come across as the most exciting items to design on a website. In fact, most companies neglect the importance of sign-up forms by implementing below par designs. You can either inculcate a striking palette, a witty heading or an aesthetic design. But whatever you do, make sure that your first impression weaves its magic over the customers. Keeping in mind the importance of the sign up page in setting the right impression, there should be no errors whatsoever.
Icons are one of the most characteristic elements in many designs; they’re also one of the most readily available resources to be found online, with free icon packs all over the web. Free icons give designers and developers the tools for creating visually appealing demos, user interfaces, apps, and everything in between.
Enter the team behind Iconshock, an eye-catching website that recently unveiled a new platform, with an equally eye-catching collection of resources, and the bold ambition to deliver the largest, most comprehensive icon sets library anywhere on the web.
What to Expect
Free icons, premium icons, way too many icons…
Iconshock is the story of an idea that began almost 10 years ago, with the intention of creating a massive icons library for use as an inspiration resource and creative elements repository. Adding 100 new icons every week, Iconshock’s focus on attention to detail, allows them to achieve pixel-perfect quality for several different display sizes.
Today, Iconshock’s collection of over 2 million icons in several categories and subcategories, is testament to their devotion to creative work and their coordinated team effort.
Easy to Use Platform
With an icon library of over 2 million you’d probably expect a nasty, cluttered, impossible-to-find-anything website. Well, you’re in for a treat as their latest platform is clean, minimal, and welcoming. Designed in a soft-color, single-page layout, with engaging visual cues, finding fresh icons is an enjoyable, even rewarding, experience.
We tried to make something different and exciting, implementing some new features we’ve wanted to explore for a long time that we hope will enhance our user’s experience by providing a visually engaging environment
Quality over Quantity, Why Not Take Both?
It’s super-easy to get started with Iconshock, as soon as you land on the site previews of designs are displayed through their homepage’s icon customization options—clever little utilities blended with the site’s visual layout—where you can tweak several aspects of the icons on-the-fly, using sliders, including sizing from 16px up to 256px, changing colors, and the available icon styles.
Once you click through to the icons gallery the editing options are expanded, and you can change colors, size, and style, then download free of charge, in PNG format.
All of Iconshock’s icon sets and individual pieces are designed with the utmost care, and special effort is made to keep all of their 30+ design styles all inclusive for their industries, each industry having a variation in every style for 400+ unique icon sets.
This is a large series of industry-specific icon sets, styled after the most dominant design trend of the last 10 years. Iconshock also has a variation of this style that merges flat design with 3D perspective icons to achieve a unique visual effect they’ve dubbed Isometric Icons.
Solid monochrome icons based on the original iOS 6 tab assets, which are great for user interface design at a variety of sizes.
Styled after Google’s Material Design specification, here you’ll find a vast wealth of metaphors for all kinds of projects, as well as Iconshock’s Material Black Icons; these sets work beautifully together.
Minimal line icons, simple, outlined and geometric. The icons in this category were built with a non-standard size of 38px for better web and app display. Glyph icons also have a twin style called Glyph Color Icons, which combine perfectly.
All of these styles are available across several different industries and professional fields, and the great majority of them include their source vector files, so you can edit them if you need to.
You’d think that you’d get lost with so many options, but Iconshock’s new platform lets you view everything included in the set and you can choose to download single icons, multiple icons, or entire sets.
Iconshock’s files include sets like:
Sets based around accounts, from very simple concepts, to advanced professional symbols. This includes currency symbols, payment icons, transactions, company and product metaphors.
Several sets in different styles with plenty of icons for networks and connectivity topics. User profiles, hardware, node equipment, servers, security concepts, and much more.
Web and Graphic Design Icons
Graphic and Web Design concepts from essential to advanced metaphors. Plus a wealth of web-specific elements like 404 pages, testimonials, and SEO.
A large selection of transportation metaphors are expressed in colorful icons, in several styles, and with all sorts of elements from cars to ships, airplanes to traffic signs, and even UFOs!
Computer Gadgets Icons
Packed with innovative objects related to computers and smart technology, you’ll find gadgets like MP3 players, VR glasses, multifunctional printers, wireless headphones and keyboards, GPS navigation, and bluetooth devices.
With the amount of pros and next to no cons that icon fonts have, Iconshock have also recently added a great feature that allows you to create fonts from several of their monochromatic styles, with all the advantages this implies: Easily edit, scale and insert these fonts made from icons in your projects and save tons of time and space. You can keep the whole set of icons in a single, lightweight file.
As of now, their Icon Fonts section features 6 of their best monochromatic icon styles, including iOS Line, Glyph, Material Black, iPhone, iOS Filled, and Windows 10, with tons of styles to come in future updates.
Beyond the Icons Library
Iconshock’s experienced and skilled creatives can also deliver exclusive designs by request; as well as provide assistance with a wide range of digital services, guiding you through the whole process from scratch.
Individual icons or whole sets can be created in any style, shape, or form you can imagine, and Iconshock offer support until you judge the job to be complete.
Web and Graphic Design
Iconshock have plenty of experienced designers to work with to create your site’s layout, and user experience. With custom styles tailor made to your industry or niche.
Support in reaching your desired audience, and achieving optimal product placements.
Branding and SEO
Brand recognition and identity services from experienced digital marketers, so that the image you project says exactly what you want it to say.
By now, you’re probably wondering what’s the catch…
This colossal wealth of icons is available free of charge, but with a few restrictions; you’ll be able to download any of the icons or packs for personal use, which is pretty darn cool.
If you need full, unrestricted access to the library, together with the source files for the majority of the icons, and a commercial license, then there are two great vale subscriptions. You can opt for either Yearly, or Lifetime Access, and considering the speed at which this repository is growing it’s really a no-brainer.
Iconshock is in a category of its own when it comes to the sheer size of the icon library and the inspired, characteristic way in which their creatives model their designs.
The best way for you to decide if their product fits your project is to judge with your own eyes, so head over to Iconshock today!
[– This is a sponsored post on behalf of Iconshock –]
WordPress plugins are helpful extensions that let you add extra functionality to your WordPress site. They can handle small things, like showing related posts to your visitors, as well as large things, like turning your WordPress site into a fully functioning social network or eCommerce store. Pretty much every WordPress site uses at least some plugins. So if you’re using WordPress,…. Continue Reading
The post Complete Guide: How To Choose And Install WordPress Plugins is written by Colin Newcomer and appeared first on WPKube.
This month’s collection of new tools is a mashup of sorts—there are a lot of new elements, components and typefaces out there and they are all totally different. From patterns to UI kits to browser extensions that will make your workflows better, this list has it all.
If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!
Gradient Wave Generator
Create cool wave patterns with trendy gradient colors using Fabio Ottaviani’s tool. Adjust colors, line shapes and even “craziness” for interesting combinations that can make cool backgrounds or fills. Plus, everything exports as SVG for lightweight web files.
Stock Image Search Engine
The EveryPixel stock image search tool can help you find stock images across a number of different websites. You can sort by free and paid options, just put in your keyword and go. Once the results—which are powered by an AI interface—come back you can sort further. Choose photo or vector, orientation, color and even open areas of photos to help facilitate design projects.
TablePlus is a native app to edit database information and structure. It includes security features to protect your database, including native libssh and TLS encryption. The editor is robust and you can customize the way you look at tables on the screen for easy editing.
Run Multiple Versions of Chrome
Thank you, Chrome! Developers can now install and run multiple releases of Chrome on the same computer. Chrome Beta and Chrome Dev can be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome. This means side-by-side Chrome installation is available on Windows, Android, and Linux, and will be made available on other platforms in future releases.
Hellosign API is an eSignature API integration that’s quick and legally binding. The (paid) tool integrates with your website so you can send and receive documents with eSignatures. Hellosign integrates with Gmail, Google Docs, Salesforce and Orcale, making it a solution for businesses with a lot of documents moving electronically.
What’s powering the functionality behind your favorite websites? WhatRuns, a Firefox extension, will help you identify what technologies and tools are used on any website with just a click. You can see marketing networks, automation software and themes and plugins.
Now UI Kit
Now UI Kit is a responsive pack of elements based on Bootstrap 4. It includes 50 elements and three templates with PSD and Sketch files included. It is designed in a Material Design-inspired style with all the elements you need to start a project.
Facebook’s design team released a kit of Sketch template of UI elements in MacOS for download. Here’s what Facebook says about the release: “Whether you’re building a user flow through a web app or constructing a Mac interface, there are currently few comprehensive desktop GUIs available and we hope this collection of common UI elements speeds up your design and development process. It includes everything from cursors and dropdowns to chrome for Mac and popular browsers.”
Mashup Template is an HTML5 template that uses premade “blocks” to help you create a responsive website quickly. The template tool is free, even for commercial projects.
Hologram is a desktop app that helps you create WebVR without coding experience. It’s made so that anyone can get their feet wet in the growing world of virtual reality and it’s based on Google Blocks, which includes plenty of free three-dimensional elements.
Blender is a Sketch plugin that allows users to blend objects to create and distribute shapes evenly between multiple objects. It works with all shape types, even irregular shapes using the “same shapes” option.
PDF-Bot is a microservice for generating PDFs using headless Chrome. It is installed on a server and will receive URLs to turn into PDFs using its API or CLI and manages a queue of jobs. When the job finishes, you will get a notification to fetch the document.
If you are looking to expand your design and development skills, Webflow University is a place to start. The collection of courses has short guides and tutorials on how to do almost anything. Just search for a skill, software or tool, and start learning.
Beta Family is a network of more than 65,000 testers that will help you debug and spot issues with your app. You just set up a test with tasks and questions, users participate in the test and you get an insights report to help you make your app better. The tool includes free and paid plans.
Financial and Technology Icons
This set of line icons includes 48 vectors in solid and colored outlines. Each icon comes in a native Adobe Illustrator format with EPS, SVG and PNG exports.
Who needs bookmarks when you have Freezetab? The tool is a Chrome extension that lets you save open tabs in a list for later. It’s sortable—you can group links by website—and easier to read than a long list of bookmarks that you forgot to delete.
Proximi.io is a geolocation-based tool that uses multiple positioning technologies to help you create apps that work where people use them. The tool is ideal for maps with real-time locations, location-based notifications, check-ins, asset tracking, connecting to screens and for gathering data. It works on all major platforms, with free and paid options.
Abstract Watercolor Textures
This set of textures and backgrounds includes eight options in PNG and JPG format for projects. There are also 300 dpi, print-ready versions. Watercolor is a trendy design element and this kit is based on original water coloring from the artist.
You’ve heard of Product Hunt, but what about Product Graveyard? The website is dedicated to “memorializing” digital products and tools that no longer exist. (Remember, Google Reader or Limewire?) Plus, it offers some alternative solutions for users of those tools. Browse the list or submit your favorite products that don’t exist anymore.
Alexana is a fun and funky free font by Mark Mora. The character set includes upper- and lowercase letters and numerals. Character sets are differentiated by the position of the dot in each letterform for this typeface that makes an interesting display option.
Celestina is a lively brushpen script with rounded letters and a hint of calligraphy. It has a handcrafted feel that makes a great display option and includes upper-and lowercase letters.
Interface is a typeface designed for user interfaces, and is highly readable even at small sizes. The characters have a look that’s similar to Roboto or San Francisco but it is more readable small than large and has been optimized for 11 points. This typeface is not recommended for display uses. It includes regular, bold, medium and black styles.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
9 Best Responsive Web Design Frameworks
Google Drive has Become a Popular Alternative to the Pirate Bay
Breaking the Grid
UX Process: What it Is, What it Looks like and Why it’s Important
The State of the Web
How Designers and Developers Can Pair Together to Create Better Products
The Day I Proved Myself Wrong
Amazon and Microsoft Just Made a Major Bet on User-Friendly Design
91 Book Covers Brought to Life with Mindblowing Animations
How to Make your Landing Pages Worth Landing on
Disabled Buttons Suck
20 Designers, 20 Questions, 20 Weeks
Make it Impactful: Adobe Experience Design CC (Beta)
How I Stopped Worrying and Learned to Love Design Thinking
Positive Reinforcement in UX Design
Create the Perfect Design Portfolio: 30 Pro Tips
Work Solo – Freelancing Shouldn’t Be Hard. Make Time, Get Paid.
Some Instagram Employees Sell Verification for Thousands of Dollars
How to Build a Successful Design Team
Letrs – Spotify for Typographers
The Zen of Just Writing CSS
Bad UX: How Booking.com Deceives Clients
How to Pair Typefaces
Improving your Web Font Performance
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Personal and professional upgrade
Can you relate to these situations? Please share your funny stories and comments below…
In the last few years, machine learning and artificial intelligence have been hitting the headlines often. The technology has been making progress in leaps and bounds. The physical limitations on computational requirements which once hindered the progress of AI are long-gone. Today, we’re actually pondering a different kind of dilemma: Will machine-learning actually surpass human intelligence in the next few years?
Which “skilled” jobs will soon be replaced by artificial intelligence?
Should we put a kill-switch on our intelligent bots, just in case they get too intelligent and we’ll have a Skynet, doomsday scenario?
As machine-learning keeps advancing at a rapid-pace, with the tools and the research being available applied to mainstream applications, we may be at a tipping point, similar to the time when automatons replaced the human in factories.
Which human industries will vanish in the next few years?
Is the human designer facing extinction?
Why has machine-learning advanced so rapidly?
You can blame quite a bit of that on Google. Well, at least, you can blame the good part of it.
The engineers at Google in the last few years have been applying machine-learning techniques to their search and classification problems with fantastic results. Some parts of their core-algorithms have been completely rewritten to use AI and ML with amazing results, such results that the team had never been able to achieve with any other technology.
RankBrain is one of the algorithms used by the Google search-engine team. It is able to understand and extract the core semantics of natural-language queries, something which previously Google had a very difficult time processing.
But, RankBrian is the AI that Google chose to “reveal” to the general public.
Google…keep hinting at machine-learning powering their search results
You can rest-assured, that under the hood, there’s plenty more going on which we don’t know about. The Google Search and Spam team keep hinting at machine-learning powering their search results.
The teams in fact have been so impressed with the results, that they did the unthinkable. They actually open-sourced the technology they are using internally, such that other people could apply the same algorithms in order to solve their own problems—the result was TensorFlow.
TensorFlow and other similar software technologies, and the practically unlimited computational resources available at will, bring us to a stage where there are much fewer limits than we used to have before.
Great minds like Elon Musk are in fact so worried about the advance of AI and ML, and the potential negative repercussions brought about by this, that they are proposing frameworks such that “kill switches” are put in place…just in case the machines get too intelligent.
In a recent example of machines getting too cocky, Facebook intelligent bots developed their own language to communicate.
This may look creepy to many people, but it really doesn’t surprise those in the know—with artificial intelligence algorithms mimicking human intelligence, and being totally goal-oriented and highly efficient—this is bound to happen. The algorithms will evolve to complete their goal in the most efficient way possible and this may include unexpected or surprising means to an end.
But how does this all affect design?
Design is not immune to all this progress. We’ve recently been seeing a move towards automation of design.
I want a real human designer who can, first and foremost, understand the value of my brand
Logo design has been one of the niches which has had free tools around for a while, but the quality you got out of those, left much to be desired. For example, when it comes to my logos, unless I’m doing a throwaway site, I want a real human designer who can, first and foremost, understand the value of my brand.
I want to be able to speak to somebody who “gets it” and is able to conceptualize a few ideas before we advance to refining and finalizing of a logo and brand.
But there are AI options, such as TailorBrands. These guys have just received a nice round of funding of $4m. Now, if you’re able to secure that kind of money, you might be onto something. At least, VCs are seeing that this certainly has potential.
Our take was that creativity was, in fact, a popular mistake; something that broke the pattern in a way that enough people like. It’s what happens when I give you a perfect classical piece and you decide to destroy the spacing between the notes; if nobody likes what you are doing it’s a mistake, if enough people like it you just created Jazz.
— Yali Saar, CEO of TailorBrands
These AI options follow the same pattern: they ask a few questions about your brand, ask what style of logo you want, and give you a selection of fonts to choose from. Then your logo is generated. Nothing too complex, not very sophisticated, but yeah, it could work. Does it look like it was designed automatically? Not to most people’s eyes—particularly those who are not designers. Could you use it for your website? I’m sure you could. Will I be using one? The jury is still out on that.
The beauty of working with AI
I’m going to go out on a limb and be very controversial here: If a client came up to me, for a website, without a logo, I’m pretty sure I’ll be able to come up with something good looking in a few minutes. Not only that, I can offer them completely different designs and concepts and potentially refine on their selection. I could probably charge quite nicely for offering a logo creating service.
Is it responsible? Is it ethical? Should I be doing it?
The thing is this, until you build a certain reputation, you’ll be hustling to all sorts of clients. The ones which are great, understand design and brand values and are ready to invest. Then there are the ones who just want to get by. You can chose to refuse them (if you have the luxury to do that). Or you can offer them a budget package, which includes a logo design if they’re still starting out. You’re providing them with a complete package, which is surely cheaper than a human designer and won’t burn you out.
But what’s the flip-side to this argument?
Can AI Ever Truly Design for a Brand?
Before we answer this question, I just want to go over a few examples of beautiful logos which you’ve probably seen over and over again.
Ever noticed the arrow between the E and the X?
Amazon carries everything from A to Z, besides the arrow making the logo “smile”
Cisco (San Francisco)…both a Golden Gate representation as well as a digital signal
The cyclist surely embodies the Tour de France
These logos are only a few of the examples which a true logo should look like. It’s not only a pretty design, the logo does symbolize the brand values.
Before a design is conceptualized and given form, the function behind the brand should be fully understood. And this is where AI falls short (so far). While AI is making advances at a rapid pace, the decisions being made are quasi-intelligent. Today’s AI is more a question of fuzzy logic, where designs and decisions are made with incomplete data, rather than true intelligence. It may look like intelligence, and the uses we put it to, will vastly simplify computational problems which might have seemed insurmountable only a few years back. But true intelligence? True understanding of what is being designed? The time when the designer is fired and a bot is “hired”, we’re probably still quite a few years away. Generations maybe.
Because, can an artificially intelligent bot understand the values of your brand? Who knows, someday, maybe. But today? Despite the advanced in the technology, we’re still not at the level of killing-off the human designer.
These look great in the final project but aren’t so easy to make with a static mockup. So designers have been picking up animation programs like After Effects to create motion-based mockups.
If you’re trying to learn this skillset I highly recommend these free videos on YouTube. They won’t teach you everything but they’ll cover the basics and give you a solid foundation to advance your skillset.
1. Button UI Animated
This very brief UI animation tutorial is perfect for beginners with little-to-no AE experience. It does require some patience to work through the interface but the instructions are crystal clear.
You’ll learn to create a small button animation effect that can work great for websites or mobile apps.
This isn’t anything spectacular but by the end you’ll have a much stronger grasp on this concept.
2. Prototype Motion
Another simple animation you can make is a sliding menu like in this video. It teaches you how to animate a menu in After Effects and how to work with individual layers in the software.
It’s a fairly long tutorial with over 40 minutes of step-by-step guidance. But it’s well worth the time if you can see it through to the end.
3. AE Icon Animation
Small icon animations don’t add directly to the interface, but they can enhance the user experience. These icon motions relate to those small microinteractions mentioned earlier.
But this is also handy for icon designers who create their own icons from scratch and want to animate them for production.
4. Animated UI/UX Cursors
Many designers create UX animations to showcase how an interface should work. This would naturally include mouse clicks/swipes because you want to see how content moves across the page.
If you want to add cursor motions to your mockups then this tutorial is for you. It’s a pretty short guide, only 15 minutes long, but the information is super valuable and relevant for both mobile & web designers.
5. iPhone App UI
Another good example of a user-focused animation is this one following a typical iPhone app input. You’re creating a user’s path through an iPhone app filling out individual form fields.
By itself this may not seem like much since people know what this process looks like.
But if you’re designing a webpage or application that has a unique flow then it helps to show the entire user behavior from entering info to logging in, and maybe more.
6. App Page Swipes
Mobile app designers can utilize page swipes for multi-paged interfaces. These work great for galleries and for paginated effects.
In this brief tutorial you’ll learn how to create page swipe animations with After Effects using a few existing mockups. This video comes free from UX in Motion where they have a ton of similar tutorials and private workshops.
The topic of UX motion isn’t covered much on the web, but these guys are one of the few good ones really delving into the details. Check out their entire YouTube channel if you want to learn more.
7. Jelly UI Animations
You’ve probably seen weird liquid-jelly menus in Android apps or even throughout the web. These aren’t super common because they’re hard to recreate in code, but with this Jelly UI tutorial you can at least build the animations from scratch.
It’s another freebie from UX in Motion and it only totals about 5 minutes.
But you’ll learn a lot about After Effects and the overall UX animation process. Specifically how to import vectors and work with those files over a timeline—really just the basics of interface animation work.
8. Unfolding Animation
While I can’t say this animation directly affects the interface, it is something cool you can add into your website’s logo. Unfolding animations are mostly used in video intros to create a brandable visual.
But websites can also have similar unfolding animations by using SVG graphics and basic JS animations.
Even if you don’t want to create logo animations, this tutorial can still guide you through a simple AE interface workflow. Perfect for learning the ropes without much stress.
9. Basic UI Prototype Animations
Mobile app menus come in many different styles with different animation techniques. This UI tutorial teaches you how to animate the flyout bubble icon menu.
This was first credited to the Path app but has since grown into a common trend for Android and iOS devices.
Over this 20 minute video you’ll pick up ideas for icon animation and menu design. It’s pretty simple to work with and you can use pre-designed icons for the workflow to save time.
10. 3D Layer Splits
Presentation animations are valuable for client work or for sharing your ideas in front of a team. That’s where this 3D layer animation tutorial can help.
It teaches you how to break up different layer elements and separate them from the full interface. You can even showcase different page elements to display how the app/website should function.
I can’t imagine this would be valuable for personal work, but it’s cool effect to learn especially for commercial gigs.
11. iOS 8 Switches
Animated on/off switches first appeared in early versions of iOS and have since spread to Android and general websites.
The best UI switches have custom animations and you can build your own by following this 25-minute tutorial. It assumes you already have the switch graphics but you could also download a freebie PSD and use that instead.
Plus you can repurpose this animation for any type of switch you design in the future. A great tutorial for someone just getting into After Effects for UI/UX.
12. Smooth Icon Animations
Last on my list is this detailed icon motion tut using a few different vector shapes. It’s a pretty detailed guide totalling just over 30 minutes, and covering a few different techniques.
Once you know your way around After Effects you can apply these ideas to other icon styles. That’s why this tutorial is so great for beginners; it teaches you how to work in the AE interface with specific techniques for UI/UX designers.
But any of these tutorials will you improve your UX animation skills so be sure to bookmark any that catch your eye.