card stack ui for creating new items

Question

I am creating a card stack ui for selecting items and creating a new item. Right now the page looks like this:

I'm not sure if the ui for creating a new item should be a card itself or a separate button. Anyone seen anything similar?

Answer 1

There are many similar interfaces for selecting and adding items in a card interfaces with the most common being the selecting of addresses or credit cards in an e-commerce checkout process.

It is important to distinguish the cards from the 'add new' option however, since they're two different type of actions. A good way to do this would be by using suitable colors, borders and other visual aids to distinguish these actions.

in the mockup below, i have created a simplistic filled and empty grid effect using different colors and borders

^{download bmml source – Wireframes created with Balsamiq Mockups}

The placement of the 'add new' card div is also important.

As a general rule, if there are

• a lesser number of items in the grid with the selection generally being from the already listed items, then it makes sense to keep the 'add new' div at the end of the list and give priority to the existing data (without compromising on the visibility of the 'add new' div)
• a larger number of items in the grid with frequent addition of new items, keeping the 'add new' div at the start is necessary