Extension logo and page design (was: Extension Logo Bazaar)

[luceos]

It's time we profesionalised this extension a bit more. For Bazaar we need;

• svg
• 120x120 is used inside Flarum
• flagrow.io (for now) uses 60x60

[darisi]

Heres my progress update on this one.

While working on this task I stumbled on a problem that what we do with this, will also need to be done on all other extensions we currently have or will have in the future. All of them will need:

• logo/symbol
• icon
• cover image
• card Image

So it's a quite complex task if you take into account that we need 20 extensions x 4 assets.

Logos will be impossible to make as some extensions are just information and to transform it into a visual language is really hard. How would a "Flarum-ext-latex" symbol look like? So the logos need to be made with words or the names of the extension. We would add a "by Flagrow" under it.

Icons are needed for the cards we have. To keep them consistent and that they show that they are Flagrows, it needs to be simple so a purple background + blue icon (flagrow colors).

Cover Image is a bit trickier than an icon as it's even more visual, but I had an idea to "Generate" a cover image with some filters. We choose one image from unsplash.com and then generate 3 images and then put them together - like below. The result will be different images for each extension, but they will have the same style which will group them together. Cover image will also have the extension logo. In a way, it's similar to what Wordpress Plugin pages have, but we will have the same style to stand out from others.

card image is a mix of cover + Icon and kind of complements everything. It could be used separately or together on other stuff like twitter, facebook posts etc.

I also added some quick previews here, you may need to go back/forward to see the 2 examples + 2 cards:

https://invis.io/YZAYHTHK7#/259670996_auto-Confirm-Fix

[luceos]

I think we could keep this much simpler. We will only give a few extensions custom artwork. So far there are only a few that would make sense, auto-confirm-fix not being one of them 🤡

We could even set a specific requirement for them, eg having at least 2k downloads.

https://flagrow.io/packages?sort=-downloads&filter[name]=flagrow/

Please also ignore latex, it's not something we actively maintain 😊

[clarkwinkelmann]

Agree with @luceos

I think the idea was to give Bazaar a better look inside Flarum in particular. The icon is the main visible asset there. Maybe a banner image could also be added to the header of Bazaar pages if it helps ?

[darisi]

Here's another version. Like you guys said ( @luceos & @clarkwinkelmann ), I made it a lot simpler.

Here's Bazaar:

And premium extension we have (background can be different if there's a need):

And here are all free, lower end extensions.

Only Bazaar has the icon, OThers have a "periodic table of extensions" style to them, so we use 2 letters for them. And the word "premium" is added to the specific extensions.

There is clear separation but the style is different and it fit's flagrow. I also had one different style like the one below but we can always add and change things around if needed or if we add a new category of extensions. But it stood out too much in my opinion.

[luceos]

So during the quarterly meeting we decided to:

• Stick to the font awesome icons for extensions by default.
• Give premium or high value extensions an icon (Bazaar being the topic here).

I've been thinking about that background and suggest (for now):

• Use the title and author as Darjan proposes
• Use the composer.json icon value for color and background, but run a check in vue whether there is sufficient offset (bootstrap 4 has a nice sass mixin for that we can re-use)
• In case there is no such color setting we use the vendor/organisation default.
• In case no organisation has ownership we use global defaults.
• We'll get a few random images we put in the background.

[luceos]

// Color contrast
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= 150) {
    @return #111;
  } @else {
    @return #fff;
  }
}

[darisi]

@luceos So when you say we get the extension values from the composer (organisation default), you mean there will be a flagrow.json file in the extension folder with similar things like below?

  "flagrow": {
    "name": "Lorem Ipsum Dolor",
    "author": "Lorem Ipsum Dolor",
    "description": "Best extension in the world",
    "fontawesomeIcon": "fa-bandcamp",
    "logo": false, // loads default logo (svg?) location from ./logo.svg
    "color": "#D23737",
    "coverImage": true, // loads default image location from ./cover.png
    ...
  },

If the flagrow.json file is missing (or some fields), we load our "global defaults" styling.

Just thinking how this design will be dynamically loaded later and what things we'll need to add to documentation, and if there are any ways to do this more simple.

Love the Vue checker for background color so we can change the color of the titles (black/white) depending on the background color and contrast.

===

I created the 2 new states we will need "global-defaults" and "organisation-default".

Global Defaults would always have the icon, colors that are shown here. Organisation defaults are pulled from the extension json file. If missing they default to global defaults. The example shows red, but it can be anything.

And also made some smaller tweaks to the Bazaar, premium, normal/free extension that are from Flagrow.

I'm really happy with this and I think this will work really well for us and extension creators.

@luceos @clarkwinkelmann @rodymolenaar Let me know if you think this is ok for you too so we can figure out a way to integrate all this. 👍

Just a thought, would it be a good idea to create a mini SPA which would generate the "organisation default" json settings for the extension owner? He would be able to see the preview of the extension page top + copy the settings he sees.

[luceos]

@darisi i think overall this is great. The pre-rendering might be interesting, but as we will be initially approving teams manually setting their values for them is not a big deal. Let's first see how everything works and runs before we build complex interfaces that won't be used.

Premium

I just have one concern.

Premium extensions have the word "premium" inside the logo area, this requires "us" to update the logo whenever we make an extension premium. Aside from this visual there's hardly anything that identifies an extension as premium. So:

• Toggling an extension to or from premium on a rainy day might be hard because it needs a new logo.
• Third party developers can also have premium extensions in the future. They might not be aware about this way of marking extensions premium.

Even if you inject the text over the logo, it might not be properly rendered. I think we need a different way of marking extensions premium. In addition we need to show a price.

[clarkwinkelmann]

Like @luceos I don't think the word premium needs to be in the logo. Can we simply add an icon or label somewhere when listing the extension in Bazaar/Flagrow.io ?

I think simply pulling text and colors from the composer.json or defaulting to our defaults will be enough for the banner. I guess it's only a matter of time before we introduce actual printscreens in that section, no ?

@darisi for reference the colors are part of the flarum definition in composer.json, we probably don't need to add our own keys or json file for that. Or were you talking about something else with your json example above ?

    "extra": {
        "flarum-extension": {
            "title": "Flagrow Bazaar",
            "icon": {
                "name": "shopping-bag",
                "backgroundColor": "#f4f4f4",
                "color": "#5f4bb6"
            }
        },
        "flagrow": {
            "discuss": "https://discuss.flarum.org/d/5151-flagrow-bazaar-the-extension-marketplace"
        }
    },

[darisi]

Thanks for the feedback guys. 👍

@luceos Changed it and added the Premium tag with price to the card/extension page. If the title is longer on the small card, it will go into 2 lines. Forgot about the price option on these :man_facepalming:

We can now use the default font-awesome icons as logos and when we have our own we can just swap when we have it.

@clarkwinkelmann Yes, we can later create screenshots and put there (maybe even videos) but we have a dedicated screenshot section below as well. Main reasons for our extensions to use the "purple style" is that when the user will look through these, he will know that it's our plugin.

This is something used by the https://wordpress.org/plugins/jetpack/ as an example. The plugins you know of people that do quality ones are much more likely to be downloaded and tried (if people are happy with one plugin, and the same company makes another one, there's a big chance it will also be good). They are more "serious" and give the impression of solid support and quality so with just the same visuals and consistency we'll be able to "grow our name" more. It's hard to just download some plugins that may be bad or shady as it could harm your site/settings.

We can and probably will still use the screenshots as a background like the "flag row-extension-premium" image has it.

As for the composer.json you mentioned if it's in that file that's great 👍 Was just an example/thought of how to handle it, but the composer.json is a better place for these to be in.

[clarkwinkelmann]

Yes, we can later create screenshots and put there (maybe even videos) but we have a dedicated screenshot section below as well

Wasn't sure about that part. Isn't the banner a bit tall considering it doesn't hold any screenshot then :sweat_smile: ?

Do we need to list the monthly price in the "card" view as well ? I'm not sure if we've decided anything regarding pricing tiers, but maybe it would look cleaner to just put the tier name in the small view, and list the prices at the bottom of the page or by hovering the tier name ? I don't find this $2/mth text very pretty.

Premium extensions won't have a lifetime download count available (unless we implement it). Maybe we could display the number of active customers instead, for example with a rounding like 10+ active installs

[darisi]

@clarkwinkelmann Yeah the top image can be anything really and it's on the extension author to put what he wants there, we can use some defaults if they don't though, same as https://wordpress.org/plugins/ does it.

Removed the monthly price s owe just keep the "Premium" and we'll have the price or tier name (which are these names?) on the extension page.

Why don't we have the lifetime download count for premium extensions? Why is this different?

Here are the updates screens - https://invis.io/YZAYHTHK7

[luceos]

I think we can make lifetime download count implemented quite easily. Now .. because this task deviated from the original request of a Bazaar logo, i separated that to #99

@darisi one design question, what would happen if the title would overlap the premium tag? We might not have full control over that length, so we need to have a contingency here.

A tier is a certain pricing level; eg $1 a month or $15 a month. The tier is the friendly name most likely to reflect the complexity or value of the extension, eg; High Value Extension.

[luceos]

I think we have taken enough time to plan out this page. The design Darjan created is sufficient for now, let's modify it whenever we have further need for it. If @darisi would be up to modify the current extension page and extension card templates (we need to look at the correct branch to implement this in) then we are good to close this off.

[darisi]

Updated the byobu one making it more like the screens.

Also added the png and svg logos to https://github.com/gravure/design

As for the 120x120 and 60x60 sizes, if we're using svgs, these can be set via CSS making them more crisp.

[clarkwinkelmann]

@darisi this looks good :+1: