New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify the look and style #2

Closed
fossfreedom opened this Issue May 17, 2016 · 58 comments

Comments

Projects
None yet
7 participants
@fossfreedom
Member

fossfreedom commented May 17, 2016

ok,

with regards to the actual welcome screen

ubuntu xenial running - oracle vm virtualbox 1_028

@Udara-U3 any chance you can do a .png for the header "budgie-remix"?

Installation Help #1 is removed

I think the button colours should be the same as chat-room & community.

Maybe only use "dark arc themed" buttons for "Getting Started" and "Get Involved" - two areas we want people to definitely click.

Is there anyway we can get the icons to line up - it looks messy currently. Maybe indent icons from the left and right align text? @Udara-U3 what do you think?

Is there a way to get either the Install/software buttons to appear in the center below the logo?

@HEXcube are there moka icons that we can use to replace the current icons in the picture?

Obviously need to display "install" in live CD mode and "Software" in installed mode - will raise a separate issue about changing the python script running the app.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

@fossfreedom Yeah of course I'll make a .PNG or SVG for header.
And about the buttons I'm totally agree with you, It should be a one theme.

Yes It'll be better, Icons looks messy. Yeah It would be nice. Icon from the left and right align Text. But maybe Text also from the left align next to Icons. And maybe we can reduce button width a bit.

And about the Install/software buttons also It's a nice idea 👍

wordmark-dark

@HEXcube

This comment has been minimized.

Member

HEXcube commented May 18, 2016

are there moka icons that we can use to replace the current icons in the picture?

I'm not sure, but I think Faba (Moka's base icon theme) has symbolic icons we can use here. 😕 However, for the featured app and software boutique icons, we can use Moka icons like we did for Ubiquity Slideshow. ☺️

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

Ok Here we go.., I just created UI Mockup for Welcome App
What are you guys Ideas and opinions ?

welcome

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented May 18, 2016

that looks amazing. Just amazing. Well done :)

"Installation Help" (since this is very "Ubuntu MATE" and too big to deal with this cycle) we are going to remove for this cycle which will leave the right side unbalanced. So we probably should combine "Chat Room" with "Community" to balance the icons (just have one button called "Chat & Community")

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

Thanks 😄 I'm just always trying to do something clean and nice.
Shadows & Gradients are outdated now. Solid flat designs are look amazing :)

But why should we merge that buttons. We can just keep them and we can change that Chat room to Live Help or something like that then we can keep both of them. Otherwise It'll be unbalanced 😕

Or if we merge them together, We have to remove one from left side too. Introduction & getting started like bit similar so we can remove one. But not sure 100%

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented May 18, 2016

left hand side would be 3 icons (introduction, features, getting started) and the right side would be 4 icons (chat/live help [I like that "live help"]), Community, get involved, "Donate"

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

But if we do like that It'll be unbalanced and not nice, Can't we do anything for that ? 😟

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented May 18, 2016

we would need to invent a new area for the "Installation Help" ... or keep "Installation Help" and just have a web-page with some instructions. Ok - lets do that - Installation Help and we'll come up with some instructions on how to install.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

Yeah that wold be great 👍

@apolitech

This comment has been minimized.

Contributor

apolitech commented May 18, 2016

Maybe trying to have the fonts from features etc bold?

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented May 18, 2016

@apolitech Yeah It's gonna be okay in real App, Because if you can zoom the Mockup and look You'll see the actual size of that font. After exporting it to raster images we can't see actual view just looking at it. 😄

@niyasc

This comment has been minimized.

Contributor

niyasc commented May 30, 2016

Hi,

I would like know status of this project. I don't see any progress in repository. Is there any work going on? If not I prefer to particpate in UI changing activity.

Regards.

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented May 30, 2016

Hi @niyasc

Development has only just started - @HEXcube is making some initial changes to the main screen (index.html) in his branch (hex).

Issue #1 describes how we intend to restructure the project - which screens (webpages) we are going to concentrate on first. Mainly picture and word changes.

Once done we'll get into the fun parts of making the welcome app truly dynamic.

Feel free to pop in to our general chatroom and say hi. We may not be immediately around, but just leave a window open and someone will respond as soon as possible.

@HEXcube

This comment has been minimized.

Member

HEXcube commented May 30, 2016

Hi @niyasc ! Thanks for the pull request improving README. ☺️ @fossfreedom merged it just a few hours ago.

And about the changes, I just merged my branch with master a while ago. I'll be working on the main branch now. So, you'll be able to easily see the changes being made. 😄

And yes, we'd love to have more contributors working on our projects. ☺️ So, If you're interested feel free to contact us.

@HEXcube HEXcube changed the title from welcome screen to Modify the look and style Jun 4, 2016

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 9, 2016

Hi, I was just working on first screen of welcome app and now it is looking like this.
welcome screen

This change is not committed yet. Do you have any suggestions regarding this?

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 9, 2016

@niyasc Seems like we have to do lot of improvements. Can you read all comments of this post, Then you'll understand why I have created UI Mockup for this app. btw Good work 😄

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 9, 2016

@niyasc excellent progress. Four visual issues.

The logo is unbalanced in size - it needs to be no larger in height that the size of the buttons vertically.

The buttons should be arc-themed if possible

The button icons should Moka based - the mockup has them placed on the left hand side of the buttons.

The icons and two bottom buttons need to be arc-blue - the palette colours are in our assets repo

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 9, 2016

@fossfreedom @Udara-U3 Thanks for your feedback.

  • Regarding logo size, some more margin needs to be applied on buttons to match with Mockup. After that, I thinkg logo size will be matching.
  • I did n't know that, there is a color palette available for Arc theme. For time being I was using default bootstrap color scheme, and google blue 😬
@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 10, 2016

I didn't know that there is a color palette available for Arc theme. For time being I was using default bootstrap color scheme, and google blue

Yeah, Budgie desktop and Solus follow the style and color scheme of Arc GTK theme. So, we picked some main colors used by Arc and made a simple color palette for the convenience of budgie-remix devs and designers. If u want more colors, this is the full list of colors defined by Arc.

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 10, 2016

Hi, I was just working on first screen of welcome app and now it is looking like this.

welcome screen

@niyasc U don't have the Ubuntu fonts installed on ur system, do u? 😉

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 11, 2016

@HEXcube That screenshot was taken on office PC running windows. 😬 .

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 12, 2016

@niyasc K..I see. Try installing Ubuntu font on Windows then? ☺️

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 12, 2016

@HEXcube . As I mentioned, it is office PC. I don't have even permission to install font. 😢 But it is not an issue in my personal laptop. I have Ubuntu font installed. But I have no idea, whether the App is showing Ubuntu font or not.

You can see updated screenshot here.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 12, 2016

@niyasc That seems so cool 😄 Great job.. 👍
I have used in that UI Mockup It's Google Material Icons you can use them.

So budgie-remix logo I have attached in above comment. So you can use it.

So for that blue color this is the color code #4c8ac9 it's for icons & Main Buttons.
Grey color is Arc Grey #404552 it's for Buttons, Header & Footer.

If you need any help with other colors, just contact me or just use my UI mockup ☺️

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 13, 2016

@Udara-U3 . Actually I was looking for these color codes. Thanks for help.

What about the effect when hover on buttons? What effect we should use?

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 13, 2016

these type of effects? kind of like the understated ones like shadow-radial

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 13, 2016

@fossfreedom . Wow, there are too many effects. I'm seeing this for the first time. But there are too many options. I'm very poor in selecting things 😢

Though shadow effect is looking good.

@Udara-U3 What do you think? Which one will be good for our purpose?

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 13, 2016

welcome screen

Btw, @Udara-U3 I have updated welcome screen based on your suggestion. However, I was not able to find icon used for contribute button.

NB : Don't complaint about font 😁

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 13, 2016

@niyasc So for the hover effect, First shadow effect is good, you can also use some bit light color on the button when hover. It would be nice 😄 also Swiping effects are not bad.

And I think you should increase button heights a bit. also Blue buttons should be main buttons so they should be larger than other buttons 😄

Finally I think we don't need 16.04 because we'll use this with our every release. So it would be better without it. Also Header, footer & Buttons are should be the same color which is our Logo Arc grey.

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 13, 2016

Might be because the app is using the very old webkit to display the pages. Will need to try webkit 2 or latet

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 13, 2016

@fossfreedom I don't think so. I just tried with WebKit2. Still it is not working.

Also, It is not working on epiphany 3.18 - A webkit based browser by GNOME. Can anyone confirm this issue?

If we are not able to find a solution for this problem, we'll have to revert to font-awesome.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 13, 2016

@niyasc What did you use for this ? I mean SVG or PNG if it's SVG, Try to use PNG or use Material Icons font yo can grab it here

because I had same like this problem when using SVG icons, because SVG having some problems with rendering.

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 13, 2016

@Udara-U3 Well, he's already using that one. 😕 See data/font/ and data/css/material-icons.css from the repo.

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 13, 2016

@Udara-U3

I was using icon font as mentioned in that document which is as follows.

      <i class="material-icons">info</i>
      <i class="material-icons">help</li>

Ok. I think, I got your point. I will use SVG or PNG images instead of using icon font.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 13, 2016

Ohh I see, Yeah use SVG or try it with Self hosted Material Icons font, because if not it requires Internet to import it, maybe it's the problem. SVG is the better choice rather than PNG, Because SVG is vector Based so No quality losses with Bigger displays 😄

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 13, 2016

The icon outside button style looks rather wierd! 😟 It didn't look bad in @Udara-U3's mockup but I think it's better to have them as mocochrome icons inside the button itself, like the way it's shown in 'Software' and 'Install Now' buttons. Well, what do you think @Udara-U3 and @niyasc ? 😕

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 14, 2016

As I mentioned, it is office PC. I don't have even permission to install font. But it is not an issue in my personal laptop. I have Ubuntu font installed. But I have no idea, whether the App is showing Ubuntu font or not.

Made the wordmark a path so it could be used even without installing Ubuntu font! ☺️ See this commit.

So @niyasc, u can use the updated wordmark now 😃

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 15, 2016

@HEXcube . Ok, I understand that now .svg banner can be used instead of .png banner. But how does it deal with ubuntu font? Existing .png banner is already using ubuntu font? Is n't it?

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 15, 2016

@niyasc No no, PNG is a raster image, so it doesn't require anything to display. but SVG is vector, SVG means "Scalable Vector Graphics" so it's keeping original quality with any of monitor sizes, but PNG is not like that because it's Raster.

So in vector graphics using original content and it's editable same like our wordmark, so what @HEXcube meant he as converted our wordmark font to path, so that means it doesn't requires any font to render, it's rendering itself. 😄

@HEXcube

This comment has been minimized.

Member

HEXcube commented Jun 15, 2016

@Udara-U3 Thanx for explaining ☺️

@niyas What Udara said. (Besides I'm a bit biased towards SVG 😁)

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 15, 2016

@HEXcube @Udara-U3 . Thanks for the information. I will update it soon.

Meanwhile, I was able to solve problem related to material icons. Actually, there are two ways to use material icons. One by symbol name and other by typical &#XXXX; approach.

 <!-- For modern browsers. -->
 <i class="material-icons">cloud</i>

 <!-- For IE9 or below. -->
 <i class="material-icons">&#xE2BD;</i>

I was using first approach because in comment it is mentioned that second one is for IE9 or previous browsers. But I realized that, we need to use second option with WebKit also, even if it is version 2.

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 15, 2016

Can I ask - I presume the icons are locally stored ... i.e. not downloaded via the web? The app needs to work offline.

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 15, 2016

Google material icon is a kind of font similar to font awesome. So I have removed all font-awesome related files and material-icons fonts are added in fonts directory.

Surely, It will work offline.

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 15, 2016

Latest screenshot is here. Introduction button is showing hover effect. Observe a minor color change and small shadow.
screenshot

The icon outside button style looks rather wierd! 😟 It didn't look bad in @Udara-U3's mockup but I think it's better to have them as mocochrome icons inside the button itself, like the way it's shown in 'Software' and 'Install Now' buttons. Well, what do you think @Udara-U3 and @niyasc ? 😕

Well, what do you think @Udara-U3?

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 15, 2016

@niyasc I don't have that problem, we'll ask from David @fossfreedom about this & his opinion,
Now seems much better 😄 you have done a Great job @niyasc 👍

So I have noticed that first button color is still black or it's hover effect ? I'm curious about it.
I can give you small tips to make this better 😄

  • Make blue icons same height with buttons
  • If you can increase height of buttons a bit, I think it would be better
  • Finally in the Blue main buttons if you can make bit Padding around, I mean increase button size
    without increasing text and make it center of the button.
  • Make some margin between Blue buttons and Footer
@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 15, 2016

@budgie-remix/welcome-app
I just made a UI mockup with some of Improvements 😄
Check this out and let me know about your opinions.
welcome_new

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 15, 2016

@niyasc nice job. Agree with @Udara-U3 the material icons on the outside look good. 👍 👍 👍

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 15, 2016

@fossfreedom What do you think about my new UI Mockup ?

I have made some improvements with it,

  • Added Social icons to left side footer
  • Increased icon sizes to Button heights
  • Moved footer text and Radio button to right side
@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Jun 15, 2016

nice job. So we've actually got reddit, G+ and github. Have we got a facebook and twitter as well?

Yeah - the icon sizes to be button heights is a very good idea. like it :)

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 16, 2016

@Udara-U3

So I have noticed that first button color is still black or it's hover effect ? I'm curious about it.

Yes. It is hover effect.

New UI mockup look good for me. But I have some implementation issue for checkbox at bottom right. Since it is a single symbol in material-font I think, it is difficult to apply two colors (blue and white).

And regarding width of UI mockup, can we actually allow that much space in screen? Won't it cause problem in screens with lower resolution?

@niyasc

This comment has been minimized.

Contributor

niyasc commented Jun 16, 2016

Current status.
welcome screen

@Udara-U3
Where did you get those social media icons? : I don't see them in material icon collection.

@Udara-U3

This comment has been minimized.

Member

Udara-U3 commented Jun 16, 2016

@fossfreedom Here I have updated Social icons 😄
updated

@niyasc No there no any download links for that,I have created them, I'll share them with you in SVG format 😉 So grab it here social_icons.zip

@niyasc niyasc referenced this issue Mar 24, 2017

Closed

Translations? #89

@bryku

This comment has been minimized.

bryku commented Apr 15, 2017

Honestly i sort of liked the different colors, The last photo is nice an sleek... but very generic, it sort of looks like every wordpress website out there.

@aasmpro

This comment has been minimized.

aasmpro commented Aug 29, 2017

i'll be glad to help for Persian translation if needed.

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Aug 29, 2017

@smpro1101 many thanks for the offer. All translation work is carried out on transifex - so please can you request the language and sign in as translator there. Thanks

https://www.transifex.com/ubuntu-budgie/budgie-welcome/

@aasmpro

This comment has been minimized.

aasmpro commented Aug 29, 2017

@fossfreedom Sure, I have done it just know.
please accept language request :)

@fossfreedom

This comment has been minimized.

Member

fossfreedom commented Aug 29, 2017

done - cheers @smpro1101 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment