We’re rewarding the question askers & reputations are being recalculated! Read more.
51

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 blueprint for a website. A mockup is a realistic representation of ...


17

Wireframes are rudimentary shapes or lines used to designate position and/or size only. The goal of any wireframe is to "fit" the elements into a layout, not indicate how elements may actually appear in a final design, only where they will be located. Mockups are built on top of wireframes and go further to show overall appearance aspects of a design ...


11

I support detailed reply of @Yisela, also to add this vision exposed in following presentation


10

I've used a method where the boxes are actually pieces of post-it notes. Today I use cellphone sized ones because they are usually big enough. You can cut them in shape put text on them. But the best function is that you can move them about. Even better your client can move them about. The thing is the mockup stage can not look too finished. People who are ...


8

Here is a short summary of an article by Marcin Treder: Wireframe A wireframe is a low fidelity representation of a design. It should clearly show: • The main groups of content (what?) • The structure of information (where?) • A description and basic visualization of the user – interface interaction (how?) Consider them as the backbone of your design ...


4

You have my sympathies, this is a tricky thing. A very similar question has been asked before: How to hire a graphic designer? I would urge you: find someone local. Find the best you can, locally. Designing via email or even skype is a major hassle. It can be done, but I personally do not think it can be very efficient even if the people involved have know ...


4

Wireframes are used to define the framework, the information hierarchy, demonstrate workflow, provide details on what is on the screen, and a description on how a component works (annotation). Depending on the complexity of the application or site, wireframes should be built upon another requirement deliverable; process models. Wireframes can be used to ...


3

I think adding a general pattern to the overall rectangle would solve the issue of displaying the transparency of the overlay, without the unbalanced feeling of your #3. I realize these start to cross the line of simplicity in a wireframe. These are merely examples to show the thought behind the idea. I'd work on better refining the idea to a more ...


3

Traditionally it is never an issue to open older files with newer versions. I would not copy/paste, I'd open the legacy file. But you shouldn't have any issue moving forward in versions. It's only backwards that may present problems. Adobe doesn't often just outright kill support for features in older versions of the same application. They may change how ...


3

I haven't got the reputation yet to comment to on Dave Kaye's response so I've had to respond directly. It is very much worth noting his reply in comparison with Rachuru's brilliant answer. In an interpretation of modern phrases, the layman's explanation could/should be; Wireframes are "the design" Mockups are "rendered demos" The actual terminology ...


2

To put it simple: Wireframes: skeleton/structure Mockups: skin/visual aspect As some people have noted, nowadays wireframes are getting more importance while mockups are fusing into prototypes.


2

I use Invision App for this. If you read the tutorials there is a way to get the nav to stick so you can make a bar at the top with your branding and have it stay at the top when the user/client scrolls down the page. Hope this helps. www.invisionapp.com https://support.invisionapp.com/hc/en-us/articles/203730455-How-do-I-set-fixed-headers-and-or-footers-


2

You can achieve these output with the help of any vector based tools like illustrator. For Cinema 4D, you can follow these steps... here and then tweak your output image in Photoshop or GIMP


2

I saw a "UI kit" a week ago that had several Balsamiq'y looking elements. If I find it, I'll post; but here are several that are much-more-refined than Balsamiq. (Balsamiq is much faster IMO; there's no temptation to enhance the fidelity) "Wireframe Kits" https://ui8.net/categories/wireframe-kits


2

My 2 cents. Lets say I made a wireframe or predesign in Ilustrator. I simply export a big long jpg and place it inside an html containing: <html> <head> <style> body {margin: 0; padding:0;} img {width: 100%} </style> </head> <body> <img src="MyBigImage.jpg"> </body> </html> And I'm done. But If ...


2

I have not seen a standardized way of showing/indicating the parallax effect. One idea is using the image icon with a mouse indicating it is moving up or down.


2

in my experience it is best to draw these up using good old pencil and paper. I find that using a digital tool too much really doesn't get to the core of the wireframe and usually end up with the same result for each website. Gather your notes Grab a pen and pencil Draw out some ideas on paper Once happy and have a clear view then use a tool like Balsamiq. ...


2

I am a 3D generalist as well as an illustrator user, and I’ll say for just this I’d stay in illustrator. Yup, the mesh tool, yup patience when first trying. I did a slightly more complex but similar thing to this, with depth to the baseplane shown at the edge, ground colour there, dark green substrate and green gooey wireframes above, mountains and valleys, ...


1

It's not possible to extrapolate layers from a flat file automatically. Once a file has been flattened the layers are gone for good. The only way to get layers back is via a backup of the actual layered file.


1

They are wireframe renderings of 3D models, more exactly = 2D renderings of wireframes, hidden lines removed. Pro level 3D software exports scenes like these as 2D vector images. Famous objects like Golden Gate and Eiffel Tower are widely available as free and paid models in several formats. Search for "3D Golden Gate bridge" and see yourself. There exists ...


1

I'm a bit of a fan for using Meshmixer and the tasks ahead of you are not particularly demanding, based on a rather important aspect of the model head. It's not unusual for a sculpting program to create extremely high detail, which results in a high facet/triangle/apex count. This is likely the reason that my Fusion 360 crashed on first attempt, followed ...


1

For web I usually code the wireframe and let the client run through it. If this is not an option and you're in a preliminary stage of the wireframe you could separate it by section in the PDF. If this is for a device you could always create a mass storyboard and allow the client to come in or email them something like this: taken from speekboy or like ...


1

Styles before symbols Your best bet is to use styles rather than symbols for most layout units. Where the is a good reason to use a symbol (eg global nav), the component items of that symbol should use a style that is synced across files. Plug-ins fill in the gaps For the synchronization, I'll have to do some research and get back to you. There is a plug-...


1

I work somewhere in between the first and second option. In mobile I prefer scale so I can test the wireframes on an actual phone, which is very important. But on any other screen, the main issue in my opinion is to keep the relative resolution, not the actual size. If you wireframe for desktop I'd design on a 16:9 screen, this way you can take into ...


1

I'm working as a Digital Designer at Fox Sports Australia. I've implemented for our new templates and every type of UI designs to us Sketch if you are a mac user. https://www.sketchapp.com/ If you use windows there is a great software coming up from adobe called Project Comet http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html ...


1

No. Symbols and libraries are document independent, they do not "link" to other documents. In addition you can't use linked images within symbols. You will have to either duplicate symbols manually across documents, or used linked files and forget about using symbols. Just create a file that is "footer.ai" and use File > Place to place a linked version ...


1

As per my knowledge mockup screens are the final represenation of the UI, look and feel. What will be the normal flow and what will be the alternate flow. I think that can be kind of web prototype mostly created in HTML and CSS. We make then mostly during HLD phase to show and have acceptance from client. Wireframes as compare concentrate more like flow ...


1

A wireframe can be a mockup. A mockup an be considered a wireframe. While they are sometimes separate things (as others have stated) they are just as often not separate things. At one time, one might consider wireframes what Visio would create. And Mockups would be what PhotoShop would create. But today, with the range of tools we have, they are often the ...


1

Have to add one point people haven't made...these answers all give decent technical descriptions but in a work environment the differences are not always so clear. Some companies might add functionality to a mockup and some might put high-level design requirements in a wireframe. I'd be careful about getting too locked into an answer of what things "should"...


1

Something even better than post-it notes: "Magic whiteboard paper". Basically, it's a type of thin white plastic paper with just enough static electricity that it sticks gently to any flat surface, without glue or mess: Since it's static electricity not glue, you can move it around as many times as you like. Since it's basically paper, you can buy a roll ...


Only top voted, non community-wiki answers of a minimum length are eligible