Jump to content

Invision Community Blog


Managing successful online communities


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

Looks tidy enough, I might consider dropping the 3rd party theme and use the default one ( @Ehren, don't read this 🙂

I do have a question though. Is it only that Quote and reactions are visible below the content and all others are in the dropdown menu? Do we have a control over that? It is an area actively used by 3rd party developers and some key buttons are now located next to the quote. Preferably it would be best if we can choose which of these to be hidden. 

Share this comment


Link to comment
Share on other sites

Looks good! Nothing super spectacular, but a very nice update for 2020. I also like the new header. Will there be an option to make it sticky?

Can't wait to see this in a live environment (this site). 🙂

Share this comment


Link to comment
Share on other sites
34 minutes ago, jair101 said:

I do have a question though. Is it only that Quote and reactions are visible below the content and all others are in the dropdown menu? Do we have a control over that? It is an area actively used by 3rd party developers and some key buttons are now located next to the quote. Preferably it would be best if we can choose which of these to be hidden. 

We’ve moved our default links, but there’s no reason why plugins can’t continue to add links to the bar as before 😊

Share this comment


Link to comment
Share on other sites

This all looks amazing and so much neater, but there is one thing that really bugs me a lot - it's probably the designer in me - is the inconsistency of the side bar top alignment; see below:

image.thumb.png.f3b9edd136a4809c9b48430f1edadc71.png

The gap between the top of the sidebar and the topic header.

Yet here it is aligned perfectly:

image.png.75c2809d89b17bee32e18568dacd4463.png

I presume there is a reason for this, or is it an oversight?

I don't mean to be picky as you've done a fantastic job on the update, but this one little niggle is a bug for me lol

Share this comment


Link to comment
Share on other sites

Very nice. I wish the activity list had received an overhaul as well. I like the idea of activity list but I never quite got used to it.

Have you ever considered grouping/showing new posts from the same topic together? It would make more sense to have those posts displayed together than scattered all over the activity list.

To keep the list shorter, a new topic could be displayed with 1st post and view more button for replies while new replies in existing topic could be displayed with oldest unread reply first and view more button to show the rest.

Share this comment


Link to comment
Share on other sites
13 minutes ago, Davyc said:

This all looks amazing and so much neater, but there is one thing that really bugs me a lot - it's probably the designer in me - is the inconsistency of the side bar top alignment; see below:

image.thumb.png.f3b9edd136a4809c9b48430f1edadc71.png

The gap between the top of the sidebar and the topic header.

Yet here it is aligned perfectly:

image.png.75c2809d89b17bee32e18568dacd4463.png

I presume there is a reason for this, or is it an oversight?

I don't mean to be picky as you've done a fantastic job on the update, but this one little niggle is a bug for me lol

Good spot - that happens because on the invisible widget container above the main content. We’ll figure out a solution 🤞

Share this comment


Link to comment
Share on other sites

Looks great!

How easy would it be now to adjust scale of all viewport items natively? One thing I’ve found myself doing more and more is using the iOS safari built in zoom tool to reduce to 75% of original size. Many in my community also do this - would there be a native way to tell the theme what scale to use?

C003D8B4-D8BC-4360-B9E9-0DEA88C9066C.thumb.png.1a74e04dedef4bc2ed3b73c65c9e65eb.png
 

 

7ED83B0E-FECA-4A8E-8976-F88BC31744F4.thumb.png.c131280f992b8beeae3a951e5c03fd5d.png

F6A47FBD-DC6E-4884-8047-F24018067CD1.png

Edited by Morgin

Share this comment


Link to comment
Share on other sites

Another question as a non-designer: what’s the impact on users who want to brand their own site by keeping the default theme but just adjusting to their brand colors and logo?

When the visual editor was new, I recall using that and got myself into a lot of trouble because the resultant theme never updated with the rest of the suite and I needed support to come in and clean a bunch of stuff up. 

With these changes in 4.5, is there now a way that all colored aspects of the default theme can be adjusted without the suite thinking it’s no longer the default theme and not keeping it updated when new releases come out?

Share this comment


Link to comment
Share on other sites

Thank you for updating the template. Looks good.

We do have a question: Why is this space unused? With many messages it becomes difficult to scroll through all of them and there is no way to expand the list. It would be nice if there was - especially on larger screens. 🙂 Thank you.

image.thumb.png.f2ff5978671ad72a16a3616b715f1bf1.png

Share this comment


Link to comment
Share on other sites

I love the new look; overall changes.

Hopefully, overall DOM size has been reduced.

Have you guys tested and compared speed improvements between 4.xxx and 4.5? Mobile? Desktop? 

Mobile should be just as fast as desktop (or close to it). I believe Google PageSpeed/Lighthouse default tests speed are Fast 3G/Slow 4G.

That's definitely not the case with the current Forums site. HUGE difference.

Yes, we all know that it's not the same as the default platform or how each site will run. But, it is the first thing that potential customers will experience/test.

I'll attach screenshots of the CURRENT speed per Google PageSpeed ... and when IPS converts site to 4.5 I'll share those screenshots as well.

Personally, I just want to see before/after results. 🙂

mobile-speed.png.dd947a7f36124bd18f472d359353dcf3.png

desktop-speed.png.e4429356b54e25802b48ef5447367c69.png

Edited by GTServices

Share this comment


Link to comment
Share on other sites

Wow wow wow! 

Great job, subtle enough so it isn't daunting, but different enough to implement great features (mostly excited about the more spacious mobile design and the the topic stats block). 

But I have one nitpick, why don't you apply (or give an option to apply) a divider between the sticky threads to the regular ones? 

Please, LET ME HAVE IT!!! ok? 😊

Share this comment


Link to comment
Share on other sites

A couple things come to mind. 
 

1. My community is going to go crazy. In a bad way because it’s a change. Last time I adjusted the font it was like an atomic bomb hit the site. 
 

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. 
 

Love the software, but get frustrated with major changes because it’s hard to run a business and make future plans without any control. I could sell advertising in a space that suddenly disappears. Not fun. 

Share this comment


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...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy