Design Contribution Guidelines for Readest

Welcome to the Readest design contribution guidelines! We appreciate your interest in contributing to our project. These guidelines will help you understand how to contribute to the design aspects of Readest, which is built on Adobe Spectrum's design system using Adobe Spectrum React.

Design Principles

Our design principles are aligned as:

1. Clarity: Eliminate ambiguity and make everything clear. Ensure that users understand what they can do and how to do it.

2. Efficiency: Optimize for efficient workflows. Enable users to accomplish more with less effort.

3. Consistency: Maintain consistency in visual elements, interactions, and language. Use familiar patterns and components.

4. Beauty: Create aesthetically pleasing designs. Ensure that every visual element is purposeful and enhances the user experience.

5. Accessibility: Design with accessibility in mind. Ensure that your designs are usable by people with disabilities.

Getting Started

1. Familiarize Yourself with Readest:

   • Read through the project's README and existing documentation.
   • Understand the project's goals, target audience, and design principles.

2. Learn Adobe Spectrum:

   • Visit the Adobe Spectrum documentation to understand the design system.
   • Familiarize yourself with Adobe Spectrum React components and guidelines.

3. Join the Community:

   • Participate in our community discussions on Discord.
   • Introduce yourself and let us know your design background and interests.

Contribution Process

1. Identify an Area for Contribution:

   • Look for open issues labeled with design or UI/UX.
   • Propose new design ideas or improvements in the discussion threads.
   • Decide what you aim to contribute–a new UI component, design pattern, or a set of guidelines. Clearly defining the type of contribution filters out irrelevant or redundant inputs right from the start.

2. Create a Design Proposal:

   • Use tools such as Figma, Sketch, or Adobe XD to create your design mockups. We however mainly use Figma
   • Ensure your design aligns with our design principles and Adobe Spectrum guidelines.
   • Include a brief description of your design, the problem it solves, and any relevant user research.

3. Submit Your Design Proposal:

   • Fork the Repository: Go to the Readest Design repository and click the "Fork" button to create your own copy of the repository.
   • Create a Branch: Create a new branch for your design contribution. Use a descriptive name for your branch, such as design/feature-name.
   • Add Your Design Files: Add your design files (e.g., images, design documents) to the appropriate directory in your branch.
   • Open a Pull Request: Once your changes are ready, open a pull request (PR) against the main branch of the Readest Design repository. In your PR description, include:
     • A summary of your design proposal.
     • Any relevant images or links to design files.
     • A description of the problem your design solves and any user research you conducted (or why you think this should be implemented. We follow this so as to have proof of a design
   • Request Feedback: Wait for feedback from the maintainers and the community. Be open to constructive criticism and suggestions.
   • Iterate Based on Feedback: Make necessary revisions to your design based on the feedback received. Update your PR with the revised design and note any changes made.

4. Iterate Based on Feedback:

   • Be open to constructive criticism and suggestions.
   • Make necessary revisions to your design based on the feedback received.
   • Update your proposal with the revised design and note any changes made.

5. Final Approval and Implementation:

   • Once your design is approved, collaborate with developers to implement it.
   • Provide necessary assets (e.g., icons, images) and ensure the design is correctly integrated.
   • Test the implemented design and provide feedback if needed.

Design Tools and Resources

• Adobe Spectrum Documentation
• Adobe Spectrum React
• Figma
• Sketch
• Adobe XD
• Accessibility Guidelines

Code of Conduct

• Be respectful and considerate in all communications.
• Provide constructive feedback and be open to receiving it.
• Collaborate and support fellow contributors.

Licensing

By contributing your designs, you agree to license your contributions under the Project License.

Contact

If you have any questions or need further assistance, please reach out to Contact Information.

---

Thank you for your contributions! By following these guidelines, we can ensure that Readest maintains a high standard of design quality and provides an exceptional user experience.