SEE LIVE WEBSITE AT https://katwlodarczyk.com/

Link to GitHub repository: https://github.com/katwlodarczyk/portfolio

1.1 Background

Created website is attempting to solve the issue of self-promotion. Web technology sector relies deeply on the ability to show yourself and your abilities. This problem complies with the assessment criteria.

1.2 Wire Frames

Low fidelity wire frames have been created prior to the coding process.

1.3 Colour Choices

“The colour scheme for a website can contribute to the overall brand perception of products or services.” (Interaction Design Foundation, 2020) Portfolio has been created with a “less is more” approach in mind. That is why the colour scheme used in this project is very minimalistic. Palette consist of only three different colours: black, white and different shades of blue (teal blue and ocean blue). Based on research by CCICOLOR, blue is said to reflect strength and reliability. Choosing more pastel hues of this colour adds positivity.

1.4 Accessibility

Accessibility is essential part of development. Websites should be created to work for everybody, no matter their abilities or health conditions. Accessibility also improve search engine optimization (SEO). To conform with W3C accessibility standards(https://www.w3.org/standards/webdesign/accessibility), both design and development phase have been completed while recognizing some accesibility issues.

1. Alt tags have been added to all images and buttons on the website.
2. Structure of the website is marked properly to support screen readers. (e.g. tags, tags for forms)
3. There are no fast changing images or flashing lights, to prevent seizures.
4. Navigation is very straight forward.
5. Font used is readable.
6. Messages are displayed while errors occurs. (e.g. form validation)
7. Website is compatibile with different browsers and devices.
8. Background and colour of the elements on the website provide good contrast.
9. Buttons are big enough and spread apart from other elements to allow for easy touch click while using a mobile phone.

1.5 GDPR

To conform to the General Data Protection Regulation, privacy policy has been created using https://termly.io/ free policy generator. Contact form have an opt-in option, for a user to agree with the Privacy Policy.

The 8 individual rights have been provided and executed:

1. Users are informed about all data that may be collected from them while using the website.
2. Users have right to access to all the data that has been collected from them (by requesting so via email).
3. Users have right to rectification.
4. Users have right to erasure of all the data collecte from them (by requesting so via email).
5. Users have right to restrict processing.
6. Users have right to move all their data (by requesting so via email).
7. Users have right to object.(in which case it is advised for users not to use the website)
8. Users have rights in relation to automated decision making and prifiling.

1.6 Distance Selling

The purpose of the website is self-promote, not to sell products. Therefore no measures had to be taken to conform to the online and distance selling act.

1.7 Evaluation

In conclusion, portfolio website has fully solved the isssue of self promotion.

Process of the design and development allowed to better understand the fundamentals of creating a website. During the coding phase, a lot of problems arised, but tackling them made learning even more powerful. To name a few, there was an issue with proper structure of the website, implementing JavaScript to create a typescript effect, responsive hamburger menu and the transition effect on the hamburger button/close button, adding a custom domain, getting the contact form to fully work by embedding Google Forms, animating the send button on click, only after the form has been validated, optimising images used on the website or creating a robots.txt file in order to prevent crawlers to get into a 'thank you' page.

Website has been tested via Google Chrome Developer Tools, and also by perfoming an audit via Google Lighthouse Tool. The results of both were satisfactory. Developer Tools showed that the website is fully responsive. The audit report resulted in 99 points in Performance, 100 points for Accessibility, 93 points for Best Practices and 100 points for SEO. All of those were ranked in a highest tier on the Lighthouse scale.

Modern, contemporary design and analysis of design principles have shaped the design choices that were used to create the portfolio. User Expirience has also been a priority on this project. Mobile first approach have been chosen to implement the design, as most people now browse websites while using their mobiles phones, not desktops. It is also better to enhance the design while increasing the screen size, rather than downgrading it while decreasing the screen size.

2. References

SOEGAARD, M., 2020, Dressing Up Your UI with Colors That Fit, Available from: https://www.interaction-design.org/literature/article/dressing-up-your-ui-with-colors-that-fit [Viewed 12.05.2020]

W3C, Updated 10.05.2019, Accessibility Principles, Available from: https://www.w3.org/WAI/fundamentals/accessibility-principles/ [Viewed 17.05.2020]