Are there any particular difference between blueprint and wireframe?

I did some researches and found that blueprint is style wireframes!

  • 1
    I think you just answered your own question.
    – Johnny UX
    Aug 7 '14 at 16:27

UX terms are evolving, as I currently understand it

blueprint is a design guidelines or style guide that must apply to all UI's in a system. It will have actual proportions for padding, icons, layout specified. It would be a pattern for the accurate construction of all UI's in the system. Google Material Design 'red-line' specification

wireframe abstracts the functionality away from visual design concerns. It deliberately does not resemble final UI. It does not have proportions done accurately. May not even show all elements a blueprint would define as required. It is also done for a specific interaction in a system.

Worth also considering other terms in this context:

low fidelity mock-up uses colours and elements that look a little like the final UI, but the fit & finish is inaccurate. It does not apply the rules from the blueprint. It is done for a specific interaction in a system.

high fidelity mock-up exact image of what final UI will look like. Applies all of the blueprint rules to a specific UI (which may have been specified by a wireframe). It is done for a specific interaction in a system.

  • Thank you very much, JayFang! While I did some google search, I saw blueprints look very nice as you mentioned "...Actual proportions for padding, icons, layout specified" and wireframes are draft layout. One more thing, what software do we use for blueprints?
    – UXabc
    Aug 7 '14 at 19:40
  • The definition of blueprint in this answer is what I'd usually consider a "style guide"
    – DA01
    Aug 7 '14 at 20:18
  • also, mock-ups SHOULD adhere to the design guide/blueprint. If not, they aren't really mocking up anything specific.
    – DA01
    Aug 7 '14 at 20:19
  • @DA01 true, I do state that low fidelity mock-ups should try follow the guide - the question is degree of accuracy. Compare if you will an artists impression vs. photo-real CAD rendering of a real-world building?
    – Jason A.
    Aug 8 '14 at 11:52

blueprint doesn't mean any specific in UX, AFAIK. It could refer to a particular visual style for a wireframe. It could actually refer to a wireframe itself.


It just occurred to me that perhaps you are thinking of blueprint.css It's a bit dated and isn't as popular as it once was but was used quite a bit a few years ago.

  • Thank you very much for your answer! Do you know what software do we use for blueprints?
    – UXabc
    Aug 7 '14 at 20:57
  • @UXabc as it's not a specific thing, we can't really answer that question.
    – DA01
    Aug 7 '14 at 21:33
  • @DAO1, Thank you for your concern! If so, what software do you use to create blueprints? (I haven't done any blueprint before)
    – UXabc
    Aug 8 '14 at 14:13
  • @UXabc are you actually reading my answer and comments? You're not making any sense.
    – DA01
    Aug 8 '14 at 19:55

Just found this. Might be 6 years old but I'm surprised someone suggested 'blueprint' was a UX artefact, as up until 2014, and even till now (2020), it has never been used in a community level capacity to detail any UX artefact. It's possible one person or a small group started using the term as it is loosely connected by symbology to a wireframe, but it's never been acceptably linked within the field as a UX term.

I found this as I'm writing a book related to this medium, and the term 'blueprint' is one I began loosely using back in ~2014 to term a wireframe sequence that was more detailed than a generic wireframe would ever be. I'm going to pose the question of the term 'blueprint' being used within this context, in the book, as I'm interested to see if it would actually make sense enough to the community to use it in reference to a type of wireframe relative to UX work.

To the OP, there still is no software used to create 'blueprints' for UX related work. Within the field, the accepted term for that kind of medium is 'wireframe' and it they can be created with pen and paper or using any visual software, I've always used Adobe Illustrator for the sheer level of control it gives. Your artboard is your viewport and the components of a screen can be built up using simple shapes.

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.