Design > Personal Webcomic Site Redesign

Four concerns arose with this design of my personal webcomic:

1. There were no "you are here" indicators, such as breadcrumbs.
2. Navigation elements did not look actionable.
3. Text and images rendered far too small on mobile devices.
4. Critical PHP backend functions worked but not efficiently.

Redesign

With these in mind, the redesign sought to rectify these problems in the following ways:

1. Color-coding on the menu item that spills over into the content area solidifies the link between the two.
2. Navigation buttons now looked actionable due visual affordances.
3. Special META tags instructed mobile browsers how to properly zoom the page on first load.
4. Refactoring the PHP backend reduced how often certain scripts needed to run, decreasing load time.

The prelimiary sketched wireframe used a continuity of shape and background color from one side of navigation through the selected navigation item and around the content area to inform the user of the relation between the two.

The final, live build made use of contrasting colors to separate areas such as active vs. inactive navigation, as mentioned above. A consistent color scheme indicated when a button was actionable (grey) or not (blue).