[META] Design, UI, Artwork, Colors & Branding

[gsantner]

This issue is an ongoing issue about the app design, the colors and images.
Submit ideas.

Text below this line contains updated informations (Whats currently going on / What we are looking for)

---

New images needed: The images should contain a blowball (Pusteblume)

• Splashscreen
• NavigationDrawer - Top image

[gsantner]

Currently the primary grey color looks really unfriendly. I tried multiple variations, and found this soft green really nice. (Color: hex 608b6f)

[ghost]

Hi, (yeah I'm still alive) I like the light green. ;-)

[SansPseudoFix]

Not sure if it's the right place for it (if not, I will open a separate issue), but there is "branding" in the title, so... I see many Diaspora* on translation's files, but actually, the correct way is diaspora* or DIASPORA*.

diaspora* can be used lower-cased or upper-cased but all the letters should be the same: diaspora* is preferred, DIASPORA* is valid, Diaspora* or DiAsPoRa* are not.

See wiki.

[ghost]

Hi,

I have also some new suggestions.

• primary and accent color should be two colors with a good contrast (for example "Komplemantärfrarben), so that you differ them on the first look. The actual light green (statusbar) and the brown (progessbar) are very similar
• don't use more than two colors. The second color of the notification and messages icon in the statusbar should be the accent color.

This also stands in the Google color guidelines: https://material.google.com/style/color.html#color-color-schemes

I think if you follow this the ui will look more clean and modern. Hope this helps.

regards Gaukler Faun

[gsantner]

Hi again @scoute-dich, :)

you are right, but I tried multiple variations of other colors and couln't find an color which would make it (the notification bell/message received) better. You can suggest colors, please attach Screenshots and the colors if you find something suitable. At least Purple, blue, oramge looks awful to me there in combination with the greenish titlebar.

[ghost]

I will do it the next days when I have more time.

[gsantner]

@SansPseudoFix We will make corrections regarding that all together. Requires some work in the translation platform and on the source files.

[gsantner]

I rethought the colors. The green is somewhat nice, but also makes somewhat sad. Heres what I implemented now:

@scoute-dich The Notification/Mail Icon now uses the accent color in activated state.

How do you guys like it? @SansPseudoFix Changed the app name to "diaspora*"

[ghost]

Blue looks nice. but I still think, that the contrast between primary and accent color is to low. The implematär color of blue is orange. so i think you should use something in an orange color tone. Progressbar uses also accent color?

Shorter names are always better and more pregnant. So I think "diaspora*" would be also a good idea.

[gsantner]

@scoute-dich You mean like in my Meme-Creator? https://gsantner.gitlab.io/fdroid/memetastic/ Btw: You meant "DE: prägnant" I know :D

[ghost]

Yes and yes. ;-)

[ghost]

I would also change the icon color to match the app colors. And one more design suggestion:

Remove the shadow from "diaspora" on the splashscreen. It's not good for readability. Less is often more. It looks more modern and professional. Here is the splashscreen for our school moodle app:

https://github.com/scoute-dich/HHSMoodle/blob/master/app/src/main/res/drawable-nodpi/splashscreen.png (The colors are not my choice -> the strange pink is our "school color").

I dont know if I have time next week, but I can try to make a splashscreen with your template.

Regards Gaukler faun

[gsantner]

Icon color: where?

App icon: We just have the icons in png so we cant change it easily without degrading quality. A new svg would be great.

[ghost]

I can also make a svg icon, when I have the time.

Icon color: the blue gray background. Going to bed now. I think I will make it on Sun- or Monday.

[gsantner]

@scoute-dich Great! Theres another contributor interested on designing the new icon. I messaged you all together on diaspora* because I couln't find him on github.

[vanitasvitae]

@gsantner I would remove the shadow on the diaspora* writing in the splash screen (Material Design), and also put the writing a little higher up under the icon.

Are we going to use the proposed icon in the next release?

[gsantner]

@scoute-dich @vanitasvitae @SansPseudoFix

Changes from today:

• splashscreen
• accent color (orange)
• progress bar
• (new) notification&message count badge icon

[ghost]

Yes now it's nearly perfect. Can you post the rgb code for primary and accent color? Then I make an svg icon with same colors. ; -)

[gsantner]

https://github.com/Diaspora-for-Android/diaspora-android/blob/master/app/src/main/res/values/color.xml

[ghost]

Icons with possible combinations. I prefer blue-orange (theme matching) or blue-white (looks best on splashscreen. My first choice would be blue-white. In the zip file is the svg-icon and a color palette for Inkscape with all material colors (Don't know, if you have it already.).

Regards Gaukler Faun

icon.zip

[gsantner]

I personally dislike to have both of them in one icon.

As the icon is used in the splascreen, on the navigation slider (no avatar img), and on the android activity overview: The bar/area will always will be filled with primary color. So Orange and white is the best option in my opinion, because blue + anything would just show the star in those cases above.

[vanitasvitae]

I'm not really sure about the icons. Out of the four I'd prefere the blue one, but that will cause problems with the splash screen (all blue).

But I don't really like the orange one :/ remember, it represents a blowball...

[ghost]

Then what about orange white? On the splashscreen perhaps only the blowball, or what about no icon on the splashscreen? We have the blowball there already in "diaspora*".

[vanitasvitae]

I meant, maybe orange is not the best color to represent a blowball.

[gsantner]

As said above, orange + white would make no problems By the way: This is my first app, where the app has to/should match the color palette. It's no must.

[ghost]

@vanitasvitae You're right. Blue is a good primary color, since a blowball flies through the air. So I would definitly suggest to use the blue-white icon with following consequences:

• No icon on splashscreen an "diaspora*" a little bit bigger -> would be a clean, modern and simple splashscreen
• Image as header background
• on the android activity overview: we can not have everything...

[vanitasvitae]

Why not make the icon in a very sky-like light blue color? I mean the icon must not follow primary/secondary colors.

Edit: I'd suggest something like #67BEDB as icon background color and a white asterisk

[gsantner]

I rethought the issues I summed up above. I think it's a feature not a bug. Lets keep the primary color as the background. Everywhere the icon will be used then, when the bg is also primary, just the White star is left over. which I think will be great.

BTW: @scoute-dich The svg has some errors, it cannot be imported as android vector drawable.. Here is a fixed one:Diaspora.svg.zip

[ghost]

The shadow is also left over ...

[gsantner]

Shadow: Removal was intentionally. So this gets possible Tadaa: