forked from ForumMagnum/ForumMagnum
-
Notifications
You must be signed in to change notification settings - Fork 4
UI Design Notes
David Smehlik edited this page Mar 3, 2022
·
9 revisions
- Current consensus is on a new skin - logo, colors, font, icons.
- For mvp, only small changes to the layout.
- Most design-related tasks are currently logged in Github issues. They are broken down into bite-size todos for clarity and speed.
- Forum Magnum uses React library called Material UI (MUI), which is based on Google’s Material Design.
- Most important link is their Docs, which includes ia. tutorials, components, customization.
- For mvp, most important is theming under customization.
- They have a UI kit for Figma. Part is free, complete kit is paid.
- LW seems to be mainly composed of greys and a green accent (subdued).
- Primary color - lusty red - hex: #BF3945, hsb: 355, 70, 75. It has good contrast (WCAG) against white and cream below.
- Secondary color - cream - hex: #FFFCF2, hsb: 46, 5, 100. This particular tint is used for the logo when on lusty red background. Subtler tints are used to replace greys used on LW.
- I experimented with non-white backgrounds for articles but user-embedded images tend to have white backgrounds. Best to leave article background white to maintain decent looks.
- Serif - Source Serif Pro. Arguably in the top 5 serifs on Google Fonts.
- Sans-serif - Jost. Essentially updated Futura, an iconic geometric font. It has a distinct personality.
- MUI by default uses Google Material icons but let’s add some individuality by using a different but still extensive icon library.
- Current consensus are Hero icons, outline variant. (Hat tip to Jason Crawford.)
- Use their React library or insert individual svgs.
- Current consensus is an ascending arrow cut out from a forward-looking round table. Cut out is called 'negative space' in design speak. Fancy! The logo mark is simple and bold. To the right is a left-aligned and capitalized ‘Progress Forum’ broken into two lines and written in Lexend Semibold.
- Logo and favicons pack can be found here for Brightness 90 and here for Brightness 82.
- The pack includes 3 folders - whole logo, logo mark only, and favicon pack.
- Color versions: Full color on transparent background and white background, and cream on red background.
- Formats: PNGs and SVGs. Wherever possible, use SVG as its resolution doesn't degrade when scaled.
- Favicon pack includes code for html head.
- Pack doesn't include a version for print - not applicable.
Let me (David) know if something above doesn’t sound or look right, or is missing from this note!