![]() ![]() The menu bar is a custom design, so when considering changing elements in the topbar (the top of the Desktop interface), consider the Windows menu bar in relation. The menu bar on Windows sits directly on top of the GitHub Desktop UI, with no separation or ability to disconnect it. The menu bar on macOS sits at the top of the screen, disconnected from the GitHub Desktop window. Sentence case is used for headlines and buttons, which is aligned with Primer guidelines.Įxample: "Current repository" Menu bar Menu bar on macOS This is different from Primer guidelines, so it needs to be taken into consideration.Įxample: "Current Repository" Capitalization on Windows Title case is used for headlines and buttons. This differs from the Primer guidelines and should be taken into consideration for Windows users.Įxample: "Let’s do this | Cancel" Capitalization Capitalization on macOS The default button is always on the far right and the primary action is on the left. This is aligned with the Primer guidelines used on .Įxample: "Cancel | Let’s Do This" Button order on Windows The secondary button is always on the left, whether it’s the default or cancel, and the primary action is on the right. Though Electron enables a cross-platform app, there are a few key differentiating features between macOS and Windows that need to be considered when designing for GitHub Desktop. For example, in the future, multiple desktop windows could be part of the app experience. ![]() With Electron, it’s possible to implement anything that can be implemented on, and more. Platformsĭesktop is built using Electron, which allows it to be cross-platform. If a shadow is included in the illustration, it needs to be translucent.Īll of the illustrations can be found in the desktop repo. They are composed of 1 or 2 swatches that get swapped out with a css invert filter on. Because Desktop has a dark mode, hard-coded colors need to look good on either white or dark gray backgrounds. Illustrations primarily show up in the welcome wizard and empty states for lists areas. GitHub Desktop has its own set of illustrations, which were adopted from a previous GitHub Universe with a space theme. Some older octicons have also been used in the illustrations (check mark, question mark, ufo with speech bubble with telescope, planet with thumbs up). Repo force push: Repo with arrow with triple outline above.Force push icon: Push arrow with outline of two more arrows to make it look more extreme.Avatar default: The old version (a filled in silhouette with rounded container) is used instead of the newer outlined style due to the context.Commit co-author: Person with plus sign.Stash: Uses the octicon for ‘modified’ but made to appear stacked.There are icons that are unique to Desktop: GitHub Desktop uses octicons, but doesn't inherit updates, instead they're duplicated into the Desktop code base. It's displayed using a theme that essentially converts all the elements to their dark mode equivalents. GitHub Desktop has a dark mode users can choose in their app preferences. Use blue for tab underlines (orange is used on ).Use blue for the primary buttons (rather than the green buttons on ).For the most part, Deskotp uses the same palette as Primer CSS, with a few exceptions: The color scheme file is the only element inherited directly from Primer CSS. The core considerations for GitHub Desktop include platform differences and relationships to Primer Web guidelines. These are the foundational design concepts and constraints that can help inform design decisions. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |