
Welcome to Source Compare!

Whether you are a designer, developer, project manager or someone else interested in the assets of a project, Source Compare allows you to keep track of all of them in one place using version control and voting to keep everyone on the same page.

Source Compare allows you to keep track of all the images that you use in the lifecycle of a project all in one place.

## Getting Started with Source Compare

When you log in, the projects page is the first thing that you will see. This will have a list of all the projects that you have created or been invited to. You may create a new project or click on an existing one to move to the project page.

## Project Page

<div className='grid grid-cols-6 gap-4 '>
  <img className='w-full h-24 col-span-6 sm:col-span-3' src='getting-started/one-project.png' />
  <div className='col-span-6 sm:col-span-3'>
    <h3>One project</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>A</span> Project
        author/owner
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>B</span> Project items
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>C</span> Project followers
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>D</span> Edit project name
        or followers
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>E</span> Delete project
      </div>
    </div>
  </div>
</div>

### Create a new Project

You can create a new project by clicking the new project button. In addition to the name, you also can add other followers to the project that will be able to create new items, commits, and vote on your favorites. By default, the permissions are relatively open so only invite people you trust and who you'd like to have access to all of the assets in the project.

To add a follower search for their name. You will only see matches for people that you have confirmed friendships with. See the profile section below to learn how to make new confirmed friends.

Alternatively, if there is not a friend match found, there will be a button that will allow you to see non-friends who can be added. In that case they will be added as a pending follower and sent a friend request. It is only once they confirm their friendship that they will be able to see the projects. The same goes for inviting someone by email- they will only see the projects once they create an account, confirm the same email address on the profile page that they were invited with and then confirm you as a friend.

The followers list can be updated at any time and once someone is removed, they will not be able to see the project anymore. Note- it is not currently possible for the creator to remove themselves from a project.

## Project Detail Page

When you click on a particular project, you are brought to the project detail page. This shows all of the items that belong to a particular project.

<div className='grid grid-cols-6 gap-4'>
  <img className='w-full h-24 col-span-6' src='getting-started/finished-items.png' />
  <div className='col-span-6'>
    <h3>Approved Items</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>A</span> Create new item
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>B</span> Approved item
        selector
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>C</span> Edit item name
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>D</span> Delete item
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>E</span> Highest version
        thumbnail gallery
      </div>
    </div>
  </div>
</div>

By default, the finished items will be displayed (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">B</span>). These are items that have been previously approved by clicking the approve button on the item's detail page. For a new project, this will be empty until you start creating and approving items.

### Create a new item

You can create a item using the create new item button (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>). If you ever have to edit (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) or delete those items (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>), there are individual buttons for each of them on the item cards. For each item, there will be a thumbnail gallery (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">E</span>).

<div className='grid grid-cols-6 gap-x-4'>
  <img className='w-full h-24 col-span-6' src='getting-started/in-progress-items.png' />
  <div className='col-span-6'>
    <h3>In-progress Items</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>A</span> In-progress item
        selector
      </div>
    </div>
  </div>
</div>

If you flip over to the in progress items, you can see all the ones which have not been approved. To see detailed information about an item, click on it.

## Item Detail Page

<div className='grid grid-cols-6 gap-x-4'>
  <img className='w-full h-24 col-span-6' src='getting-started/item-view.png' />
  <div className='col-span-6'>
    <h3>Item View</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>A</span> Approval button
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>B</span> Project hierarchy
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>C</span> Currently selected
        commit
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>D</span> Thumbnail gallery
        for currently selected version
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>E</span> Navigation to
        traverse items, iterations and versions
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>F</span> Upload replacement
        image
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>G</span> Download current
        commit
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>H</span> Vote on current
        commit
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-3 py-1 text-white '>I</span> Delete current
        commit
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>J</span> Currently selected
        version
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>K</span> Create new version
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>L</span> Create new
        iteration
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>M</span> Currently selected
        commit
      </div>
    </div>
  </div>
</div>

The item detail page is where all the magic happens- this is where you manage all the aspects of the project. First, let's get a few definitions out of the way:

- **Commit:** a particular image within an item.
- **Version:** think of a version as a round of edits, each version may have multiple iterations within it in order to test out a variety of options for that round. The most current version will always have a blue box around it (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">J</span>).
- **Iteration:** a specific commit within a version (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">M</span>).

So as an example, in the item view above, we see a total of 6 commits on the left item timeline section. The first version will be the lowest on the list and we can see that version 1 has 1 iteration. The second version inspired 3 different iterations and the latest version has 2 iterations (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">J</span>). The leftmost item has a purple border around it which means that it is selected (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">M</span>).

On the right, we can see an item detail section which shows the currently selected commit (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) and a version thumbnail gallery (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>) for all of the other iterations within the selected version. Here you can see that the plant nursery was testing 2 versions of a cacti asset in 2 different types of containers.

Below the currently selected commit (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) and version thumbnail gallery (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>), there is a navigation and action panel. The navigation buttons (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">E</span>) allow for traversing in 3 ways:

### Navigation Buttons:

- Navigate within iterations in the current version using < and > buttons
- Navigate between versions using the &and; and &or; buttons
- Navigate between items in a project using the `<<` and `>>` buttons

For the navigation buttons we have a upload new image (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">F</span>), download current image (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">G</span>), vote on current iteration (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">H</span>) and delete iteration button (<span className="rounded-full bg-green-400 font-bold text-md px-2 text-white ">I</span>).

### Voting

Voting is used to determine the favorite iteration for each version among the people who follow the project. You can only vote on one iteration so if you pick another in the same version, it will switch automatically. You can tell which iterations that other people have picked by hovering over a particular one on the left timeline section.

The left timeline section will calculate which iterations have the most votes per version and attempt to draw a straight path from the first version to the most recent version. In the event of a tie, you will see yellow dotted lines going to the iterations that are currently tied and if someone switches their votes around, the arrows will be redrawn accordingly. In the example above, we can see that:

**v1 iteration 1 &#8594; v2 iteration 2 &#8594; v3 iteration 1**

### Creating a new Commit

Now that we've run over the layout of the page, let's actually create some new commits. The first thing to do is create a new version (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">K</span>). This will create a new version and a single iteration. You can now upload your version using the upload button (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">F</span>).

You may continue to add new iterations to the version by pressing the add iteration button (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">L</span>). Once your followers vote on their favorite for this round, create a new version and add new iterations just like before.

You can create as many iterations and versions as you'd like until you create a final commit. Then, you can click the approve button (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>) and you are done!

## Profile Page

<div className='grid grid-cols-6 gap-4'>
  <img className='w-full h-24 col-span-6' src='getting-started/profile-page.png' />
  <div className='col-span-6'>
    <h3>Profile page</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>A</span> Enter and verify
        your email
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>B</span> New friend search
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>C</span> Send friend request
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>D</span> Incoming friend
        request
      </div>
    </div>
  </div>
</div>

The profile page allows you to verify your settings and manage friendships. You should verify your email because it allows the system to link any pending project invitations to your account (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>). To verify your email type it in to send a verification email to that address. You will receive an email with a verification code that you can enter in and provided that it is correct, the text will switch from not-verified to verified.

You must confirm a friendship with someone before you are allowed to invite each other to projects. This is true both for inviting them to a new project and also for any pending projects that they might have invited you to.

To send a friend request, enter their name into the search bar (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">B</span>) and you will see matches based on that name. Click the green plus button to add them as a friend (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>). In your friend's profile, your request will show up and they will need to press the green check mark to approve it (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>).

<div className='grid grid-cols-6 gap-4'>
  <img className='w-full h-24 col-span-6' src='getting-started/profile-page-pending.png' />
  <div className='col-span-6'>
    <h3>Profile page pending</h3>
    <div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>E</span> Friend requests
        section
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>F</span> Friends section
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>G</span> Pending friend
      </div>
      <div>
        <span className='rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white '>H</span> Confirmed friend
      </div>
    </div>
  </div>
</div>

Once the friend has been requested, they will show up as pending (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">G</span>) on your end and a request on their end (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>).

Both when friends confirm your requests or when you confirm a friend's request, they show up as confirmed friends (<span className="rounded-full bg-green-400 font-bold text-md px-1 text-white ">H</span>) and you both may add each other to any of your projects.



# Take Charge of Your Creative Process: Effortless Image Asset Management with Source Compare

Learn how Source Compare Source Compare can bring effortless version control and collaborative feedback to your design process.

## Introduction

When it comes to the design process, managing image assets can be a complex task. Over the years, design teams have relied on a variety of methods to keep track of different versions of an image, each with its own set of advantages and drawbacks.

Firstly, there's the old standby of file naming conventions. Teams would rename each updated image with a new version number. This method, while straightforward, quickly becomes cumbersome with multiple iterations and doesn't lend itself well to collaboration or feedback.

Alternatively, some teams have turned to intricate folder organization systems, creating new folders for each version of an image. Although this method offers more structure, it can lead to a convoluted mess of folders, especially in larger projects with multiple collaborators.

The advent of cloud storage platforms like Google Drive or Dropbox introduced document versioning, allowing teams to upload new versions while keeping a history of previous ones. Yet, this system tends to fall short when it comes to managing feedback or facilitating collaboration.

Design tools offering built-in version control offered a glimpse of hope, albeit often limited to files created within the tool itself and lacking in collaborative features such as feedback and voting systems.

Finally, there are the humble email or chat systems - simple, but quick to devolve into chaos. It's all too easy to lose track of the latest version or the feedback provided for a particular version in an overflowing inbox or bustling group chat.

While these methods may suffice for smaller projects, they struggle to scale effectively. As your project grows, managing and tracking different image versions becomes increasingly complex. Gathering and managing feedback is another challenge altogether.

Enter Source Compare – an image version control tool designed to simplify your design workflow. Let's dive into how Source Compare can revolutionize your image asset management.

<img className='w-full h-24 col-span-6 sm:col-span-3' src='why-version-control/projects-page.png' />

## Why Source Compare?

Source Compare offers a unique set of features that makes it a valuable tool in your creative toolkit:

**Collaboration and Feedback:** Enhance the quality of your image assets with collaborative feedback from your team. Say goodbye to long email threads or lost chat messages - all your team's inputs are consolidated in one place.

**A/B Testing:** Run A/B tests with multiple iterations within a version and solicit your team to vote on their favorites. This democratised decision-making process ensures that the best design gets chosen.

**Version Comparison:** Track the evolution of your assets and observe how they have improved over time. No more sifting through countless files to find a previous version. Everything is stored and easily accessible in Source Compare.

**Single Source of Truth:** Download the latest version of your image assets, ensuring everyone works with the most up-to-date version. This eliminates confusion and saves time that would otherwise be spent on verifying the correct version.

<img className='w-full h-24 col-span-6 sm:col-span-3' src='why-version-control/item-page.png' />

## Getting Started with Source Compare

Starting with Source Compare is a breeze. You can sign up for free and create up to 10 projects, which includes unlimited versions, iterations, and items.

## Creating a New Project

Head over to our [Quick Start Guide](https://www.sourcecompare.com/learn/getting-started) to jumpstart your journey with Source Compare.

## What's Coming Up?

We are constantly working to improve Source Compare. We're excited to announce that a paid tier is on the horizon, offering features like unlimited projects, the ability to leave comments on commits, managing user access permissions with roles like admin, user, and read-only, and even vote overrides to select a different iteration from the crowd favorite.

Stay tuned for these exciting updates!

## Conclusion

Source Compare is more than just a tool. It's a way to take control of your creative process, to collaborate more efficiently, and to produce the best possible design outcomes. No more chaos, no more confusion – just seamless, effortless image asset management. Whether you're a design newbie or a seasoned pro, Source Compare is ready to elevate your design game.


Learn something new