design | front-end development | Bootstrap | jQuery | Github
built using Bootstrap v4; hosted via Github
Philip needed a personal website to help him pick up freelance video editing gigs while still looking professional to his colleagues in the tech support field. I built this site using the Bootstrap framework and helped Philip set up a domain and hosting.
Interview: Philip wanted to showcase two sets of video: (1) the projects that are a part of his “official” portfolio and (2) the video art he makes for fun in his spare time. While the first set of videos will not change very often, the second set is an ever-growing body of work. Philip did not have preferences about colors, fonts or branding, but did mention that he likes green.
Strategy: Since Philip wanted a simple, one-page layout and has basic knowledge of HTML/CSS and decent tech skills, I suggested a custom-coded site using the Bootstrap framework with free hosting via Github. That way, the only recurring cost would be the yearly fee for his domain name. I presented some wireframes along with a proposed color scheme and got his approval before building out the site. In order to ensure Philip wouldn’t need to frequently make changes to the site, I embedded his video art Youtube channel rather than all 20+ videos. Since he only had four portfolio videos to showcase, I did embed those individually.
Design: Bootstrap makes mobile-friendly and modern design easy, so I made just a few changes to the default styles. Since Philip's art involves the use of old footage to make futuristic art, I paired a monospace typeface reminiscent of old default system fonts with the clean, modern Source Sans Pro. I created the following color palette based on Philip’s preference for green:
I needed to design a site that Philip would be proud of but one that would not require ongoing maintenance:
Embedding Phil’s portfolio videos individually allows site visitors to see his most polished work without clicking through to another site, and embedding the Youtube channel for his more prolific video art endeavors gives easy access to his videos without making the site too content-heavy.
Training: Philip knew how to edit HTML files in Git, so he was already capable of making minor edits to his site. I walked him through the process of buying a domain name and linking it to his Github project site, but otherwise he required very little training.
(click to enlarge)
Philip now has a clean, modern, mobile-responsive website that he can put on his professional resume and send to potential freelance clients. One thing I would handle differently in the future is the handling of the client’s assets. While his videos were already accessible via Youtube and Vimeo, I ended up adding his main photo to a public flickr account that I own. I could have just added the image file to the repository along with the HTML and CSS files.
“As someone who's never had their own personal website before and wasn't sure where to start, Katelyn did a fantastic job working with me to establish what should and shouldn't be included. As long as you have a rough vision, she'll make sure that vision is presented in the most succinct and visually appealing way possible." - Phil Ginley