Wireframes for Member Dashboard

[xprilion]

Create wireframes for member dashboard, gallery and frames creator portal

[awantika10]

Hey! Can I work on this?

[Abhijay007]

@xprilion Sir can I work on this project, I will add react support to this project if you like. So can I contribute??

[xprilion]

@Abhijay007 Sorry, we're not currently looking to shift this project to React. You can take a look at the other issues or raise something of your own by testing the application! :)

[Abhijay007]

@Abhijay007 Sorry, we're not currently looking to shift this project to React. You can take a look at the other issues or raise something of your own by testing the application! :)

ok got it 😄, I will try to work on some other issues.

[awantika10]

Made few wireframes of the Badge Generator with following features :

• The Frame Generator consists of nav bar at the top with logo at the left , login functionality at right with undo and redo buttons.
• The dashboard window is divided into two parts, first with a panel at left for changing the frames, styling the text, adding icons and uploading the user's image and second is the workspace for making the frames.
• The workspace will also contain options for aligning the image and changing its orientation.
• Download and Share buttons will be available below the frame.

The theme and color schemes where taken according to OMG Events Website

[awantika10]

The following are the changes which were made according to @xprilion on the dashboard :

• Increased the contrast between the panel and the dashboard for better visibility.
• Add Events feature rather than text for attendees, speaker and organizer of the event.
• Changed the color of the icons.

[awantika10]

New Feature : Website for OMG Badge Generator The following features has been added to the website :

• Login/SignIn : User can simply login and register themselves through the website by clicking on "Login".
• For viewing the badge generator dashboard the user needs to hit "View Dashboard" button.
• In order to view the previously made badges you need to click on "View Gallery" option.
• The website will be available in Dark Mode as well.

[arnabsen1729]

@awantika10 Looks really good. Just a couple of edits from my side

• SVGs above "Built for dev.." and "Designed to.. " not displayed in the dark mode. Same goes for the icon in the header/navbar.
• Light mode to dark mode switcher button is missing in dark mode.

• "View Gallery" text is not very clear in dark mode.

  Since you are following the Material UI format you can take some help from here

[awantika10]

Yeah. Me and @sairish2001 are working on the icons. We will take care of your suggestions. Thanks :)

[awantika10]

New Feature : Wireframe of the gallery

• Designed a simple wireframe of the gallery with home, dashboard and login option at the Nav bar.
• Gallery will contain all the badges which the user has already made.
• On hover, the user can edit, download and delete the frame.
• With New Badge button, the user can make new logo from the dashboard.

[awantika10]

Update

1. Created IWasAt logo using Illustrator.
2. Added and Made a PR for Logo to the images folder.

Couple of changes to be done for the UI @sairish2001

1. The Logo size should be increased according to the width of the nav bar.

2. The hexcode of the icons and text should be #0094FF, which is in accordance with the color of the logo.

3. There are bugs related to the alignment of the buttons in the homepage and login page.

4. The UI could be updated like this

[rajinderpalsingh2001]

Thanks for your valuable feedback. Will do in next Pull Request.