Refresh Otter Blocks Icons

[mghenciu]

As mentioned here, icons for Otter Blocks could look better. Currently there are some inconsistency issue (having different stroke, size), but also there are a lot of Icons that look similar or the same.

[mghenciu]

@HardeepAsrani What do you think is the best approach for this? A complete overhaul for the Icons would probably take some time, so I am thinking we ca do 1 minor round where we fix small inconsistencies (for example the Form Block - attached)

, and in the second round do a whole overhaul.

cc. @JohnPixle

[ineagu]

as an note here, we can probably also try to work with Dragos who did the Themeisle icons to redo the whole thing and create custom icons that look good and helps with understanding what the block does.

[HardeepAsrani]

@mghenciu For me personally, the inconsistencies aren't as noticeable as the icon set which sometimes doesn't even make sense for many blocks.

[JohnPixle]

Definitely agree on this, I personally believe that if we have the resources to do an overhaul of the icons, it is something we must do in this relatively early stage of the product. Competition on this is tough.

If Dragos can work on them, it would be awesome, because he will extend the same style into the new icons, which will make the transition easier for the users.

There is also good existing material for references, so Dragos can get inspired on how others have approached similar concepts, and not need to conceptually re-create the wheel for each block.

[HardeepAsrani]

@JohnPixle When you get some time, can you collaborate with Andreea on this? I'm excited for custom icons. 😄

[JohnPixle]

@HardeepAsrani Sure thing, I will arrange it with her on Slack, she does not appear to have a Github profile as I see.

Will keep you posted!

[selul]

@JohnPixle she has -> @poorse02 , she is also in the @Codeinwp/design-team

[JohnPixle]

Hey @poorse02 ! So, regarding the Otter icons, just wanted to share some initial input so you can get started whenever you see fit.

Suggestion: I would start by creating a clean WordPress setup, and installing the following Block-based plugins, so you can see how others have approached the icon design.

Gutenberg Blocks by Kadence Blocks – Page Builder Features Spectra – WordPress Gutenberg Blocks GutenBee – Gutenberg Blocks Stackable – Page Builder Gutenberg Blocks Gutenberg Blocks by Kadence Blocks – Page Builder Features

and of course:

Otter – Page Builder Blocks & Extensions for Gutenberg where you can find all the existing Otter blocks, and their current icons.

No need to re-invent the wheel conceptually for each block, I believe we should focus on having a clean readable icon-set with consistent style and line widths.

I will leave it up to you on how you will organise the workflow, I have never worked on icons before, so feel free to create a new Figma file and setup your workspace. Let me know if you need any help

Specs:

• The final format of the icons should be SVG
• The original size of each icon should be 24x24 px
• Icons should be single-colored. We can leave the color for the end, but it should be aligned with the Otter brand.

Let me know if you need any help! You may want to start with 5-6 icons initially, and as soon as we are set on the direction and style, you can proceed with the others.

John

PS:

@HardeepAsrani I saw that some of the icons in the block inserter sidebar are 24x24 but there are some others that are at 20x20. Can you confirm we are good to go with 24x24 ? I want to avoid resizing the icons in the final product. Let me know! 👍🏻

cc @mghenciu

[HardeepAsrani]

@JohnPixle Yes, it should be 24x24. Many we used 20x20 when other alternatives weren't available.

[poorse02]

Hello everyone, I'm coming back with an update. I've done some research, studied our icons and the competitor's and looked into what our features do and I've chosen, as a starting point, to redo 5 icons that I've considered that don't match their functionality or that could use an improvement more than the others, for now.

Here are the 5 icons I've chosen and their variants:

And here they are in a mockup:

---

I've chosen to go with rounded corners to match the gentle/ playful nature of the logo and for readability reasons I've chosen to go with outline icons instead of solid ones because the spacing between elements of the icons would be limited in most cases. Perhaps there could be some leeway to have one element of the icon filled, if it makes sense and it doesn't break the consistency of the set (e.g. the Maps icon).

For example, here's a comparation between the Masonry and Progress Bar icons and their filled versions, where you can see that the readability of the solid icons is reduced compared to their counterparts:

Of course, the style (and colour too) can be adjusted and molded the more I progress with them, these are just some starting points and would love to hear your thoughts on this.

Also, this is the figma file on which I'll be working on the icons, you'll find more in progress work there.

[HardeepAsrani]

They look nice, for Masonry in particular I feel like it looks more like FSE icon than Masonry. Maybe you can add something inside the boxes to make it feel like they're images? Not sure if that will look fine or too busy.

[poorse02]

I believe it'd be too crowded if I added something inside the boxes because the icon is already on the verge of being too crowded (but works like this) as it is. Even if I add some simple shades, it becomes very busy and way less readable:

[ineagu]

good work @poorse02. For the the popup icon in still confusing since is looking exactly like a open in a new tab icon.

The best I found is this : https://www.iconfinder.com/icons/4298685/popup_ui_window_icon

[JohnPixle]

Apologies for being late to the party! I really like the style and the resolution of the icons @poorse02, nice work 👍🏻 I feel that the density and detail are quite good and consistent across all icons, which is the most important things imho.

I also believe that Outline style will work better than the filled version in terms of readability, but we can evaluate this more when you design more icons.

The popup icon needs some work indeed, I like the icon Ionut suggested, but I believe you might need to simplify the shape in order to match the current style.

Will be keeping an eye on Figma, and see if I can add some references for inspiration. Many thanks!

[HardeepAsrani]

Any updates on this?

[poorse02]

Hello again, sorry for the late updates, been working on more fronts lately. Happy to announce that I've drafted all the icons and that they're in their (mostly) final form - I'll adjust them after your feedback if it's not clear visually what they're supposed to be or any other changes.

Please take a look in the Figma file. The new icons are found in the Progress page in the New Icons frame.

I've kept the same style I've established in the beginning - round corners and rectangles while avoiding other sorts of shapes (when possible) and filled items used sparingly on accent elements of the icons.

Now, there are 2 things that we should discuss:

• deprecated block icons
• instance icons

Deprecated block icons - I have a question here. Can users who've used deprecated blocks on their sites (and didn't remove them so far) still access the blocks? Because if so, there might be the issue if we should update the deprecated blocks icons too and if it's worth it. Instance icons - I've noticed that in the WP building space there are different icons used for parent blocks and child blocks, meaning that for Columns there's an icon and for Column there's another one (albeit a variation of it) - see screenshot below.

This is something we can talk about towards the end, but it's worth mentioning and thinking about it. There's already some experimenting on this matter in the Figma File (in the same frame as the new icons).

Any questions or feedback are much appreciated!

[JohnPixle]

Very nice work @poorse02 really like them. They are consistent, friendly and convey the message much better. Are you open to some optimisation suggestions regarding pixelation and the pixel grid?

I noticed that in 1:1 view some of the icons look fuzzy, and this is because the lines and shapes are not 100% aligned with the pixel grid. This is not hard to do in the existing icons, and I can help you out with it. But if we make it, the icons will look quite crisp.

Below is a before / after view after I aligned them with the pixel grid. This of course will not be possible with EVERY icon, but it's worth a shot whenever we can do it.

Here is a quick video where I explain the whole pixel grid concept. Let me know if it makes sense.

This might be a helpful figma plugin.

[poorse02]

Thank you for the advice, John! Didn't know about this effect. I used half pixel distance to let the elements breathe a little but it seems it had the opposite effect, good to know 👍. I'll adjust them accordingly.

[JohnPixle]

Glad to hear you found it useful. Please don't hesitate to ping me at any point in Slack, happy to help if I can 🚀

[ineagu]

@HardeepAsrani is all good here? I think we can also pick a unique color for the Otter icons, something lite aligned with our branding. Do you like the idea @JohnPixle? or prefer to stick with black and try to have some Otter branding to them?

[mghenciu]

I know you are quite busy with the FSE themes, John. So I've tried something in Figma , using the Default Otter color (not a great result) and using a Gradient (attached)

I think this should also have an option in the Otter Panel/Dashboard, so users choose if they want a distinctive color or the Default one.

---

From this preview, I think it may be worth exploring increasing a bit the Stroke width. At this point our strokes look a bit too small, compared to the Core Icons, imo.

Let me know your thoughts, when you get some time.

[HardeepAsrani]

@mghenciu I'd be against allowing an option to toggle the color of the icons. It's giving the user too much choice over an option that doesn't really affect them. We can choose the color and go with it, just making sure it works nicely with light/dark mode.

[ineagu]

Those are good to me and I agree with Hardeep.Sent from my iPhoneOn Dec 9, 2022, at 00:50, Hardeep Asrani @.***> wrote: @mghenciu I'd be against allowing an option to toggle the color of the icons. It's giving the user too much choice over an option that doesn't really affect them. We can choose the color and go with it, just making sure it works nicely with light/dark mode.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[JohnPixle]

@mghenciu Thanks for catching up with these. I think they are good, and as I just tested they show up nicely on a dark background as well.

Technically, if we want to increase the stroke width, it will require a significant re-work on the icons. I don't think it's within our bandwidth at this point.

I think we can proceed with these as they are, and look into fine-tuning them in a later update if needed.

[poorse02]

As discussed with Mihai and here as well, I've revised the final version of the icons and also did the icons for child blocks. I think the current gradient is a good fit for the icons and isn't too over the top 👍 . The icons can be found here, in the Icons - NEW frame. As for the deprecated blocks, I think the best we can do is just change the colour for them.

[HardeepAsrani]

Thank you @poorse02, they look great!

[JohnPixle]

@poorse02 Looking great, thanks for aligning them on the pixel grid!!! 🚀

[pirate-bot]

:tada: This issue has been resolved in version 2.2.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[HardeepAsrani]

They've live, thank you @poorse02 for the work!