Is there a standard to wireframing?

Question

In my current job I am never asked to make any wireframes and certainly nobody is interested in seeing wireframes. I often make them just to get my thought process straight but I would like to include some in my portfolio.

When going through my wireframes I noticed there isn't really any structure or style, probably because I was never taught how to make them. I just always winged it.

This lead me to a few questions:

• Should wireframes always be black/white? I notice I often use color.
• Is there a standardised method that is preferred by many companies?
• Should I always use real content or is Lorem Ipsum sufficient?
• Is there a standardised way to show hover states, animations and clicks?

Answer 1

I don't think there is a standard, but (for me personally) there are a few steps. Most noticeable are the low fidelity and high fidelity steps. There are ofcourse a few extra steps before and after like user research, user stories and scenarios, etc. But lets focus on the wireframing like you ask.

After your user (and client) research, there are a few steps:

1. Low fidelity wireframe
2. High fidelity wireframe
3. Design

Each step will 'build up' your product based on the previous step by adding more details to your design.

Here's an example of a low fidelity wireframe

It mainly shows the flow from screen-to-screen and large blocks where things will be. For example; notice that there's a rectangle labeled "user registration". It only shows that it will be there but not how it will look eventually.

Here's an example of a high fidelity wireframe

It shows the same low fidelity wireframe but more 'filled out'. To use the same user registration example; it now shows text fields, labels and arrow-lines that show where the user will go after interacting with an object.

Use real text for headers and important functions. Use lorem ipsum for body text.

For me, the reason to use black and white wireframes is to not distract from the navigation and flow. After going through the process of wireframing, picking colors and fonts is just a matter of 'filling' your wireframes.

I'd not design animations and clicks in your wireframes for the same reason as to not use color. It distracts from the navigation and flow of your wireframes. Use grey scales to indicate that something is a hover state or a button. (See high fidelity wireframe above).

I hope this helps!

Answer 2

The wireframe's purpose is to study the layout and design of the screens in a way that stay usual and avoid rework.

Wireframing is the early step of UI/UX design process when the structure of the project is being formed. The usability and efficiency of the final product often depend on how well the wireframe is created at the very first steps of the design process.

The more time you spend in this step, more "correct" the layout of your system will stay. In my case, depending on the project, I begin by drafting the paper to align with the requirements of the customer and the team, then move on to a low-fidelity digital wireframe to show the customer and ultimately a high-fidelity prototype. Other projects that need agility in development, I skip the high-fidelity prototype step.

In this link you have a detailed explanation of the use of wireframes and their types: https://uxplanet.org/ux-wireframing-bedrock-of-interface-usability-7e9c76bd804d

Answer 3

Most definitions of wireframes and prototypes agree that wireframes aim to visualise the projects structure and layout in a static manner. As far as I know, they are always low fidelity and don't include interactions, real text or elaborated colour schemes.

However, I don't think your question is about distinguishing prototypes and wireframes and of course you can include both in your portfolio. So the short answer to your question: I don't know of any standard look, method, or behaviour required for wireframes and prototypes.

The longer answer: For your portfolio, I suggest to intentionally choose diverging projects. Because there are so many different prototyping and wireframing tools available that your wireframes will never look the same. E.g. compare Balsamiq and Pidoco, both are tools for creating low to medium fidelity prototypes but the outputs look much different. It is much more of interest to show that you are able to use different tools and have a broad knowledge what is generally possible at different stages of the development (from static low-fidelity wireframes to high-fidelity interactive prototypes) and preferably also which tool is suitable for the desired outcome.

The only standard that I can think of is the design. Your projects will probably look better when they follow the current design trend even though this doesn't last forever and also lies in the eye of the beholder.