Author: UXPin

Icon design plays a crucial role in helping users navigate interfaces. Icons replace words so that UX designers can create a clean, easy-to-navigate user experience.

Designing an icon set provides users with a unique, on-brand experience while providing helpful directions and instructions.

Icon design has many challenges as designers must find the perfect balance between form and function for these communicative symbols. Icons need to look beautiful while conveying an important message to the user.

UXPin makes icon design effortless, especially if you are working with a team. You can get started with a 14-day free trial and start creating beautiful icons for your next project.

What is Icon Design

Humans have used symbols throughout our existence. These small but highly technical illustrations provide a universal language for service, directions, features, warnings, design, marketing, and much more.

Icon design creates a visual representation of a program, entity, data, interactions, or actions in software, websites, and applications. These universally recognizable icons enable users from around the world to navigate quickly through a website or application.

A Brief History of Icon Design

Graphic designer Susan Kare is widely recognized as the pioneer of pixel art and modern icon design. Her work dates back to the early 1980s at Apple, where she designed interface elements and contributed to Apple’s typefaces.

Susan designed all of Apple’s icons and typefaces on graph paper before drawing everything out pixel-by-pixel on a Mac, nothing like the sophisticated UX design tools we have today! By 1984, Susan had switched to the first release of MacPaint, which made icon design much easier.

Some of Susan Kare’s early icons include scissors (‘cut’), a finger (‘paste’), a paintbrush, and a pencil.

Icon Design Process

Icon design starts with identifying which icons your project will need. It’s a good practice to list all of your design’s pages, actions, navigation, and interactions, so you can identify where you might need icons.

Some considerations for icon design:

• Try to keep your icons as simple as possible with minimal detail. Many icons live in a 24×24 pixel world. So, if you have too much detail, your icons will appear as incoherent blobs.
• Don’t try to reinvent the wheel for universally recognizable icons like the cog for settings or heart for like. It’s important to exercise creativity when designing an icon set, but don’t forget to maintain a user-centered approach. In UXPin you can freely use ready Material Design icons that are waiting for you in ready libraries.
• Uniformity is what separates an average icon set from a great one. If you are working in a team, you must develop a guideline for everyone to follow. For example, maintaining a 5px corner radius for every stroke.
• You also need to ensure your icons are on-brand while conforming to the project’s design system.

Due to their small size, icon design can appear deceptively simple. But, with all of the above to consider, things can get technical and require a lot of thought.

Consistency in Icon Design

Maintaining consistency is challenging when designing icons, especially when working in a team.

The first step is to decide on a grid. Always use a 1px grid, as this will give you the best visual reference for your canvas. 

Next, you need to decide if you are designing in multiples of 8 or 10? Most icon sets follow multiples of 8 with sizes of 16, 24, 32, 40, 48, and so on. 

To maintain consistency, decide which multiple will be your base size for designing all your icons. For example, if you’re designing at 512 pixels, make sure you design all your icons at 512 and then scale up or down.

Some designers prefer to start with the largest size they’ll need for the project and then scale it down as required. It’s often easier to remove strokes than it is to add them.

Stay On-Pixel

One trick to maintaining consistency is staying “on-pixel.” Like a child coloring in the lines, you want all of your icon’s strokes to remain inside the gridlines rather than straddle them. If you need to straddle a gridline, center your strokes to maintain an on-pixel aesthetic.

Staying on-pixel will help keep your icons clean and consistent as you scale up and down. It’s also an excellent way to maintain uniformity across your icon set.

To Fill or Not to Fill

Another consideration for clarity and consistency is whether your icons are stroke (sometimes referred to as line or outline), fill or an icon set with both variations. In most cases, branding will play a key role in whether your icons use a stroke or fill design.

Stroke icon design is fantastic for capturing detail, while filled icons are bolder, providing the user with more clarity.

Technical Rules

Your strokes, shapes, corners, curves, and angles should be mathematically precise to maintain consistency across your icon set. Even if you’re aiming for a hand-drawn aesthetic, sticking to numbers rather than freehanding your icons will help maintain uniformity.

For example, are your ends rounded or square? Are you using whole number increments or decimals? What are your portrait and landscape ratios? What are your angle increments?

Like any design system, your technical rules will evolve as you grow your icon set. Even for a small icon set, keeping detailed documentation will allow you and your team to maintain consistency. These rules also streamline onboarding or handover.

Clarity in Icon Design

While it’s important to inject your brand’s creativity into your designs, your icons must make sense to the user. Think of icon design as a language rather than illustrations. What message do you want to send to the user?

For example, if you have a “view” action, an eye icon would make the most sense. You could also use a camera or a pair of binoculars (both used to “view” things), but the user might relate these symbols to capturing an image or sightseeing.

If you’re designing an icon for something new or unfamiliar to the user, do some research to figure out how to convey your message visually. 

Follow the Rules of Icon Design

If you approach icon design as a universal language, you’ll recognize the importance of sticking to a set of rules and principles. 

If you’re giving someone directions, you’re going to point where to go, not wave at them. The same is true for icon design. The house icon always means home icon, search is always a magnifying glass icon, and the bin icon always represents delete.

Google’s Material Icons feature a vast library of standardized symbols to reference if you are ever stuck. Redesigning versions of Material Icons will help keep your icon set universally recognizable.

Color in Icon Design

Incorporating color can help keep your icons on-brand or draw users’ attention to important actions or features. Color can also assist users with navigation by using a different colored icon for an active state.

Designers must exercise caution when using more than one color as icons become challenging to read.

Generally, two colors for icon design work best with a different color for the background and symbol. As you scale icons beyond 64 pixels, it becomes a little easier to incorporate several colors and shading without losing any detail.

Accessibility

If you are using color, make sure you test your icon designs against your project’s backgrounds, as sometimes icons are difficult to see without the right contrast. 

Considering accessibility is crucial when choosing colors because icons are small and can be challenging to see. Using our built-in contrast checker will ensure your icons stand out for users with visual impairments.

Cultural Meaning

Icon designers must also consider how different cultures will interpret colors, hand gestures, and symbols. If you are designing a product for a specific marketplace, some local language and culture research can prevent users from misinterpreting or misunderstanding an icon’s meaning.  

White Space

White space is another factor designers need to consider to make icons legible and accessible. White space also adds balance resulting in a visually pleasing experience for users.

Because icons have to scale down (sometimes 20 times or more from the original size), white space plays a critical role in maintaining the design’s form.

Iconic…icons

The at (@) symbol is possibly one of the most used icons today. It’s found in email addresses and used to tag accounts on social media but has an ancient history. The @ dates back to the early 1,300s when it was used to capitalize the letter ‘A’ in Amen.

The peace sign is another universally recognizable icon, first used in 1958 for an anti-nuclear protest in England. Gerald Holtom designed the symbol using the N and D (representing Nuclear Disarmament) from the Semaphore alphabet.

The International Symbol of Access, often referred to as the wheelchair symbol, is used worldwide and online to represent accessibility features for people with disabilities. Danish design student Susanne Koefed designed the icon in 1968. The original design was headless; several years later, a circle was added to the top for the character’s head.

The power icon is a combination of the | and O found on analog power switches. With the advent of digital electronics, the power switch changed to a button, so designers combined the two symbols with the | nested inside a broken circle (representing the O).

Designing Icons with UXPin

UXPin is the perfect tool for icon design. You can invite your team to collaborate on your icon set, use the built-in icon library and share the project’s URL for clients to review and provide feedback. 

UXPin also makes it super easy to set up a grid for your icon design. Here is an example to create 24-pixel icons in UXPin.

1. Choose a canvas or create a custom one. We used a 340×720 canvas for this example.
2. Set your COLUMN GRID to 10 x columns, 24px width, 10px gutter, 5px offset.
3. Set your BASELINE GRID to auto columns, 24px height, 10px gutter, 0px margin.

Adjust your width and height to suit your icon design requirements. Try it for yourself! Start designing icons in UXPin today with a 14-day free trial.

App design is a combination of UI and UX design to build out a usable piece of software. Modern users don’t have patience for apps that are confusing to use. Ideal mobile app design is good-looking, functional, and straightforward all at the same time. 

So, how do you measure good app design? A good app is measured by good UX.

Users should be able to navigate your application without needing to think. If they can instinctively figure out the design, they’ll continue to use your application again and again. 

In this article, we’re going to look at the 9 principles of mobile app design and how you can incorporate them into your design work.

Here at UXPin, we use these principles on a regular basis. If you’re looking to boost your design skills, get on to the UXPin free trial and start prototyping now.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Principle 1: Make it Easy

Prove your app’s value by giving users what they want right away.

Normally, when someone downloads an app, he or she wants to use it for performing a specific task. Try to make a great first impression once they open your app. Don’t interrupt them while they’re using your app – or at least don’t interrupt them immediately.

Let users do what they want to do. Users are there to find specific information, perform an action or consume some kind of content. If they can’t do what they want easily, they might close your app and never come back.

Break down big tasks into really easy steps

Cognitive load measures the mental effort needed to complete a task. Minimize the cognitive load of using your app so that users can navigate step-by-step. They shouldn’t view it as a chore that needs to be done. 

Let’s take a checkout process as an example: you could ask users for information all at once, but they’ll find it easier to fill in information over multiple steps: their shipping address, billing information, credit card information, etc.

Tell the user exactly what they need to do

Your design should make it clear what the user needs to do. If you suspect that an integral part of your layout may confuse your users, use visual aids to explain what needs to be done. For instance, you can use a tooltip or a caption to provide instructions.

Don’t hide important information

If you want the user to use your application effectively, turn their attention to the most important elements of your app. You can do so by increasing the font size, adding whitespace, and making sure that the element’s color contrasts well with the background color.

Navigation elements should always be visible and they should facilitate the completion of high-value tasks. 

Principle 2: Make the navigation of your app predictable

People get used to the design patterns they encounter every day. For instance, they will expect to be able to swipe through pictures. Make sure you adhere to the typical navigation methods of the Internet. 

Your users have an expectation of how to navigate the app

Your users’ past experiences of using other apps will inform their expectations for using all applications, including yours. Incorporate these common patterns into your design to allow them to easily navigate your app.

Take inspiration from UX design trends and most common patterns used today, but don’t blindly implement them without considering their fit with your application. If necessary, slightly modify these patterns to fit the overall context of your design.

Make sure to follow the commonly accepted navigational principles for the structure of your app. Sometimes users will instantly understand the purpose of a certain feature or a page. For instance, people will recognize the purpose of the “what’s new” page, or “search” field. Use these universally recognized concepts to simplify your app’s design.

Make sure to check out the design guidelines published by developers of iOS and Android operating systems. These documents describe proven design patterns used in excellent layouts today. 

Follow the 3-click rule

Users should be able to access any part of your app in less than three clicks. Keep the hierarchy of your navigation bar simple.

Doing so will make sure it’s easy for your users to keep a mental map of what’s going on in your app. Also, make sure your app shows the name of the page. 

Whenever there’s an error, let people return to the homepage or try to redirect them to other pages that might interest them.

Save users’ progress

Users today are busy and easily distracted. They might close your app to respond to an email or watch a new episode of their favorite TV show. Save their progress so that they can come back and finish their task without having to start over. 

If you want to learn what your users do on your website or app, perform task analysis. Here’s a guide for that: Task Analysis – How to Find UX Flaws.

Make it accessible across multiple devices

If you have a desktop website and a smartphone app, both channels should automatically save the activities and progress of logged-in users. People should be able to use the app and the website interchangeably. For instance, online shoppers might browse products on their phones, but place an order on a desktop computer. 

Principle 3: Follow the basic laws of app navigation

Don’t make up your own language

In some cases, it’s better to rely on basic principles of app design. People easily understand the design frameworks they encounter every day. Your layout should fall in line with those expectations. 

X in the top right-hand corner

A lot of applications feature X in the top right corner. Users instinctively know that clicking it will close the application.

Avoid dramatically changing the function of common symbols. For instance, the user expects X to close the window. Don’t use X as a symbol for any other action.

Save Button

Your app should also have a “Save” button at the bottom of a page.

Light coloured text field for inputs

Normally, input field lines are light-colored. Ideally, they should match the color that the users associate with your brand. It is rare to see input fields with black borders. 

Principle 4: Have a great, clear, and prioritized page design

Label products descriptively

Make sure the names you choose for products are descriptive and appealing. For instance, a customer might find it hard to see the difference between “standard shipping” and “regular shipping”. Pick labels that showcase the differences between the two options. 

You can use techniques like Card Sorting to get the feel of customers’ mental models. 

Showcase the most important menu items

Your navigation should facilitate the completion of the most important and high-value tasks. Show the most important features in the primary menu and leave everything else for the secondary menu. Use Visual Weight techniques to divert users’ attention to where it matters.

Changing font size, background contrast, and surrounding whitespace can help you divert users’ attention to the most important features of your application. 

F pattern vs. Z pattern

Most users aren’t going to read text from start to finish. They are more likely to scan multiple paragraphs of text. The first few words of the opening paragraphs get the most attention. That’s where you should place your most important messages to ensure that users don’t miss them. This scanning behavior is described as an F pattern. 

Users scan visual content in a Z-shaped pattern. Place your most important visuals in the areas where they are most likely to be seen by the users, following the Z-shape pattern on your webpages. 

Principle 5: Have brand image consistency

The buttons, input fields, and other elements of your application should be based on your brand image, so you need to have it consistent.

Have navigation consistency

If your application is based on an existing website, make sure its navigation works similarly to that of a website. Don’t change the color palette or other basic functionality to avoid confusion. 

Make sure your users can predict most of the time how your app will work and look.

Mobile users don’t have the advantage of hovering and having a cursor to help them guess the outcome of their actions. Carefully design the elements to help users recognize their purpose.

Principle 6: Minimize input and commitment from the user

Don’t ask for set-up information up front

Users see your app as a solution. Most people are focused on solving their problems. Don’t bother them with questions, account registrations, or signup forms right away. 

Let users use your app freely until it’s absolutely critical to login, give a credit card, or whatever the action may be.

For example, Medium allows its users to enjoy a limited number of high-quality articles before asking them to create an account and subscribe. 

Minimize the need for typing

Users find it hard to precisely type on their smartphones. Try to get the desired information without asking them for text input. 

If you can’t think of an alternative, provide input masks as a formatting guideline.

Prefill as much data as possible

Instead of asking users to write down their location, ask them to share their location and use a smart tool to fill in their address based on GPS data.

Provide optional inputs

Don’t ask users for unnecessary information. If you’d like to collect the data, give users the option to fill out the form or leave it empty if they wish.

Autofill wherever possible

In some cases, you can use the phone’s features to automatically fill in the fields. For instance, some apps allow their users to provide payment information by holding their credit cards in front of the camera. 

Principle 7: Loading should be fast and well communicated

Users are impatient when it comes to waiting for the app to load. Make sure your app loads fast to minimize any friction. 

Show something

If you’re loading, make sure your user knows it’s loading and not broken.

Seeing a blank loading screen might lead your users to think that your app doesn’t work. People are used to seeing some sort of loading indicator – a progress bar or a loading spinner. 

Load parts of the content gradually to display something as soon as possible. This way, users can start using the app right away, even if their Internet connection is unstable. 

Offer a visual distraction during loading

You can use simple loops or progress bars to display loading progress, but users are more likely to keep waiting if you create a simple, but entertaining loading animation. 

Principle 8: Optimize your app for mobile, and diverse mobile users

If your app is going to include a lot of text, make sure that it scales well on all types of screens. Text is much easier to read when each line contains no more than 40 characters. You should also adjust the line spacing. 

If your app involves visual content like images and videos, make sure your app can be viewed in both – portrait and landscape modes. 

Make sure your pages are built for mobile

When building a layout for your app, design easily clickable and properly spaced-out buttons. Users shouldn’t accidentally click something they’re not supposed to. For instance, put enough space between the Back and Next buttons to avoid accidental clicks.

Make sure your pages are built for different kinds of devices

Your app will be viewed on smartphones with 4-inch screens as well as 12+ inch tablets. Make sure your content properly scales to fill available space on larger screens. Make sure pages don’t look crowded on small screens. 

Principle 9: Do app design for humans

Font Size

A sizable portion of Internet users today have impaired vision. Use a font size of at least 16px so that your text is legible to everyone.

Color blindness

You shouldn’t rely solely on colors to communicate with your users. You should also use symbols so that color-blind people can understand the message.

Deafness

Your app should be adapted for the deaf and hard of hearing, especially if it contains sound components. Video and audio content should be captioned and subtitled.  

Disabilities

HTML has built-in features to communicate the meaning of the content. For instance, you can use alt attributes to describe the visual images for people who can’t see. Read more about accessibility standards in UX.

Gender selections

Unless the core functionality of your app revolves around the user’s gender, don’t ask them to specify their gender. If you run a simple business like a car rental service, there’s no need to know the customer’s gender. It also pertains having inclusivity by default in your visual and content design.

Design interfaces in UXPin

Designing an app from scratch is a lot of work. Thankfully, you can use UXPin and its built-in accessibility features to design an app that is accessible to everyone. You can start creating beautiful code-based designs right away by signing up for a 14-day free trial. 

Have you ever viewed an image or photograph that you really like and wondered why it looks so interesting and engaging? Or maybe you’ve wondered why a scene in a movie or TV show triggers a strong emotional response.

Is it the subject matter or the artist’s use of perspective? Perhaps. But then think about your favorite websites or user interfaces; what is it about how they look that makes you enjoy using them. Maybe it’s something about the colors or the fonts used on the webpage or app. Or maybe what you’re reacting to in all these examples is something else altogether: negative space.

​​

Design any website, app or a landing page in minutes. Try UXPin, end to end design app for advanced prototyping and design handoff. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is negative space?

At its most straightforward, negative space is the space around or between the subject of an image. You can see it all the time, whether it’s the white space surrounding the text of this blog post or the black background behind a model’s face in a stylish black and white photo. But beyond that, negative space can also add more information or meaning to the subject. But more on that later.

First, let’s look at what design looks like without negative space.

A world without negative space.

Chances are, as a kid, you might have encountered the Where’s Waldo (also called Where’s Wally) series of books. You know the ones, with all the intricately drawn bustling crowd scenes with hundreds of characters. And somewhere within each scene is the subject of the image, Waldo (or Wally). Sometimes it could take hours to find the little figure with his distinctive round black glasses and red and white striped clothes and hat. There’s not a shred of negative space to be found in any of those drawings.

Well, imagine if that’s how we all created our designs. Imagine trying to read this post if all the letters and lines were squeezed up tight against each other, or worse still, covered in text from other blog posts. Or imagine trying to use an app designed with all the layout elements crammed together, like Where’s Waldo. It just wouldn’t work. An app or website designed like Where’s Waldo would be unusable. If you’re old enough to remember what some website designs looked like in the 1990s, you’ll understand why.

How to use negative space in design

When it comes to web pages and app design, negative space has a vital role to play. The considered use of negative space allows a web page or app to “breathe,” which helps draw greater attention to the crucial elements included on a page or app screen. Plus, clever use of negative space can help create a hierarchy of information so that not all aspects compete for the viewer’s attention simultaneously.

A thoughtful approach to negative should try to achieve:

• better scannability of a page or app.
• enhanced visual hierarchy.
• intuitive bonds between the different elements of a page or screen.
• an overall less cluttered feel.
• improved user focus on core features while reducing distraction.
• added style and elegance to a page or screen.

The difference between big and small spaces

How you use negative space in web design or app screen also depends on whether you are applying it to a small or large space.

Larger spaces

When working with larger spaces, such as the overall design and layout of a web page or app screen, you need to look at the overall content when applying negative space. Questions to ask yourself include:

• Can negative space be used to separate elements?
• Does your text need to be divided into columns?
• How big should you size your margins and padding?
• How much distance between images should you use?

This type of negative space significantly affects the user’s visual flow. Whether it is potential guidance or strong push, it can let the attention lead to where you want them to stay.

Smaller spaces

Smaller spaces require a different kind of negative spacing. These include design elements such as:

• Fonts
• Line spacing
• Paragraphs
• Lists
• Buttons
• Icons

The negative space you assign to smaller design elements primarily emphasizes the overall clarity of a website or app screen, especially the amount of negative spacing associated with typography. 

Negative space directly influences the readability of text on a page or screen. If there’s not enough space between your lines of text, they become hard to read and demand additional effort from the user.

What is negative space: Creative negative spaces

One example of a creative negative space is the image known as Rubin’s Vase. It was developed in the early 20th Century by the Danish psychologist Edgar Rubin and is a famous example of an optical illusion.

In the image on the left, the yellow vase is the subject, and the white background is the negative space. But if you look at the black and white image on the right, you might instead see the profiles of two male faces. Now look back at the picture on the left. The negative space in the original image also contains the same two male faces. The yellow vase is still the subject, but the negative space conveys additional information to the viewer.

You don’t think optical illusions are relevant to corporate designs? Well, think again. Take a look at the FedEx logo.

Look between the E and the X. Notice anything? It’s an arrow. A subliminal reinforcement of the kind of business FedEx is known for. Another example of the creative use of negative space.

How UXPin can help you improve your use of negative space

The next time you begin a new design, remember to consider the impact of negative space on your design and user experience. With UXPin, you can create designs and prototypes and preview your work across multiple devices. Collaborate with your team members or business partners to get feedback on your use of negative space. Get started on your next negative-spaced design project with UXPin today- on free 14-day trial.

Since you’re here, there’s a good chance that you have used our design-with-code  Merge technology to build fully functional prototypes. (If you haven’t taken that step yet, try for free our Storybook integration.)

Recently, we took a giant leap forward by releasing an integration with Storybook. 

We don’t want to assume that you know a lot about Storybook and the advantages you get from combining it with Merge. To make sure you and everyone else understand why this matters so much, we’ve put together some of the top benefits of using the Storybook design system and write a quick tutorial to get you started.

By the time you get to the end of this post, we know you’ll feel our excitement!

Storybook design system as a single source of truth

Digital design projects can get messy, especially when you have multiple people working on several jobs at once. The Storybook design system reigns in the chaos to give everyone involved a single source of truth and make it easy to test components

Your fellow product team members may not be on the same page with all the standards and there might be just too many back-and-forths about making sure that the design has everything that’s needed for the development stage. In that case, you need to centralize all your knowledge in a better way. An interactive design system that keeps everyone on the same track is the answer.

With the Storybook design system, any change that you make gets updated everywhere. You don’t run into problems with one person having the 20.2 version while someone else follows the 21.1 version. You eliminate that madness by creating a digital design system that gives the same information to everyone.

Storybook also makes it easier than ever for your team members to find the components they want. The component finder and sidebar will direct them to results that match their search queries. If you can use Google, you can find the right components in your Storybook design system. (If you can’t use Google… how did you even get here?)

Storybook design system inspires creativity without (adverse) consequences

Unlike a lot of design and development tools, Storybook lets you build UI components and test them in isolated sandboxes. 

So, you can create interactive components without damaging other aspects of your design system or components library. 

You can explore your most creative ideas without fear. You might find a unique approach that adds to your brand’s aesthetic and functionality. Even if you don’t reach those goals, you can’t hurt anything by trying.

Integrating Storybook and Merge eliminates design-development inconsistencies

Clearly, we’re big fans of code-based design at UXPin. We saw a lot of designers and developers working against each other. The problems almost always came from miscommunication and the lack of a single source of truth. The two types of professionals didn’t have a common language, so they often struggled to understand each other. Designers worked with image-based technology, whereas development focused on code. 

Merge helps solve those problems by giving your teams a no-code, drag-and-drop design environment that’s still powered by code. Designers can create new products by pulling from the component library, making a few adjustments, and sending it on to the developers. The developers already have the code for those elements, so they cut down the time to build digital products.

When we discovered Storybook, we knew that we had found kindred spirits who understood that visual design needed to evolve into the code-based design. 

After a lot of work, we built an integration that would let our users access their Storybook design systems. You don’t have to worry about add-ons or APIs. You integrate the two and start using your Storybook design system within Merge’s editing and prototyping platform.

The remarkable thing is that your prototypes will function just like the final product. Storybook excels at building atomic components that make testing extremely easy. Basically, if the components work correctly, the user interface will also work correctly.

Now, you don’t have to think about inconsistencies between your original design and the finalized product. 

How to integrate Storybook with UXPin

It’s time to wade into the technicalities of integrating Merge and Storybook. Hold your breath! Just kidding. It’s actually very easy.

First, you need a UXPin trial account. Sign up and we can make that happen.

You also need a Storybook, which you can install from here. (Make sure you get version 6 or above.) If you have a private Storybook URL, contact us at sales@uxpin.com for some extra help. Import your components to Storybook if you already have some. 

Assuming that you have a public Storybook, just follow these steps: 

• Open a new prototype in the UXPin Dashboard.
• Choose “Design System Libraries” and click “New Library”.
• Choose “Import Components from Storybook” (see, we made it simple!)
• Paste the URL of your Storybook.
• Start making something amazing!

From now on, any change that you make to your Storybook design system will also get updated in UXPin.

Not getting the results you want? You can find more detailed integration instructions here.

Experience the advantages of integrating Storybook 

Several editing and prototyping tools have add-ons and plug-ins that let you move designs to Storybook for development. We decided to be the first ones to do this the other way around so that you won’t have to design everything from scratch.

Get your Storybook integration today so you can start designing faster with code-based, interactive components. You won’t believe how quickly your team members start building digital problems once you’ve integrated with Storybook.

As designers, our final goal is to make great products for the end user. This is why our collaboration with developers is paramount in every product we build. We come up with a product’s concept. Create mockups and prototypes. Then hand over the final design to developers to get the project live.

In this scenario, a designer’s role is supposed to end once the final design is delivered to the development team.

But in reality, this linear system (from designer to developer) barely exists in the product development lifecycle. Here’s why:

• Designers need to be part of the product development, from concept to launch for the project to be successful.
• The fact that the first prototypes rarely become the final product. So designers must follow up to make changes based on reviews from users and other team members – as well as provide guidance on how to implement certain designed elements for proper user experience.

This is why real-time collaboration, even during launch, between designers and developers, is vital to the success of every project. Your team needs to go back and forth on features, change design elements, and get reviews from other team members.

This is no big deal for us as designers. Of course, there are a lot of tools and features for us to collaborate.

But the trouble arises when we need to collaborate with developers. Here’s why:

• Designers don’t work with code, and developers don’t work with design resources.
• As teams, we also use different tools to get the work done.

Question is, as teams that need to work together, how can we collaborate when we don’t even use the same tools?

Ultimately, the solution lies in finding a common ground – a single source of truth.

UXPin with Merge technology allows developers and designers to work together to get projects live. UXPin Merge allows you to pull your git elements into the UXPin design editor, so you can easily design with components that already exist on your site or other teams have developed. On top of that, those components are production-ready, so you don’t need to add interactions or wonder if they are in line with the standards.

You also don’t need to know how to code or dive in Git as the component is presented visually, whereas for developers that is still ready code that they can use to build a product. Apart from Git integration, UXPin offers syncing with Storybook libraries to bring ready UI components from there as well.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is Git?

Git, in technical terms, is a version control software. It is a program that tracks changes made by developers to code and saves these changes for future references.

It allows developers to revisit their previous changes. You can undo code changes without messing with the entire source code. In short, it helps to quickly find the issue and fix it.

Git is open-source, free software that can be downloaded and used on your personal computer.  Since it works locally on your PC, once installed, you don’t need an Internet connection to use it.

As a designer, the closest example of how Git works is how the “History Panel” in Photoshop operates. In Photoshop, the history panel lists all the moves, additions, edits, effects, and everything that you added to get your final image. That’s what Git does for developer teams.

What is Github?

In technical terms, Github is a cloud-based, repository hosting service. Thus, it’s an online interface  for storing and accessing all your Git resources. Most popular GitHub alternatives are BitBucket and GitLab.

All the edits developers make to their code, which are tracked and saved by Git, are stored inside Github. Here, developers are able to access this code once they’re online. They can share their code with other developers, and receive feedback and edits. They can also make changes to code shared by other developers.

Github offers seamless collaboration for developers to work on one another’s code.

If Git represents the images, documents, files, and pages of a website, then Github is the hosting provider where these resources (Git repos) are stored.

Git and Github differences summarized

1. Git can be used to track your changes offline without sharing it with the others. Github, on the other hand, is cloud-based and is more of a collaboration platform.
2. Git creates snapshots or paper trails of all the changes developers make to a project, and saves these changes. Github is where these paper trails or snapshots are stored and made accessible to other developers for collaboration.
3. Git is completely free and open-source. Github offers free plans for individuals and small organizations, and paid plans for big teams and enterprises.

So in short, these two are complementary tools that help you collaborate, build softwares, record and rewind any change to fix errors real quick.  

Git for Designers: When Designers Need Git

Git may be built primarily for developers and IT teams, but the need for designers to work closely with developers these days means Git has become an important tool for us as well.

But at what point Git will come in handy for a designer? 

• When you create mockups and prototypes and need to submit your final work to developers.
• When you need to make certain design changes to a product that is already in production or already launched.
• You also use Git when you need to give guidance to developers on how to implement certain design elements for excellent user experience.
• When you need to build a shareable workflow that is accessible by both design and developer teams.

Git for designers: Using Git vs Github

These days, everybody is using Github. But that journey starts from Git. With Git, you’re able to build a design workflow that can be shared with developers. Every change or addition you make is saved, allowing you to go back in time to make changes.

While Git gives you this paper-trail power, Github gives you the power to collaborate with other designers and share your designs with developers.

How to get started with GitHub using the GitHub desktop app?

While you could just use Github from your browser, the desktop app offers great features as well and allows you to contribute to projects from your operating system. Here’s how to get started:

How to create a Github Account

To get started, go to https://github.com/. Once on the homepage, go to the top-right corner of the page and click on the “Signup” button. 

Follow the prompts to enter your email address, create a password for your account as shown below:

In your next steps, head over to your email and enter the launch code from Github into the next window. This will take you to your first dashboard.

Once in your dashboard, you can configure your two-factor authentication and add a bio to your profile using the “Settings” pane, which you can access by clicking on the arrow beside your profile picture. 

How to Install Github on your computer

To get the Github desktop app, you need to visit https://desktop.github.com/ and select the appropriate operating system to download. 

Launch the application after the download is complete and follow the prompts to install Github on your desktop. 

You’ll be taken to the welcome page once the app is done installing. 

Once installed, you may get prompts to help you link your desktop app to your account – Github calls this Authentication. 

If you don’t get these prompts, here’s how to link your desktop app and your Github account you created a while ago:

Step 1: Click on “File” on the upper left of the desktop app and select “Options” from the drop-down list. 

Step 2: Click on “Sign In” beside the “Github.com” option. You’ll be prompted to sign in using the browser. 

Step 3: Click “Continue with browser” to continue. This will take you to Github.com on your browser where you enter your email/username and password. 

Once you enter your details, your browser will prompt you to open this link using your desktop app

Step 4: Click on “Open GitHubDeskTop” from the browser prompt.

This will bring you back to your desktop app, now displaying your username as shown below:

At this point, you’re ready to start using your Github account by creating a repository. Here’s how to get started. 

Git for Designers: How to Make a Repository on Github

First, what’s a repository? 

In the layman sense of the word, a repository is a receptacle or place where things are deposited, or stored. This is the same for a repository in Git. 

A Git repository is a storage location for your code. It is where versions of your coded designs are found, which you can access anytime you need them. It tracks all the changes you make to your project and builds a history of these changes throughout the project’s lifecycle. 

Once you start the project, you can create a repo/repositories inside the project. Here’s how:

Since your desktop app is new, you will see a list of options on what to do on the homepage. 

Step 1: Click on “Create a New Repository on your hard drive”

Step 2: In the next window that pops up, enter the repository name and description, and click on “Crete repository”

Step 3: In the next step, you’ll see that your repository is only available on your PC. You alone can see and edit it. 

To collaborate with other teams or let someone else review your work, you need to publish this repository.

Click on “Publish repository” to get it live. 

And your Git repository is now live. 

How to Commit a Change in Github

Committing a change in Github means you’re saving the changes and edits you made to your local repository. 

For instance, when you make changes to a Google Doc online, these changes are saved automatically. But this isn’t the case with Github. You have to save these changes, thus, commit a change. 

Here’s how to commit changes. 

Step 1: On your Github desktop app, click on “View on Github” next to the “open the repository page on Github in your browser” window. 

This will take you to the repository page on your browser where you can make changes. 

Step 2: In the browser window that opens, click on the Edit icon on the upper-right corner of the repository window. 

In the next window, your repository will open for you to make all the changes you want.

Step 3: Once you’re done making all the changes, scroll down and click on “Commit Changes”

Now, all your changes are saved to the repository.

What are Branches and how do you merge them?

Just like how tree branches protrude away from the main tree, Github branches do the same. They’re a set of codes or changes that you make to your repository that have their own unique name. 

Designers and developers use branches to experiment with new features and ideas or fix certain problems without touching the main repository. 

When you create a branch, you do so to work on certain things that you don’t want to affect other changes made by your team. 

How do I create a branch and merge it?

Once you’re done building a feature or fixing the bugs that you created the branch for, a way to add it to the original project is to merge it. 

Go to the “Branch” button on the top menu of the Github desktop app. Clicking on it will bring up a list of drop-down options. 

To create a branch, click on “New Branch” and follow the steps. Use the “merge into current branch” menu if you want to merge different branches.

Git for Designers: What other popular Git libraries are there for designers?

At this point, we all know that Github is a library or a database where we host our Git repositories. It’s also where we are able to collaborate with others. 

But Github isn’t the only library or database platform out there for hosting Git resources. Here are other options available:

Gitlab

The closest to Github in terms of interface and use and an open-source tool, Gitlab is an excellent Git library used by many teams. It has many features, including issue tracking, code management, Wikis, and continuous integration with a lot of development tools among others. 

Bitbucket

Another great Git repository hosting platform is Bitbucket. Available for Windows, Mac, Android, iOS, and Linux, Bitbucket has great features including commit history, code management, branch comparisons, and offers developers unlimited private repositories for free for up to 5 users. 

Top 5 alternatives to Git repository

Aside from Git, there are at least 5 great hosting platforms with similar functionalities.

1. SourceForge
2. Launchpad
3. Google Cloud Source Repositories
4. AWS CodeCommit
5. Apache Allura

Bring UI components from Git to UXPin

Git and Github are built for developer teams. But as designers, these tools have become powerful for us not just for creating and saving projects, but also for collaborating with developer teams. If you’re a designer out there working with developers or just wanting to keep a clean workflow, Git and Github are great tools to get you started. Remember that you can leverage Git repositories with UXPin Merge technology to bring the design and development process together and use a single source of truth.