Jump to content
Rikki

4.5: Introducing our updated default theme

If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2.

With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version.

In this entry, I want to talk a little about some of the design decisions that went into building the new theme.

Goals

Redesigning for the sake of it is never a good idea, so we first laid out what we wanted to achieve:

  • A brighter UI with more saturation & contrast and simpler overall color scheme
  • Improved typography
  • Better, more consistent, spacing around and between elements, especially on mobile
  • Better logical grouping of sections of each page
  • Reducing underutilized links/buttons on the page and finding alternative ways of making them available
  • Improving how post states are displayed
  • Modernizing and enhancing the underlying code that powers the default theme

Let's talk a little about each of these.

 

Brighter UI

The most obvious change will be that our default colors are brighter and more saturated than before. Before making any changes, we first created a color scale for both neutrals and the brand color (blue, of course). This gave us a flexible but consistent palette of colors to choose from, with appropriate contrast built in. Neutrals have a touch of blue too to avoid seeming washed out.

We've simplified the style, in particular reducing reliance on background colors to differentiate sections within cards (a card essentially being an ipsBox, for those who are familiar with our framework). Instead, we use spacing, borders and appropriate typography to achieve visual separation.

image.png

Brighter default colors

 

image.png

Simplifying the UI by removing block backgrounds

 

Improving typography

We've felt our typography has been somewhat muddled for some time - with a mixture of sizes, weights and colors used depending on the particular context.

The first step to improving it was to create a typography scale that we could refer to and implement, to ensure we remained consistent throughout the product.

image.png

Our typography scale

(The keen-eyed amongst you may also notice we've switched our default font to Inter. Inter is a fantastic open source font that is ideal for text on the web, and was recently added to the Google Web Fonts project making it super simple for us to incorporate it into our default theme.)

We've been much more deliberate about applying type styles, especially for titles, ensuring that they are always visually distinct from surrounding text. We've done this through both color and weight. As a result, pages should instinctively feel more organized and logical than before.

image.png

An example of improved typography, from the Downloads app

 

Improved spacing (especially on mobile)

We identified that spacing (padding and margins) needed some improvement. A lot of spacing values were arbitrary and inconsistent, leading to poor visual harmony across any given page.

Most troubling of all, on mobile sizes we simply halved desktop padding values. While this was a reasonable approach in the days of phones with small screens, it has felt decidedly dated for some time. Phone screens are now typically larger and able to accommodate roomier UIs without appearing comical.

In 4.5, we have done away with that approach, and the impact was immediate. Mobile sizes now get a much more pleasant interface, with elements having room to breathe. In addition, we've also made most cards full-width to provide additional breathing space for content.

image.png

Posts can finally breathe on mobile

 

There are numerous other tweaks across the product too: default spacing has been increased a little, data tables (e.g. topic listing) get extra vertical spacing, and spacing between elements has become more consistent.

 

Improved grouping of related elements

Prior to 4.5, most content areas existed inside cards. However, one notable exception to this was page headers and as a result, they could feel particularly disorganized, especially for users who had many controls in this part of the page (such as staff).

To solve this problem, we've developed a new, standardized design for content item page headers, giving them their own cards and consistent button placement.

image.png

Topic view header

 

Some areas don't necessarily fit into the same design pattern above. In those areas, we've tweaked styling to suit the context, while still adhering to our overall aesthetic.

image.png

Calendar header

image.png

Messenger conversation header

 

Reducing underutilized links/buttons

Finally, another area we identified as needing improvement is the abundance of tools, made up of links and buttons, across pages. Many of these are only used occasionally and so would be better moved out of the main view to simplify the page.

Two particular areas we focused on were share links and postbits (both forum posts and comments in other apps).

Research shows social share links are used by a vanishingly small percentage of users, so even though they were at the bottom of the page, it was unnecessary to make them so prominent (given their eye-catching colors). To solve this, we've added a share link to the page header, with the social network links themselves in a popup menu. The result is ideal: sharing functionality is unobtrusive but obvious.

image.png

Share links in content items

Comment areas have also suffered from 'button creep' over the years. A typical comment will contain a report link, a share link, a quote link and multiquote button, reactions, plus IP address, checkbox, edit and options links for certain users. That is a lot of visual noise around the important part: the content.

We've therefore simplified comment boxes as much as is reasonable. Reporting and sharing comments/posts is now available in the post options menu, as are any tools for the author/staff. Quoting and reacting are two primary interactions for users, so they of course retain their position in the control bar.

image.png

Simpler postbits, even for staff

 

Improving post states

Posts/comments in Invision Community can have many states - sometimes more than one. Posts can be hidden/unapproved, popular, recommended, solved (new in 4.5!) or highlighted because of the author's group. It's always been a challenge to indicate these statuses well.

In previous versions, we added a border but the most prominent indicator was a flag in the top-right corner of the post. This had three problems:

  • Due to the lack of space (thanks to report/share links), showing more than one flag was difficult.
  • Showing any flags on mobile was messy because of the space constraints.
  • The meaning of the flags was not obvious, especially to new users. Group-highlighted posts had no flag, just a border, which made them even more difficult to understand.

With the top-right corner of posts now tidied up and free from fluff, we were able to much more effectively use this space to indicate post statuses.

In 4.5, posts and comments will show badges when they have a particular status, as well as a more attractive semi-transparent border. For group-highlighted posts, we show the group name instead (the colors of this highlight are still controllable via theme settings).

image.png

A post with two states: group highlighted and popular

This works much better on mobile too, where the status badges get the prominence they deserve:

image.png

Mobile post statuses

 

Modernizing the underlying code

I wrote about the technical improvements behind the theme in a previous entry. If you're a theme designer or edit the theme for your own community, go and check it out now!

 

Wrapping up

As well as these large-scale concepts, you'll notice many other smaller enhancements as you start using the new theme.

I've shown some snippets of pages in the screenshots above, but I've included some full-page views below so you can see the overall aesthetic and how these pieces fit together.

Modernizing and refreshing our default theme has been needed for some time, but we view this as just a stepping stone to future work that will be reserved for a major version bump, and we're excited to figure out where we go next.

 

Screenshots

Topic View.jpg   Forum View.jpgCreate Topic.jpg

Desktop forum views (click to expand)

 

Topic View (mobile).jpg    Forum View (mobile).jpg

Mobile forum views (click to expand)

 

Activity Stream.jpg Messenger.jpg

Activity streams & messenger (click to expand)

 

Comments

Recommended Comments



I must say that it is a very nice improvement.

and especially what is respected is that one does not feel lost on the site after such an update.

it sometimes happens that we are used to the theme of a site, and when it gets a facelift, we are lost and would have preferred to stay on the old version. here you have succeeded.

Link to comment
Share on other sites

Great work as always IPS. Love the focus on mobile, this is very important, as more and more people are visiting our forums on mobile these days.

--------------------------------

This stands out to me: Is it possible to have the Follow text centered, even if the following count was in the thousands, there should still be enough room to keep the Follow text centered.

I was going to say also isn't possible to put the < Go To Topic Listing and the Next unread topic > on the same line? But would there be a circumstance where there would be more words for either, which I would then see how they both couldn't fit on the same line.
Follow-Centered.jpg.01c5da1ceab513799e7598ee1ecb2205.jpg

Link to comment
Share on other sites

Holy crap, 4.5 is gonna be major. Im looking forward to this and I might dump my custom themes and go back to default. Although many members like our dark theme. 

Any projections for launch date of 4.5? Like, maybe hint if it will be this fall? Or will we be wearing winter jackets in the USA when this drops? Hint hint?? 

Link to comment
Share on other sites

This particular project was focused on the overall theme and specific global patterns, like comments. It didn't extend to UI updates on individual apps, so they largely remain as they are (just with the updated aesthetic applied).

Link to comment
Share on other sites

I noticed you hired Ehren, who made my website skin, and his design seems like it has incorporated a few elements of the concept I drew up for him before he designed our forum skin, including the bright blue buttons, round profile photos, and bold titles. I am happy you've gone in this direction, and I am chuckling a little because I believe elements of my design worked there way into IPB core. Very cool.

We actually decided to just use the default theme when 4.5 hits, and only replace the header and footer with our own. This will make maintenance a lot easier in the future, and I feel the default 4.5 theme is something that I am satisfied with.

However, I really dislike the baby-blue page background I am seeing in the shots above.

Edited by Interferon
Link to comment
Share on other sites

54 minutes ago, Interferon said:

However, I really dislike the baby-blue page background I am seeing in the shots above.

It's color theory in action.  It's not "baby blue", it's a blue-toned gray that harmonizes with the base color of the theme, which is blue.  You can easily change this yourself in the theme settings if you wanted, but it'll make a huge difference in how the color story works unless you're changing the entire color scheme.


I wish I was excited about the updates, but we don't use the default theme and still wouldn't be able to even in its updated state.  It's good for communities where a customized theme isn't necessary though, and I hope consistent updates are made to keep things modern.

Edited by ahc
Link to comment
Share on other sites

Quote

 

Improved spacing (especially on mobile)

We identified that spacing (padding and margins) needed some improvement. A lot of spacing values were arbitrary and inconsistent, leading to poor visual harmony across any given page.

 

Like this?

i7EjCYZ.jpg

Very "improved"...

20 hours ago, SC36DC said:

I was going to say also isn't possible to put the < Go To Topic Listing and the Next unread topic > on the same line? But would there be a circumstance where there would be more words for either, which I would then see how they both couldn't fit on the same line.
Последующие Centered.jpg.01c5da1ceab513799e7598ee1ecb2205.jpg

OMG 😱 "elements having room to breathe" © Rikki 🤣😭

It should look like this:

z88yttp.png

Link to comment
Share on other sites

On 4/25/2020 at 2:06 PM, Chris027 said:

2. I really hope these aren’t changes for the sake of changes. Moving the IP address seems like an unnecessary change just to make a change. I hope I’m wrong. 

I outlined the justification for moving links out of that top area in the entry - it allows us to display comment states much more effectively and simplifies the comment area.

No ad slots have disappeared, and our last substantial design improvement was ~3 years ago - it's well overdue.

Link to comment
Share on other sites

3 minutes ago, Rikki said:

I outlined the justification for moving links out of that top area in the entry - it allows us to display comment states much more effectively and simplifies the comment area.

No ad slots have disappeared, and our last substantial design improvement was ~3 years ago - it's well overdue.

Thanks Rikki. I love the IPS platform and get nervous whenever big changes happen. I only ask that they are well though out and necessary. 

Link to comment
Share on other sites

3 minutes ago, Chris027 said:

Thanks Rikki. I love the IPS platform and get nervous whenever big changes happen. I only ask that they are well though out and necessary. 

Agreed - we avoid making large changes to the frontend on the whole (save for new features, which necessitate updates by their nature). The downside of that of course is running the risk of appearing outdated, or not being able to employ newer techniques/technologies. It's a balance between competing concerns as always. 4.3 and 4.4 didn't have any substantial changes, so we feel 4.5 is the right time for a moderate refresh, saving a much bigger update for a future (major) version.

Link to comment
Share on other sites

Are some of these things redundant? Is it necessary to see "Administrators" twice in the same post? I could be wrong, but if popular posts is based on the number of reactions, then isn't it redundant to list both the number of reactions and the fact that it's popular? 

 

Also, I'd love the ability to hide the "Administrators" or whatever group the user is in. This creates division between our community members who are paying subscribers and those who aren't. I manually edit the theme to remove these items. 

 

863320584_ScreenShot2020-04-26at7_23_27PM.thumb.png.5592681ad2b6e220fee1dbeac2aa5014.png

Link to comment
Share on other sites

It's not really duplication - it's an indicator of why the post has been highlighted. Simply showing a lot of reactions doesn't provide any indication why the post is green; simply showing the user's group under their photo doesn't indicate why the post is yellow. The status badges are a much clearer indication of why a particular post has lit up.

We've always had an indicator for popular posts, but the group name one is new (previously the post was just highlighted with no explanation). You could, I suppose, argue that that is duplication. Initially, we had toyed with making that badge say "Staff" or similar, but there's no guarantee a community uses the highlighted group feature for staff only. Even though language can be edited, it wasn't an assumption we decided to make.

Link to comment
Share on other sites

On 4/25/2020 at 11:56 AM, Takohashi said:

Too much empty space. It looks like an abstract Dribbble-layout for a portfolio, not for real use.

mWqkp0v.png

czGyl8l.png

s8lVxUi.png

fxo4l45.png

I like the spacing. Its cleaner and it may solve my forum's issues with google saying that elements are too close together, spacing issues. 

Link to comment
Share on other sites

3 hours ago, Chris027 said:

Also, I'd love the ability to hide the "Administrators" or whatever group the user is in. This creates division between our community members who are paying subscribers and those who aren't. I manually edit the theme to remove these items.

This will be possible with one line of css in 4.5 🙂

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...