My Backend Redesign

[Marek]

[SiNNuT]

That's looking pretty good.

[Raymond Geerts]

I like how the grey background makes the active tab realy pop out

[diogo]

Marek, did you follow Google material design guidelines for this? http://www.google.com/design/spec/material-design/introduction.html

Looking good

[Marek]

yes i did Diogo,

paper on grey background and buttons are based on material design

but not every thing is based on it. for example forms and tabs are different

[Ivan Gretsky]

That is great!

If you could make a little tutorial about how you did that, that would be awesome. What did you start from (scratch or Reno theme)? Is it a module? Maybe a quick ordered list style of steps you took to arrive at this wonderful interface... I am always looking for some learning and am eager to learn how to modify backend interface. Learning from your recent experience should be a pleasure. Of course if you got a little time for that.

[diogo]

The buttons can have a deeper and softer shadow

                                                            ⬇

                                      from the new "inbox by gmail"

               (I'm loving it by the way, and still have one invite left to give)

[Marek]

Hi Ivan,

Note that it is not working admin theme ...

I have done it only in vector graphic software.

I would like to make it a real admin theme but now I don't have much time to do it.

however i can say something more about why i designed it the way i did

[Ivan Gretsky]

Go ahead!

[diogo]

Might help http://material-ui.com/

[Marek]

so here is what i would like to point out about it...

firstly, tabs as Raymond said pops out on a grey background, which is different to basic and reno admin theme

in basic/reno theme it looks to me that changing tabs is only going to change first input field, because after each input field there is a horizontal line. Although, i am not sure it is really needed.

i think that it is better to make input labels a little bigger, and description (if any) slightly smaller.

Paper in material design nicely stands out and buttons that are outside of paper should suggest that it is save to change tabs without loosing what you have written in inputs, i.e. it is not going to load another page

color of active input field would be light blue. I noticed that in basic theme and reno theme active inputs doesn't change border color.

blue would be also color of links

pink color is for active menu items/ tabs. it shows you where you are now

i didn't use icons in menu but it can be added. However, I don't like font awesome ... maybe some custom icons could be made.

another thing is that save button, which is primary button, should stand out. So it is made bigger and with a shadow. I dont know why but in basic theme and reno theme top save button is on right side and bottom save button is on left side. I think both should be on right side.

[Marek]

[Adam Kiss]

It's always fun tweaking these things! This one's mine:

[Marek]

[Ivan Gretsky]

It would be really nice to see those as working modules, not just prototypes. Seems like there are not so many admin theme modules with stated campatibility with 2.5. Is it hard to implement or nobody had enough time recently to upgrade/create new ones?

[Marek]

I don't have any experiences making admin theme so I don't know how much time it would take.  however, I plan to make it work ... sometime ... in the future ... now I don't have enough time to start working on it.

[renobird]

If you start with AdminThemeReno, a lot of what you've shown here shouldn't be too difficult with just some CSS changes. A small bit of markup change to move the search input into the sidebar.

Give it a shot. I think you'll be surprised at how easy it is.

[Marek]

html/scss prototype ... not working as admin theme, it is just html theme

[Marek]

hey,

I wanted to show you my latest redesign that i did a few months ago for fun, hope you like it.