Hi everyone! I always wanted to come back to blog posting but I have honestly been putting it off. This week was my first week back at school and I'm trying my best to accommodate for my incoming priorities. Anyhow, I wanted to blog about an important component in web design, wireframes! I wanted to blog about wireframing because I also need to learn more about wireframing.
Wireframes are used during the initial stages of web development to give developers a blueprint of the website and its functionality. I will discuss three different types of wireframes: low-fidelity, mid-fidelity, and high-fidelity.
Low-fidelity wireframes are basic sketches that focus on the general structure of the website and do not contain much detail. Its purpose is to visualize its early conceptualization and make way for brainstorming sessions. They contain minimal detail, often just outlines and basic shapes. It focuses on the layout, placement of contents and navigation flow. They are sketched using pen and paper, whiteboards, or basic digital tools.
Mid-fidelity wireframes contain more detail and are more structured than low-fidelity wireframes because they label elements and focus on the functionalities of the website. Its purpose is to help refine early design concepts and get feedback about its structures and functionalities. They contain simple interactive components such as downtown lists, sliders, and navigation menus. They are designed using digital tools such as Sketch, Figma, or Adobe XD.
High-fidelity wireframes look similar to the final design of a website. They contain everything except the visual styling of the website. It contains specific content, and comprehensive annotations and frequently simulates how interactions should flow. Its purpose is to finalize both structure and interaction before finalizing the design of the website, it also serves to provide a blueprint for developers who are interested in developing a website. They have in-depth explanations about functionalities, interactions, and how elements behave. They are designed using advanced design tools such as Figma, Sketch, Adobe XD, or Axure.
This post was heavily inspired from:
Sapkota, S. (2024, August 25) How Wireframing Boosts Product Design and Development Efficiency
Retrieved from: [https://blog.jobins.jp/how-wireframing-boosts-product-design-and-development-efficiency]
Top comments (0)