Responsive Portfolio Site
Work samples used to be enough to get the job, but now companies want to see the thought and process behind the work. The story has to be as compelling as the work itself.
The website needs to instantly communicate design and illustration talent without over-powering the content. This is a delicate balance. I've seen so many portfolio websites that go overboard with flashy imagery and distracting interactivity, and the actual work is underwhelming in comparison.
On the technical side, the website has to load in a fraction of a second. Navigation must be clear and intuitive. The content must be crawled by robots and indexed by search engines. Images must look sharp on retina screens.
User Experience Design
User Interface Design
The Site Design Process
The first step is clearly defining the purpose for the website: to clearly and immediately demonstrate my responsive design and original illustration capabilities. There is a moderate amount of content including blog articles, project images, and project descriptions. The interactive components should be minimal so as not to distract from the content. This is a presentational website, and most of the design and development work will be on the presentation layer.
The next step is defining the requirements for a great user experience: clear and intuitive navigation, easy-to-read layout and typography, images that adapt to all screen sizes and resolutions. Now is the time to sketch site maps and wireframes.
Gathering design assets is next, followed by designing the user-interface. I prefer to design directly in the browser because Photoshop comps are static.
Successes and Achievements
The website itself demonstrates my design abilities and personality, without competing with the work it showcases. Most importantly, it reflects my personal design aesthetic: clean and bright without being boring and mechanical.
This was my first time using Sass, SMACSS, and BEM architecture. Modular achitecture makes CSS styles reusable for fast development. Sass mixins and functions streamlined the stylesheets for easy updates. BEM architecture was a great learning experience, but I think it would have been more useful on a larger site.