Juan Pablo Tazzioli Portfolio

Live Demo here.

Table of Contents

• Overview
• UX
• User Stories
• Features
• Technologies Used
• Testing
• Deployment
• Bugs and Solutions
• Credits

Overview

The idea of this project was to create a website of an industrial Designer based in Milan. The site shows the designer's portfolio along with information about him, and a contact form.

UX

• User stories

  • First Time and Returning Visitor

    1. As a First Time Visitor I would like to understand the main purpose of the site.
    2. I want to easily navigate through the website and find information about the designer and showcase of his work.
    3. I want to be able to view the content on any device or browser.
    4. As a returning visitor, I would like to find a way of contacting him.
    5. I would like to follow him on social networks.

  • Design

    Structure

  • The site consists of 3 main pages, "Home", "Works" and "Projects", this last one will have, for now, 4 subpages that will contain images of each specific project, this will be updated with new projects over time.

  • The design is minimalistic, with small letters and grey colors, this was done with the idea of making the images stand out from the background.

  • I used grey colors so it would not drive the focus from the images, which are the most important part of the website.

  • Typography

    • The Poppins font is the main font used throughout the whole website with Sans Serif as the the fallback font in the case for any reason the font isn't being imported into the site correctly.

  • Imagery

    • All images were created and provided by Juan Pablo Tazzioli, in some cases we used large images that had inscriptions on them explaining each project, in other cases the images are self-explained or there is a text above the image with a description of the project.

Wireframes

Home Page
Home Page Wireframe
Works Page
Works Page Wireframe
Project Page
Project Page Wireframe
Contact Page
Contact Page Wireframe

Modifications to original Design

In the original design, what is now the “Home” section was the “About” section and what is now the “works” section was the “home” section, but after evaluating some user experiences I realize the purpose of the website was not clear so I decided to change it. I did not change the Mockups because I consider them part of the original design, and I think every design changes according to needs. The social media links will not take you to the designer's social media site because they are not ready yet, as soon as I am provided with the links, I will update it, for now, it will only take you to the main page of Facebook, Linkedin and Instagram.

Features

• Responsive on all device sizes
• Form validation is required to ensure the correct inputs are taken and that all fields are required

Features left to implement

• Social Media links not updated yet, the designer decided not to link them yet because they are not ready
• More projects to be added on the "Works" section
• In the project section I'm considering implementing a "previous" and "next" button to more easily navigate through the projects.
• The backend of the contact form, this is outside the scope of my knowledge at this time.

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap

• Bootstrap was used for the grid system and to help with the responsiveness for all devices.

2. Fontawesome

• Fontawesome was used for the social media icons

3. Google Fonts

• Google Font was used to import the Poppins font through the entire website

4. Github

• Github was used to store the code pushed through Gitpod

5. Gitpod

• Gitpod was the Integrated Development Environment used to develop the Website.

6. Balsamiq

• Balsamiq was used to create the wireframes during the design process.

7. Picresize

• Picresize was used to reduce and resize images.

8. Chrome DevOps Tools

• Chrome DevOps Tools was used to check elements and help debug issues with the site layout and try different CSS styles.

Testing

I used W3C HTML Validator and W3C CSS Validator Services to ensure there were no syntax errors in the project.

• W3C HTML Validation
• W3C CSS Validator

All links to external websites open in a new browser.

Form validation is required to ensure the correct inputs are taken and that all fields are required.

Testing User Stories from User Experience (UX) Section

• First Time and Returning Visitor

1. As a First Time Visitor, I want to easily understand the main purpose of the site and easily be able to navigate throughout the site to find content.

   1. The logo on the upper left side shows the name and the words "Industrial Designer".

   2. Upon entering the site, users can see a photo of the designer along with a phrase that represents his work philosophy. Below the photo, you can find details about the designer like work experience, education, and awards that make it clear he is an industrial designer.

   3. On the bottom there is an image with logos of the software the designer has experience using, the logo is easily recognized by fellow designers.

   4. The landing site has been designed to be simple and give an introduction of the designer. At the top of the page, there is a navigation bar, each link describes where it will lead you.

   5. Once you go to the work section you can find the different projects, if you hover over the projects you can see a description and the option to click anywhere on the image which will take you to the site of that specific project, and you will be able to see more images and get more information about it.

2. As a returning visitor, I would like to find a way of contacting him and follow him on social networks.

   1. To the right hand side of the footer the user can scroll to the bottom of any page on the site to locate social media links.

   2. There is a contact form in the contact page (Backend not yet implemnted).

Further Testing

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge, Opera, and Safari browsers.
• The website was viewed on different devices such as Desktop, Laptops, Android phones, iPhone 6, and iPhone x, and I used http://www.responsinator.com/ as well to check responsiveness.
• I asked friends and family members to review the site and give me feedback about the user experience.

Deployment

The project was deployed to GitHub with the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. Select “your profile” from the upper-right dropdown menu and select the proper repository.
3. Select Settings and Scroll down until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Making a Local Clone

1. I Logged in to GitHub and located the GitHub Repository
2. Under the repository name, clicked "Clone".
3. I cloned the repository using HTTPS and Github Desktop
4. On Github Desktop I changed the directory to the location where I wanted the cloned directory to be made.
5. Clicked enter.
6. It downloaded a copy of my repository.

Bugs and Solutions

1. I had issues with images on small and large devices, I addressed this issue using media queries on my CSS, targeting the images and text that did not adapt properly.
2. Some images took to long to load so I had to reduce the size of the file
3. I had issues centering the images, I used bootstrap d-flex justify-content-center to accomplish this.
4. I had an issue with the hover effect, originally when you hovered over the image it will turn black and a clickable text would be highlighted, but after some feedback from users, I realized it was better to make the whole image clickable otherwise some users would not realize they could click on the project. So i modified the original hover effect to turn the screen black with the text and make it all clickable.
5. The navigation bar looked too big on small devices i used media queries to make it look smaller.

Credits

• The Contact form was copied from Stefan Rusu – codepen, I only did some slight modifications.
• The hover effect on the images was taken from https://www.w3schools.com
• I took inspiration and ideas from these websites https://kingstudio.ro/demos/mnml/index6.html and https://www.marioferrarini.com/
• The navbar idea was taken from youtube channel "Fullyworld Web Tutorials"
• All images were created and provided by Juan Pablo Tazzioli.
• My Mentor Antonio Rodriguez for helping me when I was stuck.
• The slack community for its extensive Q&A, I found most of the answers to my problems there.
• Jim Lynx for the "MS1 planning" session video gave a good starting point and resources to got me started.