Firefox DevTools UX Community
Switch branches/tags
Nothing to show
Clone or download
violasong Merge pull request #27 from thiagotomasi/dev-addDevToolsPhoton
Added the DevTools Photon design system link
Latest commit c3989db Sep 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Aug 17, 2018
README.md added the DevTools Photon design system link Sep 4, 2018

README.md

Contributing to Firefox DevTools UX

Welcome, and thanks for your interest in contributing to DevTools UX! Our team only recently started working with design contributors, so things may be a bit disorganized initially. I’m happy to hear any feedback or ideas on improving the onboarding process. —Victoria

First Steps

  1. Join the friendly Firefox DevTools Slack community!
    • The new #ux channel is a place for us designers to hang out, ask questions, post mockups for feedback, and offer feedback for other designers’ mockups. I’ll be communicating with everyone through this channel.
    • Feel free to introduce yourself or talk about general DevTools things in #general
  2. Check out the Firefox DevTools design system (You can check for issues there too).
    • This design system is a fork from the main Firefox design system
    • We will be starting work on a Sketch library very soon! Let me know if you want to help with this.
  3. Sign up for a GitHub account if you don’t already have one and message @victoria on Slack to be added to our team.

Process

  1. Claim a UX issue by commenting in it. Anything tagged good-first-issue is a great place to start, especially if you're new to design. You can also ask on Slack for help in choosing a first task.

  2. Once you have a task, it’s great to do a little research.

    • Get ideas from similar UI in DevTools and Firefox. Download Firefox Nightly to view the latest version of the UI. When possible, try to reuse already existing colors and other visuals in DevTools/Firefox.
    • Ask questions in Slack. Developers in panel-specific channels can help with questions about user needs and behaviors. You can also ask your own developer friends for ideas!
    • See what Chrome, Safari, and Edge are doing for similar features. Also check out other development tools, like Atom and Xcode.
  3. Start working on the design. There are several ways to approach this, depending on the task.

    • Make a mockup. This could involve working in an existing Sketch file, modifying a screenshot, or recreating a mockup if you're interested in helping with our Sketch libraries. This is great for more involved visual changes that would be too much to code via the other methods. For small changes that really need to be tested on real content, this might not be practical. For more complex UX tasks, a low-fidelity wireframe is a great way to start.
    • Inspect the toolbox via the toolbox-inspector to try out small CSS changes. This can be fraught with trouble due to the usual Inspector problem of no export/persistence features (it's in the plans!), but we use this all the time to quickly visualize a change.
    • Building and running Firefox (instructions below), and trying CSS changes right in the codebase. This can be tricky to get started, but is especially useful because then you can seamlessly move on to submitting a patch :).
  4. Post high-res screenshots in the relevant github issue and on #ux to get feedback. Make iterations as needed.

  5. Get a final sign-off from @victoria to send your design into development mode!

Tips

  • Take screenshots of every stage for your portfolio :)
  • As a final step, icons should be saved/re-saved using Illustrator and follow the SVG guidelines for better performance. (A Mozilla person can help if you don't have a copy of Illustrator.)

Implementing Your Own Design

Do you know HTML and CSS? If so, you can make your own design a reality! The friendly engineers of Firefox DevTools can help mentor you through the process of submitting a good patch. The biggest first step is building Firefox. Here are some guides:

Potential Projects in the Works

Communications

UX Contributors

(Slack usernames)

  • @caterina, community advisor
  • @fvsch, UX analysis extraordinaire
  • @kristin, UX contributing pioneer
  • @Yash, icon whiz
  • @isabelle
  • @Alejandro
  • @Shaiz
  • @arnolem
  • @mario
  • @bastien
  • @Jordan
  • @bree
  • @Thiago
  • @Raulinga
  • @Gabiskandar
  • plus more, will add you as you join Slack

Mozilla People

Mentors:

  • @victoria - Senior DevTools UX
  • @Matt Croud - DevTools UX
  • Robin - Senior Firefox iOS UX
  • @yzen - Accessibility mentor
  • @erica - Developer mentor
  • @gl - Developer mentor

Project people:

  • @bwinton - DevTools UX Manager
  • @Martin Balfanz - DesignTools PM (Inspector, Style Editor, Accessibility, Canvas, Shader…)
  • @digitarald - DevTools PM (Console, Debugger, Network...)