[redesign] Army of Awesome

RESOLVED FIXED in 2012Q3

Status

P2
normal
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: bram, Assigned: rehan)

Tracking

unspecified
2012Q3
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: u=contributor c=AoA p=3, URL)

Attachments

(6 attachments)

(Reporter)

Description

6 years ago
Currently, the experience when using Army of Awesome is not consistent with the rest of SUMO.

As we are undergoing a visual redesign, expect some sort of an adaptation of that visual design into the Army of Awesome interface.

I think a good first step is to erase a lot of the font-family and color values, rather than adding things. This way, not only will they revert to the values that the rest of SUMO uses. They will also look consistent when we switch to the new set of stylesheets later this year.
(Reporter)

Comment 1

6 years ago
Some quick changes to make first:

.kbox-title
* Erase font-family

#twitter-modal
* Erase font-family
* Erase color

#speech-bubbles li
* font-family: Georgia, serif;

#tweetcontainer h2
* Erase font-size
* Erase font-weight
* line-height: 2em;
* font-style: italic;

#tweets li .twittername
* color: #0051B9;

#tweets li .reply_count, #tweets li .remove_tweet
* color: #0051B9;
* font-size: 13px

#tweets li time, #initial-tweet time
* color: #aaa;
* Erase font-style
(Reporter)

Comment 2

6 years ago
Created attachment 636432 [details]
Sign in with Twitter (Darker Style)

Twitter prefers applications to use this button.

Source:
https://dev.twitter.com/docs/sign-twitter-resources
(Reporter)

Comment 3

6 years ago
Created attachment 636434 [details]
Sign in with Twitter (Lighter Style)
(Reporter)

Comment 4

6 years ago
Created attachment 636437 [details]
Twitter Bird, 48px

This is to replace the ‘t’ wordmark to the left of “Choose a tweet to help”. This will help make AoA look more consistent with Twitter.
Bram, this all looks great!

(In reply to Bram Pitoyo [:bram] from comment #2)
> Twitter prefers applications to use this button.

Will we be localizing the text on this button? Or is it alright if this button is English only?
(Reporter)

Comment 6

6 years ago
(In reply to William Reynolds [:williamr] from comment #5)
> Bram, this all looks great!
> 
> (In reply to Bram Pitoyo [:bram] from comment #2)
> > Twitter prefers applications to use this button.
> 
> Will we be localizing the text on this button? Or is it alright if this
> button is English only?

(In reply to William Reynolds [:williamr] from comment #5)
> Bram, this all looks great!
> 
> (In reply to Bram Pitoyo [:bram] from comment #2)
> > Twitter prefers applications to use this button.
> 
> Will we be localizing the text on this button? Or is it alright if this
> button is English only?


Now that I took a second look at the image, it still uses the old logo, and the color doesn’t fit with Twitter’s new color scheme, either.

I guess the best option is to use the same blue button style currently in use on Twitter.com (attached), or use our own button. The most important principle here is to make the style consistent across SUMO.
(Reporter)

Comment 7

6 years ago
Created attachment 636851 [details]
Sign in with Twitter (used on Twitter.com)
(Reporter)

Comment 8

6 years ago
Created attachment 636876 [details]
Proposed timeline

This is what the timeline should look like.

Twitter’s timeline display guideline is located here:
https://dev.twitter.com/terms/display-guidelines

Other than lots of font size and spacing changes (which should more closely matches Twitter’s), I also modified the “Reply” so that it is located on the bottom of the Twitter message, and put the real name of the user ahead of his/her @username.

Please note that the “Reply” will only appear when user mouses over a particular tweet.
(Reporter)

Comment 9

6 years ago
Created attachment 636878 [details]
Current timeline

For comparison to the proposed timeline (attachment 636876 [details]), here’s the timeline currently in use on Army of Awesome.

The proposed timeline not only has more breathing room, it also conforms to Twitter’s display guidelines.
(Reporter)

Comment 10

6 years ago
Please note that on the proposed timeline (attachment 636876 [details]), the second user should have had the @username displayed after the real name. In the mockup, I had forgotten to do the same.

Unfortunately, I made the mockup with Firebug, so it’s unfixable for the time being.
This all looks great Bram - thanks!
Bram, I am assuming you will have a bunch of changes related to the whole redesign. I am assigning to you until that is ready then we'll pick it up. (No rush we have our hands full doing redesign stuff but just wanted to get this back on your radar.)
Assignee: nobody → bram
Blocks: 780599
Priority: -- → P2
Summary: [tracker] Army of Awesome visual design refinements → [redesign] Army of Awesome visual design refinements
Whiteboard: u=contributor c=AoA p=
Target Milestone: --- → 2012Q3
(Reporter)

Comment 13

6 years ago
This design was going to finish much earlier, before the new visual design got implemented. Now, it’s better if I just skin AoA with the new style.

I plan to get this done after the forum and AAQ design work.
(Reporter)

Updated

6 years ago
Depends on: 762255
Target Milestone: 2012Q3 → 2012.17
(Reporter)

Updated

6 years ago
Summary: [redesign] Army of Awesome visual design refinements → [redesign] Army of Awesome
There is a mockup in bug 762255.

Bram, is that final?

We need to make sure we follow all the new twitter rules as far as display goes. They are changing the Display Guidelines to be Display Requirements:
https://dev.twitter.com/blog/changes-coming-to-twitter-api

We may also have to redo some of the API code, but that is for another day and bug.
Target Milestone: 2012.17 → 2012Q3
(Reporter)

Comment 15

6 years ago
(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #14)
> There is a mockup in bug 762255.
> 
> Bram, is that final?

Hi Ricky,

Because the display guideline will turn into display requirement, I will need to tweak the design, but by just a little bit.

I was already designing to follow the guideline closely, so the only thing I need to add is the reply icon, as well as the links to retweet and favorite.

Retweet and favorite isn’t going to be relevant to AoA, but a requirement is a requirement.

I’ll post the change to the bug shortly. That attachment will be the final design.

FYI, this is the blog post that details changes to the Twitter API:
https://dev.twitter.com/blog/changes-coming-to-twitter-api
(Reporter)

Comment 16

6 years ago
See attachment 655868 [details] for the final design.
(In reply to Bram Pitoyo [:bram] from comment #15)
> Retweet and favorite isn’t going to be relevant to AoA, but a requirement is
> a requirement.

Yeah, this is unfortunate and out of scope for this round because we need to implement those features :-/
(Reporter)

Comment 18

6 years ago
(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #17)
> Yeah, this is unfortunate and out of scope for this round because we need to
> implement those features :-/

I think we should be good for now to just implement the Reply button only. We can add retweet and favorite, which is not that important as a feature anyway, later.
Based on similar bugs from the redesign, this is a 3pt. There is a lot of modals, etc that we need to update.
Whiteboard: u=contributor c=AoA p= → u=contributor c=AoA p=3
Assignee: bram → nobody
Duplicate of this bug: 791370
Grabbing this one.
Assignee: nobody → rrosario
Rehan mentioned he started this and really really wanted to work on it :-)
Assignee: rrosario → rdalal
(Reporter)

Comment 23

6 years ago
There will be parts that my design will miss, so let me know what needs to be designed further :)

Updated

6 years ago
Duplicate of this bug: 792076
Rehan landed last week and I just deployed to prod:

https://github.com/mozilla/kitsune/commit/d756e15109d8006b0407e9768822aba99a0d5986
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.