I promised to do a little restyling of the Kickstart admin theme, I am not entirely pleased with it but Gusus suggested we should just get it out there to get more feedback. Most important reason to do this is because during testing a few participants noted the experience was a little bland, and from a brand perspective this is important to fix.

I addressed a couple of issues that are either known core issues or kickstart specific:

  • Page title is too much out there and poorly styled, causing people to easily miss it.
  • The gray surround bar creates a very bland aesthetic, which doesn't match the overall use age of gradients and effects.
  • The breadcrumbs are too prominent, causing them to take up valuable screen estate.
  • The tabs are easily missed, this is a core issue by capturing them they should be more visible.
  • The exit icon is crazy big, which again takes a lot of attention of the user (I made it crazy small, needs tweaking).
  • All form elements should have consistent styling.
  • All text should have a consistent font-size; 0.923em.
  • All save buttons should be blue, the green on white has legibility issues and isn't friendly to color-blind.

There are a couple more issues that this redesign doesn't address such as tables, secondary tabs and help text. Ideally this is spin-off, because they are more tricky to solve at once + I dont really have time for it anymore.

restyling.jpg

Feel free to comment, what you think we should do - obviously this could use more work, but we are also running close to a final release.

CommentFileSizeAuthor
#1 help-1777234-01.png67.15 KBjoshmiller
#1 help-1777234-01-v2.png89.3 KBjoshmiller
restyling.jpg174.29 KBBojhan

Comments

joshmiller’s picture

joshmiller
he/him
Primary language English
Location Indianapolis, Indiana, USA
commented
StatusFileSize
new help-1777234-01-v2.png89.3 KB
new help-1777234-01.png67.15 KB

Love this! At the risk of hijacking instead of helping, I'm going to include some work I did today on the Kickstart 2 Help region. I would've potentially gone in a different direction had I known the redesign existed.

help text

Major issues

  • This kills the hierarchy for the tabs
  • I don't love the expand/contract help button placement, but it's the best place I could put it

The same design in the current admin theme (what I originally designed):

help text

bojanz’s picture

bojanz commented

Merged https://code.drupalcommerce.org/#/c/427/ by dudenhofer.

Restyled: modal (breadcrumb, title, close button), buttons, fonts.
Remaining: form elements, help (whatever we decide to do with it), a few font size adjustments.

bojanz’s picture

bojanz commented
Priority: Normal » Major
Status: Active » Needs work

I've merged Aaron's form styling changes as well. They can be seen on today's master build.

Things we need to fix:
http://www.evernote.com/shard/s225/sh/00e21682-b60b-4f2d-b39c-20e3a441c3...
http://www.evernote.com/shard/s225/sh/21fe0c8c-102b-4bf5-8fae-2a13f28ab5...
http://www.evernote.com/shard/s225/sh/b40efc4b-b05e-40e0-b71c-3b9ba5aa81...
http://www.evernote.com/shard/s225/sh/27ad3b36-8032-4699-8c51-5f7ee4c87b...

http://www.evernote.com/shard/s225/sh/22f1459f-75b0-43d2-ab9f-b95d719428...
(The question here is: Is the button styling used in normal forms suitable for the installer?)

dudenhofer’s picture

dudenhofer commented
Status: Needs work » Needs review

I pushed an update here https://code.drupalcommerce.org/#/c/432/

This updates the Installer fieldset titles and button wrappers (which should be as initially designed), fixes the help arrows, removes the text field background so as not appear disabled and added the border back to the product variables form.

Bojhan’s picture

Bojhan commented

I wonder if we can clean up, the table styling while we are at it (http://drupal.org/node/1705950) - we don't need to do the uppercase styling but at least removing all the weird inline border effects.

A couple points;
- Search form uses a serif font, should be the sans-serif standard one.
- Tabs seem to be missing styling, there is no gradient.
- Bulk operations seems to be bugged, I can only see half the text vertically.
- Initial attributes field set on product creation has a margin issue, should align to the left.
- I noticed there are a bunch of visual changes to Help, e.g. titles more bold then originally, to small of a bottom margin on the options.
- Getting started still looks a bit rough, rather than a polished landing page. This is a discussion for later, whether we want to fix this.
- Almost all of the buttons, closing button still need a proper hover style. I haven't really found the time to work on this yet.

I must say these issues, it does look a lot better :) I wish Drupal core would look this good :)

bojanz’s picture

bojanz commented
Status: Needs review » Needs work

Let's fix the points from #5 tomorrow (friday).

dudenhofer’s picture

dudenhofer commented
Status: Needs work » Needs review

Just pushed another update for this here: https://code.drupalcommerce.org/435

This fixes the search form, tabs, bulk operations, attributes margin, and some styles in the help. I also added a couple icons to fill in the prices and demo features titles to match the other titles on that page. Oh, and I did some table header edits to look a bit more like the referenced file on #1705950.

bojanz’s picture

bojanz commented
Status: Needs review » Fixed

I think this is enough to mark this as fixed. We can address additional things (help, further improvements) in followups.

bojanz’s picture

bojanz commented
Project: Commerce Kickstart » Shiny (Administration theme)
Version: 7.x-2.x-dev » 7.x-1.x-dev

Moving to the Shiny project (that sounds cool :D).

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

looking bullets less wierd