View the Website Here!

1. What did you learn?

In this project, I learned how to use HTML/CSS to design a basic website. During the process, I understood how to resize different elements and forms on each page. Understanding how HTML and CSS work is critical, despite the limits that CSS has.

2. What was easy?

For the most part, the HTML portion of this project was simple. Since I had experience using this language in another class, I was familiar with some of the tags and indentation styles.

3. What was challenging?

The CSS part of this project was tricky in getting the positioning and layout of objects to conform to each page. Even though I used this language in the past, getting elements to line up properly was challenging and time-consuming. While I like learning about CSS, it takes a long time to master and become proficient in each concept. For instance, I had a lot of problems with my media query and also getting a masonry Javascript plugin to work for my Portfolio page. As a side note, I was unsure of how each page could fit different screen sizes. For instance, my Portfolio page looks fine on a 24″ monitor but is off-centered on my 15″ Macbook Pro screen.

4. How could your submission be improved

If I had more time, I would continue to work on the Masonry portion and see if I could get something to work, as well as rewrite the media query so that the mobile version of the website displays correctly on smaller screens. I would also fix the calibration so that each page displays the same on all screen sizes. Overall, this was definitely not my best work.

5. How could I improve the assignment next class?

I would continue to use HTML/CSS for this project, but I would spend more time talking about the media queries as this was the core portion of the assignment that I didn’t fully understand.

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

This knowledge of HTML/CSS can apply to jobs in the web design and web development industry, areas that combine Digital Media and Computer Science. From this Project, I learned more CSS and advanced techniques to make web pages look clean and functional.

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

For this assignment, I was inspired by an article that talked about different web design concepts. Although I was unable to implement most of these into my project, I learned the possibilities that HTML/CSS offers despite being standard languages. While the article is old, these concepts still apply to the web industry today and showcase fundamental techniques that can enhance one’s website.

https://www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/

Play MusicMorph Here!

1. What did you learn?

This assignment taught me more about micro-interactions and how to use Figma’s animation capabilities. By combining skills from DMA217 and Project 1, I was able to quickly assemble my design system and components that are utilized in the game.

2. What was easy?

Due to prior experience, constructing my frames and components was fairly easy. Selecting a color scheme to suit the app was a bit trickier since I had to think about issues regarding visibility and accessibility, but overall the visual design portion of this project was fairly straightforward.

3. What was challenging?

The hardest part relative to this project was learning how to use Auto Layout. Though this tool is incredibly helpful in creating equidistance spacing and formatting between objects, it is difficult to get a grasp of. Despite being skeptical of this feature at first, it grew on me the more I used it.

4. How could your submission be improved

For the future, I would improve the gameplay portion of my project. While I think my idea was neat, I wasn’t able to show its full potential within the app, partially due to struggling with the implementation of audio.

5. How could I improve the assignment next class?

I don’t see much that needs to be done in regards to this assignment. I loved the microinteraction lab as I’ve always been intrigued in how they work and its use with Figma. While the animation capabilities are limited, one can still create clean interactions to create loading circles, a star-rating system, and progress bars.

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

For future projects, I can apply my knowledge of using auto-layout on each frame instead of dragging elements to correctly position them. I also have some experience working with microinteractions in understanding how simple animations work.

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

For this project, I was inspired by a web-based game called Heardle. This app works by having users guess the name of a song given only a few seconds of the audio itself. For MusicMorph, I intended to have users select a difficulty level, each modifying music in their own way. For instance: Easy – Fast Forward, Medium – Reversed, and Hard – Distorted. This means that there are three versions of the same song that the user can listen to and then make their guess. I also wanted to implement an extensive hint and lives feature, but never fully got around to building this out.

Note: According to the website, Heardle is shutting down (May 5th)

https://www.spotify.com/heardle/

Visit Aurain Here!

1. What did you learn?

As I was progressing through this project, I learned how to use the Neumorphism Plugin as a design style approach. I gained more experience working with components and overlays, as well as adding different effects to my objects.

2. What was easy?

For this project, I found the process of creating a fitting color scheme and simple layout to be fairly easy. Creating components such as a playbar proved to be somewhat difficult at first, but became easier with time.

3. What was challenging?

The hardest part of this project was piecing everything together. For my sketches, I brainstormed a few ideas that could work in my app. While sketching made my formatting easier, I still struggled with understanding how elements could fit seamlessly on each frame. For example, the Now Playing frame was challenging because I had to fit several buttons, the playbar, song title, album, etc all on one page. I understand that I could’ve used overflow, but still don’t feel super comfortable using this technique in Figma.

4. How could your submission be improved

Next time, I would add some sort of overflow to my design and work on the Sort feature. I’d also add the ability for users to view each playlist. For practice, I might implement these changes to see how things turn out.

5. How could I improve the assignment next class?

I think that everything needed to complete this project was given in full detail. Aside from specific features that are tailored to different apps, the necessary criteria were easy to follow.

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

From my experience with this project, I understand the general layout of a music player and can continue to look at popular apps such as Soundcloud and Spotify for more ideas. This assignment allowed me to sharpen my skills in Figma and understand different design trends or ISMs.

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

Unlike past projects that involved stock photos and videos, I only used real albums and song covers to resemble music that can be listened to anywhere. For the download feature, I briefly looked at Apple Music to get an idea of creating a download queue with the song title and artist. As for the neuromorphic appeal, I found several websites that assisted me in seeing how this design approach is good and bad. I found that while this technique can be aesthetically pleasing, some people may have a difficult time noticing functional buttons or other elements that correlate to this trend.

https://www.justinmind.com/ui-design/neumorphism

https://hype4.academy/articles/design/neumorphism-in-user-interfaces

https://uxplanet.org/neumorphism-in-user-interface-tutorial-c353698ac5c0

Take The Tour Here!

1. What did you learn?

As I was working through this project, I learned how to implement overlays into video frames as well as better understand how components work when utilized as an overlay.

2. What was easy?

The easiest part of this project was setting up the Design Systems Page and importing video elements into Figma. Designing the components themselves wasn’t super difficult thanks to the Iconify plugin.

3. What was challenging?

Out of the three projects that were done this semester, this one was by far the most time-consuming and trickiest of them all. I spent hours trying to understand how to add multiple overlays to video when I found out that doing so was nearly impossible. As of the time that I’m writing this, Figma’s video feature is relatively new, so it makes sense that there are a handful of bugs that need to be fleshed out. One of these issues deals with the Manual position attribute when applying a second component to a video. Figma fails to recognize that while the overlay can be positioned manually, it will not display in the Prototype. However, when using a Preset position such as Centered, the component will appear as if it’s part of the video. This led to me using the Swap Overlay option several times, making for an unrealistic experience.

4. How could your submission be improved

Considering that this project was fairly involved and dealt with one of Figma’s coolest yet buggiest features, I think that I am satisfied with the result. However, I would’ve recorded other segments of video if I had more time. Doing so would allow for more selectable options when taking the tour.

5. How could I improve the assignment next class?

I don’t think that this assignment could be improved as it was really well laid out, just happened to somewhat falter due to the use of Figma’s video feature.

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

There are tons of apps out in the world that allow for user interaction, so I think that having experience with this project will allow me to create advanced applications with Augmented-Reality in the future. Also, this project taught me the significance of AR as a recreational means of user interaction.

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

The purpose of this application is to introduce and guide the user on a mini tour of Forest Lawn’s gravesites. Therefore, the inspiration for making these come to life stemmed from Forest Lawn’s official website, where they lay out several important people that are buried there. Not only did this allow me to have some sort of goal for my project, but I also learned a lot about these individuals themselves through research. As with my previous project, I used Pexels and Unsplash, two Royalty-Free picture providers that I highly recommend for any project that needs quality photos.

Forest Lawn “Famous Burials”

Pexels

Unsplash

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/

1. What did you learn?

When working on this project, I learned much more about what Illustrator has to offer. Aside from adding several strokes to a line, I improved my skills with the Pen Tool, warped objects such as the banner seen above, and learned how to combine different shapes to make one, unified object.

2. What was easy?

The easiest part of this assignment was adding the labels and tracing the map. I know that tracing with the Pen Tool takes some time to get used to, but after a few mistakes here and there, I was able to trace parts of the map in a realistic fashion. Not to mention that once you have your line segment, you can always edit it at any point, so using the Curve Tool and Anchor Point Editor allowed me to polish any misaligned edges or bumps along the way.

3. What was challenging?

The most time-consuming and difficult part of this project was definitely the symbols. Until I was able to submerge myself into using the Pen Tool efficiently, trying to draw the shapes wasn’t easy. To assist with this, I headed over to Google, looked at various kinds of of 2D images to get a reference of what I wanted to create, and then went about it from there.

4. How could your submission be improved?

One thing that I would’ve loved to continue developing/fixing if I had the time would be the junctions for the roads. If you look closely, you can see that for a few roads, the one end of the road doesn’t fully merge itself into the other connecting it. Since you have to look fairly close, I decided to leave it, but in the future, I would make sure to take more time and tweak this part a bit. Besides that, everything else turned out the way I had originally hoped.

5. How could I improve the assignment for the next class?

Once again, I really don’t see the need to change anything. Each requirement for this project was doable and allowed for us to explore Illustrator to an extent.

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

In work scenarios or other assignments, I would be able to use the Pen Tool to accurately trace a path or object. Also, I could make basic symbols needed to indicate someone or something.

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

The main inspiration that sparked this project was my trip to San Francisco and Yosemite in 2019. Out of every place I’ve been too, this definitely cracks the top 5. Plus, I could now cross this item off of my Bucket List. When brainstorming for this assignment, I initially felt that the Bay Area of San Francisco alone was too “large-scale”, in which at one point I was tempted to scrap this idea and look for a different approach. In the end, I’m complacent that I didn’t, since not only have I actually been to this location, but it was very enjoyable being able to “recreate” my trip and reeling in all of those memories to forget the cataclysmic times of change that was 2020.

1. What did you learn?

Prior to this task, I hadn’t touched Illustrator that much, so I was dipping my toes in when working with Illustrator. So far, I’ve learned how to trace layers, create textures and text fields, use the Pen Tool to trace objects, and the Pencil or Brush Tool to make strokes. I also was informed about some size-altering tools such as the Scale tool, which is another way to enlarge/shrink the size of objects and the Width Tool, serving its role for adjusting the width of strokes made with the Pencil/Brush Tool.

2. What was easy?

I found that using the Pencil Tool was actually very straightforward, mainly since there are options to smooth out your rough strokes, especially the edges and curves. This came in handy when drawing the coffee cup. At first, my drawing was very crude and wasn’t clean. After simplifying the path using Object > Simplify feature, my concoction began to look much better. The final touch was adjusting the width of the stroke to give it more of a paintbrush feel, rather than a geometric feel.

3. What was challenging?

There were two components of this project that gave me a bit of trouble, those being the pattern and assembly. Since the purpose of this object is to contain coffee creamer, I wanted to continue this theme throughout the carton and give the consumer the impression that this is a dairy product. In light of this, I decided to do a cow-based print. Creating the shapes wasn’t bad, however, making the pattern feel seamless was totally different. In the past, I’ve always had an issue with making a clean, consistent pattern. I had to rearrange my pattern multiple times in order to achieve this look. After messing with the opacity and modifying some of the shapes, I was finally able to produce a pattern that I was happy with. The other part that I struggled with was bringing this object from 2D into 3D. Building the base and the sides of the carton was pretty easy, but pinching the two top flaps together to form the top of the carton was tricky. However, I was able to work this out and while the top doesn’t look perfect, it still looks like the opening flaps are of that as a real carton. For this step, I’d recommend having an actual carton next to your “mockup” variant. That way, you can see how to fold the the carton so it looks as realistic as possible.

4. How could your submission be improved?

As mentioned above, I feel like I could’ve adjusted my tint for the pattern. The black cow spots don’t allow for much contrast between the pattern and text, such the “OPEN HERE” label and barcode. Aside from that, I think my carton looks fine. Also, if I had more time, I would probably tweak my coffee logo. I’m not all that thrilled with it as it doesn’t really stand out and the “half and half” text is a “coffee and cream” shade instead of a vivid color like crimson, but for the time being, it isn’t the biggest issue to me compared to the pattern.

5. How could I improve the assignment for the next class?

Just like the previous assignment, I don’t think much needs to be changed. Although the building process wasn’t easy, that’s something that can’t be altered that much, so overall I think the starter file and layout for this assignment was pretty straightforward and easy to understand.

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

In future assignments or work scenarios, I would continue to focus on the pattern aspect of things as I feel like that’s my weakest point in this project. I would keep in mind useful techniques for the Pencil Tool to draw faster and more efficiently. Anytime I’m given a logo or something to trace, it seems that the Pen Tool should suffice for this step in design.

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

As I stated earlier, the only inspiration for this project for me was the theme of a farm, consisting of cows and dairy. The company for this product is Byrne’s Farms, a long-running company, so something rustic like a farm, complements this packaging perfectly. This is why I did a cow-spotted pattern instead of something as simple as stripes or complex as coffee beans. While the coffee bean pattern is creative, the product is dairy-related. After thinking about this concept for the overall theme, I decided to apply it to my carton, hence the cow-spotted pattern. Other than that, I can’t really think of any reading or video that influenced my approach when constructing the carton.

1. What did you learn?

While engaging with this assignment, I was able to learn more about layer masks and different tools to combine images into one “collage”. Mainly, I focused on improving with the Pen Tool. So far, I really like how universal and flexible it is, compared to the Magnetic Marque Tool.

2. What was easy?

Similar to the last project, modifying the images wasn’t bad, which involved filters, layer masks, and other tools to create a unique looking image. These steps didn’t take a whole lot of time since as with the last project, I’ve had multiple times to use these instruments and experience the process of trial and error.

3. What was challenging?

The biggest challenge with this project was being able to arrange each image and your texture/background so every image could be seen and distinguishable from the others. The issue with this is that it is difficult to make the whole picture look nice, since not every image “complements” each other. This is where the tools and other blending methods came into play, but even then it was not easy. Despite this being the case, I feel like my finished product fulfilled my expectations, but I think my collage could be improved.

4. How could your submission be improved?

Regarding this project, having to mask out an object with the Pen Tool was a bit strange. The only defined “object” was a mountain range in one of my photos. I felt like while it was good practice using the Pen Tool and the concept of negative space, I felt like the object didn’t really belong in my collage. With that in mind, I understand that it is a good technique to have in mind. Also, my texture could probably be touched up or exposed a bit more, but at the same time, I like the fact that it is partially “hidden” in my collage. If I had time, I most likely would’ve added some text or animation to bring my collage to life.

5. How could I improve the assignment for the next class?

There isn’t much that could be done to improve this assignment. However, I feel like we should try another technique to coincide with the negative space concept. For instance, maybe have a few other methods for different objects that are not “complete” or tricky to define, such as a mountain or cloud, to make these objects more “apparent”.

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

In the future, I will keep in mind the idea of negative space and other techniques with the Pen Tool, as with most things in Photoshop or other software, there are tons of possibilities to create something that seemed beyond imaginable.

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

For this project, I used the same images that I did for Project 1. The inspiration is pretty much the same, but for this assignment, I was going for a “postcard” theme. Even though it’s a screensaver, I loved the idea of merging/blending images which made me thought of a postcard that contained three images and had a gradient between each one. I thought this was such a cool effect, which encourage me to replicate it, as seen in this project. This makes you feel like you’re looking at one complete image, but with fading in/out each individual image, you attain the effect that every image is different in one way or another. I like to think of it as each image “sifting” into the next. It’s pretty difficult to explain, as it’s something that can be seen only when you look at this “technique” in action.

When working on this project, I learned some basic skills regarding Adobe Photoshop, including image modification and optimization, plus I also had a brief look at Adobe’s open-source web companion “Brackets”. In Photoshop, I was able to tinker with brightness, saturation, color correction, and layer masks. Within Brackets, I fulfilled a few lines of code that would display my web-optimized images and thumbnails in a webpage format.

2. What was easy?

Having the ability to retouch my images was really fun and opened the door for creativity. Things like adjusting the vibrance or lighting of the image wasn’t that bad. Even cloning certain parts of the image to hide “imperfections” was pretty straightforward, since I have had experience with this in the past.

3. What was challenging?

The trickiest thing about this project was the image optimization. Unfortunately, due to my images being quite large, I had to sacrifice quality for size, which made some of my images look a bit “pixelated”. However, it isn’t that easy to notice and I think for the original files being larger than I had expected, they turned out pretty well. Also, I had some problems getting my web images to display on the website, but I quickly realized that my web images had the incorrect file name. Once I managed to rename them properly, everything worked, meaning clicking on each thumbnail would redirect to the corresponding image.

4. How could your submission be improved?

I feel that the lack in image quality, some being more noticeable than others, is something to take into consideration for the future. I tried using a separate image-compression program, but nothing seemed to work that well. Had I been able to decrease the file size of the raw, un-edited image, the web and thumbnail portions would’ve turned out way better.

5. How could I improve the assignment for the next class?

I feel like we learned a lot of skills while working through this assignment, however, I think it would be fun to explore Brackets a bit more and possibly change how the thumbnails were arranged. I’m not a huge fan of how one thumbnail is dead-center on the bottom row. Instead, the image should be shifted one to the left. This would make for a more uniform thumbnail display.

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

In future assignments or projects, I will make sure that I have more of an idea/grasp on image compression and how to properly optimize images to retain quality while maintaining a small file size.

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

The inspiration for this project relates back to my trips to two National Parks, Yellowstone and Yosemite. Although we’re supposed to take images with a high-end camera and in real-time, due to COVID-19, I thought that it was a neat and safe idea to gather some images that I had saved from my phone (iPhone XR). These images aren’t that old (2 years at most) and capture some nice landscapes of these two iconic, scenic locations. All of the primitive images looked normal to begin with, but as I enhanced them accordingly in Photoshop, each one resulted in a “cleaner” image. Think of it as applying a second, fresh coat of paint over the first, dried coat. The “second coat” fills the gaps and “holes” that existed in the previous one. Overall, I am satisfied with the outcome, as I feel that my altered images as a whole are dynamic and unique.