[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:

[vanitasvitae]

I'd make the asterisk a little bigger in size. So that it fits the name/pod in the drawer and is also a little bigger in the splashscreen

[gsantner]

Here is an more lighter color: https://cloud.githubusercontent.com/assets/6735650/18419895/f4a43796-7865-11e6-940a-05fc37a98137.png https://cloud.githubusercontent.com/assets/6735650/18419901/0ebc6086-7866-11e6-8064-63103263d903.png https://cloud.githubusercontent.com/assets/6735650/18419896/f4a483d6-7865-11e6-8da2-eaaec78e285f.png https://cloud.githubusercontent.com/assets/6735650/18419897/f4a64838-7865-11e6-95c6-2109b0503839.png

[vanitasvitae]

I'd go for a color in between. The darker one is a little too dark and the brighter one definitely to bright for my taste :)

Am 11. September 2016 21:23:43 MESZ, schrieb Gregor Santner notifications@github.com:

Here is an more lighter color: ![Uploading screenshot-2016-09-1121-22-09.png…]() 

You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/Diaspora-for-Android/diaspora-android/issues/40#issuecomment-246198855

Diese Nachricht wurde von meinem Android-Mobiltelefon mit K-9 Mail gesendet.

[gsantner]

You said sky-like blue light :D

[vanitasvitae]

For the icon, not the whole app :D

[gsantner]

What about that one? It even matches the login button^^ I noticed, that I like it even more than the indigo one (overall, not just icon). And btw: Enhances the "freedom" feeling :D

[gsantner]

Checkout the changes in branch sharp40. You need to change <path android:fillAlpha="1" android:fillColor="#207be6" in ic_launcher.xml for the icon and colors.xml for app color scheme.

[4ndyD]

I like green or blue, but I absolutely don't want blue in a UI because it makes it more difficult to get to sleep after looking at it.

Consider this a public health issue affecting all your fellow mobile diasporians. A clean grey would be fine, as people can use Dimmer to redden that when necessary, or any other colour would be a better idea.

[gsantner]

@4ndyD Thanks for your notice! We plan to implement a chooser, so anyone can choose those colors: See https://github.com/Diaspora-for-Android/diaspora-android/issues/56.

If you have an idea of better looking (and an appropiate scheme to the app) colors, build the app with the colors and send/attach screenshots. :)

[vanitasvitae]

@4ndyD Dynamic colors are now implemented and will be included in the next release :tada:

[vanitasvitae]

Settings are also themed now.

[walrus543]

Please add a black theme (I mean black, not dark).

[gsantner]

@vanitasvitae Maybe theres some parameter available to add custom colors to colorchooser - to add "#000000". Otherwise I would add two buttons (Preference with TreeClick) below those 2 current options, reset theme to application default colors (settings @color/primary and /accent. And another option - set primary to black

[gsantner]

@Primokorn Implemented something nice. Stay tuned for the next release.

[gsantner]

Future discussion can be a own issue, or a combined project discussion ticket.