WireframeThe wireframe is where you place the building blocks of the project. It is both the skeleton and the foundation. Without making a wireframe, the project can easily collapse in the later stages of development. However, a wireframe is an incomplete material and cannot be delivered yet to the client since it is still in the form of an intangible concept. But it is useful during the first few informal draft meetings. This is why clients often find it a waste of time. There is some truth to that since the developers are actually the ones who will benefit the most from having a wireframe.
ImportanceIt is the blueprint of the project. It is a plan that will be followed later on and everything will start from it. It will be the guide for later development processes. It allows developers to focus and be efficient.
Things To Note About WireframingA wireframe does not have to look pretty, but it must be intelligible and clear. It can be created in multiple ways: drawing on paper, using graphic software, or working on a dedicated wireframing application. During the wireframing process, the developer must focus on user interface and experience. Also, at this point, aesthetic design must be ignored. The functionality and usability of the website must be prioritized.
PrototypePrototypes are the materialization of the wireframe. Developers often produce two instances of prototypes. The first prototype is the raw prototype, which does not contain any aesthetic sense. The goal of creating a raw prototype is to test the functionality of the design created in the wireframe. It is often presented to clients and used as the backbone of the project. The second prototype is the final prototype. This one includes the functionalities established in the wireframe and the design created during the design process. It is often used for demonstration and for collecting client feedback.
ImportanceEarly prototyping allows a team of developers to assign and delegate. It is also used as a testing ground for the developed codes. Final prototyping, on the other hand, allows the team to work and communicate with clients and other stakeholders. It prevents rejection of the final product.
Things To Note About PrototypingPrototyping can be done in multiple ways. It is much easier in web development since all they need to do is to put developed codes together. In application development, prototyping can be done by assigning one team member to receive files and compile them. Another alternative is to use prototyping software.
- 6 Easy Steps to Get You Started on Wireframing
- Wireframes vs Prototypes : An In-Depth Look
- Wireframing or Prototyping: Which One to Use
- 5 Things That Will Definitely Make You Consider Wireframing
- How To Prototype In Time and Budget Constraint Projects
Posted in Other | Tagged Appery.io, Balsamig, Cacoo, Creately, free website wireframe tool, Gliffy, HotGloo, html mockup, html wireframe, ios app mockup, justinmind, Lumzy, mobile app prototyping, mobile app ui design tool, MockFlow, Mockingbird, Mockup Builder, mockup software free, moqups, online prototyping tool, ui wireframe, uxpin, webpage wireframe, website mockup generator, wireframe design, wireframe examples, wireframe prototype, wireframe tools, wireframe website design, wireframesketcher