? ?
avatar coolcat-creations
coolcat-creations
4 Jun 2017

Steps to reproduce the issue

In marketing and layout, we tend to "Make the logo bigger".
But using the brand in smaller sizes and with more space, we appear more confident and elegant.

The current logo size creates an imbalance and takes unnecessary space from the sidebar.
image

Layout Proposal 1 with left-aligned logo

image

Layout Proposal 2 with center-aligned logo to the navigation

image

avatar coolcat-creations coolcat-creations - open - 4 Jun 2017
avatar joomla-cms-bot joomla-cms-bot - change - 4 Jun 2017
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 4 Jun 2017
avatar coolcat-creations coolcat-creations - change - 4 Jun 2017
The description was changed
avatar coolcat-creations coolcat-creations - edited - 4 Jun 2017
avatar mbabker mbabker - change - 4 Jun 2017
Labels Added: ?
avatar mbabker mbabker - labeled - 4 Jun 2017
avatar C-Lodder
C-Lodder - comment - 4 Jun 2017

I like the fact that with the smaller logo, it would mean that when collapsing the sidebar, only the actual sidebar would need to be collapsed, thus the trigger would stay in the same place. However with the logo being that small, it looks a little too cramped.

avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Jun 2017
Status New Discussion
avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Jun 2017
Category Layout Templates (admin) UI/UX
avatar coolcat-creations
coolcat-creations - comment - 4 Jun 2017

We can leave the Joomla! Brandmark and place the site name next to it.
Following example shows how a long Sitename is displayed:

image

The Joomla! Logo and the Version move to the bottom.

image

avatar C-Lodder
C-Lodder - comment - 4 Jun 2017

All good with me. Can we close this issue as it's now pretty much the same as #16505

avatar coolcat-creations
coolcat-creations - comment - 4 Jun 2017

I just add the same screenshot, but here it is about the Logo at the top... The other issue is about the status bar,...

avatar ciar4n
ciar4n - comment - 26 Jun 2017

Something like?...

smaller-logo1

smaller-logo2

avatar C-Lodder
C-Lodder - comment - 26 Jun 2017

@ciar4n - I'd say the sidebar toggle button is too small. Dont worry about this one, I'll need to rewrite the stats module at the sprint and this will all be part of it.

avatar ciar4n
ciar4n - comment - 26 Jun 2017

Cool. I'll park it til then.

avatar bassmanpaul
bassmanpaul - comment - 3 Jul 2017

Whilst on the subject of the sidebar we did a bit of user testing in our office, and quite a few people mistook the current sidebar toggle icon for a back button as the top right appearance is very similar to the browser's back button (especially when editing an item):

sidebar-4-current

I've just spotted Freedcamp's UI redesign and they have an interesting alternative which is to place the toggle button at the bottom (it also has a custom icon which seems more intuitive):

sidebar-4-new

They also put the logo at the bottom as well, which I don't think is a bad move either because it preserves the brand on screen whilst keeping it separate from the important actions/menus that the users will need to access, giving the menus priority.

Just some feedback & thoughts from user testing :)

avatar brianteeman
brianteeman - comment - 3 Jul 2017

@bassmanpaul I agree and I brought that up before

avatar ciar4n
ciar4n - comment - 3 Jul 2017

Moving the toggle to the bottom gets my vote to. It's size and position is a little 'in your face' for my liking.

avatar dgt41
dgt41 - comment - 3 Jul 2017

The arrow icons might be perceived as draggable, which is not the case here, so the hamburger icon is more appropriate IMHO

avatar C-Lodder
C-Lodder - comment - 3 Jul 2017

Hamburger would definitely be more appropriate

avatar ciar4n
ciar4n - comment - 3 Jul 2017

Originally it was a hamburger (#15430 (comment)). It was argued that considering a hamburger icon signifies a menu, this icon was to far from the menu so a chevron was preferred. Personally I would sooner the hamburger regardless of its position.

avatar bassmanpaul
bassmanpaul - comment - 4 Jul 2017

In that case here are a few visualisations/variations:

Toggle arrow

j4-sidebar-01

Hamburger menu

j4-sidebar-02

Hamburger with Open/close label

j4-sidebar-03

The last one's text may be a bit small or cause multi-lingual problems.

And for reference here is how Freedcamp's behaves:

freed-sidebar-01

avatar coolcat-creations coolcat-creations - close - 11 Nov 2017
avatar coolcat-creations
coolcat-creations - comment - 11 Nov 2017

I close this, because there is a complete new layout proposal

avatar coolcat-creations coolcat-creations - change - 11 Nov 2017
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2017-11-11 15:09:31
Closed_By coolcat-creations

Add a Comment

Login with GitHub to post a comment