I designed this simple website as a project for my Interaction Design class DMA217. This project involved getting the hang of basic coding languages such as HTML, CSS, and Javascript. We learned how to insert images and videos into our web pages, import fonts, and some other features. What I decided to do was make a simple landing page for reading, one of my favorite hobbies. This is inspired by a social media page I have with the same name that I use for posting book reviews and activities. I took ideas for that project and used things I learned in our class to put together the website seen here.

One of the interactions I really enjoyed adding to this site was the hover interaction over the navigation links. This makes using and visiting the site much more interesting. The links will change color when being hovered over, making them more dynamic and fun. I would love to continue incorporating this detail in other web projects that I do and see what other hover effects are possible.

The hardest part about this project was the image layout. This was my first time learning the basics of grid and flexbox in CSS. While my image display is not very exciting, it took me awhile to just figure out how to lay them across in that way. What I would like to do is eventually learn how to create an image carousel or find other ways to make the images more interactive. This will require some more practice in JavaScript and how I can use it to manipulate my HTML and CSS elements.

For future projects, I would like to go in with a solid plan and prototype designed on Figma for my website. That way I can know exactly what I need to create before spending so much time creating a design that I’m not entirely sure on. If I do this I can approach the website building process with clearer problem solving since I’ll know specifically what problem I need to solve.

Sapling is a mobile app designed for helping users care for and learn more about their plants. I came up with this idea when I was struggling to care for one of my own plants and it ended up dying. I felt that it would be helpful for me and other people who want to keep plants but struggle with plant care to have an app act as their assistant. I began working on concepting this idea through Figma and it led to the first stages of my project.

In my Interaction Design class DMA217, we were supposed to make an app that utilized AR. This was a good opportunity for me to enhance my current app design. With only a few screens made already, I used this idea and finished the rest as my class project, creating a prototype with an AR feature to identity plants and issues with your plants. The final prototype had screens for a landing, logging in and creating an account, a dashboard, garden view for plants to keep track of, settings, and an AR video screen.

Coming up with my app concept was the easy part, what was hard was learning new parts of Figma that I wasn’t familiar with. Learning about animations and overlays for videos were difficult, and it took me a lot of time to figure it out.

A way to improve this concept would be to sketch out all my ideas more thoroughly on paper so that when I go to create my actual prototype I’ll have a clear idea of what to create so that I know upfront what Figma functions I need to use.

The submission itself would be much better with a well designed pitch for for the project. A bunch of slides meant for a presentation would help people viewing this project to really get the full idea of what it’s meant for and what its benefits are.

This project was created for my class DMA217: Interaction Design. Our goal was to design and prototype a mobile to do list app on Figma, learning about UI/UX design and how to use the software through the process.

One of the biggest things I learned was how much research and time is put into the simplest of details. While an interactive checkbox might seem quick and easy for the user, it still took me time to learn how to create it. An interaction designer spends extra time on these details so that the user can have a quicker and easier experience.

The easy part for me was beginning our project. Being already familiar with the basics of Figma, I moved quickly through the first steps of our project, such as creating our login and sign up pages. Creating frames, choosing colors, and starting a layout was an easy start.

This project became more challenging when we started learning how to make our prototype interactive. Components and variants is where I struggled the most. Creating the toggle buttons in my settings page took me a lot more time to learn than expected, but it helped me better understand how to create more interactive designs through components and variants.

My submission could be improved through providing more of a step by step reflection along with images to explain the process of me working on this project. This would allow me to detail my experience with this project more in depth for those viewing my portfolio.

What would be helpful to have in this class is a final checklist of each detail that needs included in this project. That way students can review this before finalizing and submitting their work.

The things I learned through this project will give me the mindset and skills needed to succeed in future projects. Taking the time to research and test my project is something that I will carry into new projects I do. I also got to see the amount of time and effort put into every detail and how important that is, especially in interaction design. This knowledge will be beneficial in both projects and the work place, giving my work the detail and simplicity it needs to satisfy users.

I think what inspired me the most was actually looking online and seeing work that other people had done, rather than readings or videos. Getting to see people take full advantage of Figma’s capabilities and their own creativity motivated me to try new ideas and think about potential future projects. This is something that will continue to inspire me along my journey as a designer.

https://www.figma.com/proto/bfoqub0fmmOSfyY3016ZD7/ellis25-DMA217-project-1?node-id=9-5&p=f&t=aE2twnC4tSOyrzZI-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=9%3A5