From Wireframes to Pixel Perfect
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.
Low - Mid - High
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.
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.
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.
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
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.
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.
