Start PL

Application Wireframing – The First Step to Visualizing Ideas

Project "Innovations in VET education" is co-financed by the European Union

Introduction to the WebQuest Topic
Information for the Teacher

Introduction to the WebQuest Topic

Creating application wireframes, also known as wireframing, is a key stage in the design process of mobile applications and websites. A wireframe is a preliminary sketch or outline of the user interface (UI), which helps present the structure of an application or website without graphic details or colors. It is a simplified model of the design that shows the placement and functionality of key elements on the page, such as menus, buttons, search fields, headers, and content sections.

Why is it worth creating wireframes?

Wireframing allows for the quick transformation of an idea into a visual prototype, which serves as the starting point for later stages of design. It is an extremely important process because it provides an opportunity to verify and refine ideas early on. Presenting the skeleton of an application or website in a simple way helps to understand both the structure and the logic of user navigation. This can save time and resources, avoiding costly changes in later stages, such as visual design or coding.

Key Benefits of Wireframing

Quick idea verification: Simple sketches allow testing different solutions and comparing them, which helps the team choose the best options and make quick adjustments.

Optimizing the user journey: Wireframes show how users will navigate within the app or on the website, allowing for improved usability and planning optimal user paths.

Early identification of problems: Designing the layout of a page or app helps quickly identify potential navigation and interface issues and implement necessary changes before the project moves to the visual design stage.

Better team communication: Wireframing ensures that all team members – from designers to developers to clients – have a clear understanding of the project's assumptions. This is particularly important in complex projects, where good communication and conceptual consistency are crucial.

Tools for Creating Wireframes

Many dedicated tools are available for creating wireframes, enabling quick and easy preparation of professional designs. Here are some popular applications used by designers:

Figma: A popular design application that allows real-time collaboration on the project. Figma is especially valued for its ability to quickly create interactive prototypes.

Adobe XD: A professional UI design tool that offers a wide range of features for creating wireframes and interactive prototypes.

Sketch: A tool often chosen by interface designers on macOS, offering extensive options for UI and UX design projects.

Balsamiq: An app focused on simple, fast creation of basic wireframes with minimal graphic style. It allows creating schematic designs that focus on functionality and page layout.

Axure RP: A professional tool for creating more complex prototypes with interaction elements and logic, useful for large, advanced projects.

Examples of Wireframing Applications

Wireframing is widely used in both small and large technological projects. For example:

E-commerce: Online stores such as Amazon or Allegro use wireframing to plan product page structures, the shopping path, and the cart interface to provide users with a simple and intuitive shopping experience.

Mobile apps: Companies like Uber and Spotify design new features by first designing their layout and navigation on wireframes, allowing them to optimize the mobile interface.

Corporate websites: Large company websites, such as Google or Microsoft, use wireframing to develop the optimal layout for the homepage and subpages, focusing on user experience and clarity of information.

Types of Wireframes

Wireframing can be divided into several categories depending on the level of detail and intended use:

Low-fidelity wireframes: Simple, general sketches, often made as drawings on paper or using basic tools like Balsamiq. They focus on structure and element arrangement without detailed features.

Mid-fidelity wireframes: More detailed designs that include some textual information and visual elements such as icons or buttons.

High-fidelity wireframes: Very detailed sketches, close to the final look of the application, which include specific content, typography, and interactive elements.

Summary

Creating wireframes is the first, and equally important, step in the design process. It allows for visualizing and testing ideas without the need for significant resources. Thanks to wireframing, designers, developers, and clients can better understand how the final product will look and work. Creating simple wireframe sketches before moving on to the full graphical version helps optimize the design process, saves time, and avoids mistakes, making wireframing an essential stage in any application or website project.

Information for the Teacher

This WebQuest is aimed at vocational school students, especially those from IT, graphic design, and technology courses. Its main goal is to introduce students to the world of User Interface (UI) design through learning how to create application wireframes. This process is an integral part of the design phase of any application, helping to understand the structural arrangement of interface elements before creating a full-fledged design.

Through completing this task, students will:

• Understand what wireframing is and why it is an important step in the application design process.

• Get to know different techniques and tools for creating wireframes.

• Learn how to plan the layout of an application to meet users' needs.

• Develop teamwork skills by sharing tasks and jointly creating a wireframe project.

• Gain practical skills in organizing and presenting ideas in the form of an application wireframe.

Students will work both individually, gathering information on wireframing tools and techniques, and in groups, creating wireframes for a chosen application. This will allow each student to develop individual skills as well as practice collaboration within a group.

Suggested time for completing the WebQuest

Students will work on the WebQuest for approximately 12 class hours.

Assessment Criteria, the following will be evaluated:

• Depth of topic coverage (maximum score: 5, exceeding this knowledge: score 6),

• Aesthetic quality of the presentation and the way information is presented,

• Engagement and teamwork skills of the students.

Evaluation:

• The teacher will help students analyze the content together until the students fully understand it. The teacher will assist them with advice, explanations, and guidance, rather than providing ready-made solutions. This method will be a good way to implement independent action and creative thinking.

• The teacher should carefully analyze the content with the students until the students understand it. However, the teacher should primarily offer advice, guidance, and explanations, rather than ready-made solutions. This approach will be a good form of initiating independent action and creative thinking.

• The group division can be done according to different criteria, for example, based on the cognitive abilities of the students, their skills, interests, to "balance" the strengths across the groups.

• The teacher can help students when they work in groups by asking leading questions. It is important to remember that students are learning a new way of working (a process).

• The teacher should provide students with specific information regarding the assessment of their achievements, both during group work and when summarizing the results.

• The time for completing the project should be adjusted to the students' capabilities. It is not pre-determined. The provided time frames for the individual stages of the process should be treated as a guideline.

TASK

Divide into four groups. Each group will prepare a wireframe for an application on a chosen topic, considering the structure, navigation, and key UI elements. Each group will focus on different aspects to thoroughly understand all the essential elements of wireframe creation.

Group 1: Understanding Wireframing and Tools

Focus on explaining what wireframing is, its benefits, and the tools available for creating wireframes, such as Figma, Adobe XD, and Balsamiq.

Group 2: Layout and Hierarchy of Information in the Application

Focus on the structure and arrangement of content on the screens. They will work on a wireframe that shows how the information hierarchy helps users navigate through the application.

Group 3: Interactivity and Action Elements in Wireframing

Work on interactive elements like buttons, text fields, and navigation. The group will design an interactive user flow and show how to plan user actions within the application.

Group 4: Adaptability of Wireframes – Appearance on Different Devices

Focus on adapting the wireframe for different screens, from computers to mobile devices. They will analyze how to design wireframes to be responsive and look good on different devices.

Each group will develop their part and then present it to the class, showcasing the details of the solutions they applied and discussing the various design decisions made.

Stage 1: Introduction to the task

• The teacher will introduce the WebQuest topic and discuss the goals and requirements.

• The teacher will then familiarize students with the basics of wireframing and present selected tools.

• The teacher will provide sources and available materials to give students a solid foundation for working on wireframes.

Stage 2: Working on the presentations

• The groups will gather materials, plan the application structure, and create wireframes.

• The teacher will monitor progress, offering guidance and helping students solve design problems.

Stage 3: Discussion and presentation of results

• Each group will present their wireframe and discuss the applied solutions.

• The other groups can ask questions and participate in the discussion.

Stage 4: Evaluation

• The teacher will assess the engagement, collaboration, and quality of the presented wireframes.

• The summary of the knowledge gained about wireframe creation and discussion of the challenges encountered during task completion.

STAGES OF WORK AND TIME

2h

Stage 1

4h

Stage 2

4h

Stage 3

2h

Stage 4

Points	2	3	4
Content Quality	Work is weak in terms of content. Missing elements.	Work is good in terms of content. Minor or no errors.	Work is excellent in terms of content. Correct, engaging information.
Presentation of Work	• Presentation is unclear, superficial, and not engaging. • Lack of participation in discussion.	• Presentation is clear, good, and interesting. • The student participates in discussions but with limited input.	• Presentation is attractive, thorough, and engaging. • The student actively participates in discussions and contributes significantly.
Aesthetic Impressions	• Work is unclear, untidy, and poorly executed. • Poor arrangement of elements on the page.	• Work is clear, neat, and carefully done. • Good arrangement of elements on the page.	• Work is aesthetically pleasing, clear, and highly polished. It stands out visually. • Excellent arrangement of elements on the page.
Group Work	Lack of involvement of all group members in work and creative collaboration.	Good involvement of all group members. Satisfactory collaboration skills.	Full engagement of all group members. Excellent cooperation and motivation within the group.