Design SVG graphics in your browser

Original Source:

The Vecteezy Editor is a free vector editing suite that runs right in your browser. This tutorial covers the basic shape tools and editing tools you can use to edit any vectors on the site. This way you can build badges, buttons, logos, or anything else with relative ease.

The GUI for this editor feels similar to Adobe software, so if you already use Photoshop or Illustrator, you'll have an easier time learning the ropes. But even complete beginners can dive into this and pick up the basics from scratch.

Get Adobe Creative Cloud

We're going to use these shopping icons from Vecteezy.

Just visit the icons page and click the 'Edit & Download' button. This opens the editor right in your browser so you can customise and build upon these graphics. For this tutorial, we'll show you how to nab some of these icons and convert them into a larger progress bar graphic – the perfect choice for any eCommerce homepage. 

So with those shopping icons open in the Vecteezy Editor, we can get started!

01. Pick the icons

Click into the icon group and select one icon, then click Duplicate at the top

Double-click on the icon group to select all the icons (you might need to double-click twice). I'll use three specific icons for this tutorial: the shopping bags, the credit card and the gift box.

Select the shopping bag and click Duplicate at the very top of the page. This should give you a duplicate of the whole icon. Move this up towards the top and duplicate the other two. 

Note: the gift box isn't fully grouped, so when you click to duplicate you'll only select a piece of the icon. To fix this, just drag a selection box over the entire gift icon, then at the top click Edit->Group. Now, you can duplicate the whole present icon with one click.

Once you have duplicates of all three icons, double-click anywhere on the empty canvas. This brings you outside the group of icons so you can select other objects on the page. If you click any of the older icons, you'll select the whole group. This is perfect, because you'll want to drag them down off the canvas so they're out of sight.

02. Clear the rubbish

Change the background opacity if you want it to be white instead of transparent

Double-click on each duplicated icon to access the individual shapes inside. We only need the main icon, so you should select and delete the colourful circle backgrounds and drop shadows.

To do this, simply zoom in very close and select the background circle. Then press Delete, and it should disappear. 

If the entire icon disappears – don't panic. Just click Undo near the top or press Ctrl/Cmd+Z and try again. You may need to double-click to get inside the icon group.

By the end, you should have three clean icons ready to use. If you don't like the transparent background you can always access the Background panel in the left-hand menu (third button down) and increase the opacity to 100 per cent for a pure white background.

03. Adding text

Add text labels under each icon with the same font settings

This progress bar will be incredibly simple; just advertising three stages of an eCommerce shop. 

To emphasise this process, let's add labels underneath each icon. In the left-hand toolbar, find the Text tool (second button) then click underneath the bag icon to add a text block. Add the text 'SHOP' and hit Enter on your keyboard.

This auto-selects the text so you can move it around and find a good position. But if you select the Text tool again, you can change the font family, colour, size, letter spacing and other features.

I'm using Open Sans Semi-Bold size 30 with a -1.50 letter spacing. Text colour is #525252. 

Duplicate this text twice and place the duplicates under the other icons. Use the text 'PAY' under the credit card icon and 'RECEIVE' under the gift box.

You should use the Select tool for repositioning the icons above the text. Also, space each icon close to equidistant apart if possible.

04. Adjusting graphics

Shift+click to select the ribbon shapes and change the background colour

Before creating the progress bar, you can alter any colours you like in the icons.

To do this, double-click to enter any icon group, then select whatever shape you want to change. In this case, I'll edit the gift box ribbon to change the colour from blue to green.

Once you're inside the icon group, hold Shift while clicking to select more than one item at a time. I'll select the horizontal and vertical rectangles, plus the bow shape at the top.

In the Select panel (first icon in the left-hand menu) find the Fill settings. You'll see the default colour is #2e3192. Click that Fill menu to access a drop-down colour wheel. Here, you can either drag around to find the colour you want, or enter a hex code directly.

Enter #518531 and hit Enter. This should save the result and update all three shapes at once. Feel free to play around with any other colour settings you'd like to change!

05. Starting the progress bar

Click the top-left circle in the Elements panel to add a new circle to the canvas

To create a progress bar, you only need two shapes: circles and rectangles. Thankfully, both of these are available in the Elements panel located at the very bottom of the Tools menu.

Click to Elements panel and select the circle shape, which is the very first item in the list. It'll automatically place a dark grey circle in the centre of your workspace.

You can resize the circle by dragging the little white square boxes in the corner or the select boundary. This works well, but it's not as precise as the direct resizing feature.

So instead go back to the Select tool and make sure your new circle is selected. At the very top of the Select tool panel, you should see a selection size with a height and width value. 

Enter 100 in both fields and drag your first circle under the first icon.

06. Duplicating circles

Resize the circle and duplicate twice, then move them under each shopping icon

With your circle shape selected, click Duplicate in the top menu. Now, reposition this duplicate so it aligns closely with your original circle. Try to get it right on top of the first circle so they look like one shape.

Now, if you hold Shift and click, you can drag this duplicate circle in a straight line horizontally. This lets you perfectly align all your circles together in a straight line (or close enough to one).

Do this until you have three different circle shapes at 100 x 100, each placed underneath the three icons.

07. Add some connecting lines

Select the rectangle shape and arrange it behind the three circles

Move back to the Elements panel and find the square shape. Click to add one square onto the canvas.

With this shape selected move back to the Select tool and find the width/height size panel. Since this rectangle should span the entire width of the progress bar, we just need one really long shape. So change the height to 10 and the width to whatever number you need to connect all your circles together. Mine is 750 wide.

Now, with this rectangle in position, look towards the bottom of the Select panel where it says Arrange & Flip. Click the second icon in the top row, which lets you move any selected shape behind the other shapes. 

Note: you may have to click the Lower button a few times to get the rectangle behind all three circles. But now the connecting rectangle is only visible between the circle shapes, so we can add text into the circles later.

08. Recolouring

Recolour all the shapes and include a small stroke on the three circles

The current progress bar looks a little dark, so let's alter the colour a bit.

Click to select the long rectangle and find the Fill Settings in the Tools panel. Change the colour to #c5c5c5 and hit Enter.

Now, click anywhere off-canvas to deselect the rectangle. We also want to change the circle colours, and they should be lighter, using the darker grey as a border colour.

Hold Shift, and click each of the three circles. Adjust the fill colour to #f5f5f5, hit Enter and then click the X icon to close the fill colour select panel. Below, you'll find stroke settings. Change the stroke fill to #c5c5c5 and hit Enter. 

Click the X icon to close this colour selection panel, then change the stroke size to 6. At this stage I also recommend grouping all the circles and the rectangle together by dragging a selection box and going to Edit>Group. Now, you can adjust the position of all shapes at once with ease.

09. Adding progress steps

Add a text label into the first circle and duplicate the text for all three shapes

Let's add some numbers into each circle to finalise the progress bar design.

Click the Text tool and enter the number 1 into the first circle. I'm using Open Sans Extra-Bold, size 45 with the colour #c5c5c5 to match the borders. Drag this text so it's positioned in the centre of the circle.

Duplicate the text element and move it into the second circle with the text '2'. Do the same for the third circle with text '3'.

10. Highlight the first step

Recolour the first circle blue so it appears like the active progress step

As a finishing touch, let's highlight the very first step using a lighter blue outline. First select the number '1' you just created, and change the fill to #4976a3. Then click to select the circle behind the text. Find the Stroke Settings and change the stroke colour to #4976a3. This should add a dark blue border around the circle. With the circle still selected, click the Fill Settings and change the colour to #e2ebfa. 

And that's it! Now you can export this as a PNG/JPG using the Download feature in the top-right corner. You can also hide the white background to export this as a transparent PNG and change the overall document size using the Background panel (third button in the left-side menu).

Or if you'd like to save this for future changes, just go to File>Save For Later. You'll have to create a free Vecteezy account but it's a great way to keep your hard work saved for future reference.

This article originally appeared in net magazine issue 295. Buy it here.

Read more:

10 golden rules for responsive SVGsExplore the exciting new features in SVG 2Supercharge SVG animations with GSAP

Cloud Storage as a CDN Option

Original Source:

Inspired Magazine
Inspired Magazine – creativity & inspiration daily

If you have a slow site, probably on shared server that receives a lot of traffic, you may be able to speed things up a bit by hosting some of your content on a Content Delivery Network (CDN).

Unfortunately traditional CDN is often priced out of reach for a small business website, but the good news is there is a way to set up cloud storage drives to act as your own personal CDN systems. In this article we’ll discover some methods for doing that.

Cloud storage CDN emulation vs pure CDN

The main difference is cost and volume. Pure CDN usually works out cheaper for high traffic volumes and more expensive for low traffic volumes. Because a typical small business isn’t likely to see the kind of traffic that would make pure CDN worth it, emulating CDN functionality with cloud storage is generally a more affordable and simple solution.

Choosing a cloud storage provider

Using cloud storage for CDN requires that you can make individual files available for direct public access, so this rules out zero-knowledge encryption services, because they’re not designed for general public access.

Second, you don’t want a provider that puts limits on resource access, or at least the limits should not be too strict.

Distributing content you want to get paid for

There are then different options depending on what kind of content you’re hosting. If you’re wanting to host specialist content, for example video, music, or other artistic works, checking out DECENT would be a good idea.

DECENT is a highly specialized blockchain based decentralized content delivery network. It allows you to self-publish anything without dependency on a middleman.

Utilizing peer-to-peer connections, DECENT traffic is very difficult to disrupt or block, which also makes it potentially able to circumvent censorship. It is more oriented toward commercial transactions, and blockchain technology makes these transactions easy to secure.

What it’s not very good for is distributing ordinary files like JavaScript, CSS, and XML files. For that, you’ll need a more regular cloud storage provider. The two biggest players in this field are Google and Amazon. Both are giants, but there are considerable differences between them.

A quick comparison: Amazon vs Google

Amazon comes in two flavors: Amazon S3 and Amazon Drive. The Amazon S3 system is an enterprise level system with all the complexity that you’d expect from such a system. It’s designed for big websites that get a lot of traffic, and the pricing structure is really complicated.

You may never need to worry about the pricing, however, if your needs are reasonably modest. Amazon S3 offers a free deal with 5GB of storage, 20k get requests and 2k put requests.

The problem here is that many of those get requests are not coming from humans, but from robots, so you can quickly burn through 20,000 requests before the month is up if your site is good at attracting robots. When your site does go over the limits, it doesn’t get suspended. You just have to pay up.

Amazon Drive is like Amazon S3 with training wheels. It comes with a much easier to use interface, requiring less technical ability. There’s a subclass called Prime Photos where you can get unlimited photo storage, and 5GB of storage for videos and other files, but it’s only free if you subscribe to Amazon Prime. The next step up provides 100GB of storage for $11.99 per year, and for $59.99 per year you can get 1TB of storage.

The standout thing here is the pricing is much simpler than Amazon S3. You know upfront what you get and what you’re expected to pay for it. It’s not really intended for using as a CDN, but it’s still possible to do it.

If you’re a WordPress user, you may prefer to use Amazon S3 because there are tools especially designed to help you do that through Amazon CloudFront. The complexity of setting that up is going to be beyond the scope of this article, so look for a dedicated article on exactly that topic coming up soon.

Google also has two options available: Google Cloud Storage and Google Drive. If you’re a Gmail user, you already have Google Drive.

Google Cloud Storage is intended for enterprise level use, and as such it requires a certain amount of technical ability to configure it and fine tune it. Google Drive is consumer-grade, but very easy to use with its simple web interface.

Google Drive starts you off with a generous 15GB of free storage, which is way more than most average small business websites will ever need. Should you find you need more, you can upgrade to:

All is not as it seems with these storage limits, however. Google Docs, photos other than full resolution (if stored using Google Photos), and any files shared with you by someone else don’t count toward your storage limit. Unfortunately emails (and attachments) do take up space if you’re actively using the Gmail account.

To give you an idea of how much you can store in 15GB, that is approximately 30 to 40 videos (m4v / mp4) at 1080 x 720 and 90 minutes duration, or about 88,235 photos at 800 x 600 and optimized for the web. It would be unusual for the average small business to need that much for its website.

Google Drive is much less expensive than Amazon Drive. In terms of performance, Amazon may have a bit of an edge, and the documentation with Amazon is better. Head to head, Google is offering better value overall.

Which should you choose? It depends whether you consider performance to be more important than cost.

Hosting images, CSS and JavaScript from Google Drive

This is not a lot more complicated than hosting video. In fact, it may even be easier. Here is what you need to do:

1. In your Google Drive, create a special folder that will store the files

2. Make sure the name you give it helps it stand out from other drive folders

3. Upload all the files to that folder (you can also create subfolders)

4. Select the folder that will be shared and click the share button

5. When the sharing dialog appears, select “Advanced”

6. On the more advanced Sharing Settings dialog, select “Change”

7. Now change the setting to “On – Public on the Web”

8. You will need to repeat the above process for every individual file as well

9. Copy the link for each resource and paste into a text editor

10. Delete everything except the file id

11. Now add text “” in front of the file id

12. Now you can modify your HTML. For CSS:

For JS:

For an image:

13. Upload the a test version of the HTML file and speed test this vs the original file


Updated test version with CDN from Google Drive:

Something very important you need to notice here is that with CDN enabled, the performance was actually degraded. This happened because my own web server automatically compresses everything, but the resources transferred to Google Drive are not automatically compressed.

That’s a topic for another day, but the real lesson here is that CDN isn’t always going to be an improvement for page loading time. Where it can still be useful, however, is by reducing disk space and bandwidth on your own server, allowing Google to shoulder the load for you. In most cases, that’s not going to hurt your loading times too much.

Streaming video: Google Drive vs YouTube

Google is the owner of YouTube, so either way you are using the same technology. Performance will be about the same, and the quality will be exactly the same, so why bother comparing? There are some small differences between streaming from either of these two sources.

When your video is hosted on YouTube, it doesn’t cost you anything, and doesn’t take up any storage space you personally own or rent. Videos on YouTube are ad-supported, allow viewers to comment by default, and show a bunch of links to other videos at the end of the video. Users can also find a link to view an embedded video on YouTube instead of on your site. Both of these behaviors are highly undesirable.

Hosting videos on Google Drive means there are no ads, no suggested links at the end of the video, and no option to view the video on YouTube (since it’s not hosted there). Otherwise there are no visible differences.

Hosting on YouTube can lead to greater exposure, if that’s what you’re after. Hosting on Google Drive gives you more control, more exclusivity, and helps keep the viewer on your site without the temptations offered by YouTube.

Both are better than alternatives such as Vimeo, because it is easier to include subtitles and the streaming quality can be adjusted by the viewer to suit their connection speed.

Streaming video from Google Drive and from YouTube uses very similar processes.

1. Upload the video to your Google Drive or to YouTube.

2. Upload or create any required subtitle files.

3. Test your video. Don’t skip this important step.

4. While the video is open, select the three vertical dots in corner of screen, then select “Share” from the menu.

5. Click on the “Advanced” link in the dialog that appears.

6. Click on the”Change” link.

7. Select “On – Public on the Web”

8. Then copy the link location and follow steps 9 to 13, except you’ll be using video HTML instead of image HTML, so your could will look something like this example:

The cc_load_policy property determines whether subtitles / closed captions should be visible by default. It’s good practice to set this to on, but Google applies the policy inconsistently anyway, possibly due to cross-platform complications.

Make sure you really need CDN

Most of the time CDN works fine, but there can be times when a page hangs up because it’s trying to fetch a remote resource that simply won’t load. Google fonts, and certain other Google APIs, are notorious for this.

If you’re hosting your site on servers located in your own country and most of your traffic is local, using CDN may create more problems instead of less.

In any case, always check the results of modifications you make and be sure they’re really beneficial. If they’re not, rewind back to the point where your site was operating at maximum efficiency or try another strategy.

Using a CDN lets you create smaller websites, so even if there’s a slight performance price to pay, it may still be to your advantage if you host multiple sites from a single hosting account.

header image courtesy of Alexandr Ivanov

This post Cloud Storage as a CDN Option was written by Inspired Mag Team and first appearedon Inspired Magazine.

Why I Switched To Sketch For UI Design (And Never Looked Back)

Original Source:



User interface design has changed dramatically in the last few years, as traditional computers have ceded dominance to smaller screens, including tablets, mobile phones, smartwatches and more.

My Ideal Sketch Setup For UI Design

As the craft has evolved, so has its toolset; and from one app to rule them all — looking at you, Photoshop! — we have gotten to a point where it seems like a new contender among UI design tools crops up every month. And I have to admit that many of the new UI design tools look pretty good and promising.

The post Why I Switched To Sketch For UI Design (And Never Looked Back) appeared first on Smashing Magazine.

Rellax.js – Free Parallax Features Using Vanilla JavaScript

Original Source:

Parallax scrolling looks incredible when done right. It’s not a feature you’ll want on every website but for creative sites and landing pages, parallax elements grab attention fast. There…

Visit for full content.

Collective #348

Original Source:


This content is sponsored via Syndicate Ads
See What Your Users See With FullStory

FullStory helps you build incredible online experiences by capturing every click, swipe, and scroll, then replaying sessions with pixel-perfect clarity.?

Try FullStory, free


A React And Preact Progressive Web App Performance Case Study: Treebo

A very interesting performance case study on Treebo, India’s top rated budget hotel chain. By Addy Osmani and Lakshya Ranganath.

Read it


Basic grid layout with fallbacks using feature queries

An in-depth look into the thought process and code for building a grid layout with graceful fallbacks powered by feature queries. By Chen Hui Jing.

Read it


React PowerPlug

React PowerPlug creates a state and passes down the logic to its children giving life to dumb components. By Renato Ribeiro.

Check it out


Conference Radar

A great place to find upcoming conferences.

Check it out



A curated collection of newsletters and roundups for designers.

Check it out


Bike to School

A great demo by Mariusz Dabrowski with a detailed explanation of how it was done in this article.

Check it out


CSS in JS is like replacing a broken screwdriver with your favorite hammer

An interesting read on the CSS in JS problematic by Kevin Ball.

Read it


Runtime Type Information

Collect runtime type information of your JavaScript code with V8’s new type information feature.

Check it out



Some beautifully flapping butterflies by Yoichi Kobayashi.

Check it out


Critical Path CSS Generator

Internal CSS Style Sheet Generator for the above the fold content.

Check it out


How JavaScript works: memory management + how to handle 4 common memory leaks

Alexander Zlatkov discusses the critical topic of memory management in JavaScript.

Read it



A spacing tool for design systems made by Hayk An.

Check it out


Free Font: Peomy

A lovely, handwritten brush font made by Ieva and Krisjanis Mezulis.

Get it


A framework for creating a predictable & harmonious spacing system for faster design-dev handoff

Priyanka Godbole wrote this excellent article about a great framework concept a while back.

Read it


HaWe: Halloween Vector Toolkit

Need some high-quality, super geeky Halloween vectors? Creative Veila has got you covered.

Get it


What every software engineer should know about search

A great guide on how to build or improve a search experience. By Max Grigorev.

Read it



Classwrap is a tiny JavaScript function for conditionally concatenating class names.

Check it out


Free Font: Mouron

A free typeface designed by Simon Dunford.

Get it



Create a promise that reports progress to the user, useful during long-running async operations.

Check it out


JavaScript Monads Made Simple

Learn all about JavaScript monads in this new part of the “Composing Software” article series by Eric Elliott.

Read it


Learning Ruby: From Zero to Hero

Learn the most important concepts of Ruby from scratch in this tutorial by Leandro T.k.

Read it



Turn your source code into beautiful syntax-highlighted images. Great for presentations.

Check it out



The library of practice briefs and helpful resources for designers just got a major rehaul. Read more about the new version in this article.

Check it out

Collective #348 was written by Pedro Botelho and published on Codrops.

Ultimate UX Design Guide to SaaS On-Boarding, Part 1: Sign-Up Forms

Original Source:

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 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.

Signup Flow

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.

5,000+ Pixel-Perfect Icons from Icon54 – only $24!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Stunning Examples of Interaction in Mobile App Design

Original Source:

Visual appeal aside, effective interaction design can lead to significant improvements in the user experience of your mobile product.

Taking the iOS or Android operating systems, you can see that almost every action is executed by some type of interaction. Whether this interaction comes in animation terms, or tangible feedback such as a taptic engine, the possibilities are never ending.

Example #1 – Siren

Siren uses many different interaction animations in its app design. The first of which are the elements that move with varying delays to produce something of a ‘wave’ effect when you swipe left or right.

Siren interaction animation

This provides additional feedback to the user as to the overall structure and flow of the main page. The app also utilizes shrinking elements to expand the interaction area of the interface, while ensuring critical information always remains on show.

Example #2 – B&O Play

The B&O Play app implements a series of satisfying transitional effects upon interaction with scrolling, color choice, and selection.

B and O Play

There are a number of effects for each interaction, including delayed horizontal motion, icon pops, and even visual feedback in the form of attaching imagery to the scroll area when a user has scrolled to the top of the list.

It uses these effects subtly, with precision and restraint, resulting in one of the finest examples around.

Example #3 – Bthere

Bthere’s app is a delightful example of interaction design in order to entice the user through the onboarding process – something that is typically a somewhat tedious part of the user experience

Bthere interaction design

By animating the icon transitions and background colors, as well as the individual icon elements themselves (including the scooter’s exhaust!), Bthere has conveyed the fun and light-heartedness of their brand effectively, while likely improving user conversion and retention upon download of the app.

Example #4 – Housing

Housing uses subtle interactions throughout their app. Upon adding a new feature, whereby the user could call an Uber to a viewing, the design team needed to find an unobtrusive way in which to bring attention to this new addition.

Housing app

The result, as shown above, is enough to grab the user’s attention momentarily, while not being in-the-face of the user. The execution of both icon design and color combines effectively to improve conversions as well as visual appeal.

Example #5 – Neighborhood

The final example, Neighborhood, implements interaction design in almost every aspect of the app, throughout icons, popover elements, messages, and panning.

Neighborhood app interaction design

The attention to detail in every step of the design has lead to some visually satisfying results, including a user menu that is somewhat reminiscent of Facebook’s chat heads.

Overall, it results in a cohesive user experience with plenty of visual feedback and easy-to-use features.


As 2017 gets underway, the abundance of tools now available to designs and developers, should see some even more spectacular and unique results in mobile app interaction design throughout this year.

Which interactions would you like to see more of in 2017? Share them below in the comments!

How to Learn React: Everything You Need to Get Started

Original Source:

React is a JavaScript library, originally built by developers at Facebook, for building fast user interfaces. If you’re dipping your toe into the React waters, or if your React development journey is picking up speed, it can be hard to stay across the fundamentals, techniques, tools and tricks – so we’ve created this guide to […]

Continue reading %How to Learn React: Everything You Need to Get Started%

Launching Your Design Career: Which Type Of Education Is Best For You?

Original Source:



If you’re stuck in a job you hate and have dreams of becoming a designer and working in a creative role that fills you with excitement daily, the road to entering this completely new industry can feel daunting.

Launching Your Design Career: Which Type Of Education Is Best For You?

Making a major career shift late in life to follow your passion is scary. Not only is it sometimes difficult to know where to start to learn about an expansive field like design, but it can also feel risky, especially if you’re working a secure job.

The post Launching Your Design Career: Which Type Of Education Is Best For You? appeared first on Smashing Magazine.

Collective #341

Original Source:


Our Sponsor
You’ve Never Made A Website Like This Before

When you pick the right platform, creating isn’t a struggle! Change the way you make websites forever.

Try PageCloud today


Designing The Perfect Feature Comparison Table

Vitaly Friedman continues an excellent series on UI patterns and dives into feature comparison tables.

Read it



A place for speakers to share talks and for event organizers to find them.

Check it out


Using ES2017 Async Functions

Eric Windmill explains asynchronous JavaScript and the new ES2017 feature async.

Read it



Enter this year’s JavaScript coding competition and make something under 13kb. The competition started at 13:00 CEST, 13th August and will end at 13:00 CEST, 13th September 2017. Theme for 2017 is: lost.

Check it out


Thoughts on Skeuomorphic Menu Systems

Charlie Deets explores skeuomorphic and spatial menu systems, highlighting advantages and disadvantages.

Read it


Web fonts: when you need them, when you don’t

A great read by David Gilbertson on making an informed decision when it comes to using web fonts.

Read it


Free Font: Buddy Mac

A skinny all-caps font designed by Missy Meyer.

Get it


Creating a Collaborative Style Guide for Designers and Engineers

Learn how building a flexible, collaborative, and scalable typography guide helps designers and engineers collaborate better.

Read it



A Mac app that lets you prototype WebVR interactively without prior coding knowledge.

Check it out


Foundations of Interaction Design

Read about how Christina Wodtke teaches Interaction Design in this interesting article.

Read it


How to design websites for blind and partially sighted people

Learn how to improve accessibility for people with visual impairments. By Christopher Ratcliff.

Read it



A PHP snippet bot that generates code examples for quick copy/pasting.

Check it out



A Sketch app plugin that distributes shapes evenly between multiple objects in Sketch.

Check it out


Teaching an AI to play a simple game using Q-learning

Learn how to teach a computer to master a simple video game using the q-learning reinforcement learning algorithm.

Check it out



A new site with free photos, vectors, icons, fonts and videos for personal and commercial use.

Check it out


A free set of 48 free fintech vector icons

A great line icon set designed by Agente Studio.

Get it


Pretty algorithms

Common useful algorithms written in modern, pretty and easy-to-understand JavaScript along with real-world usage examples.

Check it out


Accessibility Testing with pa11y

In this article by Ire Aderinokun you’ll learn how to use pa11y, a set of free and open source tools that aims to make designing and developing accessibility easier.

Read it



An ultra small CSS in JS library by Masaaki Morishita.

Check it out


Free Font: Arcanista

Victor Tramontin designed this creative display font.

Get it


Sketch for Designers

A growing collection of the best Sketch resources.

Check it out

Collective #341 was written by Pedro Botelho and published on Codrops.