Brainstorm: Representing OLS' Values

[Ismael-KG]

This issue is to discuss how we represent (in colour, image, text...) the values of OLS. We can follow two stages for this:

• [X] First, we should collate resources that discuss OLS' values (there should be useful info across OLS' repositories, social media activity and website). We want to understand what the values of OLS are, which requires research.
  • From the website: Education, Transparency, Open science, Modesty, Community, Respect, Responsibility
  • From the code of conduct: Be friendly and patient, be welcoming, be considerate, be respectful, be careful in the words that we choose, try to understand why we disagree.
• [ ] Second, we can discuss how the values can be represented, or what they look like (some thoughts on the links between meaning and design are already shared in #34).

Everyone is welcome to contribute to this issue!

[latifatakin]

@latifatakin what do you mean by design system?

A design system is a collection of reusable UI (User Interface) components and guidelines. It helps designers to maintain consistency across the brand. In a design system, we can find the type style , icons, buttons, images, colors, dropdown lists, input boxes, interaction guidelines and others.

[Everythinglayemi]

Oh my goodness, so many great ideas! As usual, a bit of a summary from me (and a question because I am easily confused 😅

We seem to be converging on:

• Colour: green!
• Font: Something sans serif

My question is prompted by comments by @latifatakin and @Bisola15: what are "copies" in this context?

@AdeolaAdekoya, you asked whether I meant representing values on the website. I think my answer is "no," but I'm not sure! I meant how do we represent the values (education, transparency, welcoming, considerate, etc.) visually. That said, this might be another question worth asking: What elements of OLS' branding can represent its values? (@Caxri7's very first comment here might have answered this already!)

Since users would see the visual assets when they open the website, I believe they better reflected the values. We ought to put more effort into letting our fonts, color scheme, infographics, logo, and other visual components better express our ideals.

[Lydiaofficial]

You are all doing spectacular work and providing amazing insight – I hope you don't take it personally if I don't comment on exactly what you said!

I just want to mention some two thoughts based on @niyolynate's PR #46:

1. Font: Fonts have been mentioned above (by @latifatakin @Bisola15 @jilaga @Bharlikiss @Chalcedony219 and others!) but what about font size? Does anybody know of any standards for website font sizes? (@niyolynate's PR is very detailed on font sizes! 🎉)
2. Use of gradients as opposed to solid colours: Would we say gradients or solid colours best represent OLS' values? How levels of transparency for different elements?

On deciding on the perfect font size, we have to consider the type of page the OLS website is and when we do that, we find out that it is a text heavy website because it has a ton of text and doesn't have a lot of interactions which suits the purpose of the platform

Since people are visiting with the goal of learning something, it is important that we don not make them strain their eyes. So I suggest bigger font sizes.

16px is the minimum body size for text heavy pages which is also the default font size in all browsers, while 18px is also a great size.

[Everythinglayemi]

We are unanimously agreeing on gradients, yes!! 💃🏽💃🏽 But then again, how far do we want to go from the current brand identity? 🤔

I prefer the look of solid colors. We may utilize a variety of green hues. According to studies, science is best portrayed using solid colors, and our basic principles follow this trend. Additionally, a command of gradients as well as an understanding of color theory and its meaning require mastery.

[latifatakin]

You are all doing spectacular work and providing amazing insight – I hope you don't take it personally if I don't comment on exactly what you said!

I just want to mention some two thoughts based on @niyolynate's PR #46:

1. Font: Fonts have been mentioned above (by @latifatakin @Bisola15 @jilaga @Bharlikiss @Chalcedony219 and others!) but what about font size? Does anybody know of any standards for website font sizes? (@niyolynate's PR is very detailed on font sizes! 🎉)

2. Use of gradients as opposed to solid colours: Would we say gradients or solid colours best represent OLS' values? How levels of transparency for different elements?

You are all doing spectacular work and providing amazing insight – I hope you don't take it personally if I don't comment on exactly what you said!

I just want to mention some two thoughts based on @niyolynate's PR #46:

1. Font: Fonts have been mentioned above (by @latifatakin @Bisola15 @jilaga @Bharlikiss @Chalcedony219 and others!) but what about font size? Does anybody know of any standards for website font sizes? (@niyolynate's PR is very detailed on font sizes! 🎉)

2. Use of gradients as opposed to solid colours: Would we say gradients or solid colours best represent OLS' values? How levels of transparency for different elements?

Thank you for the words of encouragement @Ismael-KG .

1. There are standards for choosing website font sizes for example, legibility, readability, scalability etc. But these are general standards.

To determine font sizes, we need to use a typographic scale. We have several scales like the major second, minor second, golden ratio, minor third, major third etc. A good type scale we can use is the major third because of it’s responsiveness across web and mobile. We can use a type scale generator to determine the font sizes from H1 to H6 (Header 1 to Header 6) to Body text.

2. I think the idea of us using gradient is absolutely brilliant. We can use linear gradients in our design, we have to keep it simple and subtle though. This is where our secondary color comes in.

@Ismael-KG I have a question. Is there a design system for OLS?

@latifatakin you're apt on the font sizing. We have some design guidelines in this repository, you could check the files.

I will check the files out. Thank you 🙏

[AdeolaAdekoya]

I think the design guidelines we have here just talk about the brand color and the font that was used which I believe is Raleway not the font size.

Since it's just for the values I don't think a design system might be needed. Cause we don't require various font sizes max 2 if there's a need for that.

And I'm on board for a gradient too but like @Chalcedony219 stated, the right use of gradient requires mastery so maybe we used much toned down colors.

[AdeolaAdekoya]

We are unanimously agreeing on gradients, yes!! 💃🏽💃🏽 But then again, how far do we want to go from the current brand identity? 🤔

I prefer the look of solid colors. We may utilize a variety of green hues. According to studies, science is best portrayed using solid colors, and our basic principles follow this trend. Additionally, a command of gradients as well as an understanding of color theory and its meaning require mastery.

This is a good idea. But remember we're trying to deviate from the community being seen as "just a science community" and one that everyone is welcome.

[Bisola15]

You are all doing spectacular work and providing amazing insight – I hope you don't take it personally if I don't comment on exactly what you said!

I just want to mention some two thoughts based on @niyolynate's PR #46:

1. Font: Fonts have been mentioned above (by @latifatakin @Bisola15 @jilaga @Bharlikiss @Chalcedony219 and others!) but what about font size? Does anybody know of any standards for website font sizes? (@niyolynate's PR is very detailed on font sizes! 🎉)
2. Use of gradients as opposed to solid colours: Would we say gradients or solid colours best represent OLS' values? How levels of transparency for different elements?

Finally here 💃🏾💃🏾 Thank you for your kind words @Ismael-KG Standard website font size as @Lydiaofficial mentioned is 16px. She also talked about the need for readability which is very vital owing to the type of website OLS is. I do know that the basic body text largely depends on the type of font that is used. Some fonts are wide and short, with low cap-height while some are narrow but taller and some just balance adequately. These differences contribute to the appearance of the typeface and readability at different font-size. Generally though, 16-18px is okay for body text.

For the gradient, we can explore gradient as @NPDebs mentioned keeping in mind what @Chalcedony219 mentioned about being careful otherwise it can lead to a fail (not what we want). Balance of colors is very important in the use of gradients. There are also websites like; coolors, uigradients etc that auto-generates gradients for use. It gives someone a balance ground to begin when it comes to the use of gradient.

[Preciousutos]

You are all doing spectacular work and providing amazing insight – I hope you don't take it personally if I don't comment on exactly what you said!

I just want to mention some two thoughts based on @niyolynate's PR #46:

1. Font: Fonts have been mentioned above (by @latifatakin @Bisola15 @jilaga @Bharlikiss @Chalcedony219 and others!) but what about font size? Does anybody know of any standards for website font sizes? (@niyolynate's PR is very detailed on font sizes! 🎉)
2. Use of gradients as opposed to solid colours: Would we say gradients or solid colours best represent OLS' values? How levels of transparency for different elements?

On deciding on the perfect font size, we have to consider the type of page the OLS website is and when we do that, we find out that it is a text heavy website because it has a ton of text and doesn't have a lot of interactions which suits the purpose of the platform

Since people are visiting with the goal of learning something, it is important that we don not make them strain their eyes. So I suggest bigger font sizes.

16px is the minimum body size for text heavy pages which is also the default font size in all browsers, while 18px is also a great size.

This also varies with font choice but yes, those are standard minimum body sizes.

[Bharlikiss]

You ladies are giving me joy @jilaga @latifatakin @NPDebs . Fonts are like outfits , they provide people with first impressions about a brand, because they are the first things people notice about the brand, hence they set the tone of the brand which is why we have to be strategic and intentional about the font selection too. I agree with @Bisola15 suggestion about Sans-serif because it embrace simplicity and the feeling of being modern, youthful, approachable, fun, informal, friendly, casual , cutting-edge and it is very humanistic just like OLS . Hence my Sans-serif typeface suggestion is Open Sans Open Sans is versatile and give room for communicating different messages throughout your design with just a single font and it was was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letter forms.

@Bharlikiss Your description of fonts as outfits; I love it!! Captures the essence of fonts in a summary. The suggestion about Open Sans. I do agree with all you said about Open Sans, quite spot on, but it is kind of also what sets a limitation to it's usage. Open Sans is a go to Typeface for a lot of brand or people who wants a sans serif font hence it is widely used and the uniqueness is starting to wear off/ if not already. If OLS will be changing it's typeface, we can suggest other neat sans serif font that are not as widely used but still packed with value. What do you think?

Hi, I'm open to other suggestions but because a typeface is widely used doesn't make it less unique or less effective though, i believe if a typeface is popular or widely used, we should first check the reason why its so popular and if it meets the purpose of usage.

[jilaga]

Hi all, I made some illustrations for the core values of OLS and they are linked above. I would really love some feedback or suggestions on improvements if any, Thanks.