arrow Go Home, friend!

Iterative
Design

"You explore and use professional design tools and you iteratively design visual works."

Description:

At the beginning of the semester for the branding project, there were two potential clients. In the beginning, it seemed that we would be working for a different client than the one we ended up with. In preparation for that, I created a moodboard, and later a stylescape for this potential client with the purpose of ensuring we were aligned with the client’s vision and visual style. In the end, we did not end up working further with this client, however, as this was my first time creating moodboards and stylescapes, knowledge learned here was valuable.

Feelings:

In the process of creating these, there was a lot of excitement. The client really resonated with me, and I looked forward to working with her. I also felt that my skills with Figma, and the general creation of moodboards/stylescapes was improving as time continued. Of course, at the end, I was disappointed to find that we would not be working with this client and instead had to change course to a different client, that I frankly did not feel nearly as inspired by, however this still gave experience as I started to create stylescapes for the upcoming client.

Evaluation:

In my first moodboard, I think I got a great start in compiling images and tying together themes that the client was going for, and this was validated by feedback, that having general overarching themes was a good start, as opposed to selecting images at random. However, there were improvements to be made.
The second moodboard looks much more like, well, a moodboard. I removed all blank space, which improved cohesion, and refrained from choosing a colour palette, as this would come at a later stage. Images with unnecessary backgrounds, at this time I simply removed, as I was unsure what tools to use to easily remove the backgrounds.
From here, I took the images I compiled for the moodboards and developed them further into a stylescape. Here is where I incorporated a colour palette, finally learned to remove backgrounds from images, and utilized different fonts.
After this point, we were informed that we would no longer be working with this client, otherwise I would have continued by bringing my own art into this design, homed in on the themes of this client, and eventually built a brand guide.

Reflection:

I believe the initial disappointment of not taking this further, and working with a different client in the end, started that project off on the wrong foot. Eventually, that too also ended well with designs the client was happy with. I really enjoyed working on these moodboards and stylescapes. Though sourcing images seemed to be a bit tricky sometimes through Pinterest.

screenshot the moodboards for the potential client

Action Plan/Feedforward:

Going forward, I have a better grasp between the difference of a moodboard and a stylescape, which will make creating either one of them an easier task. I have learned that Pinterest, with the introduction of AI generated images, and poor moderation, has become quite poor to use as of late, and exploring other image gathering platforms, such as Unsplash, should make the process of sourcing images, even if it means using multiple platforms, a bit faster and easier. Practice with Photoshop will also help in making the process faster, and creating better designs, like working with different textures.

Next Learning Outcome

Description:

For our actual client for this project, OSFAST, one of the deliverables asked of us was for a logo for his brand. For this, each group member brainstormed their ideas, trying to come up with something that fit his brand, and matched his wishes of wanting a logo that seemed emblematic of his business. The image above is a sheet of my contributions to this part of the project, with the digitized one, being my latest iteration.

Feelings:

As you can see by the logos above, while each logo is slightly different, they each look very similar to one another. This was largely in part to feeling greatly uninspired by the client. Eventually I homed in on one logo I found to be the most appealing, even digitizing it with the art software I am most comfortable with, Ibis Paint X. but this led to me not coming up with anything more original after this point.

Evaluation:

The iterations look a little too close to each other, particularly at the beginning. The ideas I had were not bad, just too little of them. My group ended up not picking my logo in the end, and I do think that is for the best, as the logo we did end up picking did fit the brand much more effectively. During a feedback session, it was pointed out that, from afar, the logo I was focusing on resembled an @ symbol, which would be detrimental, as it could lead to his business being misinterpreted as an email company by his potential customers at first glance. After this feedback, instead of changing course as I should have, I continued with this idea, hoping that if I kept tweaking the shapes, it would finally work and remove the possible misconception, when I ought to have tried something new from this point.

Reflection:

I believe for effective logo design, or any design for that matter, a brainstorm session needs to start off broad, throwing out multiple, wild ideas that are quickly made, and easy to toss aside if it is not fitting for the brand. This way, with the broader the ideas are, the more ideas and pieces there are to choose from when it comes time to narrow it down into a more fitting design.

image of the logos tried

Action Plan/Feedforward:

Going forward, I will research more logos, and what makes them work. Specifically for similar products/services with competitor analysis. Remembering the Gestalt principles when narrowing down design choices would also help to create a more cohesive design, whereas without them, my designs resemble more of just a doodle. Getting more practice with software like photoshop and professional drawing software like Illustrator or refining my skills in Ibis Paint X could help with cleaning up my designs during later phases as well, which would give them more merit as well.

Next Learning Outcome

Description:

For the BELCO project, I used Figma to create a few early iterations of the homepage, and the assets for the footer and header. After our first sprint and presentation with the client, I also fully designed and iterated upon the institutions page. During the later parts of the design for Institutions page (as well as the rest of the design, concerning the project at large), we conducted a user test, where it was determined that there were many consistency errors, which led to more iterations for this to finally be rectified.

Feelings:

It was nice having a base to work from, with an established logo, font, and colour palette. I found designing for them a bit easy, especially once the groundwork was laid, after an early iteration for the homepage was agreed upon. The more frustrating part was user testing to validate certain design choices and making sure everything was consistent across all the pages my group designed.

Evaluation:

My designs for the institutions page went through a lot of versions and iterations to create a more cohesive design, consistent with the rest of the web design in the end. For example, I had designed a hero on the Institutions page and had a background colour behind the text. I had made multiple iterations at this point that included it, but when comparing with the rest of the website, it was pointed out to me that this was an obvious deviation from the rest of the designed pages, leading me to pivot away from that layout.
I wish I had taken better note about each iteration, as I had to go back into my personal Figma and retroactively do so in better detail. Luckily this project was still fresh in my mind at the time, so I don’t believe I missed anything, but the risk of doing so was there.

Reflection:

The design for the institutions page matches well with the functionality, and brand identity BELCO wants to portray. I wish to find a way to make user testing a more enjoyable experience for myself, as it is a necessary step to effective design. Utilizing a design guide from the beginning also would have made consistency easier to manage.

Link to group Figma w/ interactivity
Link to Personal Figma with only my iterations
screenshot of my reflection journal

Action Plan/Feedforward:

Working with Figma more could help with creating quality designs, as well as help with my speed of iterating. I would like to utilize more textures in my designs when it makes sense to do to, and for that I have found an interesting source to research called ResourceBoy. I have learned that it is essential to user test more regularly.

Next Learning Outcome

Description:

Once the Development section of the BELCO project began, there was a clarification that the stakeholders wanted to separate content that was meant for their partners and meant for students into different websites. My group pivoted to BELCO Education for students, so pieces of the website’s original design needed to be removed, and the rest needed editing to still look cohesive. After developing this updated design, a user test was conducted to test functionality, as well as test if these updates impacted the overall design in any way.

Feelings:

This shift initially came with some frustration, as it felt like this information would have been incredibly helpful during the design half of the BELCO project and now became an extra task during the development phase. Though this shift, from a user’s perspective, does make sense to keep things from being overly complicated.

Evaluation:

Most of what needed to change in the design was removing content and parts of the design that no longer served purpose after this pivot. The biggest challenge then was to figure out what to remove, and how to keep the rest of the design seamless. Technically, this in the end meant less coding. However, as someone not fond of abrupt change, the mental load of having to readjust to this, did affect my mood at the beginning of this project. The Specific changes that applied to me and the page I built, was the links that would be included changes in the navigation bar/footer, and a section on the homepage that was completely removed. I then needed to figure out how to mesh the sections that were originally divided by this cut content as seamlessly as possible. My biggest concern, being that there would be too much white space, and that I would have to do extensive tweaking of the margins. Upon a user test of the whole website, this is what I was looking out for the most. The user test did yield suggestions for minute changes that I was also able to fix, like adding more images into the slideshow, and fixing a known bug, but the margins weren’t brought up once, nor did the user feel as though something was missing, so I felt confident that this design was complete.

Reflection:

I feel as though I may have internally overreacted over this small change at the beginning, and that it’s important for me to learn to remain flexible, especially in the constantly shifting world of design. Our stakeholders for this project, while uninitiated in the world of ICT and Media (hence why they came to us in the first place), were very friendly, and certainly will not be my most difficult clients.

Screen recording of user test
screenshots comparing a part of the original design, vs what was developed

Action Plan/Feedforward:

In future projects, I aim to better adapt to unexpected changes, when they inevitably come my way, and continue with regular user testing, especially when I am unsure about the effectiveness of the design.

Next Learning Outcome

Description:

During the DEV part of the BELCO project, our class had a workshop about structural hierarchy with HTML and CSS. In doing so, my group decided to look at each other’s pages, along with their code. In doing so, we noticed glaring inconsistencies between pages. From uneven margins, to noting that one group member was styling their code with pixels, whereas I and the other group member was using REM. This led to our group banding together and nitpicking the code, tweaking things until the pages finally had a consistent, cohesive design.

Feelings:

Fixing inconsistencies is, to me, the most boring and frustrating part of coding in a collaborative project. While coding, I was under the assumption that everyone knew to use REM and % while coding, so I was quite shocked to see that one of my groupmates was still using pixels. This led to the tedious task of going through and converting everything over, which all three of us sat behind the same computer to do so, to make sure nothing was missed, and that the conversions were correct.

Evaluation:

While this was a frustrating moment within our group, this group had great communication (minus this hiccup), that allowed us to stay on track and fix this with relative ease, and zero merge conflicts. To aid in consistency as well, class names were created for each type of text (EX: headers, paragraphs) and placed into a shared CSS that allowed us to make sure sizing and font with was consistent throughout.

Reflection:

In our shared Figma, we created a style guide, where we listed different styling assets. By default, these are measured in pixels, which is where I believe the confusion began. On top of this, this style guide went under-utilized due to these missing conversions, which made ensuring consistency even harder. Ideally, I would have liked to write the REM conversion from the pixels, so that the style guide would have been less confusion, and more likely to have been used more.

Screen recording of user test
screenshots comparing a part of the original design, vs what was developed

Action Plan/Feedforward:

As stated above, proper use of a style guide would have helped to avoid this issue entirely. I now know the importance of using one for collaborative projects in the future. Also, it was wrong of me to simply assume that each of my group mates coded the same way as I do, using the same units as I do. Going forward I will be more proactive in checking in with my groupmates, asking to see what they have worked on, and comparing it with my own, to catch any errors like this before they get the chance to escalate.

Next Learning Outcome

Description:

For the design of my portfolio, I have worked on multiple versions, and a few iterations, trying to home in the aesthetic I am shooting for, while keeping in mind the content I would need to fill it with. I have made it a goal to fill up my portfolio with as much art and personality as I can manage, to have it truly feel like my portfolio.

Feelings:

I feel incredibly inspired by the design, coming up with ideas for it regularly. However, I have managed to make it a burden unfortunately, struggling to balance the ideas I have, with the time I must spend on it.

Evaluation:

The design is ambitious, perhaps too ambitious for the time I have. I have many ideas that require a lot of time, for example, the many pieces of art that I want to create and fill each page with. If it weren’t for lack of time, this would be great! But I am someone that can unfortunately only work at a slow pace, and struggles with focus and executive dysfunction, so a more manageable design would have been better for this semester. It is likely that I will not code the most current iteration of my design due to this, but I will still attempt to code a design that follows the visual theme, and continue to expand upon the design, perhaps to be utilized properly in a later semester.

Reflection:

I am, personally, not someone that does well with multitasking, and unfortunately, I have found that I have dedicated almost all my school hours, and many of my home hours as well, to group projects. I started keeping a Trello for documentation purposes for my portfolio, and I believe if I had started it sooner, this would have helped to clear some mental load and given me more time to work on my designs as I would have liked.

comparison of my portfolio before and after feedback

Action Plan/Feedforward:

Handling the scope of this portfolio, alongside finishing projects, is what is important here. Going forward, I will make MoSCoWs, and test earlier in my processes to ensure I get functionality down first and foremost, and quality design after.

Next Learning Outcome

Description:

For my Project X, I took on the challenge of creating a V-tuber (Virtual Youtuber) model. This includes creating a character design in drawing software (for me, this was Ibis Paint X) and rigging it for face tracking utilizing the software Live2D. Before creating this model, I decided to create an early sketch of the design, that I created a survey to test its effectiveness. I took some of the feedback into the creation of the design, while some I discarded due to it either not being constructive, or unfortunately due to the need to manage the scope of this very short project.
Some of this helpful feedback was in reference to making the silhouette more interesting with some bigger jewellery, as well as making some of the colours pop out more, which led to me using more saturated colours.
An example of feedback that I discarded was someone suggested that I remove the cross necklace on my character and replace it with a satanic symbol... this is advice I don’t plan on taking.

Feelings:

I feel as though a lot of the feedback that I utilized did lead to a better character design in the end. Adding more jewellery/ making existing pieces bigger aided in making the design more visually interesting and helped to make a better silhouette.
I also know that I tend to get overly ambitious, take on too large of a project, which was a concern for me, as this project is quite intensive. I feel proud that I created MoSCoW and have been sticking to it, knowing what to prioritize (facial expression rigging) and what to leave behind (detailed shading and highlights what would improve design, but not add to functionality.)

Evaluation:

With the time I have for this project, I created a design that is, if not as detailed as I would have liked, works perfectly for a proof of concept, and shows that I had meaningful intentions about effective character design.
I received feedback upon the design from Chris, my project coach, that will help me to further iterate on this design as I continue to learn and go further with character designing. For example, though the character design is loosely based off me, some concessions could be made in the name of making a more readable and appealing design, like making more colourful eyes. I should also ensure that the character design works well regardless of clothing, and that the clothing shouldn’t detract from the character.

Reflection:

I am completely new to this animation software, as well as drawing in the specific way needed for creating a model like this (each small section has its own layer). For these reasons, I feel like I have done (and will continue to do) all I could with the time constraints to make the best model, and adequate rigging. If I could go back and do anything different, it only would have been pre-emptively gathering tutorials/resources I could use, instead of having to search for them during the project.

Sketch vs final model

Action Plan/Feedforward:

I have found that I really love this software and want to keep iterating on this design. After this semester ends, I will continue adding physics to different parts of the model that I couldn’t get to in time, just to keep trying out the Live2D software while I still have the free trial licence. After this, I will also work on the art itself, studying character design to better myself as an artist, which are skills that I will take into my Media Creation semester.

Next Learning Outcome