Social Preview image for Github

[Blessing1135]

Social Preview Image for Github open-life-science#4 After researching what a social preview is, I got to understand that social preview are cards that give a preview of what a shared link will lead to across all social media page like Twitter, slack, and linked-in, etc., this is also eye catchy which make users get interested to click and see what that sites actually look like. Well, I just got into UI/UX design a few months ago and for now, this design was made using the Figma App which I am more familiar with and also comfortable with for now, and I also hope to explore other Apps for better usage and understanding as time goes on, The colors used for this design are Green with a color code of #28a82d, Blue with a code of #287aab, White and Black with an opacity of 100% and 95% respectively, Using the Montserrat font for all texts using 36px for the header and 24px for body text. However, I tried to check the project guides on Colors, Fonts, and other tools but couldn't find any so I decided to go with the brand colors generally creating my own Code in the meantime. I also used the 8px grids. attach above is also the link to the file uploaded.

[Blessing1135]

@yochannah Good day, trust you are doing great, I have created a pull request on this issue, and your comment and merging is of Value to me, Thank you.

[Ismael-KG]

Thanks for the great work @Blessing1135 ! Two bits of feedback from me, and a thought I hadn't considered before!

1. The detail you've provided about font, font size and colours is excellent! I will try to think of where else this clarity can come in handy
2. There is a lot of blank space beneath the GitHub link and the elements become misaligned. Try to align elements more clearly. For example: could OLS' logo at the bottom right be bigger and at the same height as the contributors on the left?
3. Gradients for OLS' name! I wonder if we should consider gradients as opposed to solid colours when representing OLS! I'll mention this in #38 and see what people think 😊

(Also just making sure to link this PR to issue #14!)

(Oh no, I'd written this yesterday but never hit "comment" – sorry!)

[Blessing1135]

Thank you very much @Ismael-KG for the feed back I will make all necessary corrections .

[Blessing1135]

@Ismael-KG Linking this PR to Issue #20 with a few changes made, with an additional Preview image using the Raleway font, and a dark mode background with 80% opacity. Thank you.

Attach here is also the link to these images. https://www.figma.com/file/krj1N5oigkldKZ1U9WPdxD/OLS-Social-Preview?node-id=0%3A1

[Blessing1135]

@Ismael-KG good day, I have made adjustment to this PR and also linked it to issue #20 ,I await your comments once again.Thank you.

[Ismael-KG]

Great to see, @Blessing1135! It all fits in a lot more nicely now. Two final thoughts:

1. the link and blue star align differently in the third proposal. Make sure to align them consistently!
2. I have created confusion! #20 is not an issue at all! We should be linking to issue #14 – but don't worry, the link is made and you don't need to link it again 😊

[Blessing1135]

@Ismael-KG Thank you once again for the feedback and the time, however, I don't understand what you mean by the link and the blue star alignment maybe you could elaborate on it because there is no blue star in the image but I have done a few adjustments though. thank you.

[NPDebs]

Blessing, thank you so much for your contribution!

As much as this cannot be merged, since OLS has a working design system now, it does not take away from the valuable work done here. Thanks and best of luck! ❤️