UI: design a mock-up for the homepage

[abha224]

Description

The Open source programs website currently does not have a homepage. We need to design a mockup for the homepage of the website so that the users can get better clarity on what the website is about.

Additional context

Currently the landing page, ie, the first page that any user sees when they visit the osp website is the Login page. A mock for the login page can be found here for reference while making the mockup. You can refer to the wiki to get more context on what the project is about or reach out on zulip in the open source programs stream.

Definition of Done

• [ ] A basic mockup for the homepage is made
• [ ] Approval by 1 mentor.

[Sonal240]

Hey @abha224 ...I would like to work on this issue...may you assign it to me and share the content headings as in what content is been decided to be on this page if any...thanks

[bismitaguha]

30

This is the issue of deciding the content. @Sonal240 We can discuss the relevant content here. I feel the content should contain details about the application, the community, the purpose of the application and how to go about using it.

[Sonal240]

@bismitaguha is the navbar finalized or can I add that as well...also are you following any margin guidelines for developing mocks?? Can I use any relevant illustration ??

[Sonal240]

kindly review it and let me know the changes to be done thanks

[Sonal240]

I've updated the design according to the feedback received and have removed those images as they were looking squishy because I was trying to fit them in those rectangles...anyways if required I'll share them as well Please have look and let me know the changes to be done...thanks

Design Link

[Sonal240]

Please have a look and let me know the changes...thanks The line has disappeared here but it's there in the actual design link

[Sonal240]

Design Link Please have a look at the changes

@bismitaguha @sidvenu

[bismitaguha]

@Sonal240 The illustrations are wonderful IMO. Let's wait for others to review!

[abha224]

@Sonal240 Hey! love your designs :heart_eyes: :heart_eyes: Just one small change i would like to suggest is if you can modify the navbar "new user" button to a generic "sign in" button as this homepage is visible to people who have not signed in yet

[Sonal240]

@bismitaguha the illustrations are made by @simranaggarwal1999 🙂💜

[Sonal240]

Design Link

@abha224 how's it?

[abha224]

@Sonal240 The navbar looks great now :+1: Sorry for not mentioning this earlier, but is it possible to make the headings black in color?

[Sonal240]

Design Link

@abha224 how's this now?

[abha224]

@Sonal240 The mock looks great!! :blush: Let's wait for @sidvenu 's approval. Till then can you help out with the margins and padding necessary according to your design? Once the design is finalized, you can go ahead and make issues for coding the homepage! :P

[Sonal240]

I have not fixed any margins etc since it was not a part of MVP earlier when I asked @bismitaguha regarding this...@abha224

[sidvenu]

It's beautiful! Though, I think we can change the colour of the FAQ (+) buttons to match with the theme (aqua blue). What do you think? :) @Sonal240 @anitab-org/open-source-progs-developers @anitab-org/open-source-progs-maintainers

[Sonal240]

Cool 🙃@sidvenu ..I'll do the changes and update here

[simranaggarwal1999]

@bismitaguha the illustrations are made by @simranaggarwal1999 🙂💜

Thankyou @bismitaguha @Sonal240

[Sonal240]

Design Link

Sorry for turning in late...how's it @sidvenu @abha224 @bismitaguha?

[Sonal240]

@abha224 are we following any margin guidelines? if any may you please share it...thanks

[sidvenu]

@Sonal240 it's amazing! A good to go from my side. @simranaggarwal1999 great work on the icons.

As far as I know, we aren't following any margin guidelines - @anitab-org/open-source-progs-maintainers @anitab-org/open-source-progs-developers correct me if I'm wrong :smile:.

[abha224]

@Sonal240 We don't have any documented guidelines for the designs to follow for this project yet. I think it would be great if you can help us set one through your design!! If you want we can have the discussion about this on zulip so that this issue can be closed with the final design :smiley:

As for the mock, i think it looks great!! @simranaggarwal1999 @Sonal240 Thank you for your amazing work! :heart:

[Rahulm2310]

@abha224 @isabelcosta There is no activity from @Sonal240 . Can I work on this and develop the home page ?