UX/UI Enhancements

[benjagm]

• Branding support to help expand the brand.
• Brandmark and logtype refresh.
• Develop primary and secondary colour palettes.
• Design creative collateral to support the text/documentation in line with the brand.
• Contextual illustrations.
• Hero image.
• Design theme icons.
• Responsive navigation
• Responsive Landing Page mock up.
• Figma file
• Add new brand assets to the Figma file to collate all new assets.
• Annotate interactions.
• Revised Doc page Design
• Revised Blog page Design
• Share Figma file.
• Brand repo
• Design and set up assets for JSON Schema GitHub brand repo.
• Incorporate ‘Build more, break less, empower others’ strapline.

[PaulWaller]

Branding support. Revised brandmark and logotype - 1st draft
Here we started to look at refreshing the brand. We took the existing JSON Schema brandmark and logotype and redrew and revised the geometry, so the mark and logotype are combined. We haven’t made radical changes but merely enhanced the collateral that is alrady there. We've also adjusted the cut and size of the logotype. The first page shows a colour palette, existing mark, and initial alternative ideas. This is followed by a series of pages developing one option and how that might work in the new site.

JSON-Schema-Brand-Refresh-V1.pdf

[PaulWaller]

Branding support. Design creative collateral to support the text/documentation - 1st draft.
Here we have taken keywords such as Comunity, Ai, Implentation, Integration and Validation to use as a starting point for our illustrative content. We have worked up x5 illustration that could be used to support text content on the landing page.
Contextual Illustrations x5 - Draft.pdf

[benjagm]

I created a new repo for all things branding:

https://github.com/json-schema-org/brand

[PaulWaller]

For comments and feedback. This week we revised the first draft of the responsive landing page mock up to include new theme icons, stronger colours for accessibility, revised footer, updated taxonomy and provided a series of alternative hero options with the trusted section relocated.

• The theme icons have been redesigned and simplified so they contrast against the contextual illustrations and layer the information.
• The ‘Trusted by’ section has been moved to the hero for better visibility.
• We have updated the taxonomy and footer designs.

[PaulWaller]

These header and hero options explore the balance between colour, line, text, graphics. We performed accessibility check on the colours and opted for a stronger contrast which we have incorporated into the logotype refresh.

[PaulWaller]

Update and refeshed Brandmark and logotype

[benjagm]

Some feedback has been provided in slack here: https://json-schema.slack.com/archives/C8C4UBXDF/p1682696675868109

[benjagm]

We have a new version of the prototype considering the last feedback received here and in Slack.
Thoughts?

I'll consider the feedback loop closed next Friday, May 12th.

[Julian]

I'm resisting "true" bikeshedding as much as possible (which I think everyone should at this point :) -- and even doing so, feel free to ignore any of the below as being too specific for now, as I say, to me the most important thing is getting live, and there's nothing completely bad about what's there, it's good even as is for a v1 -- great even.

In fact maybe the only thing I'll say at the minute is I think it needs ~50px at least more padding for the middle content sections (not the footer or hero)!

But yeah anything else is very minor and subjective, so I'll keep it for now even.

[benjagm]

My only comment is change the 4 points of Why JSON Schema section from the current 3 + 1 to a 2 x 2 layout like the grpc page, but we can fine tune that during the development of the page.

Something like:

[PaulWaller]

Hi @benjagm we have incorporated the latest comments up to the Friday 12th into the this link to the Figma file which has all the brand and design collateral recently developed.

Here's a brief recap of what we did interms of developing the JSON Schema Brand

.
We began the brand refresh work item by looking at the existing JSON Schema brandmark and logotype with a view to adjusting the proportions. We have taken the mark and revised the geometry, so the mark and logotype are equally weighted. We adjusted the cut and size of the logotype. We took the existing mark as our base because this is already an established brand and developed the geometry and proportions in line with the logotype. For the logotype we have utilised the 'Inter' font but used a a stronger cut. This is the first step in terms of pulling all recently developed branding collateral together and progress in this area.

Whilst reviewing the brandmark and logotype we set out a colour palette based on strong blues and complementary colours.

These colours were then utilised within the supporting graphic collateral developed to help expand on the JSON Brand.


[benjagm]

Great work @PaulWaller !! Huge thanks.

[gregsdennis]

Questions about the color:

Why blue, and why that particular shade?

[PaulWaller]

Questions about the color:

Why blue, and why that particular shade?

Hi, We took the to the original blue and updated the tonal range for better accessibility and contrast ratio when reversing graphic and text out of a base colour.

[gregsdennis]

We took the to the original blue

This is where my confusion lies. What original blue? Our website has only ever been black and white.

I'm not complaining, just curious why blue was chosen.

[benjagm]

What original blue?

The new landing page design started taking as input the new website development available in this same repo and (deployed here). We discovered that the blue present there hasn't been requested by anyone and has no link with JSON Schema but we decided to explore with and without using and asked for feedback it in this slack thread.

I personally like it but I am sure I'll like other colors as well.

why that particular shade?

Just to confirm: Do you mean the gradient blue or the grey shades in Why JSON Schema?

If is that grey shade, we can definitely remove it.

[gregsdennis]

Do you mean the gradient blue or the grey shades in Why JSON Schema?

I mean why this particular HSV and not something (anything) else? Was there research that went into it, or was it just a decision by someone? I note that it's considerably more saturated and a bit darker than the example in your linked deployed site.

[PaulWaller]

Hi. The origin of the blue was taken from the test repo and used as a base colour to begin building colour palette of contrasting colours. For the gradient we went up the tonal range of our base blue and selected a slightly darker tint to improve contrast. So, the gradient goes from a darker tint to the base blue colour.

[Relequestual]

@gregsdennis I think @PaulWaller means THIS repo as it was when he started collaborating with us =]

The previous person who worked on the site just decided to try some colour and picked that one. As to why, you'd have to ask @musemind.

[benjagm]

Hi everyone! I just created this collaborative document to build together the messaging of the new landing page.

Do you have experience with documentation?
Are you talented to craft inspiring messages?

We need your support... we are actively looking for contributors.

[PaulWaller]

Hi Benjamin, I have updated the brand banner with redueced bottom margin and alos worked up a second version to reflect the heor on the nwe site. Here are the PNGs and SVGs. Let me know your thoughts.

[PaulWaller]

Revised Blog layout for desktop and mobile.

[PaulWaller]

Revised layout for docs and side nav.

[benjagm]

Pending to upload the resources to the branding repo: https://github.com/json-schema-org/brand

[benjagm]

Completed. Huge thanks @PaulWaller for the amazing work on this! ❤️❤️❤️