53

A few weeks ago Canonical reached out to me about making some design changes on Ask Ubuntu to reflect the official Ubuntu site's new design guidelines. The goal is to keep all Ubuntu related sites(official or 3rd party) consistent.

Currently on http://www.ubuntu.com, Ask Ubuntu is linked in the top nav bar under "More->Ask." Once the design changes are completed it will be prominently featured in the top bar.

Here's a preview of the new design:

Ask Ubuntu New

The biggest changes are in the header section. I moved "Ask Question" link to be part of the top nav bar. I Also removed the background images and widened the site content width by 20px.

The new design changes will go out early next week. The changes will take place both on the main site and Meta.

14
  • 23
    Bummer to lose the nice aubergine header under the main bar, I thought it was very slick. +1 to consistency though. And great to see askubuntu.com featured so prominently across all the ubuntu.com sites! May 31, 2013 at 23:09
  • 12
    Love the space gained from removing the aubergine bar. My netbook will be able to display a question in addition - great job!
    – Takkat
    Jun 1, 2013 at 13:38
  • 8
    Why the white background? Its too bright for me. Jun 1, 2013 at 14:23
  • @KhurshidAlam, "The Ubuntu colour palette has been created to reflect the spirit of our brand. Orange for a community feel. White for a clean, fresh and light feel. Cool grey is used for body copy." from design.ubuntu.com/web/colour. I change white to grey using css ;)
    – user25656
    Jun 1, 2013 at 15:17
  • Oh, and this also: "#FFF and #EFEFEF: These colours are used as background colour to bring clarity, honesty and transparency to the design." LOL
    – user25656
    Jun 1, 2013 at 15:19
  • 4
    @JorgeCastro I filed RT #22017 to have ask.ubuntu.com forward here. Renaming askubuntu.com to ask.ubuntu.com would need a lot more coordination. Jun 2, 2013 at 19:39
  • Related: meta.askubuntu.com/questions/6709/…
    – Seth
    Jun 3, 2013 at 0:13
  • 6
    If we're trying to adopt the styling of the homepage, we should probably drop the dotted background image. Jun 4, 2013 at 16:40
  • 2
    @andrewsomething do you know if that's the new standard? Looking at unbuntu, some pages have the dotted background still.
    – Jin
    Jun 4, 2013 at 16:46
  • @Jin I can't seem to find a canonical statement (heh) about whether the dots are gone for good. Maybe jorge-castro could point you to someone n the design team. That said, I believe the the look of the main ubuntu.com page is slowly being rolled out everywhere. They're working with a lot of different stuff (Wordpress, Django, and more), so it might be taking more time on some platforms. Jun 5, 2013 at 2:34
  • 2
    Everything looks good. Only thing I wish for is a little dark background for code tag as it was earlier. Here in meta site the "code" background is little dark but not in main site.
    – Web-E
    Jun 7, 2013 at 10:32
  • 4
    I mean <code> tag background is not #E0E0E0 anymore.. it is #F4F4F4 which is barely visible.
    – Web-E
    Jun 7, 2013 at 10:38
  • Why no change in mobile ui?
    – Tachyons
    Jun 15, 2013 at 1:22
  • @Tachyons Mobile UI uses one clean theme per-network.
    – nanofarad
    Jun 17, 2013 at 21:44

22 Answers 22

17

It looks great! the one thing that really bugs me, is the footer:

askubuntu-footer.png

There is no background! And the dots are really annoying!

by adding some custom css to the footerwrap it looks a lot beter

.footerwrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #AAAAAA;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    width: 970px;
}

askubuntu-footer.png

6
  • I agree. It's super difficult to read the links there. Your change looks much better. Jun 7, 2013 at 12:55
  • 1
    I may remove the dots very soon.
    – Jin
    Jun 7, 2013 at 18:37
  • 2
    @Jin i use a line on my website, and did the same on askubuntu. Here is the result: i.imgur.com/BpGcg8d.png
    – blade19899
    Jun 7, 2013 at 22:27
  • @blade19899 That would be perfect! What is the license of your design? (the line.png file)
    – Lucio
    Jun 29, 2013 at 22:29
  • 1
    @Lucio After some time tracking down where I got the line.png I found out that I saw it once on webupd8.org. It has a license of creativecommons.org/licenses/by-nc-sa/3.0/ro/deed.en But i don't know if that includes such a small portion of webupd8.org such as a line image. I myself was thinking of the same license (creativecommons.org/licenses/by-nc/3.0) for my website.
    – blade19899
    Jun 30, 2013 at 0:14
  • @blade19899 Thanks for the reply. Personally, I prefer to use this license. It is more free than the non-commercial one. Just an opinion..
    – Lucio
    Jun 30, 2013 at 0:19
11

So, I just wanted to drop by and leave some feedback on the new topbar design.

First of all, thanks for the addition, it is quite handy however there is also something that's bugging me about it.

The bottom margin of the new topbar makes the entire design look out of place. My suggestion would be to remove the 22 pixels.

Here's a screenshot from the current setup,

enter image description here

and here is a screenshot but without the 22 pixels bottom margin,

enter image description here

3
  • 1
    I personally like the extra 20 or so pixels there. It helps separate the site from the Canonical/Ubuntu header which isn't present on any other SE sites.
    – Seth
    Jun 30, 2013 at 0:50
  • @Seth While it's true that no other SE site has that header, you should look at it in context. No other website in that bar has a 20 pixel margin. It looks completely out of place. Jun 30, 2013 at 7:26
  • 1
    It looks worse without the margin though.
    – Seth
    Jun 30, 2013 at 15:08
9

To remove the dotted grid like effect on Ask Ubuntu, block http://cdn.sstatic.net/askubuntu/img/bg-site.png. You may have to flush your browser's cache to see the effect.

For the meta site, block http://cdn.sstatic.net/askubuntumeta/img/bg-site.png.

For example:

Imgur


To minimize the space between the global menu and the main section, the following code is useful:

#custom-header {
display: block;
margin-bottom: 2px !important;
}

This code needs to go into a stylesheet. If one is using Firefox, this can be done by editing userContent.css which is located in ~/.mozilla/firefox/xxxx.default/chrome. If the folder chrome doesn't exist, just create it. Same for userContent.css. Both folder and filename are case-sensitive.

Then, in userContent.css, add the following using a plain text editor:

@namespace html url(http://www.w3.org/1999/xhtml);
@-moz-document domain(askubuntu.com) 
{ 
#custom-header {
display: block;
margin-bottom: 2px !important;
}
}

and save the file and exit. The value for margin-bottom determines the space between the global menu and the main section. The default (currently) is 22px. I've reduced it to 2px as an example.

Note: if one using the Stylish extension, one can use "Write new style ..." for askubuntu.com and paste just

#custom-header {
display: block;
margin-bottom: 2px !important;
}

between the existing curly brackets.

(Stylish works for Chrome/Chromium as well.)

Imgur


To make code more visible, one can make the code font bold, darker, or use a background which may enhance contrast:

Consider something like this:

@namespace html url(w3.org/1999/xhtml);

@-moz-document domain(askubuntu.com)
{
code { 
      font-family: monospace !important; 
      color: black !important; 
      background-color: #999 !important; 
      font-weight: bold !important; }
}

The line with monospace makes sure code remains fixed and not proportional (which would mess up alignment);
The line with color determines the font color. It can be any html color you like; you can use hex code to get exactly the color you want by using a tool such as gcolor2 from the software center;
The line with background-color lets you enhance contrast by that route if you wish;
The line with font-weight makes text bold.

You can use one or all of the above.

Note that in ~/.mozilla/firefox/xxxx.default/chrome, the xxxx will differ from user to user.

1
  • 1
    To improve the code readability, I have background-color set as #ccc without setting the font-weight as bold, and find that seems to be the best compromise.
    – user76204
    Jun 14, 2013 at 18:44
9

It came live as I changed pages... great design.

Edit (after 24 hours)

It took me by surprise, and I still, after 24 hours go to the very top of the page to check is I have any comment alerts.

On the whole a much cleaner look

Thumbs Up * * * * *

Edit (after 2 weeks)

Still love the new design. I have had to go into the browser config files to change the code background/pre colour to one that I can see. but that's my only complaint

Still Thumbs Up * * * * *

8

I like the new design, but I have some observations:

  • there is a problem with some special characters (see my name):

enter image description here

  • the new background for code sample make that a code text to be difficult to distinguish towards the normal text:

enter image description hereenter image description here

3
  • 2
    I noticed the code formatting change as well, and I also don't like it.
    – Seth
    Jun 7, 2013 at 0:26
  • 3
    Background in code block is nearly-white, that I think is bare to see.
    – Aryo Adhi
    Jun 11, 2013 at 10:47
  • And that code block BG color is different on meta
    – Aryo Adhi
    Jun 11, 2013 at 16:05
8

Looks like the Add Comment button could do with some margin to separate it from the comment textarea. Add Comment button

Update:
This has now been fixed: Add comment fixed

5

I prefer the header to be consistent with Stack Exchange than with Ubuntu, so I removed the Ubuntu header with Stylish.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("askubuntu.com") {
    div#custom-header {
        display:none !important;
    }
}
1
  • 2
    Upvoting for technical merit (though I don't mind the header).
    – belacqua
    Jun 9, 2013 at 23:09
5

Should this logo given meta label? Like "Ask Ubuntu Meta" or "Meta Ask Ubuntu"?

4

New design is now live. Looking good.

Can we make the Ask Question button more distinguised. A possible way will be to use a mildly darker red background for it. I'm not a designer, there might be better ways for it.

Askubuntu New Design

3
  • 3
    It's funny, every design iteration everyone asks to make the Ask button more distinguished. They asked to move Ask from below the nav on the aubergine to the top nav, now it's in the top nav and it's not good enough ;) I think people will find the button, it's even more obvious to users who aren't logged in. Jun 6, 2013 at 12:27
  • 1
    @MarcoCeppi, In every iteration this button is pointed out because for askubuntu site, the Ask Question button should be given due focus, with ease for newcomers also in mind.. :)
    – saji89
    Jun 7, 2013 at 4:31
  • 2
    Try visiting the site not logged in (Incognito) to see the new user experience. The "tour" is pushed onto them and gives them a low down of the site. Given that we're getting over 120 questions an hour I don't think people are having a hard time finding that button :) Jun 7, 2013 at 12:02
4

I love the new layout but... (sorry there has to be a but). Now that Ask is so integrated into the Ubuntu site, is there now the danger that new users (especially) will consider it to be some kind of official Ubuntu tech support as opposed to the community driven Q & A it actually is.

If they were to have this false impression it could lead to situations where a user becomes more impatient when an answer is not immediately forthcoming or they fail to realise that an answer could conceivably be wrong.

I am aware that there is plenty of documentation that explains what Ask is, but many of the new users I have come across have clearly not taken the time to understand this. They just want an answer then never to be seen again!

1
  • 4
    There's really no such thing as "official tech support"; help.u.c, the forums, launchpad, IRC, and AU are all community driven. Jun 6, 2013 at 20:20
4

enter image description here

Seems that button missed 'few' pixels to align...

2
  • I never noticed that before. You have a good eye. Jun 14, 2013 at 23:40
  • 1
    Recognized even with normal size (100%)
    – Aryo Adhi
    Jun 15, 2013 at 10:00
3

The Tell me more button in non logged-in display of a question page seems to be a bit too big, that it overflows out of the containing div. Tell Me more

Update:
This has now been fixed:

Tell me more button fixed

3

enter image description here

Way too big for buttons...

2

Albit annoying...

before hover

after hover

Also in meta site.

2

No box-shadow in .container

before:

enter image description here

After:

enter image description here

Code

.container {
    .....
    box-shadow: 0 0 3px #aaa;
    ....
}
2

The background of the entire site looks distracting, plus there have been users complaining about the tearing of it. When I press SUPER-w, the background image, just annoys my eyes. Not a good look.

Screenshots

ONE

ONE

TWO

TWO

The entire code:

body {
    background: #f9f9f9 none repeat scroll 0 0;
}

.topbar {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#header {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#content {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#footer .footerwrap {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}
1

Some of the visuals in the current design create a feeling of information overload for me. I'd make a few small changes to help direct readers' attention to the content. Here's the current version for comparison.

1
  • 2
    I personally like the extra 20 or so pixels there. It helps separate the site from the Canonical/Ubuntu header which isn't present on any other SE sites.
    – Seth
    Jun 7, 2013 at 0:27
1

The stars that users can click to mark "Favorite" should be changed to Ubuntu's red circular symbol or this awesome symbol http://bazaar.launchpad.net/~devyncjohnson-d/misc-projects/trunk/view/head:/Symbols/Ubuntu_Shiny_Remix.png. The badges should also look like the Ubuntu symbol.

1

blockquote design change. IMHO, it definitely needs a new design:

blockquote design 1

enter image description here

code

blockquote {
    .....
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    .....
}

blockquote design 2

enter image description here

code

blockquote {
    .....
    border-left: 5px solid #CCCCCC;
    .....
}

I find it better for my eyes to focus, with the borders!

0

Seems annoying if didn't aligned...

enter image description here

0

enter image description here

Misaligned again...

0

code(pre) design:

enter image description here

code

pre {
    .....
    border: 1px solid #cccccc;
    .....
}

IMO: it reads better with the borders!

2
  • It had borders before? I think that looks ugly :-P
    – Seth
    Dec 4, 2014 at 15:35
  • @Seth, nope. I just like it better with the borders, blockquote and pre.
    – blade19899
    Dec 8, 2014 at 13:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .