SUMMARY: For my second project in Multi-Platform design, I created a set of HTML and CSS vocabulary terms to be displayed in an interactive flashcard. We designed a lo-fi wireframe, a med-fi wireframe, and a design system. We finalized our design and then turned it into a working prototype in XD. This project helped me gain more experience with UI/UX design.

GOALS: My goal for this project was to find a way to make my flashcards exciting without distracting from the information being presented. HTML and CSS vocabulary can be boring at times, so I really wanted to keep the viewer's attention. I wanted to learn how to create more interactions on XD, such as the scroll feature.

FLASHCARD DESIGN:

LO-FI WIREFRAME: I researched different flashcard designs before starting my sketches. A lot of the flashcards I found used bright colors but didn't have much of a design. The term was the main focus, with few background elements. I tried many sketches and layouts. I also wanted there to be an element that led the viewer to the definition, such as an arrow. I chose my top sketch and turned it into a med-fi wireframe. 

MED-FI WIREFRAME AND DESIGN SYSTEM: The picture above is of my med-fi wireframe and design system. I decided to start with my favorite sketch. I made the med-fi wireframe in Illustrator. After designing it, I didn't love it. The black and white was boring, and there weren't many design elements on the page. After designing my med-fi wireframe, I knew I wanted to try other options. 

FINAL DESIGN: I decided to try out my second favorite design. This one was more fun and exciting. The colors I chose are bright but not too distracting. I like all of the design elements that I added. There are a lot of elements that can be turned into components in XD. I think the typeface I chose fits the theme well. I am proud of my final design.

NAVIGATION MAP: I designed the navigation map in Illustrator. I made an artboard for the home page, as well as each individual term. I drew the arrows by hand. The arrows show which artboard each component leads to. On the home page, there is a button for HTML terms and CSS terms. The HTML button leads to the HTML terms, and the CSS button leads to the CSS terms. On every other flashcard, there is a forward arrow, a back arrow, and a home button. The forward arrow leads to the next card. The back arrow leads to the previous card. The home button leads to the home page.

APP PROTOTYPE BUILD:

DESIGN: I imported my final design from Illustrator into XD. I defined my color palette with the color codes. I selected each text and made a new character style. I selected each design element and made it a component. I named all of the components to make it easier to navigate. I also named all of my artboards. After creating my character styles and components, I duplicated the artboard for each card I needed, and it was very easy to fill in the rest of the information!

PROTOTYPE: Each flashcard has several spots for interaction. The picture on the left shows the amount of interaction on just one flashcard. The picture on the right shows all of the wires and interactions throughout my project. I selected which components I wanted to be interactive, and I changed the toggle state to the artboard I wanted the button to go to. Naming the artboards made this process easier.

FINAL WORK: 

KNOWLEDGE GAINED: I enjoyed this project. It was good practice for me to create a design system and stick to it throughout several pages. I learned more about HTML and CSS vocabulary. This will be helpful in upcoming projects. I am excited to work on more UI/UX projects in the future!