Ryan Reid Illustration + Design

Ryan Reid Illustration + Design

UX/UI design of illustration portfolio website.

Ryanreid.com is a portfolio website focused on illustration and design projects.


Reviewed the analytics data from the previous site in order to identify patterns and painpoints. One general assumption was that visitors to portfolio sites don't spend a lot of time there, and rarely navigate beyond the home page. For this reason the running hypothesis was that the content, and the personality of the content, needed to be the cornerstone of the design.


Several sketches were created. A simple grid system for layout, paired with a bare-bones navigation system, would best display the content in a functional and interesting way.

IBM Controller Submission Upload Panel Actions

Several mock ups of the design were conceived in Illustrator. Each iteration better focused the website content, and minimized the usual website collateral. Sketches and mock ups also caught several issues with the responsive layout of the design that were addressed before implementation.

ryanreid.com Mockup 1
ryanreid.com Mockup 2
ryanreid.com Mockup 3
ryanreid.com Mockup 4
ryanreid.com Mockup 6
ryanreid.com Mockup 5


The mockup was transferred to html using the Materialize framework, with some customizations made to PHP, CSS, and HTML. The html prototype highlighted a few outlier issues, including the need for a max-width to address hi-res monitors, and a background pattern on the home page for hi-res portrait oriented screens. The final website was responsive, fast loading, and content-focused.

Large and Medium Screen Layout

ryanreid.com Home
ryanreid.com About
ryanreid.com Wrenched

Small Screen Layout

ryanreid.com Home
ryanreid.com About
ryanreid.com Wrenched
Visit ryanreid.com