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 Proposal Wireframe
Randall’s Auto Body NY
Project Proposal Wireframe.
Icarus Group Ironwork
Project Proposal Wireframe
The Flex Albatross Fab-Four Layout provides component breakpoints within a flex-wrap layout.
I needed to sketch out the pattern for the Silver Fox Header with a background image in order to code it.
This is a React SPA dashboard in a responsive Flex layout with inner fixed scrolls.
Initial comp, built with Adobe Illustrator to show concept and sell the job.
I built dozens of comps for Thomas Publishing to show ideas for layout and style.
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.