From Paper to Pixels
This is my personal website, there are many like it but this one is mine. Without me my website is nothing, without my website I’m nothing (online that is).
I’d been reading “Responsive Web Design” by Ethan Marcotte, “HTML 5 & CSS3 for Web Designers” by Jeremy Keith and Dan Cederholm, “Designing for Emotion” by Aarron Walter and “Mobile First” by Luke Wroblewski. (Which if you haven’t checked this books out already you should head over to A Book Apart ) Designing for Emotion got me thinking about what I wanted my website to be and about the problem I faced with it, the rest got me thinking on technology and how I wanted my site to function. I knew from the beginning I wanted a responsive website but I hadn’t settle on HTML or WordPress, I decided on WordPress in the end because it would be easier to add and remove content, not to mention it would bring down the need for maintenance.
I started out sketching ideas for how I was going to layout my content and that’s when I realized my sites structure was very much the same to what most people where doing. I wanted to avoid this so I started to ask questions as to why I had what I had. I found the homepage to be useless for my site and I decided to remove it and make my portfolio page my homepage.. The main function of my site is to showcase my work and having a page with a short introduction and maybe a few teasers, I found to be redundant. Secondly, my bounce rate for that page would be huge since most people upon arriving would probably be clicking on portfolio anyways. Once I did that I found myself with my Portfolio/Homepage, an About Page, and a Contact Page.
With the site being responsive in mind I decided on a modular grid structure that could rearrange it’s self and resize according to screen size. I also designed the header and footer for my site and what the contact page would look like. I choose a neutral colour scheme because I wanted my work to be the focus and not the site and colour was the thing that came to mind to achieve that. Also it matched my printed portfolio which I didn’t want to disconnect from. Once I had the sketches on how it would look like on a mobile device I sketched out how it would look on a desktop just to make sure the concept worked.
I didn’t do any photoshop mockups for this site mainly because a responsive layout is difficult to illustrate, if not impossible, in a program where the objects are solid. Instead I went with rapid prototyping. I came across a great little program, VirtualHostX, that allowed me to locally develop my website with a custom local-level domain name, in this case it was marciomorgado.dev. This way it would be simple to move it to a live server and I could work on it on the way to school.
When I began development I came across a premium WordPress theme that had a similar foundation to mine. Upon looking at the theme I found if I bought it and customized it, like adding a footer to it, recreating the menu, some UX tweaks and css customization, I could use that as a starting point and bring my focus back to my portfolio pieces and finding an internship. I bought the theme and began to customize it with the entire process taking about three days to complete with random work sessions. I now had a website and began adding my projects and decided to add a slider that supported touch interfaces. This would allow it to be easily viewed on any device without hindering the experience of the site.
After about a week and a half I now had my site with most of my projects. Unfortunately, it would take almost another month for me to add all the projects found in my printed portfolio book. To balance my printed and online portfolios I’ve kept some information out of the online edition so it wouldn’t be me repeating everything in an interview to someone who looked at my website first and some projects where kept out of the printed version for other reasons.
It was a great experience developing my portfolio site taking into account the image and experience I wanted to project. I don’t think this will be my final version, I’m sure later on I will update it again after all this is the fifth installation of my online portfolio but when I do I’m looking forward to what I learn then.
