This is my portfolio site, which can be viewed here.
This website was created in partial completion of the Term 1 assessment requirements for Coder Academy's Fast Track bootcamp. Please find assessment criteria addressed below:
In considering the site's audience, user stories were created. These can be viewed here.
As is reflected in the style guide, a font family and colour palette were chosen, a moodboard created, and wireframes constructed.
The moodboard consists primarily of images representative of the flat, modern style that I was after for this website. As someone starting out as a web developer in 2017 the modern feel is what I feel is appropriate for my professional website.
The font Roboto, developed and used by Google, is one that most people browsing the web are very familiar with. I wanted to go with familiarity to help users feel comfortable while browsing my site.
The colour palette chosen consists of three bold colours along with black and white. I chose bold colours to reflect the style and personality I want to portray as an individual, and to stand out from other portfolio sites that use more conservative colour schemes.
The wireframes represent the clean and easy-to-navigate feel of the website, allowing for easy user flow and getting the point across succinctly. MVP user stories are clearly addressed in this wireframe.
With consideration to Jakob Nielsen's 10 usability heuristics as applied to web design:
1. Visibility of system status
The website is clearly branded with easy-to-locate navigation which allows users to always know where they are and where they can go next.
2. Match between system and the real world
Information is presented in a clear and logical order, using language familiar to the intended audience.
3. User control and freedom
A "Home" option in the menu which is accessible from every page ensures that users have an easy way to get back to the main page of the website should they accidentally end up in some unwanted state.
4. Consistency and standards
The website is HTML and CSS standards compliant, and consistent throughout in terms of wording and navigation options.
5. Error prevention
The contact form is designed to handle errors gracefully, minimising confusion and inconvenience for the user.
6. Recognition rather than recall
Navigation is easily visible and available at the top of the screen at all times, requiring no recall from the user. Links are descriptive, clearly representative of what they refer to.
7. Flexibility and efficiency of use
All pages and sections of the website can easily be linked to, allowing easy bookmarking functionality.
8. Aesthetic and minimalist design
Information presented is written specifically for the web, and does not contain any extraneous detail.
9. Help users recognize, diagnose, and recover from errors
Error messages (resulting from incorrect or missing input in the contact form) are written in plain text, precisely indicating the problem, and clearly indicating the steps the user can take to a solution.
10. Help and documentation
As a very basic website with minimal functionality, help and documentation is not needed.
Wireframes were created using Figma, and can be viewed here.
The style guide for this website can be found here.
The logo used for this site is a simple text-based representation of my initials. The favicon is the logo with a black background.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
