I ensure the media products I create are appealing and meet the needs of the target audience through testing. My designs follow industry guidelines to ensure they are user-friendly and persuasive. Additionally, I explore and incorporate new technologies like augmented reality, mixed reality, and the Internet of Things to keep my projects current and innovative.

I follow a structured process for every step of my project, guided by design models like Double Diamond, Design Thinking, or the DOT-framework, along with CMD methods. I use version control systems, such as Git, to manage and track different versions of my code, whether I’m working alone or in a team. Additionally, I make clear recommendations for using and maintaining the final concept and product, as well as suggestions for improvements, new features, or solutions to any problems.

I make validated and explained improvements on previous versions of my work based on feedback, new insights, or user tests. My creative process involves every step taken to create products, guided by design models like Double Diamond, Design Thinking, or the DOT-framework, along with CMD methods. I also establish logical relationships or linkages between successive iterations to ensure a coherent development process.

Both individually and in teams, I apply relevant methodological approaches used in the professional field to formulate project goals, involve stakeholders, conduct applied research, provide advice, make decisions, and deliver reports. Throughout this process, I remain mindful of relevant ethical, intercultural, and sustainable aspects.

I am aware of my own strengths and weaknesses, both in the field of ICT and in my personal development. I choose actions that align with my core values to promote my personal growth and develop my learning attitude.

When we had to make a logo for our studio, I already had an idea that I wanted to try and incorporate a triangle and rainbow colors. With the group we tried some sort of "mosaic" style. However, this didn't feel right for us, so we tried some other ideas. I went to try and include the name in the logo somehow, and at first I tried putting the name under the colorful logo. Wesley had an idea to instead of just having a name under the logo, to have one half of the logo with in the other half the name, but sideways. I made a rough sketch of this, and after confirming that this was indeed how Wesley meant it, I went to look for a font that went well with it. After trying a font and showing it to the rest of the group, I looked for a different font. Eventually I had a font I liked, manually sculpted it to fit nicely in a triangle shape mirrored to the colored half, and added a colorful "backdrop".

When we showed this to the teachers for feedback, I heard that some letters were shaped weirdly, and that it could be confusing to read. Furthermore, a prism splits white light in bright rainbow colors, where our logo contains more dimmed down colors. So in the last iteration, I modified the problematic letter, and changed the colored half to be more vibrant and to not have too much of one color in it. The full progress is also visible in the image below.

For the logo of Studio Prism, we wanted to try something with a triangle. As we first decided on the name "Prism", which in our case stands for "unity in diversity". This meant that we wanted to symbolize how different strengths (colors of a rainbow) would be combined in one strong team (white). So at first we were thinking about Pink Floyd kinda logos, where there's a triangle with beams of light coming in and going out. However, this didn't feel original, so we wanted to try some other things. In Creative Iterations you can see the different ideas we had.

Wesley had the idea to have one half of a triangle, and then have the name Prism sideways in the empty half. After asking fellow students what logo design they liked best, and thinking about what we liked best, we decided to go with the logo very similar to the one shown below. After some feedback from Jan and Josh, I finalized the logo. You can try toggling between light mode and dark mode to see how the light and dark versions of the logo look like.

For our studio, we also needed a brand book. This brand book would basically contain the identity and style of our "brand". Logo, fonts, colors and tone of voice are all included. Wesley made the brand book and asked us multiple times what he could improve. As I've never really heard of a brand book before, and I didn't feel like I contributed much to it. One thing I did do was provide the content for the logo page, like a template of how to use the logo in documents or pages. I also found the font that I used for in the logo, and this font has been incorporated in the brand book. Furthermore when we decided that we wanted to have a glassy look for our studio, I found out how to accomplish this. But I was less involved in making the brand book itself. Open in new tab

As an assignment, we had to make a timer based on JavaScript code. At first I really didn't like this assignment, because it involves JavaScript. And in all honesty, I'm not that good at it. But when I did some research online on how to let JavaScript "count" seconds, I felt confident that I could do it. Combining the seconds timer with the color changer, I still thought something was missing for me. I kinda wanted this to be "a usable tool" that also counts minutes. So I added a converter that basically converts seconds into minutes and seconds. I then went to look for cool fonts to go with this timer, as I'm not a big fan of the standard serif font. After getting feedback on how to maybe improve the random color picker, I changed that part as well, and also added an hour counter to it, as I kinda just wanted to have hours as well. Try Timer!

We had to make some sort of "Public Transportation app", based on three personas we got. This meant that the primary research was already done for us, so we could already go ahead making concepts, research how other public transport apps work and look like. Based on the features we saw, we made a concept. First we made it on a whiteboard, where we decided what the basic layout of the app would be like.

We tried using all the wants and needs from the personas. Then in Figma we wanted it to look a little bit better as a mid-fidelity prototype. We tested the Figma prototype with numerous people and based on the feedback we got we improved it. The improved prototype can be viewed with the link below. Open Figma Prototype

Another assignment we had was to make a page that gets data from an API and displays it in a page. This specific API contains all kinds of characters from Rick and Morty. Their names and image links area all in the API, so this way I made "cards" on the page with each name and image. I haven't implemented all the features like searching or filtering, and while I do still plan to do this, I haven't found the time to do it, as I was a bit more invested in other projects. I plan to first add some sort of "if" to it where it first searches for the "Pickle Rick" and then display only that one. When I have that working, I can try adding some sort of search field that lets you enter a search word and that it then goes through the JSON to find that specific one. Rick and Morty cards

An assignment I was really looking forward to was making a Progressive Web App (PWA). This way you can "install" a website as if it could be a native app. When you then launch this "app", it will open in a separate window. PWA's also have more possibilities when it comes to permissions. For instance camera permissions, or the permission to send notifications. The first workshop to make a PWA was mainly getting the right files in the right place. And as there are not really different ways to do this, these steps were mostly copy-paste from the CodePen from Maikel. However, instead of trying to make a sample site he prepared into a PWA, I immediately wanted to try it our on my portfolio website. At first I had some trouble getting the manifest active, but that was because I didn't link it properly in the html. At first, the teacher thought it was because I had my manifest file in a subfolder, and that this would never work. But after proper linking in the index.html, everything worked, much to the surprise of the teacher.

A couple days later, we would learn how to send notifications. The way these notifications basically work is that when the website loads, the browser knows that the website has notification options, and asks the user if they allow this. Any website can ask you to receive notifications when you load the page, except on iOS. On iOS, a user first has to add the website as PWA, and then a user input (like clicking a button) is needed to prompt the user if they want to allow notifications. So besides implementing the standard prompt into my portfolio website, I also had to implement a button which would trigger the same script, just for it to work on an iOS PWA. I eventually had it working well, so that if you haven't given permission yet, you can click the little bell icon in the top right corner, to prompt the user with a permission request again.

But now, something that went a little bit less smooth. The actual notification. We had to generate a vapid key, and copy-paste it in a couple places, then run a JS script to send a notification. This quickly worked on my laptop. However, even when I gave permission to my iOS PWA, it didn't display any kind of message. So I first started looking if there were some Apple-like quirks that limit or change the way notifications can be sent. I couldn't find anything specific about this, as notifications should just be possible since iOS 16.4. I went back to the script that would send the message out, and saw that it said "-- Message NOT sent to https://web.push.apple.com/(...)" in the terminal, without giving me a reason. I checked the code itself and saw that there was a ".catch(error => { console.log(`-- Message NOT sent to (...)`);". I then thought, why not include the error message it catches anyway in the message it gives in the terminal? So I added a little line where it also includes the error message, and after running the script again, I knew that the reason was "WebPushError: Received unexpected response code". I copy-pasted this in Google, included iOS in the search result, and this was the first result that popped up. I then found out that the information from the vapid key is formatted in a way that Apple's notification service doesn't recognize. Where the directly copy-pasted line was "mailto: <jannes2001@outlook.com>", it needed to be formatted like "mailto:jannes2001@outlook.com", without brackets or spaces. After changing this one line, everything worked and my iPhone also got notifications from the PWA. I also edited the service worker file to not check if the notification has an empty title or message, as I also wanted to try what happened when I don't enter anything in the send script. Then it will just display a generic empty notification, depending on the device.