tool-suite-X
tool-suite-X copied to clipboard
odk-x
Redesign the ODK-X Tables app icon
The current Tables app icon is not branded ODK-X, and do not clearly communicate the core app function.
This task is to redesign the app icon to be:
- Recognisable as applications in the ODK-X suite of tools
- Ideally incorporating the ODK-X logo (note this issue for Logo refresh https://github.com/odk-x/tool-suite-X/issues/355)
- can be distinguished as the Tables app without accompanying text
- Preferably does not rely on the app name in the icon
App icons should be created as SVG format and be clear and legible at small sizes, such as 20x20px
You do not need to be assigned to this issue to work on it for an Outreachy application
@maprehensive Please review my design on the Tables app icon Note: I tried to keep a similar look and feel in the all app icons for consistency sake.
Hello @maprehensive kindly review this wirk. Am i to share the link to this comment in the contribution section?
Hello @maprehensive, Please assign me to this task. I would love to work on this
@Joyfro Our mentor says we can work on any issues without being assigned. Drop your contributions ✨
@maprehensive
I put your feedback into consideration for my iterations of the app icons
Please review these
@maprehensive I put your feedback into consideration for my iterations of the app icons Please review these
I love the second variation of this, it has ODK-X in it, and still shows a representation of the table. Nice stuff
@maprehensive I put your feedback into consideration for my iterations of the app icons Please review these
I love the second variation of this, it has ODK-X in it, and still shows a representation of the table. Nice stuff
Thankyou For your feedback ✨
@jessjaey Well done, again these are good concepts and great to see iterations of the designs.
The solid background in the first iteration makes it visually stronger, especially at small sizes. It is a nice shape - a little bit abstract, which works well.
I can see it will be a challenge to incorporate the shape and the logo at the right size. That should be the focus of the next iteration - making those two elements work together.
It would also be good to see the icon working in context - e.g. the app header with the app name next to it.
Thanks again, this is really good work.
@JessicaItepu This is a nicely presented, strong, clear design.
The use of a single color works well, and the overall simplicity is a strength.
For your next iteration you could consider:
- is Var 1 meant to sit on a brown background? Or is it a thick brown border? Maybe the brown and white could be inverted to maximize the size of the table / cells part of the icon
- I think the header in Var 2 makes the table concept clearer - what do you think?
- the ODK-X logo is still a bit small, and seems to be horizontally squashed. Can the logo be clearer and more prominent?
Great work. It is definitely worth iterating on this string start.
And yes, you can link back to your comments in your contribution.
Thankyou for your feedback I'll work on it✨> @jessjaey Well done, again these are good concepts and great to see iterations of the designs.
The solid background in the first iteration makes it visually stronger, especially at small sizes. It is a nice shape - a little bit abstract, which works well.
I can see it will be a challenge to incorporate the shape and the logo at the right size. That should be the focus of the next iteration - making those two elements work together.
It would also be good to see the icon working in context - e.g. the app header with the app name next to it.
Thanks again, this is really good work.
Hi @maprehensive kindly check these out. I have also submitted the logos in context. Thank you.
@maprehensive Please review my design,I put your feedback into consideration for my iterations of the app icons
@jessjaey This is another good iteration, and I can see the common style running across the three icons.
One thing I notice is the softer pink/orange background color makes the icon a little less crisp at smaller scale. If you were really polishing the icon that could be something to work on.
But again, this iteration shows good improvement and is great for your application.
Thanks very much :)
@JessicaItepu Very nice.
I like the improvements you've made to both variations. Var 2 is really standing out; the drop shadow is effective and the logo looks clear at the larger size.
The dimensions of Var 2 might present some problems for certain treatments, sometimes a more square shape is just easier to manage in different situations.
But these are great iterations and very good references for your application.
Thanks again :)
In context.
@JessicaItepu Very nice!
I think this consolidates the strengths of the icon – it is clear and has good presence.
One small thing - I measured the new icon off the screen and it's pretty much 1:1 ratio (97 x 97px). How are you measuring it to get 45 x 38?
And I would check the standard dimensions of the icons in the top app bar - https://m3.material.io/components/top-app-bar/overview - it looks a bit big in the mockup.
Thank you, this is great.
Oh when i click on it in my design app thats the size. I also put in that specific size. I will check to see if something changed. Thank you @maprehensive
@maprehensive i just used snipping tool to get a screenshot so the dimensions can show it real time. The icon is 45 by 38.
From your correction i will try to make it smaller and show you what it looks like.
Reduced the size to 40 × 35.
Size seen in screenshot of design screen.
@maprehensive
