Are there any particular difference between blueprint and wireframe?
I did some researches and found that blueprint is style wireframes!
-
1I think you just answered your own question.– Johnny UXCommented Aug 7, 2014 at 16:27
Add a comment
|
3 Answers
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?– UXabcCommented Aug 7, 2014 at 19:40
-
The definition of blueprint in this answer is what I'd usually consider a "style guide"– DA01Commented Aug 7, 2014 at 20:18
-
also, mock-ups SHOULD adhere to the design guide/blueprint. If not, they aren't really mocking up anything specific.– DA01Commented Aug 7, 2014 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.Commented Aug 8, 2014 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.
EDIT:
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?– UXabcCommented Aug 7, 2014 at 20:57
-
@UXabc as it's not a specific thing, we can't really answer that question.– DA01Commented Aug 7, 2014 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)– UXabcCommented Aug 8, 2014 at 14:13
-
@UXabc are you actually reading my answer and comments? You're not making any sense.– DA01Commented Aug 8, 2014 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.
