Your page is loading
OBE Venn Diagram Mark PRODUCT

WIREFRAMES WORK


“The details are not the details. They make the design.”

- Charles Eames -

WIREFRAMES

PORTFOLIO
Mobile Optimized Call List Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER & STRATEGIST
Mobile Optimized Call List Wireframe

A mobile and touch optimized responsive call tree component wireframe featuring drawer, accordion and asynchronous JavaScript interface functionality.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe Bridge
Media Yum Yum Viewing Interface Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
Media Yum Yum Viewing Interface Wireframe

A fixed header and fixed footer responsive web application wireframe with video playback optimizations and a modular page design.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeInVision
Barkcode Pet Profile Iteration Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER & STRATEGIST
Barkcode Pet Profile Iteration Wireframe

A wireframe set depicting the way responsive content blocks will shift for different viewport widths, as well as hover/tap states.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe Bridge
XCast Content Block Flow Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
XCast Content Block Flow Wireframe

A wireframe depicting the stages of interaction found in each user-assigned content block from a customized CMS project.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe XD
XCast Dashboard Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
XCast Dashboard Wireframe

A dashboard wireframe for a modular data and content management system. Each block can be arranged by the end user, so each is full responsive in all views.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe XD
XCast Form States Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
XCast Form States Wireframe

A wireframe styled example of each of the CSS/JavaScript driven states that each HTML form element will go through as a web application is used.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe XD
XCast Agreement Form Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
XCast Agreement Form Wireframe

A wireframe example of a previously paper-driven on-boarding process translated into a fully responsive web application.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe XD
NuvoTV Content Blocks Schema Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
NuvoTV Content Blocks Schema Wireframe

An assortment of wireframes of different modular media content block sections used in a custom CMS website project.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe Fireworks
Media Yum Yum Profile Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
Media Yum Yum Profile Page Wireframe

A profile/dashboard wireframe for a custom media collection project. Features real-time data and functionality interactions driven by asynchronous JavaScript.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeInVision
Media Yum Yum Profile Search Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
Media Yum Yum Profile Search Wireframe

A wireframe of a search results page featuring API driven results from services like Rotten Tomatoes, YouTube and IMBd.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeInVision
Media Yum Yum Add Content Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
Media Yum Yum Add Content Page Wireframe

A encyclopedia-like list wireframe allowing users to browse through entire catalogs of content from various API sources and delivered through asynchronous JavaScript.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeInVision
Media Yum Yum Edit Item Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
Media Yum Yum Edit Item Page Wireframe

A rich media content library ingest wireframe for users to add new media to their collection. Metadata for media entries are driven by API services.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeInVision
NuvoTV Model Latina South Beach Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
NuvoTV Model Latina South Beach Page Wireframe

A wireframe for a landing page to launch a user participation game for the television show Model Latina South Beach.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe Fireworks
NuvoTV We Decide Video Wall Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
NuvoTV We Decide Video Wall Page Wireframe

A wireframe for a video wall page displaying user submitted video content from the 2012: We Decide election special television program.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe Fireworks
NuvoTV We Decide Home Page Wireframe Thumbnail
MY ROLE(S):
UX DESIGNER, DEVELOPER & STRATEGIST
NuvoTV We Decide Home Page Wireframe

A wireframe for the landing page for the 2012: We Decide election special television program.

  • TOOLS USED: Adobe IllustratorAdobe PhotoshopAdobe BridgeAdobe Fireworks

OBE METHODS LEAD TO HAPPY FINGERS

Happy Fingers Illustration