(917) 797·0983
About Craig Webb

User Interface Design

Live Prototypes

Built in HTML, CSS and JavaScript, live prototypes are useful to test design concepts and build reusable modular patterns.

2014 Live Prototypes

CWebba1 Responsive SVG Codepen 03

Responsive SVG example using Inline-block list elements for layout. The SVG brush graphic, taken from A List Apart, has been modified to be responsive.
cwebba1_svg_codepen_03.htm


CWebba1 Responsive SVG Codepen 04

This responsive SVG example uses floated DIV elements for layout.
cwebba1_svg_codepen_04.htm


2013 Live Prototypes

Simple Responsive Form 08

This responsive form is built as a stand-alone module. It can be inserted into a page and further styled for fit.
chriscoyier_Simple_Responsive_Form_08.htm


CSS Transitions Demo

This is a test to isolate transition of font-size and color. The typography changes size to suit different responsive layouts.
CSS_Transitions_Demo.htm


Bootstrap Accordion with CSS3 Multi-Columns

Testing the Bootstrap Accordion Module with embedded CSS3 multi-columns. Click the HTML/CSS Development Links and resize the window to see.
bootstrap-collapse_sample_02.htm


Bootstrap Accordion with CSS3 Multi-Columns 02

The links module, which includes tabs, accordions and CSS3 Multi-column, is tested in the old CraigWebbArt.com layout and stylesheet. Distinct from style, the module’s functions adopt the host style.
links_081812_BStest02.htm


Links Switch Class 01

This prototype uses JQuery to add and remove classes so that the tabs become Buttons for mobile views and change back. Resize the browser window to see.
links_switch_class_test_01.htm


Simple Modal Test 04

This test demonstrates the failure of this modal method. The modal is as transparent as the background.
simple_modal_test04.htm


Third Sample Modal 04

I chose to use a small modal JavaScript with no dependencies. This signup modal is available on every page but not every page uses JQuery.
ThirdSampleModal_04.htm


Map Modal

The Map Modal.
map_02.htm


CWebba Visual Design Craigslist Ad

This is an ad for placement in Craigslist.org.
Visual_Design_CL_Ad_web_01.htm


2012 Live Prototypes

Inline-Block Fuid Navigation Pattern

One of many fluid navigation tests. The top navigation for CraigWebbArt.com is not a ubiquitous UX pattern. Many pattern tests were required to find a solution that worked across browsers and devices.
Inline-Block_Fuid_Navigation_Pattern.htm


Justified Centered Containers 04

Another fluid navigation test.

Justified_Centered_containers04.htm


CraigWebbArt About Prototype

An early responsive layout for CraigWebbArt.com
Key components are:
A) the header navigation situated between the logo and an art graphic – an echo of the XHTML site style
B) The side column that tucks under the main content for tablet and mobile views, and
C) The responsive footer components.

about.htm


Schmidt-float Responsive Web Design 06

This is the three-column responsive layout for CraigWebbArt.com, mostly resolved.
Schmidt-float_RWD_06.htm


Shalizar Menu 07
This isolated test adds a drop-down menu to the CWebba fluid-justified navigation.

shalizar_menu07.htm


Form Sample 03

Test prototype for Form Labels in a responsive layout. Bootstrap 2.0 was investigated and the pertinent declarations isolated. The Bootstrap CSS is commented out.
bootsrapformsample_03.htm


2011 Live Prototypes

Liquid Grid Test 02

A 36 column fluid grid. The objective was to build a grid that is divisible by either two or three.
liquid1080grid-test02.htm


Liquid Grid Test 03

Further testing for an experimental 36 column fluid grid.
liquid1080grid-test03.htm


Fluid Layout on Device-Widths

A fluid layout imposed on a map of device widths. This early test was a search to find the best widths for responsive design. I now know there aren’t any.
VideoBox_Grid_Background.htm


Middlebox Control Page Layout

This is a fluid test for constructing the header.
middlebox_control_PG_layout.htm





Concept, design and creative development.

Build a core identity and message tailored to your target audience.

Craig Webb Art provides all aspects of New Business Communications Development including project management, creative development, copywriting and graphic design.

Craig Webb Art

Communications that move consumers.