Summary - For my second project in the Multi-Platform Design course, I crafted an interactive flashcard set featuring HTML and CSS terminology. The process involved creating low-fidelity and medium-fidelity wireframes before developing a comprehensive design system. This groundwork allowed me to produce a functional prototype in Adobe XD. This experience deepened my understanding of UI/UX design principles.
Goals - The project aimed to inject excitement into the learning of HTML and CSS terms, which can often seem dry. My focus was on designing the flashcards in a way that captivated users without overshadowing the educational content. An additional objective was to enhance my skills in creating interactive elements within Adobe XD, specifically experimenting with the scroll feature to engage users more effectively.
LOW-FI WIREFRAME- Before I began sketching, I looked into various flashcard designs for inspiration. Many of the designs I came across utilized vibrant colors but lacked intricate design elements, primarily emphasizing the term with minimal background distractions. I experimented with multiple sketches and layouts, aiming to incorporate an element that would guide the viewer towards the definition, like an arrow. After exploring various ideas, I selected my favorite sketch to refine into a medium-fidelity wireframe
MED-FI WIREFRAME AND DESIGN SYSTEM - The image shows my medium-fidelity wireframe alongside the design system I've been working on. I chose to develop my preferred sketch further, creating the wireframe in Illustrator. To my surprise, I found myself quite pleased with the outcome. The combination of green and white was harmonious, and all the design elements complemented this color scheme well. After finalizing the medium-fidelity wireframe, I felt encouraged to explore additional options.
FINAL DESIGN:I decided to further refine my favorite design, which turned out to be a fun and exciting process. The colors I selected are vivid yet not overpowering, striking a perfect balance. I'm really happy with all the design elements I incorporated; many of them have the potential to be transformed into components within Adobe XD. The typeface choice, in my opinion, complements the theme beautifully. Overall, I'm genuinely proud of the final design I achieved.
DESIGN -I crafted my design using Adobe XD, where I meticulously defined my color palette, including specific color codes for consistency. For each text element, I created new character styles to ensure uniformity across the design. Similarly, I converted each design element into a component for easy reuse. I also took the time to name all of my artboards thoughtfully. With the character styles and components established, I duplicated the artboard for each flashcard I needed to create. This setup made it incredibly straightforward to populate the remaining information on each card!
In my prototype, each flashcard is designed with multiple interactive areas. The image to the right illustrates the network of connections and interactions spread across my project. I handpicked the components that I wanted to make interactive and set up their toggle states to link to the designated artboards. The effort I put into naming the artboards earlier really paid off here, simplifying this part of the process significantly.
https://xd.adobe.com/view/793f959c-a5c2-4a84-baf9-36c3f32f7333-2c6c/?fullscreen
KNOWLEDGE GAINED - I genuinely enjoyed working on this project. It provided a valuable opportunity to develop a design system and consistently apply it across multiple pages. Along the way, I deepened my understanding of HTML and CSS terminology, which I anticipate will be beneficial for future projects. I'm looking forward to tackling more UI/UX projects down the line!
