Wireframes to Pixel Perfect
Position: UX Designer, Interaction Designer (IxD), User Researcher
Company: Robert Half, Magnet Theater, ImageAlt, Contract Work
Projects: Robert Half Intranet & Apps, Various Independent Work
Technologies: 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
Low-fidelity wireframes are an excellent way of visualizing requirements. I utilized low-fidelity wireframes when I want to quickly address these components:
- Structure
- Content Placement
- Information Hierarchy
- Functionality
- Behavior
Here are some samples of my low-fidelity work below.
Working Remote
When working remotely, I like to use an online whiteboard. You can test Ziteboard for free. Digital whiteboards are a great way to jump back into a meeting and have the whiteboard just the way you left it. They increase engagement and make it easy to save for later. No more emailing or uploading phone photos. The image below is an example of taking small tiles and having the team discuss layout and priorities.
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
This template was made in Photoshop and without Shutterstock. It was something that I created for myself as a way to speed up design for a corporate client.
You might have noticed a space theme for this project, images in the hero banner flowed into smaller banner ads. NASA’s Free Image Library can inspire you too.
Sketch App
Sketch App also has the ability to create interaction, allowing users to click on the prototype. The clickable areas are indicated by the yellow hotspots in this image. Most of my mid-fidelity prototypes contain some form of interactivity.
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 provides more accurate feedback
Lower human error rate with interactions built-in
Confirm target users needs are accounted for
Help prevent unaccounted for mistakes from
Robert Half
I enjoyed 6 years at Robert Half corporate, utilizing my UX principles to build and maintain an intranet and its apps. During my time there I was fortunate to be part of a small team of UX Designers who launched an intranet, supporting 15,000+ employees. These employees helped connect so many companies with job seekers, it worked out to a job placed every 2 minutes. Here are some of the activities I participated in during my tenure.
Interviews: In-person and virtual. I interviewed employees about their roles, satisfaction, possible new features, and even what to call our intranet. My coworkers were great about switching up roles so everyone could participate in asking and writing questions, walking through various prototypes like the wireframes discussed, and documenting our findings to present for leadership.
Design Systems and Branding: Staying on brand and making templates to assist others in doing so has always been a priority. I worked with internal and external marketing guides and created and maintained design systems, pattern libraries, and global style guides for our new intranet while updating and retiring our original intranet.
UI and Graphics: Quality is key. I worked on several visual refresh initiatives, updated thousands of graphics for responsiveness, and defined best practices for ad sizes on mobile, desktop, LCD screens, and even desktop wallpaper. At Robert Half I created a 5-minute office banner template, allowing the unique look and feel for each branch while meeting all RH requirements. Everything I learned was documented and shared with my team. Education, growth, and collaboration are part of my personality.
Please contact me and we can discuss my process. Due to the confidentially of Robert Half’s corporate intranet, the image provided here is from the external-facing website, RobertHalf.com, which has several of the same branding and visual standards I employed on their intranet. If you liked what RH does for their customers I would love to tell you about what they did for their employees.