Katie Wasserman Portfolio Website

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.

My Role


User Experience Design

User Interface Design

Visual Design

Interaction Design

Web Development

Katie Wasserman portfolio website home page
Katie Wasserman portfolio website portfolio section
Katie Wasserman portfolio website blog page
Katie Wasserman portfolio website blog post
Katie Wasserman portfolio website about page
Katie Wasserman portfolio website footer
website construction
web design strategy
sitemap
user journey
wireframe
mobile wireframes

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.

Lessons Learned


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.

gallery next