This project began initially as an exercise in creating a professional UX portfolio for myself.I started by mocking up some designs with Axure. Eventually I made a clickable prototype of a personal webpage.
The clickable prototype of this site is hosted online by Axure RP, and can be seen here
http://x6egam.axshare.com/noah_rosenheck___home.html
The next step was to turn that clickable prototype into a proper webpage. So I set about learning HTML and CSS. My plan was to learn enough HTML and CSS to feel confident with the general context of the language, then start modifying some Bootstrap templates until I had something I was satisfied with.
I started with two open-source templates from startbootstrap.com that I liked: Freelancer and Simple Sidebar. By the time I was done there was very little of the two themes left.
http://startbootstrap.com/template-overviews/freelancer/
http://startbootstrap.com/template-overviews/simple-sidebar/
From Freelancer, some of the elements on the page have the same basic organization within the HTML, and certainly all of the animations (javascript) are untouched. I also kept a top-scrolling button that is viewable on smaller screen sizes – I changed the color of the button and replaced the gliphicon, but I the .js file and scrolling animation was untouched. Another illustrative example is the ‘x’ at the top of this modal to close the page out. I changed the color, shape, and location on the page – but the basic structure of how it was constructed within the HTML and CSS is largely the same.
Similarly, I completely gutted Simple Sidebar. The structure of how it is set up within the HTML and CSS is the same, as are the opening and closing animations as the browser window changes widths. However the sidebar itself was completely gutted, and replaced with the side navigation used in the Bootstrap Documentation website. Then I integrated the scrolling animations from the top navigation in the Freelancer theme.
Here is a fantastic writeup of how the side navigation in the Bootstrap documentation functions
http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html
The color palate was tough. I spent a lot of time looking through sample color palates online, and I spent even longer checking them for visual accessibility. (On a side note, it was surprising how few color palates were remotely close to being accessible. I figured there wouldn’t be many, but of all the palates I checked only about two or three were completely accessible.)
When checking color palates for accessibility I found these two online tools to be absolutely invaluable
http://dasplankton.de/ContrastA/
http://colorsafe.co/
Paletton is another great tool. Not only is it a robust color palate generator, it also has a ‘Vision simulation’ tool that can check visual accessibility.
Paletton can be seen here
http://paletton.com
