New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Help Wanted] Aesthetic design upgrade to increase reading area and usability across screen resolutions #8350

it33 opened this Issue Feb 22, 2018 · 0 comments


None yet
3 participants

it33 commented Feb 22, 2018

If you're interested please comment here and come join our "Design Challenge" community channel on our daily build server, where you can message ian.tien to discuss this ticket specifically.

This ticket has been created to welcome top designers from around the world to contribute to the aesthetic design of the Mattermost open source project.

Your contributions will impact tens of thousands of organizations use Mattermost, in 14 languages, to increase performance and achieve their key objectives, from ensuring national security to operating spacecraft, from advancing research to deploying vital infrastructure.


This specific ticket is a project to help refine the sizing, margins and icon appearance in the Mattermost web UI at different resolutions to increase the space available for reading. There are a number of ways to contribute:

  1. Set the vision for aesthetic upgrade. Create a design specification (pixel-specific mockups with the ability for a front end developer to develop the HTML/CSS) for upgrading the existing user interface with updated sizing, margins and icons without materially changing the placement, behavior or layout of existing components. This design would be reviewed, discussed, potentially adjusted and agreed with the product owner to set the vision for upgraded aesthetics for the user interface.

  2. Deliver HTML/CSS for aesthetic upgrade. This would be creating standalone HTML/CSS of the web client ( that a front end developer could incorporate into the web app repo--for this contribution you don't need to integrate the HTML/CSS with the repository, all you need to do is share the HTML/CSS so someone else in the community can deliver the code change.

  3. Deliver the pull request to update the Mattermost web app with new design. This means analyzing the web app source code and HTML/CSS/SASS framework and delivering a pull request that incorporates 1) and 2) above into While there is no expectation that the designer who can upgrade our aesthetics can also implement the design, the opportunity is offered for anyone who'd like to try, and you're welcome to ask questions in the developer channel at If you do make the contribution your name will appear in the commit history of the project--and if you don't implement it, we would ask the contributor of the code change to include the names of designers who contributed 1) and 2) as a matter of good practice. For technical advice or questions, please join our "Developers" community channel. New contributors please see our Developer's Guide, specifically for machine setup and for developer workflow.

Optional: If you're capabilities are both design and development and you want to work directly on a pull request to update the HTML/CSS/SASS, and use screenshots to discuss your design it would be a wonderful approach as well.


For the vision for the aesthetic design upgrade we'd ask you to

  1. Start an account on our daily builds server, so you can see the user interface first hand. Use this sign-up link:

  2. After joining the daily builds server go to the Design Challenge channel at and observe the layout and aesthetics of Mattermost at different screen resolutions an explore its interaction model.

  3. When you feel ready to share some ideas, please post them in the channel and mention @ian.tien, who created this ticket, to discuss your vision and you'll work collaboratively with the team and design community to contribute ideas.

Option: To reproduce the screenshots in the examples below, you can also download and use the Mattermost Desktop App at rather than interacting only in a web browser.


As you develop your vision, here's a few things to note:

  1. The aesthetic upgrade should aim to increase the reading area of Mattermost on lower resolution configurations by removing unnecessary whitespace and potentially updating the icons or their appearance (e.g. outlines).


  1. The upgrade should make the channel name and channel header text easier to read when Mattermost is on a narrow configuration.


  1. If you choose to significantly change the reading area itself, please make sure to observe the configuration where a user has replied on a message with a comment using the reply icon (below it's a "2" with a reply icon)


For contributions within the scope of this ticket, review, refinement and acceptance would be straight forward.

The scope of this ticket does not include changing the position or function of UI elements, and we would ask not to attempt that right now as it would break too much of our documentation and tests. We would be happy to discuss larger scale changes as an additional project.

To see more of the UI in Mattermost today, check out our features page:

@it33 it33 changed the title from [Help Wanted] Enhance sizing, margins and icons in web experience to [Help Wanted] Aesthetic design upgrade to increase reading area and usability across screen resolutions Feb 22, 2018

@irrational-pai irrational-pai referenced this issue Mar 19, 2018


Aesthetic design upgrade #971

3 of 8 tasks complete

@amyblais amyblais removed the Up For Grabs label May 11, 2018

@amyblais amyblais removed the Hacktoberfest label Nov 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment