GitHub Link to Code
https://github.com/sharonmonisharaj/Sharon_PortfolioWebsite
https://github.com/sharonmonisharaj/Sharon_PortfolioWebsite
Project Overview
Carnegie Mellon University | Duration: 3 weeks | Project Type: Individual
The goal was to learn to code by building from scratch a personal portfolio website with HTML, CSS and JavaScript. This was an academic project at Carnegie Mellon University for the course 'Programming Usable Interfaces.'
My Role
Beginner Programmer
Purpose: To become an empowered Interaction Designer who can communicate effectively with programmers on the team thanks to a strong understanding of coding constructs and challenges.
Tools: TextMate, Adobe Photoshop, Adobe Illustrator and InVision
My Process
UI Theme Design | High-Fidelity PSD Mockup Iterations | InVision Prototype | Code
I started off straightaway with high-fidelity mockups after deciding on a UI theme since the focus was learning to code and also since I am very comfortable with rapidly iterating on mockups in Photoshop. The final iteration formed the basis of an interactive InVision prototype based on which I went about coding with the help of class discussions, Stack Overflow and online tutorials on Lynda and W3 Schools.
Carnegie Mellon University | Duration: 3 weeks | Project Type: Individual
The goal was to learn to code by building from scratch a personal portfolio website with HTML, CSS and JavaScript. This was an academic project at Carnegie Mellon University for the course 'Programming Usable Interfaces.'
My Role
Beginner Programmer
Purpose: To become an empowered Interaction Designer who can communicate effectively with programmers on the team thanks to a strong understanding of coding constructs and challenges.
Tools: TextMate, Adobe Photoshop, Adobe Illustrator and InVision
My Process
UI Theme Design | High-Fidelity PSD Mockup Iterations | InVision Prototype | Code
I started off straightaway with high-fidelity mockups after deciding on a UI theme since the focus was learning to code and also since I am very comfortable with rapidly iterating on mockups in Photoshop. The final iteration formed the basis of an interactive InVision prototype based on which I went about coding with the help of class discussions, Stack Overflow and online tutorials on Lynda and W3 Schools.
High Fidelity Photoshop Mockups
Iteration - 1
The initial idea as depicted below, was to have slant edged cards bearing content that would slide into the screen every time the page is loaded. However, due to my beginner status as a programmer, this proved to be hard to achieve in a smooth manner. I therefore decided to simplify the design in the next iteration.
Color Inspiration
The colors used in iteration-1 were based on my imagination. Red and grey is one of my all time favorite color combinations and so I decided to use it. However, while testing it with my peers I found them refer to the color as pink, which was not the intended color. I went online to find images of red and grey in nature and found the below image which greatly appealed to me. I extracted the key colors and used them in my portfolio.
High Fidelity Photoshop Mockups
Iteration - 2
The slant edges in iteration - 1 have been replaced with perfectly vertical edges. This was done in the interest of producing clean code that worked without glitches which could then serve as the foundation for fancier layouts and animations in future versions of my web portfolio.
Link to Interactive InVision Prototype
InVision currently does not support embedding whole desktop prototypes and only allows embedding single screens of desktop prototypes in contrast to whole mobile prototypes.
Click to view the prototype in a new tab.
https://invis.io/AK9B5EQ6B
https://invis.io/AK9B5EQ6B
Actual Coded Website
Screenshots
Screenshots
These screenshots are of the website being run on Google Chrome. The website was tested in Safari and Firefox as well. As noticeable below, the screenshots of the coded output match the high-fidelity Photoshop mockups to a great degree. This was my prime focus while programming since I felt that the learning experience would be much more structured while trying to replicate a mockup in contrast to random exploration. However, I did use the latter technique for the project detailed view screens, to figure out the best way to design and code the previous and next buttons.
What's Next
The next step would be to make the website responsive using CSS media queries. Also, testing its behavior in various browsers and devices would be a crucial step towards being able to safely use this code for my actual online portfolio.
Conclusion
It was fascinating to explore programming as a tool to transform an idea from a mere set of of files on my laptop to an actual website accessible to the world. The main challenge was trying to make the website compatible with all commonly used browsers and devices. Since my website uses viewport units and is not fully responsive, I decided against going live with my proudly-coded-from-scratch portfolio. Other challenges involved figuring out the easiest way to perform an action with JavaScript using as few lines of code as possible. With the help of Stack Overflow and kind programmers among my peers, the learning experience gained from this project was tremendous.
The next step would be to make the website responsive using CSS media queries. Also, testing its behavior in various browsers and devices would be a crucial step towards being able to safely use this code for my actual online portfolio.
Conclusion
It was fascinating to explore programming as a tool to transform an idea from a mere set of of files on my laptop to an actual website accessible to the world. The main challenge was trying to make the website compatible with all commonly used browsers and devices. Since my website uses viewport units and is not fully responsive, I decided against going live with my proudly-coded-from-scratch portfolio. Other challenges involved figuring out the easiest way to perform an action with JavaScript using as few lines of code as possible. With the help of Stack Overflow and kind programmers among my peers, the learning experience gained from this project was tremendous.
