search

publiclab / infragram

A minimal core of the Infragram.org project in JavaScript
https://infragram.org/sandbox/
GNU General Public License v2.0
46 stars 166 forks source link

Re-design of the Infragram landing page and responsive design on mobile #353

Open steph237 opened 2 years ago

steph237 commented 2 years ago

I went through the Infragram website and here are some suggestions I have for the UI of the landing page of Infragram. I noticed some issues on the original landing page which are listed below; • There is a lack of proper hierarchy • Because of lack of sections, the page makes new users confused • The lack of a navigation bar I also worked on the responsiveness and provided a proposed design for the view on mobile I redesigned the landing page to look less crowded yet not going far off from the original design. This new design provides a simple and friendly UI for users. This design uses the main logo colors and most of the call to action buttons are in the color of the logo And I added a navigation bar for easier navigation and also added a sub Navigation bar on the landing page that directs to the various sections of the landing page
nav bar

Different sections are more visually separated and contain some whitespace so infragram landing page does not feel to compact On the section of recent images, I added a comment icon, a like icon and a view icon to replace the menu that shows the number of views on hover recent images

On the Question and answer section, I replaced the table with a set of cards that contains the question, the time when it was asked, comments and likes

questions

On the save image section, I separated the flag and the delete buttons and made the delete button red to indicate it is a serious action
save images

For the mobile view, I reduced the display of some of the images an added controls so the user can check the pictures without viewing all at once Below are the images of the full landing page and the mobile view The design is not complete yet and still needs adjusting, I'm open to any suggestions and feedback. Thanks! Desktop - 1 (1)

Android Large - 1

welcome[bot] commented 2 years ago

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

steph237 commented 2 years ago

@jywarren and @TildaDares Please I will like you to check my proposed design as a proposal for the outreachy contribution phase

on2onyekachi commented 2 years ago

@steph237 Awsome!

jywarren commented 2 years ago

Hello @steph237 thank you for your proposal! Please be sure to make an entry on https://publiclab.org/notes/cess/04-04-2022/call-for-proposals-outreachy-summer-2022 (or https://publiclab.org/notes/cess/04-11-2022/call-for-proposals-google-summer-of-code-2022 if GSoC) and link here too. You don't have to duplicate the content but just so we can see everyone's proposals together! We'll be reviewing ASAP as we're still catching up helping new contributors!

steph237 commented 2 years ago

Thank you @jywarren. Please do you mean i should create the proposal and drop the link here ?

steph237 commented 2 years ago

Greetings @jywarren here is the link to the proposal. Can I use it for my final application for outreachy? https://publiclab.org/notes/S_mboyi/04-16-2022/outreachy-proposal-re-design-of-the-infragram-landing-page-and-responsive-design-on-mobile