Discover the story behind the winner of the Most Creative Adobe Express Add-On category at a recent Major League Hacking hackathon.<\/h2>\n\n\n\n\n\n<\/p>\n\n\n\n![\"Colene](\"https:\/\/miro.medium.com\/v2\/resize:fill:88:88\/0*SJtfn1Ww73z5yGWy.jpeg\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/a><\/p>\n\n\n\n\n![\"Adobe](\"https:\/\/miro.medium.com\/v2\/resize:fill:48:48\/1*riyFijvwTfGcWNf1guRNtg.png\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n![\"\"]()
<\/picture><\/div>\n<\/div>\n<\/figure>\nAdobe and Major League Hacking<\/a> (MLH) share a common mission: to empower developers around the world. And so we joined forces with and continue to sponsor this global community for all aspiring developers and code-enthusiasts to help early-career devs learn to build customized digital experiences like Adobe Express add-ons<\/a>.<\/p>\nIn this article, we\u2019re highlighting one of the participating teams, who came up with an add-on called Accessify that ensures accessibility for all users<\/a>. Not only were they one of the winners at a recent MLH hackathon, they also successfully applied for a grant from the Adobe Fund for Design<\/a> \u2014 which we recently reopened to focus on supporting individuals, entrepreneurs, and small businesses who are pushing the boundaries of building on the Adobe Express platform.<\/p>\nSubhasini Udhyakumar, Misry Dhanani, and Keerthi Veeramachaneni are all juniors at the Georgia Institute of Technology, while Shriya Rasale is a junior at the University of Georgia (UGA). Misry, Keerthi, and Shriya are majoring in Computer Science, while Subhasini is majoring in Computational Media \u2014 a unique blend of computer science and visual design. This interdisciplinary background gave the team a distinct advantage in developing their design-focused add-on.<\/p>\n
They all had already taken part in a few hackathons before they joined this year\u2019s UGAHacks<\/a>, an MLH member event that allows participants from across the university and the region to connect, learn, build, and share.<\/p>\n\u201cHackathons are the perfect environment to channel creativity and focus,\u201d Subhasini pointed out. \u201cThey offer an intense and rewarding way to learn new skills, push our boundaries, and collaborate on meaningful projects. It\u2019s a chance to dive deep into a problem and emerge with a tangible solution, often in a field you\u2019ve never explored before. The thrill of starting the weekend with a raw idea and ending with a functioning prototype is unmatched.\u201d<\/p>\n
For the team, the hackathon turned into a unique opportunity to collaborate with Adobe and tackle the challenge of building an add-on to extend the functionality of Adobe Express. They entered the Most Creative Adobe Express Add-On category, which pushed the team to think creatively and innovate beyond the usual scope of projects.<\/p>\nWatch Hamza\u2019s introduction to the Adobe Express Add-Ons hackathons.<\/em><\/figcaption><\/figure>\nEach team member had previous experience designing websites and working with other Adobe tools like Illustrator and Photoshop but wasn\u2019t familiar with Adobe Express yet. They quickly became fans of its user-friendly interface and powerful capabilities.<\/p>\n
\u201cAdobe Express stands out as an easy-to-use and versatile platform, which allows even those with minimal design experience to dive right into the creative process,\u201d Misry said.<\/p>\n
The team jumped at the chance to develop an add-on for Adobe Express, particularly because it was uncharted territory: After researching the existing add-on market, they noticed a gap in tools that address accessibility. This realization inspired the team to create an add-on that could simplify the process of ensuring content designed with Adobe Express is accessible as well as visually appealing.<\/p>\n
Accessify helps creators check whether their content adheres to the Web Content Accessibility Guidelines (WCAG)<\/a> and suggests new colors that are more accessible. The newest feature is an AI color palette recommender. Users can type color-related adjectives or describe their design\u2019s theme (e.g. \u201cvibrant\u201d, \u201cretro\u201d, or \u201ccalm ocean\u201d) and watch the AI suggest the perfect color palette to suit their vision. The goal for Accessify was to eliminate the need for designers to switch between different tools to check accessibility and find appropriate colors, streamlining the design process with Adobe Express.<\/p>\n\n\n![\"\"]()
<\/picture><\/div>\n<\/div>Accessify\u2019s color palette recommender allows users to briefly describe their design\u2019s theme with a text prompt and then generates a fitting color palette with accessible colors.<\/em><\/figcaption><\/figure>\nWhen designers select the eyedropper tool from the Adobe Express interface to capture the colors within their design, Accessify automatically computes the contrast ratio, assesses WCAG compliance, and offers tailored color recommendations.<\/p>\n
The team built Accessify with HTML, CSS, JavaScript, Node.js, and React. They also used rgblind<\/a>, an open source JavaScript library to simulate color blindness in real time, the WebAIM Contrast Checker API<\/a> and the Color API<\/a> to convert from RGB to HSL and to be able to generate recommendations for better colors.<\/p>\nAs the experience of building add-ons was new for the team, there was a bit of a learning curve, especially as they navigated through new tools, APIs<\/a>, and working with the add-on Command Line Interface<\/a>.<\/p>\n\u201cThe biggest hurdle was understanding the intricacies of creating an add-on for Adobe Express,\u201d Keerthi remembered. \u201cHowever, our prior development experience helped us to adapt quickly, and the Adobe team was incredibly supportive throughout our journey. They provided us with guidance on which APIs and Spectrum Web Components<\/a> would be most effective in our project, which was instrumental in bringing our vision to life.\u201d<\/p>\nTo help developers prototype their add-ons ideas faster, we have just released <\/em>a code playground within Adobe Express<\/em><\/a> that they can use to seamlessly create, test, and run add-ons directly inside the app.<\/em><\/p>\nIn the end, the Accessify team found the entire development cycle of building for Adobe Express a very rewarding and valuable learning experience \u2014 from start to finish. The process required the team to be more resourceful and independent, and it also offered them the opportunity to contribute to a growing ecosystem and share their add-on with a large audience.<\/p>\n
As a result, Accessify won the Most Creative Adobe Express Add-On category at the UGAHacks 9 MLH hackathon.<\/em><\/strong><\/p>\nThe team\u2019s number one tip for fellow Adobe Express developers is to thoroughly go through the tutorials<\/a> before starting development and to explore the supporting documentation<\/a>. \u201cThere\u2019s a wealth of information that can help with the finer details of development,\u201d Shriya said. Another lesson the team learned is how important final testing is before the product goes live, and they recommend taking advantage of using the private distribution link<\/a> to share your add-on and get feedback before submitting.<\/p>\nWe\u2019re excited to see the fall season of the MLH hackathons kick off and can\u2019t wait to see what other teams will build for Adobe Express!<\/p>\n
Try out <\/em>Accessify<\/em><\/a> today to make sure your content is accessible.
Register for an <\/em>upcoming MLH hackathon<\/em><\/a> and browse our <\/em>MLH hackathon landing page<\/em><\/a>, which includes ideas for building Adobe Express integrations.
Learn more about the <\/em>Adobe Fund for Design<\/em><\/a> and how you can apply to get funded.<\/em><\/p>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/a><\/p>\n <\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n Adobe and Major League Hacking<\/a> (MLH) share a common mission: to empower developers around the world. And so we joined forces with and continue to sponsor this global community for all aspiring developers and code-enthusiasts to help early-career devs learn to build customized digital experiences like Adobe Express add-ons<\/a>.<\/p>\n In this article, we\u2019re highlighting one of the participating teams, who came up with an add-on called Accessify that ensures accessibility for all users<\/a>. Not only were they one of the winners at a recent MLH hackathon, they also successfully applied for a grant from the Adobe Fund for Design<\/a> \u2014 which we recently reopened to focus on supporting individuals, entrepreneurs, and small businesses who are pushing the boundaries of building on the Adobe Express platform.<\/p>\n Subhasini Udhyakumar, Misry Dhanani, and Keerthi Veeramachaneni are all juniors at the Georgia Institute of Technology, while Shriya Rasale is a junior at the University of Georgia (UGA). Misry, Keerthi, and Shriya are majoring in Computer Science, while Subhasini is majoring in Computational Media \u2014 a unique blend of computer science and visual design. This interdisciplinary background gave the team a distinct advantage in developing their design-focused add-on.<\/p>\n They all had already taken part in a few hackathons before they joined this year\u2019s UGAHacks<\/a>, an MLH member event that allows participants from across the university and the region to connect, learn, build, and share.<\/p>\n \u201cHackathons are the perfect environment to channel creativity and focus,\u201d Subhasini pointed out. \u201cThey offer an intense and rewarding way to learn new skills, push our boundaries, and collaborate on meaningful projects. It\u2019s a chance to dive deep into a problem and emerge with a tangible solution, often in a field you\u2019ve never explored before. The thrill of starting the weekend with a raw idea and ending with a functioning prototype is unmatched.\u201d<\/p>\n For the team, the hackathon turned into a unique opportunity to collaborate with Adobe and tackle the challenge of building an add-on to extend the functionality of Adobe Express. They entered the Most Creative Adobe Express Add-On category, which pushed the team to think creatively and innovate beyond the usual scope of projects.<\/p>\n Each team member had previous experience designing websites and working with other Adobe tools like Illustrator and Photoshop but wasn\u2019t familiar with Adobe Express yet. They quickly became fans of its user-friendly interface and powerful capabilities.<\/p>\n \u201cAdobe Express stands out as an easy-to-use and versatile platform, which allows even those with minimal design experience to dive right into the creative process,\u201d Misry said.<\/p>\n The team jumped at the chance to develop an add-on for Adobe Express, particularly because it was uncharted territory: After researching the existing add-on market, they noticed a gap in tools that address accessibility. This realization inspired the team to create an add-on that could simplify the process of ensuring content designed with Adobe Express is accessible as well as visually appealing.<\/p>\n Accessify helps creators check whether their content adheres to the Web Content Accessibility Guidelines (WCAG)<\/a> and suggests new colors that are more accessible. The newest feature is an AI color palette recommender. Users can type color-related adjectives or describe their design\u2019s theme (e.g. \u201cvibrant\u201d, \u201cretro\u201d, or \u201ccalm ocean\u201d) and watch the AI suggest the perfect color palette to suit their vision. The goal for Accessify was to eliminate the need for designers to switch between different tools to check accessibility and find appropriate colors, streamlining the design process with Adobe Express.<\/p>\n When designers select the eyedropper tool from the Adobe Express interface to capture the colors within their design, Accessify automatically computes the contrast ratio, assesses WCAG compliance, and offers tailored color recommendations.<\/p>\n The team built Accessify with HTML, CSS, JavaScript, Node.js, and React. They also used rgblind<\/a>, an open source JavaScript library to simulate color blindness in real time, the WebAIM Contrast Checker API<\/a> and the Color API<\/a> to convert from RGB to HSL and to be able to generate recommendations for better colors.<\/p>\n As the experience of building add-ons was new for the team, there was a bit of a learning curve, especially as they navigated through new tools, APIs<\/a>, and working with the add-on Command Line Interface<\/a>.<\/p>\n \u201cThe biggest hurdle was understanding the intricacies of creating an add-on for Adobe Express,\u201d Keerthi remembered. \u201cHowever, our prior development experience helped us to adapt quickly, and the Adobe team was incredibly supportive throughout our journey. They provided us with guidance on which APIs and Spectrum Web Components<\/a> would be most effective in our project, which was instrumental in bringing our vision to life.\u201d<\/p>\n To help developers prototype their add-ons ideas faster, we have just released <\/em>a code playground within Adobe Express<\/em><\/a> that they can use to seamlessly create, test, and run add-ons directly inside the app.<\/em><\/p>\n In the end, the Accessify team found the entire development cycle of building for Adobe Express a very rewarding and valuable learning experience \u2014 from start to finish. The process required the team to be more resourceful and independent, and it also offered them the opportunity to contribute to a growing ecosystem and share their add-on with a large audience.<\/p>\n As a result, Accessify won the Most Creative Adobe Express Add-On category at the UGAHacks 9 MLH hackathon.<\/em><\/strong><\/p>\n The team\u2019s number one tip for fellow Adobe Express developers is to thoroughly go through the tutorials<\/a> before starting development and to explore the supporting documentation<\/a>. \u201cThere\u2019s a wealth of information that can help with the finer details of development,\u201d Shriya said. Another lesson the team learned is how important final testing is before the product goes live, and they recommend taking advantage of using the private distribution link<\/a> to share your add-on and get feedback before submitting.<\/p>\n We\u2019re excited to see the fall season of the MLH hackathons kick off and can\u2019t wait to see what other teams will build for Adobe Express!<\/p>\n Try out <\/em>Accessify<\/em><\/a> today to make sure your content is accessible. <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/picture><\/div>\n<\/div>\n<\/figure>\n
<\/picture><\/div>\n<\/div>
Register for an <\/em>upcoming MLH hackathon<\/em><\/a> and browse our <\/em>MLH hackathon landing page<\/em><\/a>, which includes ideas for building Adobe Express integrations.
Learn more about the <\/em>Adobe Fund for Design<\/em><\/a> and how you can apply to get funded.<\/em><\/p>\n<\/div>\n