Logo images look small in supported devices component

[miken-seam]

Issues:

• Logos images look smaller than some of the device images
• The device and logo images are the same dimensions, but some devices are cropped in a way that makes them seem smaller.
• In general, the device images used are inconsistently sized.
• In general, the device images are fairly low resolution 96x96

Solution:

• Device image: Use a source of device images where the images have been cropped so they are all optically balanced.
• Logos: Changing the design to use horizontal logos would help differentiate the logos from the devices. We have horizontal logos in dashboard, but not sure how many of those there are.

Modified header design:
I can do a modified header design using the horizontal logos that we used in the dashboard linked accounts page. https://dashboard.seam.co/linked-accounts

• But we will need to be able to ensure that there is a complete set of logos in the set.

So I'll assign myself this to do the modified design, but @sybohy one of the issues is the inconsistency of the device images (which are only 96x96 in this case). How can we create and maintain a single set of device images that are balanced optically?

cc @sybohy

[mikewuu]

@miken-seam @razor-x is there an updated design for this?

[razor-x]

@codetheweb Will the updates to the devicedb images solve this or help here?

[sybohy]

Will the updates to the devicedb images solve this or help here

Yes and no.

The yes-part: Right now people are grabbing manufacturer logo and device images in random places and putting them in their respective projects (components, console...etc). So we clearly have many sources of truth, which leads to these issues. In principle, device-db solves the problem by unifying on a single image for each device.

The no-part: EXCEPT device-db doesn't have a strong authority/guidance on how sizing/padding should be handled between all devices. All device images are squares. But some device images have padding. Others do not. This leads to inconsistency in our UI.

Below is a beautiful example of this visual inconsistency (which you can see live here. Notice how devices are all squares of equal sizes, but that the devices vary quite a bit. The device images are pulled from the new device-db.

Proposed Solution: I think @miken-seam needs to define guidelines on device image, logo images...etc with respect to padding, filtering...etc. Then we fix all images that get uploaded to device-db, and then devices should look much more uniform. Hope this makes sense!