Live Prototypes tell their stories upon a stage

May 7, 2022 8:15 pm | by Craig Webb | Posted in User Experience

I published a series of pages on my website showing examples of live prototypes I made. The Live Prototypes page links to a series of “story pages” that feature various design quests. Each story features important design elements and my journey to resolve common web design issues.

The purpose is to show my design-thinking and problem-solving skills to Creative Directors. My ability to design in code, to focus on function, and resolve design issues is a crucial web development skill.

My design stories are displayed within a “Prototype Theater”. The Prototype Theater is an iframe container displaying live HTML links.

The Prototype Theater format is itself a prototype. Here is the story of my Prototype Theater.

Functions and Features of the Prototype Theater format

The purpose of the Prototype Theater is to display prototype examples on the page. Selecting a link shows a HTML page within the iframe.

However, many of the prototypes are about responsive design. Responsive prototypes are best seen in full desktop view.

So opening the links in new tabs is the best way to view and appreciate the work. The iframe window next to a sidebar cannot be a full desktop width but it provides a quick look to garner interest.

A note above the links suggests that viewers can open links in new browser tabs to view. It will be interesting to learn how users will embrace the iframe display interface.

Resolving mobile layout challenges

The best way for Creative Directors to see my portfolio and understand my work is on a desktop device. But viewers will also look at my portfolio on mobile devices.

Making the iframe theater work on mobile devices required overcoming a layout limitation. My website layout is designed so that the website sidebar falls below the main content on mobile.

Due to my website layout, the links menu appeared below the theater container.

My website layout uses floats and negative margins. The main content is first in markup for SEO. Floats and negative margins pull the sidebar to appear on the left for desktop views.

As a result, on mobile devices the Prototype Links Menu fell below the iframe container. Users could not see what to do. Viewers had to scroll up and down to select links and see a result.

Core web page redesign

I redesigned the core web page layout for the theater pages by splitting the sidebar into two parts. For mobile devices, the Prototype Links Menu must be first in the markup to display above the iframe content container. The other sidebar section links to other pages and appears below.

I conducted a series of explorations to discover the right layout mechanism to split the sidebar content.

First I tried using floats and margins to control the layout. I also experimented using CSS Flexbox and CSS Grid layout techniques. The CSS Grid technique turned out to work best to achieve a layout that best serves the content. Afterwards I matched the website style of my other pages.

Research, custom code and templating for production

Building the theater interface included research about iframes. I used datasets to embed titles and captions within prototype links. I wrote javascript functions to add the titles and captions above each prototype example.

I converted my Prototype Theater layout to a series of template components using Gulp and Handlebars.js. A custom CSS stylesheet keeps the CSS separate from my global styles.

Final Thoughts

I limited my prototype examples to “stories” that follow a progression and explore important elements of web design.

The prototypes show my design thinking, my problem-solving skills, and illustrate my values. I am hoping to reach and speak to creative design managers or business owners who value code design.