Style guide and sizes

[andru]

I'm taken aback by how quickly we've got going with this set.

We didn't even have time to lay out any style guide, sizes, etc... so let's hash that out and see if we can come up with something so we can be consistent with feedback.

Here's my proposals...

Resolutions

Each icon should be designed for 3 sizes: 64px, 32px and 24px.

Each icon should be customised to each of those 3 sizes, so that the smaller icons remain distinctive. If scaling down 64px to 24px works then great, but usually things get smudgy: colours need to be higher contrast, line work needs to be reconsidered, and important small details need to be exaggerated to not get squished away.

Illustration style

• Colours should be bright but slightly desaturated
• Colour palettes should be minimal... there is no limit, but be thrifty
• No gradients
• Use line work where needed to emphasise forms. Use a stroke to define the whole form if the fill colour gets a bit lost against a white background
• Where highlights or tonal difference suggest a directional light source, it should be in the top left.

Format

• Icons should be provided in SVG format
• Layers should be helpfully named (background, highlight, etc, not Layer 1, Layer 2)
• Strokes should not be converted to shapes (to allow overriding stroke properties in CSS)

Licensing

CC0? Any other options?

Anyone got additional suggestions or differences of opinion with the above?

[simonv3]

This is a good idea. Not really a style guide - but make sure to make your icons in SVG so that they're scalable - even if they're not meant to be larger than 64px

[andru]

I'm actually already finding that I'm scaling these icons up to 96 and 128. Perhaps we should add to the guidelines that the 64 icon should contain enough detail to look good at 200%... or we should add 128 as the highest resolution?

Thoughts on this @simonv3 ... what's the context for these icons at OpenFarm? Would there be interest in using larger sizes?

[roryaronson]

I think having 128 versions would be nice, though if a designer wants to just make small ones with less detail, that's cool too. Potentially another designer can make a more detailed one later.

[roryaronson]

We're building a drag-and-drop farm designer tool for FarmBot that will use these icons. I figure once we get it to a useful state, we'll port it to OpenFarm as a garden mapping/tracking tool.

I can also see the icons being used in list views (such as on the current My Gardens page) where a small photo isn't as recognizable as an icon.

[simonv3]

If we do 128, next thing we'll find is that we'll want 512, etc. I think we want the icons to be usable at those sizes, but I don't think we should require that?

I think saying "the should be come in 3 sizes: 24, 32, and 64; but keep in mind that the larger resolution icon will probably be used at larger sizes as well.

I don't think there's actually a context for these on OF yet aside from "default" plant icon if we don't have images, it's more of an Farmbot thing (for which you'll have to ask @roryaronson).