Final Synopsis

The purpose of this website is to show off my work in UX/UI Design, Web Design, and Visual Design to future employers or anyone else interested in my work. The site itself serves as its own piece of portfolio work that shows off my capabilities in a comprehensive way, as it required all three of these skills to create. Before creating this website, I set out some objectives that the site needed to fulfill. First, it had to be built from the ground up using HTML/CSS and encapsulate my work with photos, necessary links, and descriptions. It also needed a logo that represents me as a designer and a design scheme to keep the site consistent across multiple pages. The site also needed to be easy to navigate and account for accessibility and user standards, which would require user testing. Lastly, the site also needed to be future proof so I could add projects to it at the end of the semester and in the future.

Before I began coding the website, I needed to learn new skills to accomplish a project of this scale. I used LinkedIn Learning to learn Bootstrap, GitHub, and some information about what goes into a portfolio website. These skills were invaluable in the creation of this website, with Bootstrap providing web responsive elements and GitHub providing a testing ground to test versions of the site in different web browsers and on various devices of different sizes (the site is responsive on dekstop, tablet, and mobile).

I also needed to make some creative decisions before the creation of the site began. I created a logo in Adobe Illustrator, with a color scheme created using Adobe Color. The logo and colors are inspired by neon signs, with a wireframe look and vibrant colors. I knew from the start I wanted the pages to have a dark look by default, and I was inspired by images of neon signs at night and the sprawling dystopian city in the film Blade Runner 2049. I also used the website Shape Divider to create some SVG elements for the header and footer of each page. I then used Adobe Fonts to pick a typeface to use for the headings of the site in the form of All Round Gothic, while retaining the Bootstrap font families for other elements so that the site is easy to use. Bootstrap Icons was also integrated for the social media icons in the footer of the site. I used the knowledge I learned from the LinkedIn Learning course on what goes into a portfolio to create the navigation and researched other design portfolios to create some sketches and wireframes of the various pages the site would require. I also created a list of the various elements each portfolio item and page would require, such as text and images. All images for the site were sized in Adobe Photoshop to be optimal for web.

After the initial design goals for the site were complete, I began to code the website using Adobe Dreamweaver and Bootstrap. Dreamweaver has Bootstrap integration built-in, so this was useful when creating the initial files for the various pages of the site. I used the LinkedIn Learning and the Bootstrap website to learn Bootstrap as I went, and this is where I ran into the first hurdles I needed to cross when coding the site. Originally, it was tough to override the Bootstrap files to create my own color variable and modify certain aspects of Bootstrap objects to fit my intended style for the site, and it took some time to solve this problem and get used to the many variables Bootstrap adds to HTML tags. Coding the site was the longest stage of the portfolio’s creation and required multiple days of work to complete. It is also important to note that the header and footer can be easily duplicated to create new pages for portfolio content and the portfolio section of the site can also be adapted to include these new projects.

The website is complete for this independent project and is currently being hosted on Netlify, which integrates with my GitHub repository for the site that contains the most recent version. Netlify allows for easy changes to be made to any of the site files and allows for a custom domain name to be integrated. Further changes will be made after feedback on SMAD day (November 5, 2021). Eventually, the intention is to condense this page into a smaller version for the portfolio area of the site.