Design high-fidelity mockups of new donate templates
Design high-fidelity mockups that support our compatibility requirements for screen size & resolution:
The donate portal should make use of the latest responsive design techniques with mainstream adoption among our target browsers (see 'Browser support') to provide user-friendly layouts that adapt to the user's screen size. At minimum, the donate portal should support screens of 320px wide, with no defined upper limit beyond the maximum width of the site's container.
Text and other elements may be reduced in size at smaller screen sizes to reflect higher pixel densities and reduced viewing distances.
In addition, the new designs should align with our commitment to AA compliance with the WCAG 2.1 accessibility standard:
The donate portal should strive to meet, at minimum, the WCAG 2.1's success criteria for Level AA compliance. Should it not be possible for a particular element to meet the criteria for AA compliance, an alternative should be provided or an exemption agreed with the Tor Project.
At a glance, particular care should be taken to meet the following requirements as laid out in more detail in the WCAG 2.1 technical specification:
Perceivable Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia. Create content that can be presented in different ways, including by assistive technologies, without losing meaning. Make it easier for users to see and hear content.
Operable Make all functionality available from a keyboard. Give users enough time to read and use content. Do not use content that causes seizures or physical reactions. Help users navigate and find content. Make it easier to use inputs other than keyboard.
Understandable Make text readable and understandable. Make content appear and operate in predictable ways. Help users avoid and correct mistakes.
Robust Maximize compatibility with current and future user tools.
Todo list:
-
Credit card template -
PayPal template -
Cryptocurrency template -
Noscript template -
Thank you page template -
Supporter, Defender & Champion states← Removed from the scope for the MVP -
Campaign takeover example -
Active, inactive, focus and selected states -
Error states
On the following formats:
-
Desktop -
Mobile
High-fidelity mockups