Opened 2 years ago

Closed 5 months ago

#22671 closed defect (fixed)

Implement design changes to blog.torproject.org

Reported by: linda Owned by: hiro
Priority: Medium Milestone:
Component: Webpages/Blog Version:
Severity: Normal Keywords: ux-team
Cc: antonela, isabela, arma, mcs Actual Points:
Parent ID: #22013 Points:
Reviewer: Sponsor:

Description (last modified by linda)

We've taken the time to redesign blog.torproject.org. We think the new design is easier to read, uses the space better, and looks more Tor!



Before: too much whitespace, confusing comments, too white.


After: more space used for content, intuitive comments, tor colors.

Since we're finished with the design, the next step is to incorporate all these changes and ship them. These include:

  • #22392: removing the left column
  • #22395: more intuitive comment threading
  • #22510: increasing brand presence
  • changes in font hierarchy, specifically h2 not being bold and in all caps.
  • changes in color and styling
  • including an onion icon next to tor people's comments (people who are registered on the blog) so that people can see which answers are more tor-official--see the attached image. Notice that the color of the onion depends on the color of the comment. For that, I suggest looking at: https://css-tricks.com/cascading-svg-fill-color/

The assets for the new design can be found here: https://projects.invisionapp.com/d/main#/console/11254922/239848960/inspect (look at the top navigation bar, and it has assets)

Child Tickets

Attachments (3)

tor-blogpage-before.png (686.0 KB) - added by linda 2 years ago.
tor-blogpage-comments.png (282.2 KB) - added by linda 2 years ago.
tor-blogpage-after.png (550.4 KB) - added by linda 2 years ago.

Download all attachments as: .zip

Change History (20)

Changed 2 years ago by linda

Attachment: tor-blogpage-before.png added

comment:1 Changed 2 years ago by linda

Description: modified (diff)

Changed 2 years ago by linda

Attachment: tor-blogpage-comments.png added

comment:2 Changed 2 years ago by linda

Description: modified (diff)

Changed 2 years ago by linda

Attachment: tor-blogpage-after.png added

comment:3 Changed 2 years ago by cypherpunks

It definitely looks much better, great work!

comment:4 in reply to:  3 Changed 2 years ago by linda

Replying to cypherpunks:

It definitely looks much better, great work!

Thanks! :)

comment:5 Changed 2 years ago by hiro

Parent ID: #22013

comment:6 Changed 2 years ago by hiro

Hi UX,

What do I do with the blog post tags? Where shall I move them?

comment:7 Changed 2 years ago by cypherpunks

Status: newneeds_information

comment:8 Changed 2 years ago by hiro

Resolution: fixed
Status: needs_informationclosed

This was fixed.

comment:9 Changed 2 years ago by cypherpunks

Resolution: fixed
Status: closedreopened

I don't think everything was fixed here, example: the bottom footer.

comment:10 Changed 2 years ago by hiro

Status: reopenedneeds_review

Sorry. forgot about the footer.

comment:11 Changed 2 years ago by hiro

Resolution: fixed
Status: needs_reviewclosed

This has now been implemented

comment:12 in reply to:  11 Changed 2 years ago by cypherpunks

Replying to hiro:

This has now been implemented

What about the "Internet was blocked today in #egypt. It can be your country. Help us protect your privacy and anonymity. DONATE NOW" banner in the right?

Also the "the tor project blog" text below the Tor|Blog icon is not present in Linda's design. In addition, the Tor Blog logo is bigger and doesn't have the | between 'Tor' and 'Blog' in her design.

Furthermore the link to the blog post writer (e.g. "boklm" below the title in https://blog.torproject.org/blog/tor-browser-75a4-released) should be purple per Linda's design.

Version 3, edited 2 years ago by cypherpunks (previous) (next) (diff)

comment:13 Changed 2 years ago by cypherpunks

Resolution: fixed
Status: closedreopened

comment:14 Changed 2 years ago by hiro

Status: reopenedneeds_information

I thought the banner on the right was an example not something that should be added. I am happy to add it if that's the case. Is that what we want?

This also reopen the question regarding the posts on the left. I was under the impression that we wanted to remove them and leave only the events. Are we not? Would we like to have most-reads posts?

The Tor Project blog text was decided on a separate thread, again I'd be happy to remove it if that's what we want. Isabela could you clarify this?

Linda can you clarify regarding the font size and the banner? The invision page has a sketch file, but I can't open it. Is there any way we could export it? Also if we want to change the tor blog logo could we get that in png on the invision assets page?

comment:15 Changed 2 years ago by linda

Hiro:

You're right-- the banner is an example of something that we wanted, and demonstrating a way that we can use that space. I was not suggesting that you should put those banners there. Sorry about the confusion.

The intention was to remove the left column as a left column, but not necessarily the content from the left column. I think that it's okay to use the right column to display the top posts and recent updates from the Tor project.

I am do prefer the original logo, but I assumed that this was changed with other people and was fine with the changes. Let's see what Isabela says. I'll ask antonela for the images that she used for the blog page, and for her to put the images in this ticket.

comment:16 Changed 2 years ago by hiro

Thanks Linda!

I do not have a design eye, so sometimes I need a bit of extra help to implement things that I miss :)

comment:17 Changed 5 months ago by antonela

Resolution: fixed
Status: needs_informationclosed

blog.torproject.org

Note: See TracTickets for help on using tickets.