This repository showcases my skills, expertise, and experiences as a UX Designer and Developer. As a UX Engineer, I bridge the gap between design and development, creating seamless and interactive user experiences through the integration of front-end development and UX design principles.
- Easily navigate through the website to find the relevant content, effortlessly.
- Download a copy of the developer's paper CV to find relevant information.
- Easily navigate to previous projects of the developer, to learn about their style of work.
- Easily find a point of contact in order to get in touch with the developer.
The developer distinguished the required functionality of the site and how it would answer the user stories, as described above, using the Five Development Planes:
Broken into three categories, the website will focus on the following target audiences:
-
Roles:
- New/Potential Clients
- Current/Return Clients
-
Demographic:
- Potential Employers/Contractors
- Interest in collaborating with the developer
-
Psychographics:
- Personality & Attitudes:
- Friendly
- Outgoing
- Values:
- More modern lifestyle
- Importance of online presence
- Lifestyles:
- Business-oriented
- Client-focused
- Personality & Attitudes:
The website needs to enable the user to:
- Retrieve desired information:
- CV
- Information on previous projects
- Contact information
The website needs to enable the developer to:
- Develop an online presence
- Provide an easily navigable website for users to find relevant information:
- Projects
- CV
- Provide a channel of communication for enquires
With these goals in mind, a strategy table was created to determine the trade-off between importance and viability with the following results:
A scope was defined in order to clearly identify what needed to be done in order to align features with the strategy previously defined. This was broken into two categories:
- Content Requirements
- The user will be looking for:
- Biographic information
- Projects
- Contact details
- Downloadable CV
- The user will be looking for:
- Functionality Requirements
- The user will be able to:
- Easily navigate through the site in order to find the information they want
- Easy access to downloadable CV
- Contact the developer directly through their chosen channel of communication
- The user will be able to:
The information architecture was organized in a hierarchial tree structure in order to ensure that users could navigate through the site with ease and efficiency, with the following results:
High-Fidelity Wireframe mockups were created in Figma Workspace with providing a positive user experience in mind:
Home Page
About Page
Contact Page
Thank you Page
Privacy Policy Page
Colour Scheme
The combination of blue and green shades creates a harmonious and calming colour palette. Aligning with the Developer's brand identity, the following palette was thoughtfully crafted to create a visually appealing, user-friendly, and accessible interface:
Typography
The font Montserrat was carefully chosen for this project due to its versatility, readability, and modern aesthetic. Its clean and minimalistic design brings a contemporary feel to the interface, while its subtle character adds personality and uniqueness to the overall design.
The font Anek Latin was chosen due to the unique attributes that align with the primary Montserrat font. The contemporary and sleek design adds a touch of modernity to the visual identity of the site. The exceptional legibility of the font ensures that content is easily readable across various platforms, maintaining clarity and impact.
Imagery
The imagery used was created by the developer using Procreate and Figma in order to create a consistency of the elements while maintaining the look and feel of the application.
- Git
- Git was used for version control to commit to Git and push to Heroku.
- GitHub
- GitHub was used to store the project repository, after pushing.
- Figma
- Figma was used to create the wireframes during the design phase of the project and consistent components during development
- Mockup Generator
- Am I Responsive was used in order to validate the responsiveness of the design throughout the process, and to generate mockup imagery to be used.
- Procreate
- Procreate was used to create and edit images as well as using the colour picker tool to ensure consistency throughout.
- Font Awesome
- Font Awesome was used in conjunction with Iconify for icons used throughout the website.
- Bootstrap
- Bootstrap was used to implement the responsiveness of the site, using bootstrap classes.
- jQuery
- jQuery was used to simplify the JavaScript code used.
- Google Fonts
- Google fonts was used to import the fonts "Indie Flower" and "Work Sans" into the style.css file. These fonts were used throughout the project.
- jQuery Validation
- jQuery Validation was used to simplify form validation for the Contact Form.
- SweetAlert2
- SweetAlert2 was used to customise the Contact Form success message for UX
To further develop this project, or adapt it for your own portfolio, a clone can be made using the following steps:
Deployment Instructions assume you are working on a MacOS and may differ on other operating systems. Please check documentation specific for your operating system
To run the project on your own IDE, ensure you have the following:
- An IDE (such as Visual Studio Code or GitPod)
- Git for project version control
A Local Clone of the repository can be made in two ways:
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, on the right side of the page, select "Fork".
- You should now have a copy of the original repository in your GitHub account.
To run this project locally:
- Install the GitPod Browser Extension for Chrome.
- After installation, restart the browser.
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally.
To run this project within a local IDE (such as VSCode):
-
Log into GitHub or create an account.
-
Locate the GitHub Repository.
-
Under the repository name, click "Clone or download".
-
In the Clone with HTTPs section, copy the clone URL for the repository.
-
In your local IDE open the terminal.
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY -
Press Enter. Your local clone will be created.
(Further reading and troubleshooting on cloning a repository from GitHub here)
Once a local clone is created, follow the below steps to deploy locally:
- Locate the GitHub Repository.
- At the top of the repository, select Settings from the menu items.
- Select the "Pages" section on the left side of the page.
- Under "Source" click the drop-down menu labelled "None" and select "Main Branch".
- Upon clicking Save, the page will automatically refresh meaning that the website is now deployed.
- The deployed link will now be available.
The developer consulted multiple sites in order to better understand the code they were trying to implement. For code that was copied and edited, the developer made sure to reference this with the code. The following sites were used on a more regular basis:
If you encounter any issues with this website, or require any further clarification or support, please email the developer. Thank you!