DMS1 | A2 | DMS1 Blog

A2 | Interaction

Week 4, Session 1 | 09.08.21

To start off with, I'm gonna be extremely honest with this whole process, about time management, about what I have done or haven't done and just see how that affects my final outcome. I think at the end of the day, this isn't about getting the best mark or a distinction, it's about sitting down and knowing what I need to prioritize and what I actually need to do to prepare me for not only for future assignments but working in the industry. What i've realized about this course, or design in particular is that you can't rush it, your time spent and amount of effort is reflected in the final product.

*Note from 18.08.21

First session on digital illustration, some ideas already popping up with the mental health suite icons, the main reason why I've chosen to do this course is because of the correlation between digital media and mental health.

I want to be able to incorporate "warm, welcoming, "feels like you're playing breath of the wild for the first time", Ghibli inspired style icons. That's the theme I want to convey. Also have been playing a lot of this game called Genshin Impact, being able to roam around freely in that sort of environment reminds me of what it's like to be outside lol.

Black Box Activity: shown on the right. We then did a reading on the black box, I'd say it gave me a realization of how dynamic a black box can be depending on how we manipulate it in certain angles, sizes, arrays. All of these factors brings about a different emotion, just from squares. If I had the chance to do this activity again, I would definitely use more white space to my advantage.

Week 4, Session 2 | 12.08.21

Getting down the basics of Illustrator, practicing the basics of the pen tool. Seemed pretty daunting at first to use.

"Doing your future self a favour"

We discussed time management, delegating tasks to its appropriate priority level from low to high. I think this is really useful if you are consistent enough to keep going at the tasks. Trying to get out of the mindset of taking a long break after an assignment is due, or mis-managing my time and not allocating enough time to certain assignments when there are external factors at play too. e.g other classes or work life.

Note from when I almost switched themes again -

Learning from A1, that it is generally good practice to build upon your initial idea, I was very close to switching to a "tech" theme because I was confused about what the brief was asking of us, I thought that I had to choose our own theme (not from the list) then go through and create an icon for each of those themes relating to our chosen theme, this actually had me stumped for a week and a bit because it was pretty challenging trying to come up with a sea life icon relating to mental health. I had this all clarified and realigned back to my "mental health" theme and kept going at it.

Week 5, Session 1 | 16.08.21

Started a colour palette/chucking in ideas on the screen with screenshots of inspirations and trying to come up with a unified theme to tie into mental health.

Notes from class I think is worth mentioning if I decide to read this in the future - Colour is subjective, it's individual to one person, rely on the pallets, what look good next to each other. You absorb yourself in different arts and designs, wherever you look, you start building up your own colour pallet that's looks good and unique to yourself.

Unified theme class: Had to create 3 designs that showed this idea. Biaxial and radial symmetry. Were we supposed to incorporate this in our designs?

^ 2nd week me up there feeling a little too relaxed & lost, definitely know for future projects that the ball should be rolling at the start of week 2 of an assignment. Also clarify things along the way would seem like it helps.

Week 5, Session 2 | 19.08.21

Started to come up with ideas on text, describing the icon and what I will add to them (see right). Only some of these ideas made it to the end, most changed like 8. and 9. One changed to a messaging icon and the other a resting icon.

The thumbnail sketches were extremely helpful in choosing the designs to go ahead on illustrator, I already had some ideas for icons that I've already started on the program.

"All design choices should be justified"

Bunch of specific tutorials that helped me with some of the icons that made it to the final product:

How I designed the sun icon -

https://www.youtube.com/watch?v=P5qskSDgC-Q

What helped with the leaf icon -

https://www.youtube.com/watch?v=Zl60s-2tG4k&ab_channel=Rescan

What helped with the post-it notes on the journal icon -

https://www.youtube.com/watch?v=I1uaXfkzd3g&ab_channel=IlliTutorials

Week 6, Session 1 | 23.08.21

Audiovisual class: downloaded audacity for sound effects. Started searching for audio files, this process wasn't too hard, I knew what aesthetic I wanted to go for, which was tranquil and peaceful sounds, so that made it pretty easy to choose. Some audio files I downloaded initially were scrapped. For example, I changed my toast icon's audio from tea getting poured into a mug, to a piece of toast getting bit into. That basically inspired the transition icon, a piece of toast getting bit into.

Wednesday 25.09.21, 3:39am blog time: icon finishing cram sesh, just completed and exported these guys (all 9 icons) from Illustrator and getting ready for 3.40am html sesh. Trying to add in all of the sound and get that working for all the icons.

^ Above looks like me mis-managing my time and trying to catch up with work during the last week of submission. Going ahead, I will be going in with the mindset of completing tasks because I don't want to deal with 4am mornings anymore.

Week 6, Session 2 | 26.08.21

Interactive Icon Class: fixing up code, had a few unresolved issues in the code from the other session (audio wasn't playing back when clicking on icons). A classmate had picked up on a missing slash or something. Classic.

I chose to make my icons interactive by shifting or adding certain elements to make the icons feel like they're changing when they are being clicked on.

Asked Liam in class about any suggestions on individually changing the position of icons and it was suggested that I mess around with paddings.

^ The only teacher feedback I got for this assignment, probably should start emailing stuff?

I went on a whole journey, watching tutorials, adding in all these grid styles and trying to change the grid paddings when I could've just used .ex1 to apply to a single icon and specify its padding.

https://www.w3schools.com/cssref/pr_padding-left.asp - This helped out a lot too

Week 6, Final Day | 27.08.21

Really proud with the outcome of the icons, I stuck to my initial idea and built upon them, through sketches, inspirations & re-iterations. Going ahead for future projects is to manage time better & getting feedback. Getting tasks done was something I took from last assignment and applied, now it's about managing that time more effectively throughout that assignment timeline.

Final edit notes:

- Trying to put text elements into the web page

- Put in a little intro paragraph for the icons

- Added in a retractable side bar that I took from w3schools (I only just realized that this was not meant to be done), goodbye fancy features ):

Future habits/reflections:

- Time management needs to be sorted more efficiently, I need to work on consistently putting in effort each week, not just the last week.

- Email teacher? for feedback?

- Take 10min after class, open up the blog and type whatever comes to mind, always polish up homework tasks if needed as well.

- Cleaner code!!!

Applied habits from previous assignment:

- Not overthinking designs/concepts

- Go through as many iterations as possible

- Getting tasks done

Things I gained:

- A lot of basic Illustrator and HTML skills, I do plan on applying these skills on future projects, hopefully in a professional setting one day or personal projects if anything.

Estimated time spent on this assignment:

Icon design: 27 hrs

Coding: 10+ hrs

Blog: 10+ hrs??

Total: approx 47 to 50+ hrs

^ This is all approximate, I think I will be paying more attention to time spent doing tasks so I can better organize my time and allocate hours to certain tasks.

Starting a moodboard for A2. I think this time around, you can see the correlation between A2's moodboard and final product compared to A1's moodboard.

This was a pretty cool game, 9/10. -1 cause it made me realize how bad I am at the pen tool

Me trying to sort my life out, trying to use google calendars for the first time.

Lists are alright, they're pretty good for stress management too, would incorporate this early on in the assignment weeks this time around. The list on the left are from the last week of the assignment timeline.

Starting up an illustrator file with the general theme/colours & inspiration screenshots

Okay so basically, saying this was rushed is an understatement, and yes, anyone in a km radius can tell that this was done in a matter of seconds. Just gotta learn from this, apply that for next assignment. New habit: Start allocating 10min after class to read over and at least start homework tasks.

The first icon that came about, I spent quite a lot of time find the right colours for this one, but once I finished this one, I knew what the aesthetic/unified theme was after this point

Might be hard to see, but the ones with the ticks are the ones that I went through with for the designs. Most of them I was was pretty set from initial sketch probably because I had them in mind already.

Some basic audio editing, cutting the time down, fading in and out, and reducing the sound.

Some audio files didn't want to be edited, but they kind of worked anyway so you can probably tell that one or two sounds are a bit louder.

Progress shot, this week was when the ball really started to roll. The time spent on these icons were allocated a bit late in the timeline, definitely finishing these maybe last week would've given me some actual sleep time in week 6.

Process of how I made the icons "animated". Just took a copy of the icon, made sure they were the same size, trying not to extend any elements out of its box, removed, added or shifted certain elements in the icon.

Spent a LOT of time trying to figure out how to space out these icons just because my icons weren't exactly the same size. This was a challenge but I eventually got to a somewhat of a solution using .ex1 codes to change the padding.

Removed this right before deadline, then the uploads started lagging out and thought my icons were all messed up, oh boy.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

These icons reflect a range of activities that are essential to your mental wellbeing. This is only a small list of the many things that you can do in your day to remind yourself that activities like getting enough sleep, fresh air, good food, journaling & social interaction can positively impact your mindset throughout your day.

http://digitalmedia.rmit.edu.au/~s3544724/portfolio/

(I'm not sure why the racquet icon only shows half, but I hope it's because it's laggy during submission day, if it doesn't show the whole icon please refer to the zip!)