Visit Dream Drives Here!

1. What did you learn?

As I was moving through this project, I began to understand components and variants in great detail. Having this skill allowed to progress relatively quickly, despite a few hiccups here and there. I also learned more about Auto Layout and its importance in Figma.

2. What was easy?

The easy portion of this project involved creating the Desktop and Mobile Pages and adding functionality for navigation. I enjoyed working with several different layout schemas and used a variety of colors which gave the website a sleek look and feel.

3. What was challenging?

The challenging aspect of this project was creating an idea/concept for the site. Deciding the purpose of my site came with time, but continued to evolve after thinking about the end-user. Another tricky factor was designing the layout to make each webpage feel fluid.

4. How could your submission be improved

Overall, I was quite pleased with the result considering the amount of content on certain pages. However, I would’ve changed the Radio Menu size for the “Vintage, Luxury, and Off-Road” Desktop Pages. Also, I tried to blur the background image for the Desktop and Mobile homepages, but was unable to find a way to do so. I know how to blur any image in Figma, but didn’t see a “blur image” option for the background image embedded in the frame. Including a feature for scrolling pictures on the Mobile Portfolio Page would’ve been cool but I didn’t have time for it.

5. How could I improve the assignment next class?

For this project, I liked all of the tasks at hand. For the future, I’d recommend covering different options when approaching the overlay design for the Mobile View.

6. How might you apply your knowledge in future assignments or work scenarios?

Having experience with this project and the design process has given me the ability to design a simple webpage concept in Figma and use it to write HTML/CSS code. This skill is incredibly useful as it saves the designer from having to brainstorm a foundation. I like to think of Figma as a digital means for drawing out ideas on paper and using them for applications/projects

7. How did a specific reading or video inspire or help you?

Dream Drives is a website where the user to “view” and “rent” different vehicles for a specific purpose or desire, in this case, a vacation. These cars are found in three variations: Vintage, Luxury, and Off-Road. While I originally focused on my product involving Convertible-type cars, I decided to broaden out to any outdoor/summer vehicle. This allowed for my site to have more practicality but retain its core principle of offering Convertibles. Each vehicle or “Dream Drive” listed on the site is intended to appeal its audience, hence the reason for two distinctive vehicles of each variation.

For the cars themselves, I attempted to make each spec as realistic as possible. The “Rental Price” is based on several car rental sites that offered models and each vehicle’s “Color” pertains to a Factory Color found on the manufacturer’s website/catalog. In regards to pictures of the vehicles, I used Pexels and Unsplash, two services that offer Royalty-Free images. These sites assisted me in creating the elements found on each vehicle variation.

Car Color Catalog

Pexels

Unsplash

Interact with Fortify Here!

1. What did you learn?

When progressing through this project, I learned a lot about how Figma can be used for interaction design. In the past, I viewed Figma as another Adobe Illustrator but now I truly see the power that Figma has to offer. Learning how to create components, instances, and variants allowed me to bring my app to life.

2. What was easy?

The easiest part of this project was creating the frames and dragging different “noodles” to connect one frame to another via an interaction. Other than that, the rest of the project was a bit more complicated.

3. What was challenging?

The difficult parts of this project involved the understanding and application of components and variants. These concepts were foreign to me and even though I’ve had some time with them, I still have trouble from time to time implementing these into an actual app. I’d say it’s easy to create them, but hard to piece everything together.

4. How could your submission be improved

From the start, I feel that I should’ve have added more colors to my application. Since this app is intended to alleviate stress, I went for a calm and relaxing theme, but I think that physically it doesn’t catch one’s eye. Also, next time I would try to spend more time with Auto Layout. Wasn’t one-hundred-percent sure on how to use this feature so I decided to shy away from it.

5. How could I improve the assignment next class?

I don’t see any reason to change the required tasks or features to be implemented in this project. I will say that I was a bit confused about the Contact Page requirement since I don’t recall seeing that in class, but I decided to add it anyway.

6. How might you apply your knowledge in future assignments or work scenarios?

The skills that I learned from this project will allow me to implement types of variants for use in other types of interfaces. I would definitely need more experience using these features, but compared to other software Figma is relatively easy to use. In the future, I could possibly create a app with more than one feature, for instance a widget.

7. How did a specific reading or video inspire or help you?

There were several times during this project where I was confused on what to do next, but luckily I found some resources that were able to assist me. Figma’s Youtube Channel had a bunch of instructional tutorials on how to initialize components and variants, but unlike other videos, Figma used nifty animations to help reinforce these concepts. I found this approach to be extremely helpful and a fun way to learn more about Figma. As for general tips and good practices regarding UI design, I found a website that explained everything from types of user interfaces to design patterns. Both of these resources allowed me to produce something I’m content with.

Figma Tutorials Playlist: https://www.youtube.com/playlist?list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4

UI Website: https://www.fullstory.com/ui-design/