Jump to content

Community

Rikki

Invision Community Team
  • Content Count

    24,167
  • Joined

  • Days Won

    77

Rikki last won the day on April 26

Rikki had the most liked content!

About Rikki

  • Rank
    IPS Brit
  • Birthday 08/17/1983

IPS Marketplace

  • Resources Contributor
    Total file submissions: 3

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. You could, but then you can do that now too. We wouldn't be able to use any pro icons in the base software.
  2. As a side note, I reached out to FA to find out if the Pro license would be an option for us. The bad news is it wouldn't, because anyone who edits/exports themes would be defined as a 'creator' and need a seat on the license. We could use the free version, but the benefits over FA4 are not particularly big, afaik.
  3. icomoon has been removed in 4.5 and jQuery has been upgraded to the 3.x series 🎉
  4. The reason is essentially that it'd be a big undertaking for us to update to FA5 for relatively little benefit for most customers. Some people (like yourself) would obviously have more need for it, but on the whole the cost/benefit of upgrading is minimal. They do have a migration script but again I'm not convinced it's worthwhile to include that on every site.
  5. I'm afraid I won't be able to dig up the example because it was a long time ago, but I'm pretty sure I remember someone building a timeline very similar to that using our Pages app and some custom templates. You'd just need a database with a date field and a content field, and then build some custom templates to display it as a timeline 🙂 If you have HTML/CSS skills it should be doable, or a third-party designer could do it without much trouble I expect.
  6. Nice suggestions. I don't think the concept of replying directly to a post works so neatly on forums (well, Invision Community in particular) because our conversations aren't threaded. Instead you quote one or more posts - but your reply is still part of a linear conversation. That said, you're definitely right that having to go to the bottom of the page is a bit old fashioned and cumbersome. I think it could be made easier - for example, one idea would be to have a floating reply button or even reply box, available on a topic page at all times, so you can start working on your reply wherever you happen to be in the topic.
  7. 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.
  8. 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.
  9. 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.
  10. That's a fair comment, but ipsPadding seems unnecessarily wordy when ipsPad gets the same idea across (and continues using the same term we've always used). There's not really a shorter version of ipsMargin that makes sense.
  11. 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).
  12. ipsPad_all is regular padding (like the old ipsPad). So this is doing double padding at desktop size (no prefix), regular padding at tablet size (md: prefix) and half padding at phone size (sm: prefix).
  13. Good spot - that happens because on the invisible widget container above the main content. We’ll figure out a solution 🤞
  14. We’ve moved our default links, but there’s no reason why plugins can’t continue to add links to the bar as before 😊
  15. 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. Brighter default colors 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. 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. 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. 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. 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. Calendar header 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. 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. 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). 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: 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 Desktop forum views (click to expand) Mobile forum views (click to expand) Activity streams & messenger (click to expand)
×
×
  • Create New...

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