search

odk-x / tool-suite-X

ODK-X Tool Suite Project roadmaps, issue queue, release notes and wiki.
https://www.odk-x.org
Apache License 2.0
25 stars 41 forks source link

Redesign splash screen for ODK-X Services, Survey and Tables #395

Open Redeem-Grimm-Satoshi opened 1 year ago

Redeem-Grimm-Satoshi commented 1 year ago

The splash screens of the various apps ( Services, Survey and Tables ) needs improvement in order to match with the design guidelines

belrah commented 4 months ago

Hello @maprehensive can i be assigned to this task? i will love to work on it

maprehensive commented 4 months ago

Hello @maprehensive can i be assigned to this task? i will love to work on it

Hi @belrah yes go ahead. No need to be assigned to work on an Outreachy issue.

belrah commented 4 months ago

redesign

Work Description The design presented above solves the issue of ODK-X Splash Screen Redesign for :

  1. ODK-X Services
  2. ODK-Tables
  3. ODK-X Surveys

The ODK-X Logo was used accross all screens to identify the ODK-X Mobile Application while the texts below the logo identifies to the user which of the ODK-X mobile application the user is accessing to avoid error of recognition of the applications.

The elements used in the design conforms to the stated ODK-X-Design-Guildline

@maprehensive kindly have a look. i am open to corrections and any form of modification of the design.

hamna456 commented 3 months ago

Hey @maprehensive, I'm eager to contribute! Could you assign me to this task, please? It's something I'd really enjoy working on.

hamna456 commented 3 months ago

@maprehensive Could you please advise whether I should share the design screenshot directly here or if it's preferable to create a pull request (PR) in order to record contribution? If a PR is needed, could you specify where it should be created?

maprehensive commented 3 months ago

@maprehensive Could you please advise whether I should share the design screenshot directly here or if it's preferable to create a pull request (PR) in order to record contribution? If a PR is needed, could you specify where it should be created?

You can just share the design here as a comment and link to that for your contribution.

Thanks!

hamna456 commented 3 months ago

@maprehensive Could you please advise whether I should share the design screenshot directly here or if it's preferable to create a pull request (PR) in order to record contribution? If a PR is needed, could you specify where it should be created?

You can just share the design here as a comment and link to that for your contribution.

Thanks!

I appreciate your help greatly.

hamna456 commented 3 months ago

@maprehensive, I've created designs for the three splash screens, each presented in both light and dark modes. These designs adhere closely to the design guidelines outlined in the document at ODK-X-Design-Guildline I'm open to any suggestions or adjustments you may have. Your feedback is incredibly valuable to me, and I appreciate any input you can provide. Thank you! 😊

Image

Image

Image

maprehensive commented 3 months ago

@hamna456 this is a good start, well done.

Things to think about:

maprehensive commented 3 months ago

@belrah nicely done. Simple, consistent and clean.

Some things to think about:

belrah commented 3 months ago

@belrah nicely done. Simple, consistent and clean.

Some things to think about:

  • Could you use a brand colour in the app name text?

Yes sure i can add the brand color in the app name text. thank you i will update and tag you on this

belrah commented 3 months ago

redesign-color

Hello @maprehensive

I have added the brand color to the app name text as requested. Kindly take a Look. Thank You.

hamna456 commented 3 months ago

@maprehensive, following your valuable feedback and insights, I have made modifications to my design. I am open to any suggestions and changes that you may deem necessary. Please review the modified design at your convenience.

PREVIOUS DESIGNS

Image

MODIFIED DESIGN

SERVICES APP

Idea Behind Design

The design concept revolves around crafting an engaging animation that illustrates the authentication process on the device and the seamless synchronization of data between the device and the server or database. This animation serves to provide users with a quick insight into the core functionality of the service app, which is to authenticate users and facilitate data synchronization across devices and servers. The animation culminates with the display of the ODK-X logo alongside the app name, effectively capturing the essence of the service. Here are the videos demonstrating these animated splash screens both in light and dark mode.

Light mode

https://github.com/odk-x/tool-suite-X/assets/76582769/4c35e821-34c9-41aa-8f28-1fa034f7d1c7

Dark Mode

https://github.com/odk-x/tool-suite-X/assets/76582769/6e121736-4a49-4e40-9c43-302aba2f9103

SURVEY APP

Idea Behind Design

The essence of the design lies in creating a captivating animation that showcases the seamless collection of user data through surveys, which is then securely stored on the server. This animation aims to swiftly convey to users the primary function of the survey app: offering forms to users for efficient data collection. The animation concludes by prominently featuring the ODK-X logo and the app name. Below, you'll find videos demonstrating these animated splash screens in both light and dark modes.

Light mode

https://github.com/odk-x/tool-suite-X/assets/76582769/32d07b48-28ac-42af-9a0c-eda355a7d0f3

Dark Mode

https://github.com/odk-x/tool-suite-X/assets/76582769/322c3068-bfa3-491e-b246-a6b582ca9730

TABLES APP

Idea Behind Design

The animation is designed to create a captivating and distinctive effect, showcasing that data stored on the server can be viewed either in table format or through visual analytics. This animation swiftly communicates to users the primary function of the tables app: providing tools for data visualization. It concludes by prominently featuring the ODK-X logo and the app name. Below, you'll find videos demonstrating these animated splash screens in both light and dark modes.

Light mode

https://github.com/odk-x/tool-suite-X/assets/76582769/ffde9f68-4505-4d91-9248-6632a15ce1c0

Dark Mode

https://github.com/odk-x/tool-suite-X/assets/76582769/5fafaac5-29e0-4fd4-92ad-309e6059d829

maprehensive commented 3 months ago

@belrah that looks good! Nice work.

maprehensive commented 3 months ago

@hamna456 The work that you've put in is evident, and the animations are very nicely executed.

The way that you've illustrated the function of each app is very thoughtful.

For ODK-X the consideration for a rich slash screen would be whether it adds bandwidth or processing requirements that are scarce in low resource settings.

Good work.

belrah commented 3 months ago

@belrah that looks good! Nice work.

Thank you @maprehensive

Is it ok to use this issue submittion as part of my contribution application? Or what else am I required to do on this issue?

Arnav2824 commented 3 months ago

Hey @maprehensive , I really liked the designs suggested by @belrah and took some inspiration from them, so I came up with something. These are my designs for this issue.

Designs

Services splash screen Survey splash screen Tables splash screen

Please review them and provide me with your feedback.

hamna456 commented 3 months ago

@hamna456 The work that you've put in is evident, and the animations are very nicely executed.

The way that you've illustrated the function of each app is very thoughtful.

For ODK-X the consideration for a rich slash screen would be whether it adds bandwidth or processing requirements that are scarce in low resource settings.

Good work.

@maprehensive I apologize for the delayed response; I've been caught up with exams 📚. Thank you so much for your valuable feedback! 😊