Flow 1.1 - "Drøm dit Portfolio" Dream your Portfolio

The first flow was about imagining our first portfolio and working within Adobe XD for the first time. While I did create a working prototype, my actual portfolio didn't come to look anything like it. Unfortunately, I completed the assignment without any prototype interactivity. This was the main feedback as well, which is why I've gone ahead and made functional buttons and added a quick way to go back to the homepage.

Changes to this flow are very minimal as it's obsolete.

Old Version

Improved Version

Original Assignment

Changelog:

• Added a universal button to go back to home.
• The prototype is now fully interactive.
• Minor design changes.

Flow 1.2 - "Byg dit Portfolio" Build your Portfilio

The original portfolio was similar in design but was programmed very differently. While the old layout was created using flexbox, the new layout is created using the relatively new grid system. The amount of content shown at a time has been increased and browsing the actual portfolio has been made a lot easier.

After a reasonably comprehensive user test it was evident that my old portfolio didn't include enough content, was too bland in design, didn't work on all devices and screen sizes and content, material and articles was challenging to read due to the small frame size of the website. I've tried to tackle all these issues.

Original Assignment

Changelog:

• The code has been re-written from scratch.
• The website is now entirely responsive.
• Increased the size of the window in which content is displayed.
• Colours and spacings are now perfectly consistent across the entire site.
• Added several animations.
• And much much more.

Flow 1.3 - "Byg en App" Build an App

Unfortunately, I wasn't able to finish this assignment in time, so instead of altering my the last assignment, I have instead decided to create a whole new app and new design from scratch. The application is built for a relatively new physical store concept where customers can rent physical shelf space and sell their second-hand items. This application helps customers with booking, checking what items have been sold and how much money they've made. It's also possible to withdraw money directly from the application.

Use the following link to check out the Adobe XD Prototype.

New Version

Original Assignment

Flow 1.4 - "Verdenmålskampagne" World Campaign

The landing page we had worked on for the world campaign had already gone from prototype to an actual website. The site did, however, not work very well on smaller devices and wasn't build to be very responsive in general. Despite the responsiveness not being optimal, the website worked pretty well and got limited feedback. The main criticism was the fact that the header on top of the splash image could be challenging to read in certain situations.

The new landing page should be a lot more responsive, and the readability of the text should be a lot better as well. These changes are somewhat scanty but can have a huge impact on the site.

Old Version

Improved Version

Original Assignment

Changelog:

• Removed unused code.
• The website is now entirely responsive.
• The header is now more visible.

While the following videos might seem random or out of place of the portfolio, I took to chance to practise my filmmaking and video editing capabilities on something more concrete. I have recorded and edited a series of videos that are to be used in a family quiz for my grandmothers 90th birthday. Together, the videos have required a lot of careful planning, research and editing. While you might be missing some context, I think the videos alone is an excellent showcase of what I've learned over the first semester on CPH Business.

According to the assignment, there weren't any direct requirements for the video segment, so I'm very hopeful this will suffice.

Source Code

The portfolio has been created from scratch using Pug for the HTML, Sass for the CSS and some Javascript. The reason behind using these pre-processors is the intuitiveness and feature-rich arsenal that they provide. The website has been coded using multiple sub-pages for the sake of organisation. These pages have then been compiled into one HTML file and one CSS file. To optimise the website even further, the code has been so-called "minified" upon compilation which makes the data faster to read for the browser, but more challenging to read for humans - to see the actual source code before compilation, go to my GitHub page below.

GitHub - Source Code

Features, Design & Compatibility

The website is using the newest HTML5 and CSS3 - this means that I have been using features such a flexbox, the relatively new grid system, advanced selectors, animations and transitions, variables, media queries and much more to create a dynamic and exciting website.

The site has been created with the three most prominent browsers in mind, namely Google Chrome, Mozilla Firefox and Microsoft Edge. Due to the lack of any Apple devices, I was unable to test and enhance the website for the Apple Safari browser.

User Tests

After reaching out to a lot of people online and doing a reasonably comprehensive user test it was evident that my old portfolio didn't include enough content, was too bland in design, didn't work on all devices and screen sizes and content, material and articles was challenging to read due to the small frame size of the website. I've tried to tackle all these issues.

To recap the exact feedback:

• Too little content.
• Too static - lack of animations.
• Frustrating to browse portfolio entries.
• Colourless and boring.
• Don't work great on smaller devices.
• Inconsistent design choices.

The people asked to try the website has been extremely varied in terms of design knowledge.

Typography

I have settled on a modern sans serif font as this type of typography is simple, sensible, straightforward and easy to read. The exact font used across the entire website is called "Zeitung Micro Pro" - an extremely clean and minimalistic font that suits the elegant and professional feel of the website.

Zeitung Micro Pro

Colours

Green

The original idea and colour scheme for the website was green - a colour with a vast amount of emotions. The most important ones for me was growth, dependability, safety, stability and reliability. It's also a colour that expresses kindness and a subtle hint to eco-friendlyness. Even though the website has nothing to do with nature, I still thought it was a very dominant colour in this day and age.

Orange

However, I wanted something a little more fun and creative. While green had a lot of the characteristics that I believed in, it lacked in other places. I ended up settling on orange as this colour seems to describe me and the way I design perfectly. Orange is optimistic, independent, creative and fun. It's a great way to draw attention and to communicate something exciting is happening.

Black

Furthermore, the black background across the entire site can express power, control and authority. These are not necessarily emotions that I want to convey when looking at the site. I, therefore, decided to add a subtle design to the background, making it ever so slightly more playful to look at. While I think the emotions mentioned above have been somewhat reduced this way, I don't think it loses any of its elegance which black also stands for.

Flow 1 -"Drøm dit Portfolio" Dream your Portfolio

The first flow of the first semester was all about hands-on and getting to experience programs like Adobe Photoshop and Adobe XD. Photo manipulating and the use of various tools in Adobe Photoshop was the key in this flow. To end it all off, a prototype of your "dream" portfolio had to be constructed to be used in the future flow.

A lot of hands-on photo editing and manipulating was taught in class as well as a guide on how to use Adobe XD - a program that is used to bring your imagination to life by creating design prototypes before starting your programming journey.

Flow 2 -"Byg dit Portfolio" Build your Portfolio

In the second flow, we had to take the prototype and create something functional with it. The following qualifications were to be acquired during this flow:

• Technical knowledge about the internet.
• Fundamental HTML and CSS.
• Familiar with one or more IDE's.
• Optimising images and graphics for the web.
• Familiar with layout principles.
• Version control via GitHub.
• Logical naming and structuring of files and data.
• Web project structure.
• Understanding and ability to use FTP.

Flow 3 -"Byg en App" Build an App

In the third flow we were tasked to develop a mobile application. Through data collection, personas and various tests, we had to create ideas and design a prototype of an application using Adobe Illustrator, Adobe Photoshop and Adobe XD - the final product had to be showcased via Adobe XD. The following qualifications were to be acquired during this flow:

• Fundamental capabilities working with vector graphics.
• General knowledge about graphics and iconography related to digital interfaces.
• Knowledge about colours and colour systems.
• Knowledge about typography.
• Knowledge about design principles and layout of digital interfaces.
• Knowledge about idea and concept development.
• Knowledge about wireframes, sitemaps, flowcharts and prototypes.
• Ability to create and work with personas.
• Knowledge about qualitative and quantitative data collection.
• Being able to do and learn from user tests.

Flow 4 -"Verdenmålskampagne" World Campaign

In flow four, we were tasked to create a world campaign for a company of our own choice. The only requirement was that the company had a publically available style guide. The assignment itself was to create a landing page for the campaign in either Adobe XD or actually program it using HTML and CSS. It was also a requirement to create a somewhat short video sequence that would accommodate the campaign.

Project management, designs briefs and visual identity played a considerable role in this flow - as well as the following qualification requirements:

• Design guide implementation.
• Video production and storytelling.
• Deep understanding of project management.
• Work in smaller teams.

Flow 5 -"Eksamensprojekts" Exam Project

The purpose of this flow is to present and document my progression over the semester as well as showcase my work and show what I've produced throughout the first semester. Based on what I've learned during the first semester, I must develop a website that makes up my current portfolio. The new portfolio will serve as a showcase for what I have worked on and what the future may contain. The portfolio is a face to the public and must show who I am and what I can do for potential companies, classmates, teachers and more.

The design must demonstrate my skills in design, visualisation and interaction development. Documentation of the progress must be demonstrated using project management techniques such as PBS, WBS and OBS. It's crucial to take concrete and consistent decisions in terms of the portfolios visual expression and identity - this includes the style, colours, layout, icons, logo and general mood. It is therefore essential that the design choices and principles can be justified using models and methods learned over the first semester.

Besides the portfolio, a video sequence must also be included in the portfolio and part of the presentation. Design decisions and development must be justified and stated in the portfolio in the form of subpages, documents or a video.

The portfolio should present the learning in a way that can be directly and chronologically seen in the development. Reflection questions that can be used when working are:

• What did I learn during this course?
• What did I expect to learn?
• What do I need to improve on?
• What will I do to improve on that?

The website must be developed from the ground up using the knowledge you've gained throughout the first semester. It is not allowed to use any kind of content management systems or CSS frameworks of any kind.