(917) 797·0983
JavaScript Conference after party

Wireframes & Comps

This page displays examples of wireframes to demonstrate design thinking, work process and communication between clients, design contacts and development teams.

Wireframes are visual communication vehicles built to facilitate planning and development of websites and apps. Wireframes take many forms, from sketches on a napkin to black & white boxes and text, to full-color comps, (comprehensive), documents.

Wireframes have many uses including:

• Communication vehicle with clients

Wireframe documents help clients to focus on what content and features they want. Wireframes are black and white boxes and ugly text to avoid distracting conversations about style. We need first to know what content and features are required, to understand the scope of the project and estimate cost.

• Contract agreement

Wireframes may be accompanied by a planning document outlining content to be created or provided. The wireframe often represents a contract agreement at the start of projects. The client is asked to sign and approve the wireframe as a representation of the project scope.

During the design process designers refer to the wireframe as a checklist for features and content. Wireframes may be shared with other developers who build or purchase required feature components.

• Design thinking and agile feedback

During development, a simple ballpoint sketch is helpful to think through coding issues and layout. A modified screenshot of the working layout may also be used to quickly ask the client about how to resolve an issue.

• Brand Development

Sometimes a client needs help to visualize how the website will represent their identity. A full-color comp including made-up text may be necessary. Comps can be deceiving, limiting and expensive. I'd rather go to code quickly but it depends on personality. In a multi-device mobile-first world, pixel-perfect design is a canard.

Shalizar Properties LTD. Project Page with pop-up image

Shalizar Properties LTD.
Project Page with pop-up image

Shalizar Properties LTD.
Project Proposal Wireframe

Randall’s Auto Body

Randall’s Auto Body

Randall’s Auto Body NY
Project Proposal Wireframe.

Icarus Group Ironwork website page proposal

Icarus Group Ironwork
website page proposal

Icarus Group Ironwork
Project Proposal Wireframe

Flex Albatross Fab-Four Layout

Flex Albatross Fab-Four Layout sketch

The Flex Albatross Fab-Four Layout provides component breakpoints within a flex-wrap layout.

Silver Fox Header with background image

Silver Fox Renewables Header with background image

I needed to sketch out the pattern for the Silver Fox Header with a background image in order to code it.

Flex dashboard with fixed scrolls

Flex dashboard with fixed scrolls

This is a React SPA dashboard in a responsive Flex layout with inner fixed scrolls.

Bill Miller Photography Comp

Bill Miller Photography Comp

Initial comp, built with Adobe Illustrator to show concept and sell the job.

Thomas Publishing Company Comp

Thomas Publishing Company Comp

I built dozens of comps for Thomas Publishing to show ideas for layout and style.

Mirren Conferences, Call for Topics

Mirren, Call for Topics email art

These are examples of production email art built in Photoshop.

If you are interested in starting a project please contact me. We can talk by phone or zoom.

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