UX Task
As a portfolio, I want the reader to get on the first second an image of who I am, and what I capable to do; for there is a need to convey all of the information in a not convoluted and simple way. I wanted to have my own name as the focus of the landing page, and a description just below it to show what I am currently doing and what I have done previously. The other elements that will be shown, are a description of who I am currently, and also the social media where I can be found in.
For my website theme and layout I wanted to try making something that used as few colours as possible, had great contrast to show all of the information without anything else on the way, and had a simple layout which used as few mouse clicks as possible. I achieved that by dividing the website into three parts: The first one being the header, which is where my name, description and where I can be found are, the second one, just below the header for convenience and ease of navigability, is where all of the projects are, organised by modules and also by personal projects that I work outside of the university. Since I don’t want to show a potential employer too many types of work, I limited myself to just digital art, which is something I am passionate about, and maybe worthy of pursuing professionally.
My main audience for the website are mainly the teachers who will be doing an assessment of what I achieved; my peers to show my capabilities; family so they know what I am currently doing in the university; and potential employers, so they can give me professional opportunities, and even by having such a basic portfolio I still intend to work on it after its marked, so I can show the best of me to them.
For my initial thought process of how I wanted my web page to look like, I decided to find some areas where the attention of the viewer was caught immediately. Road signs was an obvious one because of how simple it was; next was finding high contrast between black and yellow in other medias. Cyberpunk 2077 was the first thing to come to mind, it was a game that launched not too long ago, and they used a black and yellow colour scheme a lot. The rest of the ideas were mainly due to the contrast between the two colours and the layout that I wanted for my portfolio.
When entering the website there are only two things that the user can do, click on one of the modules on the navigation menu to check my work, or scroll down and contact me. I have also included the contact form on all of the assignment pages so that only after the viewer looks at my work he may contact me, that’s why the about me page doesn’t have the form.
For the wireframe I used Adobe XD to make my ideas come to life based on the mood board. I didn’t want to have too much clutter, so I used the least amount of space that I could, and simplified the spaces where information was going to be included. While borders on websites offer an elegant design aesthetic, they also provide a needed sense of space, and help to establish boundaries, which was something that I rarely see on websites. Movement around the portfolio is made only by scrolling up and down, and by clicking on the menu items just below the initial information about me. By doing the navigation like this, I minimize the amount of clicks by the user to the maximum. The bottom three images were different variants of a contact form. The first one was going to be a redirect to the emailing system of the user, but then I thought that it was more work for the person to contact me, because they had to leave the portfolio to send an email. The next idea was having the contact form embedded on the page, so I made a form that was simple and yet it still followed the blocky type of design. I scrapped that idea and after thinking a little how to incorporate it I came up with the final design of using a yellow background and changing the label to a text that resembled the footer, but ultimately, I couldn’t incorporate it exactly as I wanted due to limitations of the parent theme.
Reflective Report
Doing something of this size was already familiar to me from past experiences, but I had never had full control of every aspect of a webpage, and it was both fulfilling and enjoyable working in all parts of it.
It was my first time working with Adobe products apart from Photoshop for design projects. Working on this project has given me a lot of experience, and a solid foundation for future assignments, and due to not having any familiarity with the programs, I had to research a lot about each of them for the tasks, and by doing so, I developed a basic understand of Adobe Illustrator, InDesign, and Xd, that will allow me to work on future projects with much more ease.
The CARP task was the assignment where I had the most fun, because of how free we were in coming up with our own flyer. The original flyer that was given to us only gave the base information that we needed, and from there we worked with full freedom on developing it. But the best aspect of it was having the possibility of incorporating digital art into it, which is something I really like doing. I also had a lot of feedback from different people, and it was that what helped me achieve a final result so different from the original iterations, because they showed me another type of perspective.
The Typography task was something that I also liked doing, due to how experimental we could be with each system. Along the weeks I made a lot of changes to each design so they would reflect better each system. I had some trouble coming with something I was proud of but in the end, I think I have managed to achieve that objective.
Coding in general was something that I was already super used to doing, so it was super simple to go through the guide and develop the hobbit homes website.
For the UX task, which was the biggest task from the assignment, was also the most enjoyable and frustrating from all of them. It was frustrating because I have never worked with a WordPress website before so child themes, widgets, plugins were all foreign to me, but after a lot of try and error, I managed to almost fully develop what I made as a concept in Adobe XD. The only part that I didn’t manage to fully recreate was the contact form due to the structure of the parent theme, and if I wanted to change it, I needed to restructure the website internally, and due to having WordPress on the code I was still unsure if I was able to do it. I also used a Google API to send the email and it was fun incorporating it into my portfolio, even if I had already worked with APIs in the past. Having a mood board before hand was super useful so I would get a feeling of what energy I wanted to convey.
All in all, I am proud of what I achieved for a first time of working in design, and I’m sure that for future endeavours I will be properly prepared to face them with the knowledge I gained from this assignment.