2

I'm starting development of a couple of mobile apps, and I'm sometimes told to propose a wireframe or a look&feel for them, or to create a mockup. I suppose those are actually different things though I made the impression that who asks me for them is not either aware of the differences...

I'd appreciate an explanation of each of those words and their differences in a mobile development environment

0

Wireframe is a low fidelity sketch of an interface which is supposed to help with establishing content, interaction, UI flow etc. The interaction designer or UX designer is usually in change of designing these. They're a crucial part of app development to in an early stage test and discuss design and content ideas.

Look & feel Is more high fidelity in my opinion. Usually an interactive prototype which is supposed to showcase the overall feeling of an app/feature. They should include intended animations, the final visual design and for example waiting screens.

Mockup is a bit more vague and can probably be described in a number of ways. You can make physical mockups of for example a new handlebar for a bicycle, or a phone mockup for a new phone. They are very close to the final result and gives a possibility to find final alterations to the product before putting it into discussion.

The definition of these terms can probably be discussed further, and someone else may have a quite different definition.

  • These are valid definitions, but hardly the only definition. For example, there are low fidelity wireframes, but also high fidelity wireframes. – DA01 Jan 23 '17 at 1:29
1

A wireframe is about functionality. It can be a really simple sketch that demonstrates what sort of things you can do in your design. For example, a wireframe of a website will show the navigation, the main buttons, the columns, the placing of different elements. You can think of it as a bluprint for a website.

A mockup is a realistic representation of what the product will look like, in this case a website. The final result can look exactly like the mockup, or be a variation of it after version revisions. While some people prefer to draw the mockups using graphic software, others do it straight in HTML/CSS.

These are some links where you can find answer for that :

https://graphicdesign.stackexchange.com/questions/30860/what-is-the-difference-between-wireframes-and-mockups

https://brainhub.eu/blog/2016/04/20/difference-between-wireframe-mockup-prototype/

https://graphiccloud.net

I Hope you found your answer

  • A lot of people prefer it when wireframes are focused on functionality, but a lot of places use wireframes to also account for look & feel, content, business requirements, etc. – DA01 Jan 23 '17 at 1:30
0

They mean whatever the people you are working with think they mean.

To be clear, they aren't well defined and are often used to describe vastly different things.

A wireframe should, at the very least, help figure out the functionality of the product. But how a wireframe accomplishes can vary wildly. It can range from:

  • a napkin with some boxes drawn on it

to...

  • a fully interactive, clickable, visually detailed prototype.

Which leads us to the term prototype. That often refers to some sort of 'demonstration' version of what you want to build. But like the previous term, it also has a wide range of usage. Some people use the term interchangeably with wireframe. Others may use it to refer to an actual coded piece of software.

Look & Feel is a little narrower in scope. It typically refers to indicating how the app will visibly look and how the interactions will actually provide visual (and/or audio) feedback for the user.

Wireframes often don't have any Look & Feel applied to them. But, they often do as well. Same goes for prototypes. They may or may not also indicate look & feel.

Bottom line, all that matters is that you and the person you are creating the deliverable for agree on what these terms mean.

-1

Some of these definitions will vary depending on who you ask, so it's often a good idea to clarify exactly what is required (e.g. level of visual fidelity or interactions required). But from my experience, here is how I would define them:

Wireframes: non interactive, simple blueprints of your screens. These are often the next level up from a sketch on paper, but some agencies will use them as part of functional documentation too.

Prototypes: the main difference between prototypes and wireframes are that prototypes will have a level of interactivity to them. At the most simple level, you can click on links and buttons to navigate between otherwise static screens to get a sense of the flow. They can also be quite complex, simulating forms and complex interactions too. Generally, prototypes will be quite low fidelity in terms of visuals.

Mockups: this one probably has the widest range of possible definitions, but almost all of them imply a level of visual fidelity that's not seen in either wireframes or prototypes. Making mockups will typically involve Photoshop, Sketch, or your visual design tool of choice. They are often used as part of in-depth user research, where look and feel, visuals, and user experience are being tested together. The amount of interaction can vary too - it can be as simple as linking screens together, all the way through to simulating complex user flows, interactions, or animations as if it were as close to the final product as possible.

Again, different agencies or people may use these terms differently than the definitions above. The two main ways in which they differ is level of interactivity and level of visual fidelity. Wireframes are low fidelity and low interactivity, designed to quickly validate an idea, and are usually iterated quickly. Whereas mockups are high interactivity and high fidelity, intended to present detailed outputs to clients or senior stakeholders before proper development work begins.

  • The first paragraph is pretty much the answer: It depends on who you ask! – DA01 Jan 23 '17 at 1:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.