top of page
IMG_2385.jpg

From Wireframes to Pixel Perfect

Wireframes to Pixel Perfect: Image

Position: UX Designer, Product Designer, Interaction Designer (IxD), User Researcher

Company: Robert Half, Inxeption, Magnet Theater, ImageAlt, Contract Work

Projects: Inxeption Features, Robert Half Intranet & Apps, Various Independent Work

Technologies: Figma, Adobe XD, Sketch, InVision, Photoshop, Illustrator, Axure, Balsamic, Paper 


Wireframes ensure that elements such as branding, functionality, and layout  are considered one at a time. You can view your product without getting distracted. By listening and working through all your interactions and layout needs I can help bring clarity to the project. This saves so much time, spots usability issues, builds a solid user experience, and gets everyone on the same page.

Wireframes to Pixel Perfect: Text

Low - Mid - High

Low-High-Fidelity-SA-Sample_edited.jpg
Wireframes to Pixel Perfect: Image

What determines the level of prototypes I use:


  • Project Size

  • Content Type

  • End Users & Shareholders

  • The Next Department to Utilize the Product


Depending on the team and their level of knowledge, these steps can move quickly or require more detail. I might be able to draw a few shapes and say, “Let’s replicate our feature page and replace the carousel with a hero banner.” If the project is new or the team has not worked together it is important to make sure everyone knows the requirements before the next phase can begin. 

Wireframes to Pixel Perfect: Text

Low-Fidelity

I turn to low-fidelity wireframes when crafting a brand-new mobile, app, or website design. They signal that not all decisions are set in stone, offering agility, and cost efficiency in the process. Low-fidelity help to visualize:


  • Structure

  • Content Placement

  • Information Hierarchy

  • Functionality

  • Behavior

Here are some samples of my low-fidelity work below. 

Wireframes to Pixel Perfect: Text
Wireframes to Pixel Perfect: Gallery

Dashboard Design: Working Remote

Throughout my career, I've taken the lead on numerous large-scale analytics projects. I've utilized a variety of tools such as Tableau, Power BI, Domo, and even played a role in the development of custom analytics systems. The screenshot I'm sharing here represents the initial wireframing phase I typically undertake when designing analytics dashboards. This phase revolves around organizing cards that represent our existing data, the data we aim to collect, and the essential questions we want the dashboard to address. You can test a whiteboard at Ziteboard for free

Wireframes to Pixel Perfect: Text
Online-Whiteboard-v02_edited.jpg
Wireframes to Pixel Perfect: Image
Wireframes to Pixel Perfect: Text

Mid-Fidelity

Medium-fidelity wireframes can help motivate the team. You can see brand elements, often some interaction, and all of the fundamental decisions regarding fonts, colors, and through lines are made at this point. Some additional validation points for user testing and functionality can be done.


Medium-fidelity wireframes show:

  • Branding

  • Fonts

  • Colors

  • Content

  • Through Lines

  • Interaction

  • Additional Validation

Web-Template.png

I crafted this template using Photoshop, relying solely on freely available images from NASA, without the need for any other paid resources. Initially, it was a personal tool I developed to streamline the design process for intranet pages.


Little did I know that this endeavor would serve as the foundation for future design systems. These systems would cater to the needs of front-end developers, back-end developers, and our dedicated UX design team, ultimately enhancing our collaborative workflow.

Wireframes to Pixel Perfect: Image
Wireframes to Pixel Perfect: Services
2 Column Layout crop.png

Let NASA’s Free Image Library also ignite your inspiration. 

High-Fidelity

High-fidelity prototypes add motion and interactivity. Users can really envision what the product will be like and how it will benefit them. Their feedback is more realistic and more accurate.


  • User feedback is more realistic

  • Real UI generates more accurate feedback

  • Lower human error rate with interactions built-in

  • Confirm target users' needs are accounted for

  • Help prevent unaccounted-for mistakes during testing

Below are some of my more recent high-fidelity mockups. 

Wireframes to Pixel Perfect: Text
Wireframes to Pixel Perfect: Gallery
bottom of page